Hướng dẫn lưu trữ Google Fonts ngay trên host để tăng tốc độ load cho website WordPress.
Trong bài viết lần trước, tôi đã hướng dẫn cách bạn cách để loại bỏ hoặc tải không đồng bộ Google Fonts nhằm tăng tốc độ load web rồi phải không nào? Mặc dù việc tải không đồng bộ (async) có thể giúp khắc phục lỗi chặn hiển thị trên Google PageSpeed Insights. Tuy nhiên, trên thực tế, nó vẫn được tải từ ngoài host và ảnh hưởng không nhỏ đến tốc độ load tổng thể của site do font không được cache và nén, đặc biệt là khi host của bạn đặt ở trong nước còn server Google đặt ở nước ngoài.
Tham khảo thêm:
- Khắc phục lỗi cache của Google Analytics một cách đơn giản
- Khắc phục lỗi Google Fonts trong Google PageSpeed Insights
Nếu bạn vẫn kiên quyết “không chịu từ bỏ” Google Fonts thì ngay sau đây là giải pháp tốt nhất giúp bạn thỏa mãn tâm nguyện. Chúng ta sẽ lưu trữ Google Fonts ngay trên host của bạn để tiện cho việc cache, nén cũng như tránh việc bị ảnh hưởng khi có sự cố… đứt cáp quang.
Xác định thông tin của Google Fonts
Xem mã nguồn website của bạn hoặc sử dụng các công cụ kiểm tra tốc độ load như Google PageSpeed Insights hoặc GTmetrix, bạn sẽ nhanh chóng tìm ra Google Fonts được dùng trên web:
Trong ví dụ ở trên, web của tôi sử dụng font Nunito và font Kameron với các style regular, 300 và 700 với charset latin (nhìn vào cấu trúc link hoặc truy cập trực tiếp vào link font để xem thông tin). Ngay sau đây là hướng dẫn dể lưu trữ font Nunito trên host. Đối với các Google Fonts khác, các bạn cũng có thể làm theo cách hoàn toàn tương tự.
Lưu trữ Google Fonts ngay trên host
Có 2 cách khác nhau để làm điều này. Chúng tôi khuyên dùng plugin vì nó đơn giản và nhanh chóng hơn.
Lưu trữ Google Fonts bằng plugin
1. Tất cả những gì các bạn cần làm là cài đặt và kích hoạt một plugin có tên là Local Google Fonts (download).
2. Sau đó, truy cập Settings => Google Fonts => click vào nút Host locally.
3. Nếu thành công, các bạn sẽ nhận được Status là: loaded, served from your sever.
4. Sử dụng các công cụ như Google PageSpeed Insights, GTmetrix hoặc xem mã nguồn website để kiểm tra và xác nhận các vấn đề liên quan đến Google Fonts đã được xử lý:
Lưu trữ Google Fonts bằng phương pháp thủ công
1. Đầu tiên, truy cập vào website Google Webfonts Helper. Nhập từ khóa tìm kiếm ở trên khung bên trái giao diện. Click vào kết quả tìm kiếm mà bạn mong muốn.
2. Trong mục Select charsets, hãy tick vào loại charset mà bạn muốn sử dụng:
3. Trong mục Select styles, hãy tick vào các style mà bạn muốn sử dụng. Ví dụ ở đây tôi chọn 300, 700 và regular.
4. Trong mục Copy CSS, hãy copy toàn bộ nội dung được cung cấp. Có 2 tùy chọn khác nhau:
- Best Support: là code hỗ trợ tất cả các trình duyệt, kể cả mới lẫn cũ. Các bạn nạn nên chọn loại code này.
- Modern Browsers: là code chỉ hỗ trợ các trình duyệt mới.
Các bạn cũng có thể tùy biến tên thư mục lưu trữ fonts bằng cách chỉnh sửa nội dung trong mục Customize folder prefix. Nếu không, hãy giữ nguyên như mặc định.
5. Download files chứa mã nguồn font về máy tính của bạn.
6. Sử dụng File Manager của cPanel/ DirectAdmin hoặc phần mềm FTP để truy cập vào thư mục cài đặt WordPress, tạo 1 thư mục có tên là fonts, nằm ngang hàng với các thư mục như wp-content, wp-admin… Upload và giải nén file Google Fonts vừa download ở bước 5 vào trong đó.
7. Paste đoạn code CSS mà bạn đã copy ở bước 4 vào trong Appearance => Customize => Additional CSS hoặc sử dụng tính năng Custom CSS (nếu theme của bạn có hỗ trợ).
8. Sử dụng plugin Disable Google Fonts (download), Flying Fonts by WP Speed Matters (download) hoặc tính năng Remove Google Fonts (nằm trong tab LiteSpeed Cache => Page Optimization => [3] Optimization) của plugin LiteSpeed Cache để loại bỏ code Google Fonts cũ.
Nếu bạn đang sử dụng plugin Autoptimize thì có một tính năng tương tự nằm trong Settings => Autoptimize => Extra => Google Fonts => Remove Google Fonts.
Xóa cache trình duyệt, cache web (nếu bạn có cài đặt plugin tạo cache) và kiểm tra thành quả. Thật đơn giản phải không nào? Chúc các bạn thành công!
Bạn có đang sử dụng Google Fonts trên website WordPress của mình không? Bạn đã làm cách nào để tối ưu chúng? Đừng quên chia sẻ với chúng tôi những kinh nghiệm và thủ thuật của bạn trong khung bình luận bên dưới.
Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)
Sau khi vào tab Tuning trên LiteSpeed Cache và bật ON Remove Google Fonts thì nó thông báo cái lỗi: “ERROR 3030: Can not fetch Custom Sitemap” cho hỏi là lỗi này có quan trọng không nhĩ?
À cho hỏi thêm trong tab Tuning đó ở dòng “Load Google Fonts Asynchronously” thì mình có nên bật ON không?
Không ảnh hưởng gì bạn nhé. Đã remove rồi thì async có tác dụng gì nữa. Tùy chọn 1 trong 2 thôi. Để async ở trạng thái
OFF.Alo,cho hỏi làm sao thêm “Thông báo cho tôi bằng email khi có bài đăng mới” như ở dưới phần bình luận của ông vậy nhĩ?
Cái này là module Subscription của plugin Jetpack nhé.
Cài plugin đó vô là được hả?
Cài đặt => kích hoạt plugin => kết nối plugin với tài khoản Jetpack => Vào Jetpack => Settings => Discussion => Subscriptions => Chuyển các mục “Allow users to subscribe to your posts and comments and receive notifications via email” và “Show a “follow blog” option in the comment form” sang trạng thái “ON”.
Cảm ơn bác nhiều, như vậy từ nay khỏi lo vụ google fonts nữa rồi
Chào anh, không biết sao site em khi chỉnh sửa tệp trong wordpress nó báo lỗi này ftp_mkdir(): /public_html/wp-content/temp: Read-only file system
Còn upload ảnh lên thì nó báo lỗi “Thiếu thư mục tạm thời”
Bạn chạy VPS hay shared host?
Thay trực tiếp font cũng được mà nhỉ
Thay font trực tiếp là sao bạn? :P
Yeah. Cuối cùng đã tìm được. Hôm mấy hỏi trên blog NamNgo nhưng chưa nhận được câu trả lời. Nay đi lòng vòng blog của anh không ngờ tìm được bài viết này. :)))
Nói về khoản tối ưu tốc độ load cho WordPress thì phải tìm trên wpcanban.com mới là đúng địa chỉ. :D
Cái này e công nhận :))) LOL
Cảm ơn anh Hiếu, bài viết chia sẻ rất chi tiết cụ thể ạ. Đủ bước, em xem phát làm được ngay, mặc dù em chẳng biết gì về code cả.
PS: áp dụng với web khác không phải web ở trang này đâu ạ :)
Sao mình không tìm thấy fonts Droid+Sans trên Google Fonts nhỉ ?
Thư viện kia nó không hỗ trợ font Droid Sans thì chịu thôi. Bạn thử download font từ nguồn khác và làm theo hướng dẫn tương tự trong bài viết xem sao. :P
Vote nhiệt liệt cho bài viết
Kỹ càng và chi tiết lắm Hiếu ơi.
Thank cậu nhé.
Đề nghị vote 5 sao. :D
Hế lô thím :V Lấy vợ xong thấy trả bài cho độc giả liên tục nha :V
Chà. Lâu rồi mới thấy chú comment trên blog của anh. Dạo này vẫn khỏe chứ? Chú không thích anh đăng bài thường xuyên à? :P Lấy vợ xong tinh lực dồi dào nên ra hơi nhiều. :3