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="previous" và font-display: tuỳ chọn để 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á chu kỳ kết xuất, Chrome 83 loại bỏ việc thay đổi bố cục khi tải trướ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 bố cục không bị giật khi hiển thị phông chữ tuỳ chỉnh.

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

Xem dữ liệu của MDN để biết thông tin cập nhật về hỗ trợ nhiều trình duyệt:

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

Kết xuất phông chữ

Thay đổi bố cục, hay 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 "thay đổi" nội dung. 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 về bố cục theo một trong hai cách:

• Phông chữ dự phòng được hoán đổi bằng phông chữ mới ("văn bản chưa định kiểu flash")
• Văn bản "ẩn" được hiển thị cho đến khi một phông chữ mới được kết xuất vào trang ("văn bản nhấp nháy của văn bản ẩn")

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

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

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

• Block (Chặn): Hiển thị văn bản "không hiển thị" nhưng chuyển sang phông chữ trên web ngay sau khi tải xong.
• Hoán đổi: Hiển thị văn bản bằng cách sử dụng phông chữ hệ thống dự phòng, nhưng chuyển sang phông chữ web ngay khi tải xong.
• Không đạt: Hiển thị văn bản bằng cách sử dụng phông chữ hệ thống dự phòng.

Trước đây, các phông chữ được chỉ định bằng font-display: optional có khoảng thời gian chặn là 100 mili giây và không có khoảng thời gian hoán đổi. Điều này có nghĩa là văn bản "vô hình" sẽ xuất hiện rất nhanh 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 xảy ra hoán đổi.

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

Chrome kết xuất lại trang 2 lần trong cả hai trường hợp, bất kể phông chữ dự phòng có được sử dụng hay không hoặc phông chữ tuỳ chỉnh có hoàn tất quá trình tải đúng lúc hay không. Điều này khiến văn bản vô hình nhấp nháy một chút và trong trường hợp phông chữ mới hiển thị, bố cục sẽ bị giật làm 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 trên ổ đĩa của trình duyệt và có thể tải tốt trước khi giai đoạn chặn hoàn tất.

Tính năng tối ưu hoá đã được triển khai trong Chrome 83 để xoá 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 trước bằng <link rel="preload'>. Thay vào đó, tính năng hiển thị 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 là 100 mili giây, nhưng có thể trong tương lai gần để tối ưu hoá hiệu suất.

Việc tải trướ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à loé sáng của văn bản chưa được định kiểu. Điều này phù hợp với hành vi bắt buộc như được chỉ định trong Mô-đun phông chữ CSS cấp 4, trong đó phông chữ không bắt buộc không được gây ra bố cục lại, và 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 phải tải trước phông chữ tuỳ chọn, nhưng phông chữ này sẽ giúp cải thiện đáng kể cơ hội tải trước chu kỳ kết xuất đầu tiên, đặc biệt là khi 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 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 với những tính năng tối ưu hoá mới này! Hãy báo cáo vấn đề nếu bạn gặp sự cố hoặc muốn bỏ qua bất kỳ đề xuất nào về tính năng.