Tại Sao Tôi Chuyển Từ Google Fonts CDN Sang Tự Lưu Trữ?
Google Fonts có vẻ dễ dàng, nhưng chúng âm thầm làm chậm tốc độ trang của bạn. Trong bài viết này, tôi sẽ chia sẻ lý do và cách tôi tự lưu trữ Google Fonts trên trang WordPress của mình. Kết quả thật bất ngờ: điểm số PageSpeed trên di động của tôi đã tăng từ 66 lên 94.
Mục Lục
- Tại Sao Nên Tự Lưu Trữ Google Fonts?
- Các Bước Kỹ Thuật Để Tự Lưu Trữ
- Kết Quả Cuối Cùng: Một Giao Diện WordPress Nhanh Hơn, Sạch Hơn
- Mẹo Chuyên Nghiệp
- Kết Luận
Tại Sao Nên Tự Lưu Trữ Google Fonts?
Trước khi bạn học cách lưu trữ Google Fonts trên máy chủ của mình, hãy xem qua một số lý do vì sao nên tự lưu trữ:
- Hiệu suất tốt hơn: Sẽ có ít yêu cầu bên ngoài hơn, tức là thời gian tải nhanh hơn.
- Kiểm soát hoàn toàn về Font-display: Không có sự thay đổi bố cục không mong muốn. Fonts tải lên một cách dự đoán được.
- Bảo mật thông tin: Không có cuộc gọi tới máy chủ Google, tuân thủ GDPR.
- Tính nhất quán trong thiết kế: Luôn có phiên bản chính xác. Không có bản cập nhật âm thầm.
Các Bước Kỹ Thuật Để Tự Lưu Trữ
Bước 1: Tải Font từ Google Fonts
Tôi đã chọn Inter và Mulish, cả hai đều có sẵn dưới dạng file font biến từ fonts.google.com, tùy theo yêu cầu dự án của tôi. Tôi tải về các file .ttf đầy đủ (bao gồm các phiên bản nghiêng).
Bước 2: Chuyển Đổi Sang Định Dạng .woff2
Tôi đã sử dụng một công cụ chuyển đổi miễn phí từ .ttf sang .woff2 để chuyển đổi các file .ttf thành .woff2.
Tại sao tôi chọn định dạng .woff2 cho các font của mình?
- Đây là định dạng font web hiện đại nhỏ nhất.
- Nén tốt.
- Hỗ trợ rộng rãi trên các trình duyệt.
Bước 3: Tạo Thư Mục Font Tùy Chỉnh Trong WordPress
Trong cài đặt WordPress của tôi:
/wp-content/fonts/Tôi đã đặt các file sau đây:
- Inter-VariableFont_opsz,wght.woff2
- Inter-Italic-VariableFont_opsz,wght.woff2
- Mulish-VariableFont_wght.woff2
- Mulish-Italic-VariableFont_wght.woff2
Tôi lưu trữ chúng trực tiếp, vì vậy chúng được phục vụ từ máy chủ miền của tôi, không phải của Google.
Bước 4: Đăng Ký Font Với @font-face Trong CSS
Trong file stylesheet chính của chủ đề (style.css), tôi đã thêm:
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/wp-content/fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('/wp-content/fonts/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2');
}
@font-face {
font-family: 'Mulish';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/wp-content/fonts/Mulish-VariableFont_wght.woff2') format('woff2');
}
@font-face {
font-family: 'Mulish';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('/wp-content/fonts/Mulish-Italic-VariableFont_wght.woff2') format('woff2');
}Chú ý đến việc sử dụng:
- font-display: swap để cải thiện hiệu suất.
- Trọng số biến từ 100 đến 900, một file bao phủ tất cả các kiểu dáng.
Bước 5: Định Nghĩa Biến CSS Để Quản Lý Font
Tại cấp độ root của các kiểu của tôi, tôi đã khai báo:
:root {
--font-inter: "Inter", sans-serif;
--font-mulish: "Mulish", sans-serif;
--font-weight-extra-light: 200;
--font-weight-regular: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;
}Điều này giúp dễ dàng thay đổi font hoặc trọng số trên toàn bộ trang web.
Bước 6: Áp Dụng Font Trong CSS Như Một Chuyên Gia
Cài đặt kiểu chữ cơ bản của tôi:
html {
font-optical-sizing: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-mulish);
font-weight: var(--font-weight-regular);
}
h1, h2, h3, h5, h6 {
font-family: var(--font-inter);
font-weight: var(--font-weight-bold);
}
a {
font-family: var(--font-inter);
text-decoration: none;
}Sạch sẽ, nhất quán và dễ quản lý.
Kết Quả Cuối Cùng: Một Giao Diện WordPress Nhanh Hơn, Sạch Hơn
Sau khi tự lưu trữ các font của mình:
- Số yêu cầu font đã giảm từ 4+ xuống 0 yêu cầu bên ngoài.
- CLS (Cumulative Layout Shift) giảm xuống.
- Điểm số PageSpeed Insights cao hơn.
- Kiểu chữ hiện hoàn toàn nằm trong quyền kiểm soát của tôi.
Không cần plugin. Không cần phụ thuộc vào CDN. Chỉ có mã sạch và hiệu suất tốt nhất.
Sau khi thực hiện những thay đổi này, điểm số PageSpeed trên di động của tôi đã tăng từ 66 lên 94, và cho máy tính để bàn, bạn đã biết đó là 100.
Nếu bạn đã thực hiện tối ưu hóa cho di động trước đây, bạn biết rằng đây không phải là một thành tựu nhỏ, đặc biệt là không sử dụng bất kỳ plugin cache/tốc độ nào, đây là một trong những thành tựu lớn. Fonts là một trong những yếu tố lớn nhất gây ra độ trễ trong việc hiển thị, và việc loại bỏ Google CDN ra khỏi phương trình thực sự đã tạo ra sự khác biệt lớn trong hiệu suất.
Mẹo Chuyên Nghiệp
- Phục vụ các file font với tiêu đề phù hợp (woff2 nên là font/woff2).
- Preload các font quan trọng để hiển thị nhanh hơn:
<link rel="preload" href="/wp-content/fonts/Inter-VariableFont_opsz,wght.woff2" as="font" type="font/woff2" crossorigin="anonymous">- Tránh quá nhiều trọng số. Các font biến cho phép bạn tải mọi thứ trong một file.
- Bạn có thể sử dụng cấu hình này gần như với bất kỳ thứ gì, ngay cả khi không phải là WordPress.
Kết Luận
Nếu bạn nghiêm túc về hiệu suất frontend trên WordPress hoặc bất kỳ dự án nào khác, tự lưu trữ Google Fonts thực sự là một điều cần làm.
Đây không chỉ là một mẹo tăng tốc. Đó là về việc sở hữu tài sản của bạn, giảm thiểu phụ thuộc và xây dựng một trải nghiệm người dùng tốt hơn.
Và đúng, điều này rất đơn giản, khi bạn biết mình đang làm gì.
Bạn có muốn thử không? Bỏ qua các plugin. Nắm quyền kiểm soát. Người dùng của bạn (và điểm Core Web Vitals của bạn) sẽ cảm ơn bạn.
