Phông chữ thường là các tệp lớn có thời gian tải chậm. Một số trình duyệt ẩn văn bản cho đến khi phông chữ tải, gây ra chớp văn bản không hiển thị (FOIT).
Cách quy trình kiểm tra hiển thị phông chữ Lighthouse không thành công
Lighthouse sẽ gắn cờ mọi URL phông chữ có thể nhấp nháy văn bản không hiển thị:
![Ảnh chụp màn hình Lighthouse. Đảm bảo văn bản vẫn hiển thị trong quá trình kiểm tra tải phông chữ web](https://developer.chrome.google.cn/static/docs/lighthouse/performance/font-display/image/a-screenshot-the-lightho-15d52429afc09.png?authuser=6&hl=vi)
Cách tránh hiển thị văn bản ẩn
API font-display
cho biết cách hiển thị phông chữ khi dùng bên trong kiểu font-face
. Các giá trị font-display
sau đây sẽ yêu cầu trình duyệt sử dụng phông chữ hệ thống nếu phông chữ tuỳ chỉnh chưa sẵn sàng:
swap
optional
fallback
Ví dụ về CSS
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'),
url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
format('woff2');
font-display: swap;
}
Ví dụ về Google Fonts
Thêm tham số &display=swap
/&display=optional
/&display=fallback
vào cuối URL của Google Fonts:
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
Cách tránh thay đổi bố cục do phông chữ bị trì hoãn
Việc tạm thời hiển thị phông chữ hệ thống sẽ thay thế FOIT bằng ánh sáng flash về văn bản chưa định kiểu (FOUT). Điều này giúp cải thiện FCP và LCP bằng cách hiển thị nội dung sớm hơn, nhưng cả FOIT và FOUT sẽ tác động như nhau đến CLS khi phông chữ tuỳ chỉnh thay thế phông chữ tạm thời của hệ thống.
Bạn có thể giảm thiểu tác động của việc tải phông chữ đối với CLS bằng cách tải trước cùng với font-display: optional
.
Tuy nhiên, việc lạm dụng tải trước có thể ảnh hưởng tiêu cực đến các chỉ số tải. Bạn nên thực hiện thử nghiệm A/B để đảm bảo rằng phông chữ tải trước không dẫn đến sự hồi quy về hiệu suất.
Hướng dẫn dành riêng cho ngăn xếp
Drupal
Chỉ định @font-display
khi xác định phông chữ tuỳ chỉnh trong giao diện.
Magento
Chỉ định @font-display
khi xác định phông chữ tuỳ chỉnh.
Tài nguyên
- Mã nguồn để Đảm bảo văn bản vẫn hiển thị trong quá trình tải phông chữ web
- Tránh văn bản ẩn trong khi tải
- Kiểm soát hiệu suất phông chữ bằng chế độ hiển thị phông chữ
- Tải trước phông chữ web để cải thiện tốc độ tải (lớp học lập trình)
- Ngăn chặn dịch chuyển bố cục và nhấp nháy văn bản ẩn (FOIT) bằng cách tải trước phông chữ không bắt buộc