Trong bài này mình sẽ hướng dẫn bạn cách tải trước phông chữ bằng cách sử dụng rel="preload" để khắc phục vấn đề flash of unstyled text (FOUT).
Cách đo lường
Đầu tiên hãy đo lường hiệu suất hoạt động của trang web trước khi thực hiện tối ưu hóa.
- Nhấn tổ hợp
Control+Shift+J(hoặcCommand+Option+Jtrên Mac) để mở DevTools. - Nhấn vào tab Lighthouse.
- Nhấn Generate report.
- Tìm đến mục Maximum critical path latency.
Trong báo cáo ở trên, phông chữ web là một phần của chuỗi yêu cầu quan trọng và được tìm nạp cuối cùng. Chuỗi yêu cầu quan trọng đại diện cho thứ tự của các tài nguyên được trình duyệt ưu tiên và tìm nạp. Trong website này, phông chữ (Pacfico and Pacifico-Bold) được khai báo bằng @font-face là tài nguyên cuối cùng được trình duyệt tìm nạp trong chuỗi yêu cầu quan trọng. Thông thường, webfonts được lazyload, có nghĩa là chúng không được tải cho đến khi các tài nguyên quan trọng được tải xuống (CSS, JS).
Đây là trình tự của các tài nguyên được tìm nạp trong ứng dụng:
Tải trước phông chữ với preload
Vì phông chữ là thành phần quan trọng của website, nên bạn cần tìm cách khai báo để trình duyệt hiểu và ưu tiên tải trước tài nguyên này.
Bạn có thể tải trước phông chữ được yêu cầu ngay lập tức bằng cách thêm thẻ link vào trong phần head của html như sau:
<head>
<!-- ... -->
<link rel="preload"
href="/assets/Pacifico-Bold.woff2"
as="font" type="font/woff2" crossorigin>
<!-- ... -->
</head>
Các thuộc tính as="font" type="font/woff2" yêu cầu trình duyệt tải xuống tài nguyên này dưới dạng phông chữ và giúp ưu tiên hàng đợi tài nguyên.
Thuộc tính crossorigin cho biết liệu tài nguyên có nên được tải bằng yêu cầu CORS hay không, vì nguồn của phông chữ có thể từ một tên miền khác. Nếu không có thuộc tính này, trình duyệt sẽ bỏ qua phông chữ được tải trước.
Vì phông chữ Pacifico-Bold được sử dụng trong tiêu đề trang, chúng tôi đã thêm thẻ tải trước để tìm nạp thẻ sớm hơn. Việc tải trước phông chữ Pacifico.woff2 không quan trọng vì nó style cho văn bản nằm dưới khung hình đầu tiên của website.
Tải lại ứng dụng và chạy lại lighthouse. Kiểm tra phần Maximum critical path latency.
Sau khi tối ưu thì tệp phông chữ Pacifico-Bold.woff2 bị xóa khỏi chuỗi yêu cầu quan trọng. Nó đã được tìm nạp sớm hơn trong quá trình tải.
Với việc khai báo thuộc tính preload, trình duyệt biết rằng cần tải xuống tệp này sớm hơn. Điều quan trọng cần lưu ý là nếu không được sử dụng đúng cách, preload có thể gây ra các vấn đề liên quan đến hiệu suất. Vì vậy bạn chỉ nên dùng preload với các tài nguyên thực sự quan trọng.