Tại sao cần tối ưu Google Fonts?
Việc sử dụng Google Fonts trực tiếp từ máy chủ của Google có thể gây ra một số vấn đề về hiệu suất:
- Request thêm từ server bên ngoài: Mỗi khi tải trang, trình duyệt phải tải các font từ server của Google, làm tăng thời gian phản hồi.
- Không kiểm soát được tốc độ tải font: Nếu server của Google gặp vấn đề, các font có thể không tải kịp, gây ra hiện tượng “flash of unstyled text” (FOUT).
- Không thể kiểm soát cache: Mặc dù Google Fonts được cache trên trình duyệt, nhưng bạn không thể kiểm soát cách thức và thời gian cache đó.
Các bước tối ưu Google Fonts
Bước 1: Tự host Google Fonts
Cách dễ nhất để giảm thiểu các yêu cầu HTTP bên ngoài là tự host các font Google trên server của bạn. Điều này giúp giảm độ trễ khi tải trang và cải thiện tốc độ website.
- Truy cập vào Google Fonts và chọn các font bạn muốn sử dụng.
- Tải các font về máy tính của bạn hoặc sử dụng công cụ như Google Webfonts Helper để tải font và CSS liên quan.
- Upload các file font (ví dụ:
woff2,woff) lên server của bạn vào thư mục/wp-content/uploads/fonts/hoặc một thư mục riêng biệt. - Chỉnh sửa CSS của website để trỏ đến các file font mới tải lên (thay đổi đường dẫn của font trong CSS).
Bước 2: Sử dụng `preload` để tải font sớm
Để giảm độ trễ khi tải font, bạn có thể sử dụng thẻ <link rel="preload"> để yêu cầu trình duyệt tải font trước khi sử dụng chúng. Thêm dòng mã sau vào file header.php của theme WordPress, ngay trước thẻ </head>:
<link rel="preload" href="https://yourwebsite.com/wp-content/uploads/fonts/your-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">Điều này giúp font được tải ngay khi trang bắt đầu tải, giảm thời gian hiển thị FOUT (flash of unstyled text).
Bước 3: Sử dụng `font-display` để kiểm soát hiển thị font
Để tránh hiện tượng FOUT và FOUC (flash of unstyled content), bạn có thể sử dụng thuộc tính font-display trong CSS. Thuộc tính này giúp kiểm soát cách thức font được hiển thị khi chưa tải xong.
- swap: Font mặc định được hiển thị cho đến khi font đã tải xong. Đây là cách phổ biến nhất để tránh FOUT.
- fallback: Hiển thị font hệ thống mặc định trong một khoảng thời gian nhất định cho đến khi font từ server tải xong.
- optional: Chỉ sử dụng font Google nếu nó tải rất nhanh; nếu không, sử dụng font hệ thống.
Ví dụ, nếu bạn đang sử dụng font Roboto, bạn có thể thêm vào CSS như sau:
@font-face {
font-family: 'Roboto';
src: url('https://yourwebsite.com/wp-content/uploads/fonts/roboto.woff2') format('woff2');
font-display: swap;
}Cách này sẽ giúp font chữ hiển thị ngay lập tức bằng font hệ thống và sau đó chuyển sang font Google khi tải xong, giúp cải thiện trải nghiệm người dùng.
Ưu điểm của việc tự host Google Fonts
- Cải thiện tốc độ tải trang: Bằng cách tự host font, bạn giảm số lượng yêu cầu HTTP từ bên ngoài, giúp tăng tốc độ trang.
- Kiểm soát cache: Bạn có thể kiểm soát thời gian lưu trữ cache của các font, giúp giảm thiểu tải lại khi người dùng quay lại trang.
- Khắc phục sự cố FOUT/FOUC: Font-display giúp đảm bảo font luôn được hiển thị mượt mà, không bị gián đoạn trong quá trình tải.
Kết luận
Việc tối ưu Google Fonts là một bước quan trọng trong việc cải thiện hiệu suất của website WordPress. Bằng cách tự host font, preload và sử dụng font-display, bạn có thể giảm độ trễ, cải thiện tốc độ tải trang và mang đến trải nghiệm người dùng tốt hơn. Hãy thử áp dụng các phương pháp này để tối ưu hóa trang web của bạn và nâng cao điểm số Core Web Vitals!
Bình luận