Lớp học lập trình này hướng dẫn bạn cách tải trước phông chữ trên web bằng cách sử dụng rel="preload" để xoá
bất kỳ flash của văn bản chưa được định kiểu (FOUT).
Đo
Trước tiên, hãy đo lường hiệu suất của trang web rồi mới thêm biện pháp tối ưu hoá.
- Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn
Toàn màn hình
. - Nhấn tổ hợp phím "Control + Shift + J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
- Nhấp vào thẻ Lighthouse.
- Đảm bảo bạn đã chọn hộp đánh dấu Hiệu suất trong danh sách Danh mục.
- Nhấp vào nút Tạo báo cáo.
Báo cáo Lighthouse được tạo sẽ cho bạn biết trình tự tìm nạp tài nguyên trong mục Độ trễ tối đa của đường dẫn tới hạn.
Trong quá trình kiểm tra ở trên, phông chữ trên web là một phần của chuỗi yêu cầu quan trọng và được tìm nạp sau cùng. Chuỗi yêu cầu quan trọng thể hiện thứ tự tài nguyên mà trình duyệt ưu tiên và tìm nạp. Trong ứng dụng này, phông chữ trên web (Pacfico và Pacifico-Bold) được xác định bằng quy tắc @font-face và 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, phông chữ web thường được tải từng phần, có nghĩa là chúng sẽ không được tải cho đến khi các tài nguyên quan trọng được tải xuống (CSS, JS).
Dưới đâ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ữ trên web
Để tránh FOUT, bạn có thể tải trước phông chữ web bắt buộc ngay lập tức. Thêm phần tử Link cho ứng dụng này vào đầu tài liệu:
<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 tài nguyên này xuống dưới dạng phông chữ và giúp sắp xếp mức độ ưu tiên của hàng đợi tài nguyên.
Thuộc tính crossorigin cho biết liệu có tìm nạp tài nguyên bằng yêu cầu CORS hay không, vì phông chữ có thể đến từ một 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ữ tải trước.
Vì Pacifico-Bold được sử dụng trong tiêu đề trang, nên chúng tôi đã thêm thẻ tải trước để tìm nạp thẻ này sớm hơn. Việc tải trước phông chữ Pacifico.woff2 là không quan trọng vì phông chữ này tạo kiểu cho văn bản dưới màn hình đầu tiên.
Tải lại ứng dụng và chạy lại ngọn hải đăng. Xem mục Độ trễ tối đa của đường dẫn quan trọng.
Hãy lưu ý cách Pacifico-Bold.woff2 bị xoá khỏi chuỗi yêu cầu quan trọng. Miền này được tìm nạp trước đó trong ứng dụng.
Nhờ tải trước, trình duyệt sẽ biết cần tải tệp này xuống sớm hơn. Xin lưu ý rằng nếu không được sử dụng đúng cách, tính năng tải trước có thể ảnh hưởng xấu đến hiệu suất do đưa ra các yêu cầu không cần thiết đối với những tài nguyên không được sử dụng.