Trong các học phần trước, bạn đã học cách tối ưu hoá tài nguyên 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á phông chữ web.
Phông chữ web có thể ảnh hưởng đến hiệu suất của trang ở cả thời gian tải và thời gian kết xuất.
Các tệp phông chữ lớn có thể mất một khoảng 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 các thay đổi không mong muốn về kết xuất hình ảnh.
Trước khi thảo luận về cách tối ưu hoá phông chữ web, bạn nên biết cách trình duyệt phát hiện phông chữ web để có thể hiểu cách CSS ngăn việc truy xuất các phông chữ web không cần thiết trong một số trường hợp.
Chiến dịch Khám phá
Phông chữ web của một trang được xác định trong biểu định kiểu bằng cách sử dụng nội dung khai báo @font-face:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
Đoạn mã trước đó xác định một font-family có tên là "Open Sans" và
cho trình duyệt biết vị trí 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 được 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 nội dung khai báo đó xuống sau khi đã tải biểu định kiểu xuống.
Điều này khiến phông chữ web trở thành tài nguyên được phát hiện muộn, nhưng có những 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 yêu cầu sớm đối với tài nguyên phông chữ web bằng cách sử dụng lệnh preload. Lệnh preload giúp phát hiện sớm phông chữ web trong quá trình tải trang và trình duyệt sẽ bắt đầu tải 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 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 nội tuyến
Bạn có thể giúp phát hiện phông chữ sớm hơn trong quá trình tải trang bằng cách đưa
CSS chặn kết xuất (bao gồm cả nội dung khai báo @font-face) vào <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 phông chữ 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 đưa nội dung khai báo @font-face vào dòng 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 xuống các phông chữ cần thiết để kết xuất trang hiện tại. Điều này giúp loại bỏ nguy cơ tải xuống các phông chữ không dùng đến.
Tải xuống
Sau khi phát hiện phông chữ web và đảm bảo rằng bố cục của trang hiện tại cần phông chữ đó, trình duyệt có thể tải phông chữ đó xuống. Số lượng phông chữ web, cách mã hoá và kích thước tệp có thể ảnh hưởng đáng kể đến tốc độ tải xuống và kết xuất phông chữ web của trình duyệt.
Tự lưu trữ phông chữ web
Phông chữ 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 đến miền của nhà cung cấp trước khi có thể bắt đầu tải các phông chữ web cần thiết xuống. Điều này có thể làm chậm quá trình phát hiện và tải phông chữ web xuống sau đó.
Bạn có thể giảm chi phí 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ở kết nối đến nguồn gốc chéo sớm hơn bình 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 ý trình duyệt thiết lập kết nối đến
fonts.googleapis.com và kết nối CORS đến 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ừ các nguồn gốc khác nhau.
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ữ web. Trong hầu hết các trường hợp, việc tự lưu trữ phông chữ web sẽ nhanh hơn so với việc tải phông chữ đó xuống từ nguồn gốc chéo. Nếu bạn dự định tự lưu trữ phông chữ web, 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 đúng tiêu đề lưu vào bộ nhớ đệm cho các phông chữ web mà bạn cần cho trang web của mình.
Chỉ sử dụng WOFF2
WOFF2 được nhiều trình duyệt hỗ trợ và có mức nén tốt nhất (tốt hơn WOFF đến 30% ). 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ạo tập hợp con cho phông chữ web
Phông chữ web thường bao gồm nhiều ký tự tượng hình khác nhau, cần thiết để biểu thị nhiều ký tự được dùng trong nhiều ngôn ngữ. 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ữ web thông qua việc tạo tập hợp con. Việc này thường được thực hiện bằng cách chỉ định một số hoặc một phạm vi điểm mã unicode.
Tập hợp con là một tập hợp giảm của các ký tự tượng hình có trong tệp phông chữ web gốc. Ví dụ: thay vì phân phát tất cả ký tự tượng hình, 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ự Latinh. Tuỳ thuộc vào tập hợp con cần thiết, việc xoá ký tự tượng hình có thể 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ữ web (chẳng hạn như Google Fonts) tự động cung cấp tập hợp con thông qua việc 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
biểu đị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ữ 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ữ web của riêng mình, bạn có thể tạo tập hợp con cho phông chữ web do Google Fonts cung cấp bằng cách chỉ định thêm 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 bạn có một phông chữ web hiển thị trên trang web của mình chỉ
cần một số ký tự cần thiết cho cụm từ "Welcome" (Chào mừng), bạn có thể
yêu cầu tập hợp con đó thông qua Google Fonts thông qua URL sau:
https://fonts.googleapis.com/css?family=Monoton&text=Welcome. Điều này có thể giúp giảm đáng kể lượng dữ liệu phông chữ web cần thiết cho một kiểu chữ trên trang web của bạn, nếu việc tạo tập hợp con cực kỳ nhỏ như vậy có thể hữu ích trên trang web của bạn.
Kết xuất phông chữ
Sau khi phát hiện và tải phông chữ web xuống, trình duyệt có thể kết xuất phông chữ đó. Theo mặc định, trình duyệt sẽ chặn việc kết xuất mọi văn bản sử dụng phông chữ web cho đến khi phông chữ đó được tải xuống. Bạn có thể điều chỉnh hành vi kết xuất văn bản của trình duyệt và định cấu hình văn bản cần hiển thị (hoặc không hiển thị) cho đến khi phông chữ web tải xong 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 việc kết xuất mọi văn bản sử dụng phông chữ web được 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 tối đa 3 giây trước khi sử dụng phông chữ dự phòng. Safari chặn vô thời hạn cho đến khi phông chữ 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 kết xuất và hiển thị văn bản ngay lập tức ở phông chữ dự phòng trước khi chuyển sang phông chữ web được chỉ định. Điều này cho phép bạn hiển thị nội dung ngay lập tức mà không cần đợi phông chữ web tải xuống.
Tuy nhiên, nhược điểm của swap là gây ra sự thay đổi rõ rệt về nội dung nếu phông chữ web dự phòng và phông chữ web được chỉ định trong CSS của bạn khác nhau nhiều về chiều cao dòng, khoảng cách giữa các ký tự và các chỉ số phông chữ khác.
Điều này thường không dẫn đến Mức thay đổi bố cục tích luỹ (CLS) tệ hơn so với
block (vì block yêu cầu bố trí trang giả định phông chữ dự phòng,
ngay cả khi chính văn bản đó không được hiển thị, vì vậy cả hai đều chịu sự thay đổi nội dung
), nhưng có thể gây khó chịu hơn về mặt hình ảnh.
fallback
Giá trị fallback của font-display là một sự thoả hiệp giữa block và swap. Không giống như swap, trình duyệt sẽ chặn kết xuất phông chữ, nhưng chỉ chuyển sang 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, thời gian chặn cực kỳ 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ữ web tải xuống nhanh, thì phông chữ web sẽ là kiểu chữ được sử dụng ngay lập tức trong lần kết xuất ban đầu của trang. Tuy nhiên, nếu mạng chậm, thì văn bản dự phòng sẽ xuất hiện trước sau khi thời gian chặn trôi qua, sau đó sẽ được thay thế khi phông chữ web xuất hiệ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 tài nguyên đó 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 sử dụng trên trang và trình duyệt sẽ sử dụng kiểu chữ dự phòng cho lần chuyển hướng hiện tại trong khi phông chữ web được tải xuống ở chế độ nền và được đặt trong bộ nhớ đệm của trình duyệt.
Do đó, các lần chuyển 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 về hình ảnh khi sử dụng swap, nhưng một số người dùng không thấy phông chữ web nếu phông chữ đó xuất hiện quá muộn trong lầ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 tài nguyên phông chữ web xuống (giả sử tài nguyên đó không được
tìm nạp bằng lệnh preload)?
Đị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 tất cả trình duyệt hiện đại là gì?
Tiếp theo: Phân tách mã JavaScript
Khi đã hiểu rõ về cách tối ưu hoá phông chữ, bạn có thể chuyển sang học phần tiếp theo, trong đó đề cập đến một chủ đề có tiềm năng cao trong việc cải thiện tốc độ tải trang ban đầu cho người dùng, đó là trì hoãn việc tải JavaScript thông qua việc phân tách mã. Bằng cách đó, bạn có thể giữ mức sử dụng băng thông và CPU ở mức thấp nhất có thể trong giai đoạn khởi động của trang, khoảng thời gian mà người dùng rất có thể tương tác với trang đó.