Cách làm webfont tải nhanh hơn
Font thường là một trong những tệp đầu tiên trang web cần tải. Bảy giải pháp dưới đây được sắp xếp gần đúng theo mức độ tác động, và hầu hết chỉ mất vài phút.
1. Dùng WOFF2
Đây là định dạng phổ biến có dung lượng nhỏ nhất. Nếu bạn vẫn đang dùng TTF hoặc OTF, đây là cách cải thiện nhanh nhất. Dùng Webfont Generator để chuyển đổi chúng.
2. Loại bỏ các ký tự bạn không dùng
Nhiều font chứa bảng chữ cái mà website của bạn không bao giờ hiển thị. Font Subsetter chỉ giữ lại các ngôn ngữ bạn chọn. Hãy kiểm tra giấy phép trước, và giữ lại mọi ngôn ngữ mà website của bạn sử dụng.
3. Tải ít độ đậm hơn
Mỗi độ đậm và kiểu chữ nghiêng là thêm một tệp. Nhiều website chỉ cần regular và bold. Hãy tìm trong CSS các độ đậm không còn dùng và xóa chúng.
4. Cân nhắc dùng variable font
Nếu bạn dùng từ ba độ đậm trở lên, một variable font duy nhất có thể nhỏ hơn nhiều tệp tĩnh. Bạn có thể giảm thêm dung lượng bằng cách thu hẹp dải độ đậm trong Webfont Generator.
5. Preload font chính
Thông thường, trình duyệt chỉ phát hiện font sau khi đã đọc CSS. Preload giúp trình duyệt bắt đầu tải sớm hơn:
<link rel="preload" href="/fonts/brand-regular.woff2" as="font" type="font/woff2" crossorigin>Giữ thuộc tính crossorigin, ngay cả trên tên miền của bạn, nếu không tệp có thể bị tải hai lần. Chỉ preload một hoặc hai font được dùng ở đầu trang.
6. Thiết lập font-display
Thuộc tính này kiểm soát những gì người dùng thấy khi font đang tải. swap hiển thị font dự phòng ngay lập tức, nên văn bản của bạn không bao giờ bị ẩn. optional tránh việc đổi font muộn, nhưng với kết nối chậm, người dùng có thể không thấy font của bạn ở lần truy cập đầu tiên.
7. Lưu cache font trong thời gian dài
Tệp font hiếm khi thay đổi, vì vậy hãy để trình duyệt lưu lại chúng. Thêm phiên bản hoặc hash vào tên tệp, rồi gửi header:
Cache-Control: public, max-age=31536000, immutableĐo lường kết quả
Chạy trang của bạn qua Page Speed Test trước và sau khi tối ưu, rồi so sánh Largest Contentful Paint và mức độ dịch chuyển bố cục.
