Trong các mô-đun trước, bạn đã học 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 pháp để tối ưu hoá phông chữ trên web.
Phông chữ trên web có thể ảnh hưởng đến hiệu suất trang trong cả thời gian tải và thời gian hiển thị.
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 bố cục không mong muốn, góp phần làm tăng Điểm số tổng hợp về mức thay đổi bố cục (CLS) của một trang.
Trước khi thảo luận về cách tối ưu hoá phông chữ trên web, bạn nên biết cách trình duyệt phát hiện phông chữ trên web. Nhờ đó, bạn có thể hiểu cách CSS ngă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.
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 một 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 nơi 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 một phần tử <h1> trong HTML của trang.
preload
Nếu các 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 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ữ trên 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ữ trên web sớm hơn.
Bạn có thể bắt đầu yêu cầu sớm đối với các tài nguyên phông chữ trên web bằng cách sử dụng chỉ thị preload. Chỉ thị preload giúp các phông chữ trên web có thể phát hiện được từ 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ữ này 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. Chỉ thị preload không đợi cho đến khi phông chữ cần thiết 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>
Khai báo @font-face cùng dòng
Bạn có thể giúp người dùng khám phá phông chữ sớm hơn trong quá trình tải trang bằng cách nội tuyến CSS chặn hiển thị (bao gồm cả cá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 các phông chữ trên web sớm hơn trong quá trình tải trang, vì trình duyệt không cần đợi tải biểu định kiểu bên ngoài xuống.
Việc khai báo @font-face nội tuyến 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 những phông chữ cần thiết để hiển thị 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 các phông chữ trên web và đảm bảo rằng bố cục của trang hiện tại cần các phông chữ đó, trình duyệt có thể tải các phông chữ đó xuống. Số lượng phông chữ trên web, cách mã hoá và kích thước tệp của các phông chữ này có thể ảnh hưởng đáng kể đến tốc độ tải xuống và hiển thị phông chữ trên web của trình duyệt.
Tự lưu trữ phông chữ 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ở một 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 khám phá và tải các phông chữ trên web xuống 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ở 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 ý cho 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 CSS và tài nguyên phông chữ từ nhiều nguồn.
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, việc tự lưu trữ phông chữ trên web sẽ nhanh hơn so với việc tải phông chữ xuống từ một nguồn gốc chéo. Nếu bạn dự định tự lưu trữ phông chữ 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 tiêu đề lưu vào bộ nhớ đệm chính xác cho phông chữ trên 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ó khả năng nén tốt nhất – tốt hơn WOFF đến 30%. Kích thước tệp giảm giúp giảm thời gian tải xuống. Đị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 hoàn toàn trên các trình duyệt hiện đại.
Tạo tập hợp con cho phông chữ trên web
Phông chữ trên web thường có nhiều ký tự hình khác nhau. Đây là những ký tự cần thiết để biểu thị nhiều loại ký tự được 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 duy nhất, thì bạn có thể giảm kích thước của phông chữ trên 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 dải điểm mã unicode.
Tập hợp con là một tập hợp rút gọn gồm các glyph có trong tệp phông chữ gốc trên web. Ví dụ: thay vì phân phát tất cả các glyph, 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á các glyph 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ữ 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 một tham số chuỗi truy vấn. Ví dụ: URL https://fonts.googleapis.com/css?family=Roboto&subset=latin cung cấp 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ữ trên web, 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 một tham số chuỗi truy vấn text bổ sung 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ó một phông chữ hiển thị trên trang web của mình mà chỉ cần một số ít ký 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 bằng 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ữ duy nhất trên trang web của bạn, nếu việc chia nhỏ đến mức tối đa 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 một phông chữ trên web xuống, trình duyệt có thể hiển thị phông chữ đó. Theo mặc định, trình duyệt sẽ chặn việc hiển thị mọi văn bản sử dụng phông chữ trên web cho đến khi phông chữ đó đượ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ẽ xuất hiện (hoặc không xuất hiện) cho đến khi phông chữ web tải xong bằng cách sử dụng thuộc tính font-display CSS.
block
Giá trị mặc định của font-display là block. Với block, trình duyệt sẽ chặn việc hiển thị 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 quá trình kết xuất tối đa 3 giây trước khi sử dụng phương án dự phòng. Safari chặn 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 quá trình kết xuất và hiển thị ngay văn bản trong một phương án dự phòng trước khi hoán đổi 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 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 chữ dự phòng và phông chữ trên web được chỉ định trong CSS của bạn có sự khác biệt lớn về chiều cao dòng, khoảng cách giữa các chữ cái 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 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à một sự thoả hiệp giữa block và swap. Không giống như swap, trình duyệt chặn việc hiển thị một 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, thời gian chặn cực kỳ ngắn.
Việc sử dụng giá trị fallback có thể hoạt động hiệu quả 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 trong quá trình hiển thị ban đầu của trang. Tuy nhiên, nếu mạng chậm, văn bản dự phòng sẽ xuất hiện trước sau khi hết thời gian chặn, sau đó được thay thế khi phông chữ trên 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ữ trên web nếu tài nguyên này tải xuống trong vòng 100 mili giây. Nếu một phông chữ trên 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ẽ 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 ở chế độ nền và được đặt trong bộ nhớ đệm của trình duyệt.
Do đó, các hoạt động di chuyển trang tiếp theo có thể sử dụng ngay phông chữ trên web vì phông chữ này đã được tải xuống. font-display: optional tránh được sự thay đổi bố cục như khi dùng swap, nhưng một số người dùng không thấy phông chữ trên 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 một 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 chỉ thị 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ả các trình duyệt hiện đại là gì?
Tiếp theo: Phân chia mã JavaScript
Sau khi nắm được cách tối ưu hoá phông chữ, giờ đây, bạn có thể chuyển sang mô-đun tiếp theo. Mô-đun này đề cập đến một chủ đề có khả năng cao giúp cải thiện tốc độ tải trang ban đầu cho người dùng, đó là hoãn tải JavaScript thông qua tính năng phân chia mã. Bằng cách này, 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 một trang, một khoảng thời gian mà người dùng có nhiều khả năng tương tác với trang đó.