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-display là block. 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
block và swap. 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)?
Đị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?
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.