Ngăn việc dịch bố cục và nhấp nháy văn bản không hiển thị (FOIT) bằng cách tải trước phông chữ không bắt buộc

Kể từ Chrome 83, bạn có thể kết hợp link rel="preload" và font-display: optional để loại bỏ hoàn toàn hiện tượng giật bố cục

Houssein Djirdeh

Bằng cách tối ưu hoá các chu kỳ kết xuất, Chrome 83 sẽ loại bỏ hiện tượng thay đổi bố cục khi tải trước các phông chữ không bắt buộc. Kết hợp <link rel="preload"> với font-display: optional là cách hiệu quả nhất để đảm bảo không có hiện tượng giật bố cục khi kết xuất các phông chữ tuỳ chỉnh.

Khả năng tương thích với trình duyệt

Hãy xem dữ liệu của MDN để biết thông tin mới nhất về khả năng hỗ trợ trên nhiều trình duyệt:

• <link rel="preload">
• font-display

Kết xuất phông chữ

Hiện tượng thay đổi bố cục hoặc bố cục lại xảy ra khi một tài nguyên trên trang web thay đổi linh hoạt, dẫn đến việc nội dung bị "dịch chuyển". Việc tìm nạp và hiển thị phông chữ trên web có thể trực tiếp gây ra sự thay đổi bố cục theo một trong hai cách:

• Phông chữ dự phòng được thay thế bằng một phông chữ mới ("flash of unstyled text")
• Văn bản "vô hình" xuất hiện cho đến khi một phông chữ mới được hiển thị trên trang ("văn bản vô hình nhấp nháy")

Thuộc tính CSS font-display cung cấp một cách để sửa đổi hành vi kết xuất của các phông chữ tuỳ chỉnh thông qua một loạt các giá trị được hỗ trợ khác nhau (auto, block, swap, fallback và optional). Việc chọn giá trị nào để sử dụng phụ thuộc vào hành vi ưu tiên cho các phông chữ được tải không đồng bộ. Tuy nhiên, mỗi giá trị được hỗ trợ này có thể kích hoạt bố cục lại theo một trong hai cách nêu trên, cho đến nay!

Phông chữ không bắt buộc

Thuộc tính font-display sử dụng một dòng thời gian gồm 3 giai đoạn để xử lý những phông chữ cần được tải xuống trước khi có thể hiển thị:

• Chặn: Kết xuất văn bản "ẩn", nhưng chuyển sang phông chữ trên web ngay khi tải xong.
• Hoán đổi: Kết xuất văn bản bằng phông chữ dự phòng của hệ thống, nhưng chuyển sang phông chữ trên web ngay khi phông chữ đó tải xong.
• Thất bại: Kết xuất văn bản bằng phông chữ dự phòng của hệ thống.

Trước đây, các phông chữ được chỉ định bằng font-display: optional có thời gian chặn là 100 mili giây và không có thời gian hoán đổi. Điều này có nghĩa là văn bản "không hiển thị" sẽ xuất hiện trong thời gian rất ngắn trước khi chuyển sang phông chữ dự phòng. Nếu phông chữ không được tải xuống trong vòng 100 mili giây, thì phông chữ dự phòng sẽ được sử dụng và không có hoạt động hoán đổi nào xảy ra.

Tuy nhiên, trong trường hợp phông chữ được tải xuống trước khi hoàn tất khoảng thời gian chặn 100 mili giây, phông chữ tuỳ chỉnh sẽ được kết xuất và sử dụng trên trang.

Chrome kết xuất lại trang hai lần trong cả hai trường hợp, bất kể phông chữ dự phòng có được dùng hay không hoặc phông chữ tuỳ chỉnh có tải xong đúng hạn hay không. Điều này gây ra hiện tượng nhấp nháy nhẹ của văn bản ẩn và trong trường hợp một phông chữ mới được kết xuất, bố cục bị giật sẽ di chuyển một số nội dung của trang. Điều này xảy ra ngay cả khi phông chữ được lưu trữ trong bộ nhớ đệm của ổ đĩa của trình duyệt và có thể tải tốt trước khi khoảng thời gian chặn hoàn tất.

Các hoạt động tối ưu hoá đã có trong Chrome 83 để loại bỏ hoàn toàn chu kỳ hiển thị đầu tiên cho các phông chữ không bắt buộc được tải sẵn bằng <link rel="preload'>. Thay vào đó, quá trình kết xuất sẽ bị chặn cho đến khi phông chữ tuỳ chỉnh tải xong hoặc một khoảng thời gian nhất định đã trôi qua. Khoảng thời gian chờ này hiện được đặt ở mức 100 mili giây, nhưng có thể thay đổi trong tương lai gần để tối ưu hoá hiệu suất.

Việc tải trước các phông chữ không bắt buộc trong Chrome sẽ loại bỏ khả năng bố cục bị giật và văn bản không có kiểu xuất hiện chớp nhoáng. Điều này phù hợp với hành vi bắt buộc như được chỉ định trong CSS Fonts Module Level 4, trong đó các phông chữ không bắt buộc không bao giờ được gây ra bố cục lại và thay vào đó, các tác nhân người dùng có thể trì hoãn việc kết xuất trong một khoảng thời gian thích hợp.

Mặc dù không cần tải trước một phông chữ không bắt buộc, nhưng việc này sẽ giúp cải thiện đáng kể khả năng phông chữ đó tải trước chu kỳ kết xuất đầu tiên, đặc biệt là nếu phông chữ đó chưa được lưu trữ trong bộ nhớ đệm của trình duyệt.

Kết luận

Nhóm Chrome rất muốn biết trải nghiệm của bạn khi tải trước các phông chữ không bắt buộc bằng những điểm tối ưu hoá mới này! Báo cáo vấn đề nếu bạn gặp phải bất kỳ vấn đề nào hoặc muốn đề xuất tính năng.