Đúng vậy, có một số nhà thiết kế/lập trình viên lười biếng và họ thêm mọi font họ có thể để làm website trông đẹp hơn.
Nhưng về hiệu suất, tốc độ thì sao nào?
Giống như các tối ưu khác, font cần ưu tiên cao vì văn bản có lẽ là thứ đầu tiên người dùng có khả năng nhìn thấy trên website.
Hướng dẫn này sẽ cho bạn biết các phương thức khác nhau để tối ưu hóa Google Fonts, đặc biệt là cho WordPress.
Sử dụng font hệ thống để thay thế
Bạn có để ý là font của trang medium.com, WordPress admin, GitHub tải rất nhanh không?
Vâng, tất cả họ đều sử dụng font hệ thống (system fonts- còn gọi là font an toàn).
/* GitHub sử dụng font hệ thống */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}/* Medium và WordPress sử dụng font hệ thống */
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}Font hệ thống là font đã được cài đặt trước trong mọi hệ điều hành (OS). Trình duyệt của bạn không cần tạo thêm các yêu cầu HTTP để tải stylesheets hoặc file font về.
Vâng, không có yêu cầu (request) nào hết!
Đúng là với cách làm này bạn sẽ không có nhiều lựa chọn khi thiết kế, nhưng nếu bạn muốn có hiệu suất, tốc độ tốt nhất, hãy chọn nó!
PS: Nhiều trang báo có lưu lượng truy cập lớn ở Việt Nam như vnexpress, 24h, kenh14 dùng font hệ thống (bổ sung thêm của người dịch).
Giới hạn font families & weights (độ đậm nhạt)
Có vài biện pháp tối ưu hóa khác mà tôi đề cập bên dưới. Nhưng giới hạn số font family (kiểu font) là một trong các cách quan trọng nhất. Lý tưởng nhất, bạn không nên có nhiều hơn 2 (tối đa là 3) font family.
Tương tự như vậy, mỗi font có weight (độ đậm nhạt) khác nhau. Nó bắt đầu từ 100 cho đến 900 (số càng to thì càng đậm). Mỗi weight được thêm vào sẽ cần thêm một font file tải về. Vì thế bạn cũng cần giới hạn cả số lượng font weight nữa.
Nếu bạn trực tiếp nhúng font từ Google Fonts, bạn có thể lựa chọn các weight khác nhau giống như thế này (bạn “select this style” thêm vài cái và chuyển sang tab embed):
Dưới đây là ví dụ về việc lựa chọn font family và weight trong Oxygen:
Sử dụng font chữ biến đổi (dạng mới!)
Như tôi đề cập ở phần trên, với mỗi font-weight, trình duyệt cần tải về từng file font riêng rẽ. Vì thế nếu bạn có hai weight 400 và 700, thì sẽ phải tải về hai file font.
Nhưng với font biến đổi (variables fonts), tự bản thân một font đó có khả năng chuyển sang bất kỳ font weight nào.
Dưới đây là demo (bạn hãy thử kéo thành trượt để thay đổi font-weight, để 0.5x đễ dễ nhìn thấy hiệu ứng hơn):
See the Pen Variable font demo by Frida Nyvall (@fridanyvall) on CodePen.
Bạn có thể tham khảo thêm về font biến đổi tại bài viết: https://web.dev/variable-fonts/.
Trên Google Fonts, bạn lọc các font biến đổi bằng cách check vào tùy chọn bên dưới:
PS: khi người dịch tra cứu, tôi nhận thấy có khoảng hơn 30 font biến đổi hỗ trợ tiếng Việt.
Để bạn hiểu rõ hơn, tôi lập bảng cho thấy sự khác biệt giữa font biến đổi và kiểu font-weight thông thường tính theo dung lượng tải về:
| Font family, weight(s) | Font size thông thường | Font size biến đổi |
|---|---|---|
| Roboto, 400 | 16 KB | 20 KB |
| Roboto, 400 + 700 | 30 KB | 35 KB |
| Roboto, 400 + 700 + 900 | 43 KB | 35 KB |
| Roboto, 300 + 400 + 700 + 900 | 57 KB | 35 KB |
| Roboto, 100 + 300 + 400 + 700 + 900 | 59 KB | 35 KB |
Dưới đây là mẫu của font biến đổi với weight thay đổi từ 100 đến 900:
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap" rel="stylesheet" />Kết hợp Google fonts
Kết hợp (combine) Google Fonts sẽ giúp làm giảm số lượng yêu cầu HTTP- Tuy rằng số lượng yêu cầu http đã ít ảnh hưởng đến hiệu suất nhờ công nghệ http/2, nhưng giảm số lượng kết nối vẫn là thực hành tốt mà bạn cần xem xét.
Trước khi kết hợp (hai kết nối):
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">Sau khi kết hợp (một kết nối):
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap" rel="stylesheet">Nếu bạn đang dùng WP Rocket, bật tính năng “Optimize Google Fonts” và họ sẽ lo phần tối ưu hóa này.
Sửa lỗi văn bản ẩn chớp nháy- xuất hiện đột ngột (FOIT)
Nếu bạn phân tích trang web bằng Google PageSpeed Insights, bạn có thể thấy lỗi này “Đảm bảo văn bản vẫn hiển thị trong khi tải webfont về“.
Cái này tùy thuộc vào thuộc tính font-display– thuộc tính CSS này nói cho trình duyệt biết có nên sử dụng font dự phòng (fallback) trong khi tải font web không, hay là ẩn nó đi hoàn toàn.
Nếu người dùng đang trên kết nối internet chậm và bạn không bật dự phòng, họ có thể phải đợi khá lâu mới thấy được văn bản, cái này được gọi là Văn bản ẩn chớp nháy/xuất hiện đột ngột (Flash of Invisible Text / FOIT).
Trong Google Fonts, chỉ cần thêm “&display=swap” vào cuối URL là bạn sẽ sửa được lỗi này.
Trước khi thêm swap:
<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">Sau khi thêm swap:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">WP Rocket có thể sửa lỗi này tự động. Tôi (Gijo) cũng phát triển một plugin độc lập để khắc phục FOIT: Swap Google Fonts Display.
Tải Google Fonts theo kiểu không đồng bộ (asynchronously)
Trình duyệt có nên đợi CSS và file font tải về đầy đủ rồi mới kết xuất trang (render)? Quan điểm của tôi là Google Fonts không nên chặn hiển thị (render-blocking) và chúng ta có thể khắc phục hiện tượng này bằng cách sử dụng font dự phòng trong lúc chờ font web tải về.
Hãy để Google Fonts tải theo cách không đồng bộ. Để làm như vậy bạn hãy thêm đoạn mã sau vào phần <head>:
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" as="style" onload="this.rel='stylesheet'">Nó nói với trình duyệt rằng hãy preload Google Font ở chế độ nền (không chặn hiển thị) và sử dụng nó khi stylesheet đã sẵn sàng.
Nếu bạn đang dùng plugin LiteSpeed cache, thì tùy chọn đó nằm ở phần: Page Optimization > Optimization Settings
Nội tuyến Google Fonts
Có nhiều định dạng fonts khác nhau, chẳng hạn như ttf, otf, woff, woff2, vân vân. Google Fonts CDN khá thông minh khi phân phối các kiểu font khác nhau dựa trên thiết bị của người dùng.
Nhưng nếu bạn chỉ cần hiển thị font cho các trình duyệt hiện đại, thay vì liên kết đến stylesheet, bạn có thể trực tiếp nội tuyến (inline) CSS.
Định dạng font mới nhất woff2 được hầu hết trình duyệt hỗ trợ (ngoại trừ IE và Opera Mini). Nó sẽ giúp bạn có được kích cỡ font nhỏ nhất.
Trước đó:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">Sau đó (chưa minify):
<style>
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
....
</style>Với cách này, trình duyệt có thể giảm vòng lặp HTTP và tải font ngay lập tức.
Bổ sung các gợi ý tài nguyên
Nếu bạn soi kỹ CSS của Google Fonts, bạn sẽ thấy nó được tải từ “https://fonts.googleapis.com”. Tuy nhiên sau khi tải CSS, từng font sẽ được tải từ “https://fonts.gstatic.com”.
Trình duyệt cần thực hiện tìm kiếm DNS khác sau khi tải stylesheet. Điều này có thể làm tăng trì hoãn- dù nhỏ.
Bằng cách thêm gợi ý tài nguyên, chúng ta nói với trình duyệt rằng “Tôi sẽ sớm kết nối tới URL này, vì vậy bạn cần chuẩn bị nó ngay nhé”.
Và thêm dòng sau vào <head>:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />Hoặc bạn có thể dùng plugin Pre* Party Resource Hints:
PS: Bạn có thể tìm hiểu nhanh các mã mẫu dns-prefetch, preconnect và preload ở đây.
Tự host Google Fonts
Nhưng tại sao bạn lại phải tự host cơ chứ? Chẳng phải Google Fonts được phân phối trên nền tảng CDN siêu nhanh và nó có thể được cache bởi trình duyệt hay sao?!
Nguyên nhân là vì các vấn đề sau:
- Thời gian cache trình duyệt với CSS của font thỉ có 24 tiếng, đối với file font thì sẽ tốt hơn nếu nó được cache một năm.
- Mặc dù font được phân phối qua CDN chất lượng cao của Google, nó vẫn cần đến hai tìm kiếm DNS bổ sung và nhiều yêu cầu HTTP.
- Các trình duyệt đã bắt đầu triển khai caching kiểu double-key. Điều đó có nghĩa là nếu website A tải font và cache nó, nó sẽ không khả dụng cho website B. Safari đã triển khai tính năng này. Chrome cũng rục rịch rồi. Bạn có thể tìm hiểu thêm về thông tin này ở đây.
- Tự host có thể được tận dụng bởi các kết nối trước đó (http/2).
Vì thế, tốt hơn là bạn tự host Google Fonts!
Làm thế nào bạn tự host được Google Fonts trong WordPress
Plugin Flying Press mà tôi (tác giả gốc của bài tiếng Anh- Gijo Varghese) đang phát triển sẽ có khả năng tự host Google Fonts chỉ trong một click.
Plugin OMGF cũng có thể tự host Google Fonts, nhưng tôi thấy nó khó dùng. Chúng ta phải tìm kiếm thủ công font hoặc sử dụng auto-detect bằng cách mở các trang.
Kết luận
Trong thế web tổng thể, Google Fonts thống trị bởi tỷ lệ dùng lên đến 75%. Họ đã rất nỗ lực để tối ưu hóa chúng. Nhưng điều đó không có nghĩa là bạn không còn cơ hội tối ưu nào nữa.
Nhiều tối ưu hóa có thể thực hiện dễ dàng bằng cách cài WP Rocket, chẳng hạn như preloading, fallback font, kết hợp, tải theo kiểu không đồng bộ, vân vân. Nhưng không plugin nào có thể tối ưu các lựa chọn thiết kế của bạn.
Thêm các font mà bạn thực sự cần, lọc các font weights không cần thiết và nếu có thể hãy tự host chúng.
(Dịch từ bài viết A-Z of Google Fonts Optimization in WordPress, tác giả: Gijo Varghese, Website: WPSpeedMatters)