Tối ưu hoá phông chữ trên web

Trong các mô-đun trước, bạn đã tìm hiểu cách tối ưu hoá HTML, CSS, JavaScript, và tài nguyên đa phương tiện. Trong học phần này, hãy khám phá một số phương pháp để tối ưu hoá trang web phông chữ.

Phông chữ trên web có thể ảnh hưởng đến hiệu suất trang ở cả thời gian tải và thời gian hiển thị. Tệp phông chữ lớn có thể mất chút thời gian để tải xuống và ảnh hưởng tiêu cực đến Nội dung hiển thị (FCP), trong khi giá trị font-display không chính xác có thể gây ra các thay đổi bố cục không mong muốn góp phần vào Mức thay đổi bố cục tích luỹ của trang (CLS).

Trước khi thảo luận về việc tối ưu hoá phông chữ trên web, hãy biết cách phát hiện phông chữ trình duyệt có thể hữu ích, nhờ đó, bạn có thể hiểu cách CSS ngăn chặn truy xuất phông chữ không cần thiết trên web trong một số trường hợp nhất định.

Chiến dịch Khám phá

Phông chữ trên web của một trang được xác định trong một biểu định kiểu bằng cách sử dụng @font-face khai báo:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

Đoạn mã trước đó xác định font-family có tên "Open Sans", và cho trình duyệt biết nơi tìm tài nguyên phông chữ tương ứng trên web. Để tiết kiệm băng thông, trình duyệt không tải phông chữ trên web xuống cho đến khi phông chữ đó được xác định bố cục của trang hiện tại cần nó.

h1 {
  font-family: "Open Sans";
}

Trong đoạn mã CSS trước đó, trình duyệt sẽ tải tệp phông chữ "Open Sans" xuống khi phân tích cú pháp phần tử <h1> trong HTML của trang.

preload

Nếu nội dung khai báo @font-face của bạn được xác định trong một biểu định kiểu bên ngoài, trình duyệt chỉ có thể bắt đầu tải xuống sau khi đã tải biểu định kiểu xuống. Điều này giúp phông chữ trên web được phát hiện sau đó, nhưng có nhiều cách để giúp khám phá phông chữ trên web sớm hơn.

Bạn có thể tạo một yêu cầu sớm về tài nguyên phông chữ trên web bằng cách sử dụng preload . Lệnh preload giúp người dùng có thể tìm được phông chữ trên web trong khoảng thời gian tải trang và trình duyệt bắt đầu tải xuống ngay lập tức mà không cần chờ để biểu định kiểu hoàn tất quá trình tải xuống và phân tích cú pháp. Lệnh preload không đợi đến khi cần phông chữ trên trang.

<!-- The `crossorigin` attribute is required for fonts—even
     self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>

Nội dung khai báo @font-face cùng dòng

Bạn có thể giúp mọi người tìm thấy phông chữ sớm hơn trong quá trình tải trang bằng cách đặt nội tuyến CSS chặn hiển thị (bao gồm cả khai báo @font-face) trong <head> của HTML bằng cách sử dụng phần tử <style>. Trong trường hợp này, trình duyệt sẽ phát hiện ra phông chữ trên web sớm hơn trong quá trình tải trang, vì không cần phải đợi biểu định kiểu để tải xuống.

Nội dung khai báo @font-face có lợi thế hơn so với việc sử dụng preload gợi ý, vì trình duyệt chỉ tải xuống các phông chữ cần thiết để hiển thị . Điều này giúp loại bỏ nguy cơ tải phông chữ không sử dụng xuống.

Tải xuống

Sau khi khám phá phông chữ trên web và đảm bảo rằng phông chữ đó cần thiết cho trình duyệt có thể tải chúng xuống. Số lượng phông chữ trên web, kiểu mã hoá, và kích thước tệp của chúng có thể ảnh hưởng đáng kể đến tốc độ phông chữ trên web được trình duyệt tải xuống và hiển thị.

Tự lưu trữ phông chữ trên web

Phông chữ trên web có thể được phân phát thông qua các dịch vụ của bên thứ ba, chẳng hạn như Google Fonts hoặc có thể tự lưu trữ trên máy chủ gốc của bạn. Khi bạn sử dụng dịch vụ của bên thứ ba, trang web của bạn cần mở kết nối với miền của nhà cung cấp trước khi quá trình này có thể bắt đầu tải các phông chữ cần thiết trên web xuống. Điều này có thể trì hoãn việc khám phá và tải phông chữ trên web xuống.

Bạn có thể giảm mức hao tổn này bằng cách sử dụng gợi ý tài nguyên preconnect. Bằng cách sử dụng preconnect, bạn có thể yêu cầu trình duyệt mở một kết nối đến nhiều nguồn gốc sớm hơn trình duyệt thường:

<link rel="preconnect" href="https://fonts.googleapis.com">  
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Đoạn mã HTML trước đó gợi ý cho trình duyệt cách thiết lập kết nối fonts.googleapis.com và kết nối CORS với fonts.gstatic.com. Hơi nhiều trình cung cấp phông chữ (chẳng hạn như Google Fonts) phân phát CSS và tài nguyên phông chữ từ nhiều nguồn gốc.

Bạn có thể không cần kết nối với bên thứ ba bằng cách tự lưu trữ phông chữ trên web. Trong hầu hết các trường hợp, phông chữ trên web tự lưu trữ sẽ nhanh hơn so với việc tải xuống trên nhiều nguồn gốc. Nếu bạn định dùng phông chữ tự lưu trữ trên web, hãy kiểm tra để đảm bảo trang web của bạn đang sử dụng Mạng phân phối nội dung (CDN), HTTP/2 hoặc HTTP/3 và đặt lưu chính xác tiêu đề trong bộ nhớ đệm cho phông chữ web mà bạn cần cho trang web của mình.

Chỉ sử dụng WOFF2 và WOFF2

WOFF2 được hỗ trợ trên toàn bộ trình duyệt và có khả năng nén tốt nhất — tốt hơn đến 30% so với WOFF. Kích thước tệp giảm giúp rút ngắn thời gian tải xuống. Chương trình WOFF2 thường là định dạng duy nhất cần thiết cho khả năng tương thích hoàn toàn giữa trình duyệt.

Đặt con phông chữ trên web

Phông chữ trên web thường bao gồm nhiều ký tự khác nhau, cần thiết để thể hiện nhiều ký tự được sử dụng trong nhiều ngôn ngữ. Nếu trang phân phát nội dung bằng một ngôn ngữ duy nhất — hoặc sử dụng một bảng chữ cái duy nhất — thì bạn có thể giảm kích thước phông chữ trên web của bạn thông qua chế độ cài đặt phụ. Việc này thường được thực hiện bằng chỉ định một số hoặc một loạt điểm mã đơn mã.

Một tập hợp con là một tập hợp ký tự rút gọn có trong trang web gốc tệp phông chữ. Ví dụ: thay vì phân phát tất cả các ký tự, trang của bạn có thể phân phát một tập hợp con cụ thể cho các ký tự La-tinh. Tuỳ thuộc vào tập hợp con cần thiết, việc xoá ký tự có thể làm giảm đáng kể kích thước của tệp phông chữ.

Một số trình cung cấp phông chữ trên web (chẳng hạn như Google Fonts) tự động cung cấp các tập hợp con thông qua việc sử dụng tham số chuỗi truy vấn. Ví dụ: https://fonts.googleapis.com/css?family=Roboto&subset=latin URL phân phát biểu định kiểu bằng phông chữ web Roboto chỉ sử dụng bảng chữ cái Latinh.

Nếu bạn quyết định tự lưu trữ phông chữ trên web của mình, bước tiếp theo là tạo và hãy tự lưu trữ các tập hợp con đó bằng các công cụ như Daggeranger hoặc subfont.

Tuy nhiên, nếu không có khả năng tự lưu trữ phông chữ trên web của riêng mình, bạn có thể một số phông chữ trên web do Google Fonts cung cấp bằng cách chỉ định text bổ sung tham số chuỗi truy vấn chỉ chứa các điểm mã unicode cần thiết cho trang web của bạn. Ví dụ: nếu bạn có phông chữ hiển thị trên web trên trang web chỉ cần một số ký tự nhỏ cần thiết cho cụm từ "Chào mừng", bạn có thể yêu cầu tập hợp con đó thông qua Google Fonts qua URL sau: https://fonts.googleapis.com/css?family=Monoton&text=Welcome. Điều này có thể giảm đáng kể lượng dữ liệu phông chữ web cần cho một kiểu chữ trên trang web của bạn, nếu chế độ cài đặt phụ cực kỳ nghiêm trọng như vậy có thể hữu ích trên trang web của bạn.

Hiển thị phông chữ

Sau khi trình duyệt phát hiện và tải phông chữ trên web xuống, trình duyệt có thể kết xuất. Theo mặc định, trình duyệt sẽ chặn hiển thị bất kỳ văn bản nào sử dụng cho đến khi phông chữ đó được tải xuống. Bạn có thể điều chỉnh khả năng hiển thị văn bản của trình duyệt và định cấu hình văn bản nào sẽ được hiển thị (hoặc không được hiển thị) cho đến khi web đã tải đầy đủ bằng thuộc tính CSS font-display.

block

Giá trị mặc định của font-displayblock. Với block, trình duyệt chặn hiển thị bất kỳ văn bản nào dùng phông chữ web được chỉ định. Khác biệt các trình duyệt hoạt động hơi khác. Kết xuất khối Chromium và Firefox cho tối đa 3 giây trước khi sử dụng dự phòng. Chặn Safari vô thời hạn cho đến khi phông chữ trên web được tải.

swap

swap là giá trị font-display được sử dụng rộng rãi nhất. swap không chặn và hiển thị văn bản ngay lập tức trong kết quả dự phòng trước khi hoán đổi trong phông chữ web được chỉ định. Nhờ đó, bạn có thể đăng nội dung ngay lập tức mà không cần chờ để tải phông chữ trên web xuống.

Tuy nhiên, nhược điểm của swap là nó gây ra sự thay đổi bố cục nếu phương án dự phòng phông chữ trên web và phông chữ trên web được chỉ định trong CSS của bạn thay đổi đáng kể về dòng chiều cao, rãnh và các chỉ số phông chữ khác. Điều này có thể ảnh hưởng đến CLS của trang web nếu bạn không cần sử dụng gợi ý preload để tải tài nguyên phông chữ trên web ngay khi có thể, hoặc nếu bạn không xem xét các giá trị font-display khác.

fallback

Giá trị fallback cho font-display là sự cân bằng giữa blockswap. Không giống như swap, trình duyệt chặn hiển thị phông chữ, nhưng hoán đổi trong văn bản dự phòng chỉ trong một khoảng thời gian rất ngắn. Không giống như block, tuy nhiên, khoảng thời gian chặn rất ngắn.

Việc sử dụng giá trị fallback có thể hoạt động tốt trên các mạng nhanh, trong đó nếu phông chữ trên web có thể tải xuống nhanh chóng, phông chữ trên web là kiểu chữ được sử dụng ngay trên kết xuất ban đầu. Tuy nhiên, nếu mạng chậm, văn bản dự phòng sẽ được nhìn thấy đầu tiên sau khi khoảng thời gian chặn kết thúc, rồi hoán đổi khi phông chữ trên web đến.

optional

optional là giá trị font-display nghiêm ngặt nhất và chỉ sử dụng web nếu tài nguyên đó tải xuống trong vòng 100 mili giây. Nếu phông chữ trên web mất dài hơn thời gian tải, nó sẽ không được sử dụng trên trang và trình duyệt sẽ sử dụng kiểu chữ dự phòng cho thao tác điều hướng hiện tại trong khi phông chữ trên web được tải xuống nền và được đặt trong bộ nhớ đệm của trình duyệt.

Kết quả là, các lần điều hướng trang tiếp theo có thể sử dụng phông chữ web ngay lập tức, vì nội dung đó đã được tải xuống. font-display: optional tránh được sự thay đổi bố cục mà bạn thấy với swap, nhưng một số người dùng sẽ không nhìn thấy phông chữ web nếu phông chữ đến quá muộn trên điều hướng trang ban đầu.

Bản minh hoạ phông chữ

Kiểm tra kiến thức của bạn

Khi nào trình duyệt tải một tài nguyên phông chữ trên web xuống (giả sử tài nguyên đó không phải như vậy được tìm nạp bằng lệnh preload)?

Ngay khi tham chiếu tới thành phần đó được phát hiện trong biểu định kiểu.
Hãy thử lại.
Khi CSSOM của trang được tạo và phông chữ trên web được xác định là cần thiết cho bố cục hiện tại.
Chính xác!

Định dạng duy nhất (và hiệu quả nhất) cần thiết để phân phát web là gì phông chữ cho tất cả các trình duyệt hiện đại?

WOFF2
Chính xác!
WOFF
Hãy thử lại.
TTF
Hãy thử lại.
Giờ EOT
Hãy thử lại.

Tiếp theo: JavaScript phân tách mã

Với hiểu biết về cách tối ưu hoá phông chữ, giờ đây bạn có thể học phần tiếp theo, bao gồm một chủ đề có nhiều khả năng sẽ được cải thiện tốc độ tải trang ban đầu cho người dùng của bạn và điều đó làm trì hoãn việc tải trang JavaScript thông qua quá trình phân tách mã. Bằng cách làm như vậy, bạn có thể duy trì băng thông và CPU càng thấp càng tốt trong giai đoạn khởi động của trang, khoảng thời gian thời điểm mà người dùng có nhiều khả năng tương tác với ứng dụng.