Tại Quicksite.vn, chúng tôi liên tục cải thiện hiệu suất của các plugin và website của khách hàng mỗi ngày. Chúng tôi thường tập trung vào các vấn đề hiệu suất và khả năng mở rộng lớn hơn, nhưng vấn đề favicon nhỏ này vẫn đáng để sửa chữa, đặc biệt nếu bạn nhận được nhiều lưu lượng truy cập mới – ví dụ, nếu bạn có lưu lượng truy cập tăng đột biến cho các sản phẩm mới.
Favicon là gì?
Tệp favicon.ico nhỏ là biểu tượng được sử dụng trong các tab trình duyệt cho các URL của trang web của bạn. Mỗi khi WordPress nhận được yêu cầu cho favicon.ico, máy chủ web sẽ kiểm tra tệp tĩnh và nếu không tồn tại, toàn bộ môi trường WordPress sẽ được tải để lấy bất kỳ favicon.ico nào đã được cấu hình, hoặc nếu không có, sẽ tạo ra biểu tượng mặc định.
Tác động thực sự đến hiệu suất là gì?
Trình duyệt của bạn sẽ lưu trữ file favicon.ico mà WordPress phục vụ. Điều này rất tốt nếu người dùng đã truy cập trang web của bạn trước đó. Tuy nhiên, nếu bạn có một lượng lớn người truy cập mới, tất cả họ sẽ phải truy cập mã PHP của WordPress để tạo ra file favicon.ico trước khi lưu vào bộ nhớ cache của trình duyệt.
Vì vậy, nếu bạn có 10.000 người truy cập mới trong vòng một giờ và tất cả đều truy cập cùng một trang, bạn sẽ thực sự có 20.000 yêu cầu từ máy chủ web, trừ khi bạn đã cấu hình CDN của mình để lưu cache file .ico.
Như bạn có thể thấy từ ảnh chụp màn hình ở trên, toàn bộ giao diện của bạn đã được tải và bạn có thể thấy trên localhost của tôi rằng favicon mất 200ms để tạo ra, so với một trang lưu trữ cửa hàng mất 400ms để tải. Vì vậy, đây không phải là điều không đáng kể.
Tác động có thể còn nghiêm trọng hơn nếu bạn có một máy chủ hoạt động kém. Ví dụ, nếu trang lưu trữ cửa hàng của bạn mất 2000ms để tải, thì favicon.ico có thể tiêu tốn tới 1 giây tài nguyên của máy chủ.
Cách sửa lỗi favicon.ico để tránh ảnh hưởng đến hiệu suất
Rất đơn giản, hãy tải lên một tệp favicon.ico thực tế vào thư mục gốc của trang web của bạn. Các cài đặt nginx, Apache hoặc Litespeed của bạn sẽ được cấu hình để kiểm tra tệp .ico trước tiên, và chỉ khi tệp này không tồn tại thì WordPress mới được tải đầy đủ.
Kết luận
Để tạo một favicon.ico tĩnh cho website của bạn, bạn có thể làm theo các bước dưới đây:
Bước 1: Tạo favicon
- Thiết kế favicon: Bạn có thể sử dụng phần mềm thiết kế đồ họa như Adobe Photoshop hoặc các công cụ trực tuyến như Canva, Favicon Generator để tạo biểu tượng của bạn. Kích thước phổ biến cho favicon là 16×16 pixel hoặc 32×32 pixel.
- Lưu file: Sau khi thiết kế xong, lưu file dưới định dạng .ico. Nếu bạn sử dụng các công cụ tạo favicon trực tuyến, chúng thường sẽ xuất ra file .ico cho bạn.
Bước 2: Tải favicon lên server
- Tải lên thư mục gốc: Sử dụng FTP hoặc trình quản lý file trong hosting của bạn, tải file favicon.ico lên thư mục gốc (root) của website.
Bước 3: Thêm mã vào HTML
Mở file HTML chính (thường là index.html hoặc header.php) và thêm đoạn mã sau vào trong phần <head>:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
Bước 4: Kiểm tra
- Xóa cache trình duyệt: Để xem favicon mới, bạn cần xóa bộ nhớ cache của trình duyệt hoặc mở website trong chế độ ẩn danh.
- Kiểm tra trên nhiều trình duyệt: Đảm bảo rằng favicon hiển thị đúng trên các trình duyệt khác nhau.
Lợi ích
- Giảm tải yêu cầu PHP: Sử dụng favicon tĩnh giúp giảm số lượng yêu cầu đến server, từ đó cải thiện tốc độ tải trang.
- Cải thiện trải nghiệm người dùng: Favicon giúp người dùng dễ dàng nhận diện website của bạn khi có nhiều tab mở.
Nếu bạn cần thêm thông tin hoặc hướng dẫn cụ thể hơn, hãy cho tôi biết!
