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 mô-đun này, hãy khám phá một số phương thức để tối ưu hoá phông chữ web.
Phông chữ trên web có thể ảnh hưởng đến hiệu suất của 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 một chút thời gian để tải xuống và ảnh hưởng tiêu cực đến Thời gian hiển thị nội dung đầu tiên (FCP), trong khi giá trị font-display không chính xác có thể gây ra những thay đổi bố cục không mong muốn góp phần vào Điểm số tổng hợp về mức thay đổi bố cục (CLS) của trang.
Trước khi có thể thảo luận về việc tối ưu hoá phông chữ web, bạn nên biết cách trình duyệt tìm thấy phông chữ đó, nhờ đó, bạn có thể hiểu cách CSS ngăn chặn việc 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ữ 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 phần khai báo @font-face:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
Đoạn mã trên xác định font-family có tên là "Open Sans" và cho trình duyệt biết vị trí cần tìm tài nguyên phông chữ web tương ứng. Để tiết kiệm băng thông, trình duyệt sẽ không tải phông chữ web xuống cho đến khi xác định rằng bố cục của trang hiện tại cần phông chữ đó.
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 xác định trong một biểu định kiểu bên ngoài, thì
trình duyệt chỉ có thể bắt đầu tải các biểu định kiểu đó xuống sau khi tải biểu định kiểu xuống.
Điều này khiến phông chữ web phát hiện muộn, nhưng có một số cách giúp trình duyệt phát hiện phông chữ web sớm hơn.
Bạn có thể bắt đầu 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 lệnh preload. Lệnh preload giúp phông chữ trên web xuất hiện sớm trong quá trình tải trang và trình duyệt sẽ bắt đầu tải các phông chữ đó xuống ngay lập tức mà không cần đợi biểu định kiểu tải xuống và phân tích cú pháp xong. Lệnh preload không đợi cho đến khi cần có 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 các phông chữ có thể phát hiện sớm hơn trong quá trình tải trang bằng cách cùng dòng
CSS chặn hiển thị (bao gồm cả các nội dung khai báo @font-face) — trong <head> của
HTML của bạn 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 phông chữ trên web sớm hơn trong quá trình tải trang vì không cần đợi biểu định kiểu bên ngoài tải xuống.
Việc chèn cùng dòng nội dung khai báo @font-face có lợi thế hơn so với việc sử dụng gợi ý preload, vì trình duyệt chỉ tải phông chữ cần thiết xuống để hiển thị trang hiện tại. Điều này giúp loại bỏ nguy cơ tải xuống phông chữ không sử dụng.
Tải xuống
Sau khi khám phá phông chữ trên web và đảm bảo bố cục của trang hiện tại cần thiết, trình duyệt có thể tải các phông chữ đó xuống. Số lượng phông chữ trên web, phương thức mã hoá và kích thước tệp có thể ảnh hưởng đáng kể đến tốc độ tải xuống và hiển thị của trình duyệt phông chữ trên web.
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ể được tự lưu trữ trên nguồn gốc của bạn. Khi 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 thì mới có thể bắt đầu tải phông chữ web cần thiết xuống. Việc này có thể trì hoãn việc khám phá và tải phông chữ trên web xuống về sau.
Bạn có thể giảm mức hao tổn này bằng cách sử dụng gợi ý về 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 tới nhiều nguồn gốc sớm hơn so với cách trình duyệt thông thường:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Đoạn mã HTML ở trên gợi ý để trình duyệt thiết lập kết nối với fonts.googleapis.com và kết nối CORS với fonts.gstatic.com. Một số nhà cung cấp phông chữ (chẳng hạn như Google Fonts) phân phát tài nguyên CSS và phông chữ từ nhiều nguồn gốc.
Bạn có thể loại bỏ nhu cầu 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ữ web tự lưu trữ sẽ nhanh hơn so với việc tải xuống từ nhiều nguồn gốc. Nếu bạn lên kế hoạch sử dụng phông chữ web tự lưu trữ, hãy kiểm tra để đảm bảo rằng 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 tiêu đề lưu vào bộ nhớ đệm chính xác cho các phông chữ trên 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 trình duyệt và 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 thời gian tải xuống nhanh hơn. Định dạng WOFF2 thường là định dạng duy nhất cần thiết để có khả năng tương thích đầy đủ trên các trình duyệt hiện đại.
Đặt phụ phông chữ web
Phông chữ web thường bao gồm nhiều ký tự cần thiết để thể hiện nhiều loại ký tự được sử dụng trong các ngôn ngữ khác nhau. Nếu trang của bạn chỉ phân phát nội dung bằng một ngôn ngữ (hoặc sử dụng một bảng chữ cái), thì bạn có thể giảm kích thước phông chữ trên web thông qua chế độ cài đặt phụ. Bạn thường thực hiện việc này bằng cách chỉ định một số hoặc một dải các điểm mã Unicode.
Một tập hợp con là một tập hợp các ký tự rút gọn được đưa vào tệp phông chữ web ban đầu. 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ố 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 bằng cách sử dụng tham số chuỗi truy vấn. Ví dụ: URL https://fonts.googleapis.com/css?family=Roboto&subset=latin phân phát một trang tính kiểu có 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, thì bước tiếp theo là tự tạo và lưu trữ các tập hợp con đó bằng các công cụ như glyphanger 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ể đặt con cho các phông chữ web do Google Fonts cung cấp bằng cách chỉ định thêm một tham số chuỗi truy vấn text chỉ chứa các điểm mã unicode cần thiết cho trang web của bạn. Ví dụ: nếu có phông chữ hiển thị trên web chỉ cần một số ít ký tự 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ể làm giảm đáng kể lượng dữ liệu phông chữ trên web cần thiết cho một kiểu chữ trên trang web nếu chế độ cài đặt phụ quá mức 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 tìm thấy và tải phông chữ web xuống, bạn có thể kết xuất phông chữ đó. Theo mặc định, trình duyệt chặn hiển thị mọi văn bản sử dụng phông chữ trên web cho đến khi văn bản đó được tải xuống. Bạn có thể điều chỉnh hành vi hiển thị văn bản của trình duyệt và định cấu hình văn bản sẽ được hiển thị hoặc không được hiển thị cho đến khi phông chữ web được tải đầy đủ bằng cách sử dụng thuộc tính CSS font-display.
block
Giá trị mặc định của font-display là block. Với block, trình duyệt sẽ chặn hiển thị mọi văn bản sử dụng phông chữ trên web đã chỉ định. Các trình duyệt khác nhau sẽ hoạt động hơi khác nhau. Chromium và Firefox chặn kết xuất trong tối đa 3 giây trước khi sử dụng tính năng dự phòng. Safari chặn vô thời hạn cho đến khi phông chữ trên web tải xong.
swap
swap là giá trị font-display được sử dụng rộng rãi nhất. swap không chặn
quá trình hiển thị và hiển thị văn bản ngay lập tức trong mục dự phòng trước khi hoán đổi bằng
phông chữ trên web được chỉ định. Điều này cho phép bạn hiển thị nội dung của mình 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à gây ra sự thay đổi bố cục nếu phông chữ dự phòng trên web và phông chữ web được chỉ định trong CSS thay đổi đáng kể về chiều cao dòng, khoảng cách và các chỉ số khác về phông chữ. Điều này có thể ảnh hưởng đến CLS của trang web nếu bạn không chú ý sử dụng gợi ý preload để tải tài nguyên phông chữ trên web càng sớm càng tốt, 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ự kết hợp giữa block và swap. Không giống như swap, trình duyệt chặn hiển thị phông chữ, nhưng chỉ hoán đổi văn bản dự phòng trong một khoảng thời gian rất ngắn. Tuy nhiên, không giống như block, khoảng thời gian chặn là 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 tải xuống nhanh thì phông chữ trên web là kiểu chữ được sử dụng ngay trong quá trình kết xuất ban đầu của trang. Tuy nhiên, nếu mạng chậm, thì trước tiên, văn bản dự phòng sẽ được nhìn thấy sau khi thời gian chặn kết thúc, sau đó sẽ được 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 tài nguyên phông chữ web nếu giá trị này tải xuống trong vòng 100 mili giây. Nếu phông chữ web mất nhiều thời gian hơn để tải, thì phông chữ đó sẽ không được dùng trên trang và trình duyệt sẽ sử dụng kiểu chữ dự phòng cho thao tác hiện tại, trong khi phông chữ web được tải xuống trong nền và đặt vào bộ nhớ đệm của trình duyệt.
Do đó, 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ì phông chữ đó đã được tải xuống. font-display: optional tránh được sự thay đổi bố cục mà swap nhìn thấy, nhưng một số người dùng sẽ không thấy phông chữ trên web nếu phông chữ này đến quá muộn trong lần điều hướng trang ban đầu.
Bản demo phông chữ
Kiểm tra kiến thức
Khi nào trình duyệt tải tài nguyên phông chữ trên web xuống (giả sử trình duyệt không được tìm nạp bằng lệnh preload)?
Đâu là định dạng duy nhất (và hiệu quả nhất) cần thiết để phân phát phông chữ web cho mọi trình duyệt hiện đại?
Tiếp theo: JavaScript phân tách mã
Với sự hiểu biết về tính năng tối ưu hoá phông chữ, giờ bạn có thể chuyển sang mô-đun tiếp theo bao gồm một chủ đề có nhiều tiềm năng cải thiện tốc độ tải trang ban đầu cho người dùng, và đó là trì hoãn việc tải JavaScript thông qua tính năng chia tách mã. Nhờ đó, bạn có thể duy trì băng thông và tranh chấp CPU ở mức thấp nhất có thể trong giai đoạn khởi động trang – khoảng thời gian mà người dùng có nhiều khả năng tương tác với trang.