Kiểm soát hiệu suất phông chữ bằng chế độ hiển thị phông chữ

Rob Dodson

Quyết định hành vi cho phông chữ web khi đang tải có thể là một kỹ thuật điều chỉnh hiệu suất quan trọng. Chỉ số mô tả hiển thị phông chữ mới cho @font-face cho phép nhà phát triển quyết định cách phông chữ web hiển thị (hoặc dự phòng), tuỳ thuộc vào thời gian tải phông chữ.

Sự khác biệt trong cách kết xuất phông chữ hiện nay

Phông chữ web cho phép nhà phát triển kết hợp kiểu chữ phong phú vào dự án của họ với sự đánh đổi là nếu người dùng chưa có phông chữ, trình duyệt phải mất chút thời gian để tải phông chữ đó xuống. Vì mạng có thể không ổn định, nên thời gian tải xuống này có thể ảnh hưởng tiêu cực đến trải nghiệm của người dùng. Xét cho cùng, không ai quan tâm văn bản của bạn đẹp đến mức nào nếu phải mất quá nhiều thời gian để hiển thị!

Để giảm thiểu một số rủi ro khi tải phông chữ xuống chậm, hầu hết trình duyệt đều triển khai thời gian chờ, sau đó phông chữ dự phòng sẽ được sử dụng. Đây là một kỹ thuật hữu ích nhưng đáng tiếc là các trình duyệt lại khác nhau về cách triển khai thực tế.

• Chrome và Firefox có thời gian chờ 3 giây, sau đó văn bản sẽ hiển thị bằng phông chữ dự phòng. Nếu phông chữ tải xuống được, thì cuối cùng quá trình hoán đổi sẽ diễn ra và văn bản sẽ được kết xuất lại bằng phông chữ dự kiến.
• Internet Explorer có thời gian chờ bằng 0 giây, dẫn đến việc kết xuất văn bản ngay lập tức. Nếu phông chữ được yêu cầu chưa có sẵn, thì phông chữ dự phòng sẽ được sử dụng và văn bản sẽ được kết xuất lại sau khi phông chữ được yêu cầu có sẵn.
• Safari không có hành vi hết thời gian chờ (hoặc ít nhất là không có gì ngoài thời gian chờ mạng cơ sở).

Tệ hơn nữa, nhà phát triển có quyền kiểm soát hạn chế trong việc quyết định mức độ ảnh hưởng của các quy tắc này đối với ứng dụng của họ. Nhà phát triển chú trọng đến hiệu suất có thể muốn có trải nghiệm ban đầu nhanh hơn bằng cách sử dụng phông chữ dự phòng và chỉ tận dụng phông chữ web đẹp hơn trong các lượt truy cập tiếp theo sau khi có cơ hội tải xuống. Khi sử dụng các công cụ như API Tải phông chữ, bạn có thể ghi đè một số hành vi mặc định của trình duyệt và đạt được hiệu suất cao hơn, nhưng điều này sẽ khiến bạn phải viết một lượng lớn JavaScript, sau đó phải được đưa vào dòng trang hoặc yêu cầu từ một tệp bên ngoài, gây ra độ trễ HTTP bổ sung.

Để giúp khắc phục tình huống này, Nhóm làm việc về CSS đã đề xuất một chỉ số mô tả @font-face mới, font-display và một thuộc tính tương ứng để kiểm soát cách phông chữ có thể tải xuống hiển thị trước khi tải đầy đủ.

Tiến trình tải phông chữ xuống

Tương tự như các hành vi hết thời gian chờ phông chữ hiện có mà một số trình duyệt triển khai ngày nay, font-display phân đoạn thời gian tải phông chữ xuống thành ba giai đoạn chính.

1. Dấu chấm đầu tiên là dấu chấm khối phông chữ. Trong khoảng thời gian này, nếu phông chữ không được tải, thì mọi phần tử cố gắng sử dụng phông chữ đó phải hiển thị bằng phông chữ dự phòng không hiển thị. Nếu phông chữ tải thành công trong khoảng thời gian chặn, thì phông chữ sẽ được sử dụng bình thường.
2. Thời gian hoán đổi phông chữ xảy ra ngay sau thời gian chặn phông chữ. Trong khoảng thời gian này, nếu phông chữ không được tải, thì mọi phần tử cố gắng sử dụng phông chữ đó phải hiển thị bằng phông chữ dự phòng. Nếu phông chữ tải thành công trong khoảng thời gian hoán đổi, thì phông chữ đó sẽ được sử dụng bình thường.
3. Khoảng thời gian lỗi phông chữ xảy ra ngay sau khoảng thời gian hoán đổi phông chữ. Nếu mặt phông chữ chưa được tải khi khoảng thời gian này bắt đầu, thì mặt phông chữ sẽ được đánh dấu là tải không thành công, dẫn đến việc sử dụng phông chữ dự phòng thông thường. Nếu không, phông chữ sẽ được sử dụng bình thường.

Khi hiểu rõ các khoảng thời gian này, bạn có thể sử dụng font-display để quyết định cách hiển thị phông chữ tuỳ thuộc vào việc phông chữ đó đã được tải xuống hay chưa và thời điểm tải xuống.

Bạn nên sử dụng font-display nào?

Để xử lý chỉ số mô tả font-display, hãy thêm chỉ số mô tả đó vào quy tắc tại @font-face:

@font-face {
    font-family: 'Arvo';
    font-display: auto;
    src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

font-display hiện hỗ trợ dải giá trị sau auto | block | swap | fallback | optional.

tự động

tự động sử dụng bất kỳ chiến lược hiển thị phông chữ nào mà tác nhân người dùng sử dụng. Hầu hết các trình duyệt hiện có chiến lược mặc định tương tự như chặn.

chặn

block cung cấp cho phông chữ một khoảng thời gian chặn ngắn (nên dùng 3 giây trong hầu hết các trường hợp) và một khoảng thời gian hoán đổi vô hạn. Nói cách khác, trình duyệt sẽ vẽ văn bản "vô hình" ở lần đầu nếu phông chữ không được tải, nhưng sẽ hoán đổi phông chữ ngay khi tải. Để thực hiện việc này, trình duyệt sẽ tạo một phông chữ ẩn danh có các chỉ số tương tự như phông chữ đã chọn nhưng tất cả các ký tự đều không chứa "mực". Bạn chỉ nên sử dụng giá trị này nếu cần hiển thị văn bản theo một kiểu chữ cụ thể để có thể sử dụng trang.

hoán đổi

swap (hoán đổi) cung cấp cho phông chữ một khoảng thời gian khối bằng 0 giây và khoảng thời gian hoán đổi vô hạn. Điều này có nghĩa là trình duyệt sẽ vẽ văn bản ngay lập tức bằng một phông chữ dự phòng nếu phông chữ không được tải, nhưng sẽ hoán đổi phông chữ ngay khi tải. Tương tự như khối, bạn chỉ nên sử dụng giá trị này khi việc hiển thị văn bản bằng một phông chữ cụ thể là quan trọng đối với trang, nhưng việc hiển thị bằng phông chữ bất kỳ vẫn sẽ truyền tải đúng thông điệp. Văn bản biểu trưng là một ứng cử viên phù hợp để hoán đổi vì việc hiển thị tên công ty bằng một phông chữ dự phòng hợp lý sẽ giúp truyền tải thông điệp, nhưng cuối cùng bạn sẽ sử dụng phông chữ chính thức.

dự phòng

Biện pháp dự phòng cung cấp cho phông chữ một khoảng thời gian chặn cực nhỏ (nên dùng 100 mili giây trở xuống trong hầu hết các trường hợp) và một khoảng thời gian hoán đổi ngắn (nên dùng 3 giây trong hầu hết các trường hợp). Nói cách khác, phông chữ sẽ được kết xuất bằng phông chữ dự phòng nếu không được tải, nhưng phông chữ sẽ được hoán đổi ngay khi tải. Tuy nhiên, nếu quá nhiều thời gian trôi qua, thì phông chữ dự phòng sẽ được sử dụng trong phần còn lại của thời gian hoạt động của trang. Phông chữ dự phòng là một lựa chọn phù hợp cho những nội dung như văn bản nội dung chính mà bạn muốn người dùng bắt đầu đọc càng sớm càng tốt và không muốn làm phiền trải nghiệm của họ bằng cách di chuyển văn bản xung quanh khi phông chữ mới tải.

tùy chọn

không bắt buộc cung cấp cho phông chữ một khoảng thời gian chặn cực nhỏ (nên dùng 100 mili giây trở xuống trong hầu hết các trường hợp) và khoảng thời gian hoán đổi bằng 0 giây. Tương tự như phương án dự phòng, đây là một lựa chọn phù hợp khi phông chữ tải xuống là "rất tốt nếu có" nhưng không quan trọng đối với trải nghiệm. Giá trị không bắt buộc sẽ tuỳ thuộc vào trình duyệt để quyết định xem có bắt đầu tải phông chữ xuống hay không. Trình duyệt có thể chọn không tải xuống hoặc tải xuống ở mức độ ưu tiên thấp tuỳ thuộc vào những gì trình duyệt cho là tốt nhất cho người dùng. Điều này có thể hữu ích trong trường hợp người dùng có kết nối yếu và việc tải phông chữ xuống có thể không phải là cách sử dụng tài nguyên hiệu quả nhất.

Hỗ trợ trình duyệt

font-display hiện đang nằm sau cờ Tính năng nền tảng web thử nghiệm trong Chrome 49 dành cho máy tính và đang được cung cấp trong Opera và Opera dành cho Android.

Bản minh hoạ

Hãy xem mẫu để thử font-display. Đối với các nhà phát triển quan tâm đến hiệu suất, đây có thể là một công cụ hữu ích khác trong bộ công cụ của bạn!