Khắc phục lỗi Google Fonts chặn hiển thị (render-blocking) trong Google PageSpeed Insights.
Google Fonts là một thư viện fonts trực tuyến miễn phí của Google, cung cấp cho người dùng hơn 600 fonts chữ khác nhau để sử dụng trên blog/ website của họ. Không thể phủ nhận được rằng, nhờ có Google Fonts, giao diện của các blog/ website trở nên lộng lẫy, đa dạng và cá tính hơn rất nhiều. Thế nhưng, cái gì cũng có mặt trái của nó. Việc sử dụng Google Fonts sẽ khiến cho blog/ website của bạn load chậm hơn một chút và gặp lỗi chặn hiển thị (render-blocking) khi kiểm tra tốc độ load với Google PageSpeed Insights.
Tham khảo thêm:
- Khắc phục lỗi cache của Google Analytics một cách đơn giản
- Lưu trữ Google Fonts ngay trên host để tăng tốc độ load
Lỗi Google Fonts chặn hiển thị (render-blocking)
Hiện nay, có rất nhiều themes, plugins WordPress tích hợp Google Fonts vào giao diện. Và phần lớn chúng được tích hợp trực tiếp vào header theo cách tương tự như ví dụ bên dưới đây:
Điều này dẫn đến Google Fonts sẽ được load trước phần text (nội dung – là phần được Google PageSpeed Insights yêu cầu phải ưu tiên hiển thị trước) và tất nhiên nó sẽ bị báo lỗi render-blocking.
Khắc phục lỗi Google Fonts chặn hiển thị nội dung
Có 2 cách khác nhau để giải quyết vấn đề này: loại bỏ hoàn toàn Google Fonts hoặc tải không đồng bộ (async) nó.
Loại bỏ Google Fonts
Nếu font chữ không phải là vấn đề quá quan trọng mà ưu tiên hàng đầu là tốc độ load thì bạn nên xem xét loại bỏ Google Fonts. Trong WordPress, bạn có thể làm điều này một cách dễ dàng với sự trợ giúp của plugin Disable Google Fonts hoặc các plugin tối ưu tốc độ load như LiteSpeed Cache hay Autoptimize.
Đối với plugin LiteSpeed Cache, các bạn truy cập LiteSpeed Cache => Settings => Tuning => Remove Google Fonts:
Đối với plugin Autoptimize, các bạn truy cập Settings => Autoptimize =>Extra => Google Fonts => Remove Google Fonts.
Tải không đồng bộ (async) Google Fonts
Nếu bạn vẫn muốn giữ lại Google Fonts, đồng thời giải quyết được vấn đề kể trên, công việc mà bạn phải làm sẽ phức tạp hơn một chút.
1. Đầu tiên bạn phải loại bỏ code tích hợp Google Fonts vào theme hoặc plugin. Nếu không quen, bạn có thể hỏi nhà phát triển theme hoặc plugin đó.
2. Tiếp theo, chèn code với cấu trúc tương tự bên dưới vào footer, trước thẻ </body>:
Nhớ thay tên Google Fonts cho phù hợp với nhu cầu của bạn. Nếu bạn không biết cách chèn, hãy tham khảo bài viết “Chèn code vào Header và Footer của WordPress“. Chúc các bạn thành công!
Ngoài ra, các bạn cũng có thể lưu trữ Google Fonts ngay trên host để giảm thiểu mức độ ảnh hưởng của Google Fonts đến thời gian load web, đặc biệt là những khi đường truyền quốc tế gặp vấn đề. Hướng dẫn chi tiết vui lòng xem trong link tham khảo ở phần đầu bài viết này.
Mọi thắc mắc và góp ý liên quan đến việc khắc phục lỗi Google Fonts chặn hiển thị (render-blocking) trong Google PageSpeed Insights, xin vui lòng gửi vào khung bình luận bên dưới để được giải đáp.
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. :)
Trúc đã bình luận:
20/11/2017 at 23:42Em thấy sử dụng fonts chữ trên wordpress ngon lành mà bác
Trung Hiếu đã bình luận:
21/11/2017 at 19:47Ngon là 1 chuyện, nó có làm giảm điểm PageSpeed và tốc độ load web hay không lại là một chuyện khác. :D
Lại Đình Cường đã bình luận:
12/01/2018 at 10:42Google đã cập nhật lại tính năng mới cho Google PageSpeed Insights, giờ thì tốc độ tải trang sẽ được lấy giá trị trung bình từ trải nghiệm người dùng thật trên trình duyệt Chrome.
Trung Hiếu đã bình luận:
12/01/2018 at 11:03Bác nói em mới phát hiện ra đấy. Chắc Google nó cũng mới cập nhật vài ba hôm trở lại đây thôi. :D Nhưng dùng thế nào thì blog của em vẫn xanh lè xanh lét. Hehe. :P
Cường đã bình luận:
12/01/2018 at 11:14Cập nhật hôm 10/01/2018, trang của mình chưa có dữ liệu mới buồn :(
Digimark Center đã bình luận:
19/08/2018 at 13:26Anh ơi cho em hỏi, em muốn loại bỏ font Open sans nhưng muốn giữ lại Roboto. Tất cả đều của Google cả, nhưng em không có dùng Open sans mà sao nó vẫn load trong site em. Mò chẳng ra. Có cách nào loại bỏ Open sans không anh?
Trung Hiếu đã bình luận:
19/08/2018 at 13:33Bạn không dùng không có nghĩa là theme hoặc plugin nó không load. Nếu bạn muốn dùng Google Fonts và trong phần thiết lập của theme/ plugin không hỗ trợ tắt font Open sans thì cách duy nhất là mở file theme và plugin ra để tìm và xóa đoạn code gọi fonts. Còn nếu bạn dùng tính năng tắt Google Fonts bằng các plugin chuyên dụng thì tất cả Google Fonts đều sẽ bị gỡ, kể cả font Roboto.
Trung Hiếu đã bình luận:
19/08/2018 at 13:34P/s: Hoặc bạn có thể tham khảo bài viết “Lưu trữ Google Fonts ngay trên host để tăng tốc độ load“.
dương đã bình luận:
12/09/2018 at 08:37– Anh cho em hỏi thì qua em có chuyển đổi tên miền từ canho-24h.com sang saidvietnam.com.vn…. thì web mình có mất index không ạ.. rồi Những backlink trước giờ em có phải thay đổi lại không ạ…
– Qua em cũng đọc trên mạng là thêm vào 3 dòng trong htaccess
#Options +FollowSymLinksRewriteEngine on
RewriteRule (.*) http://saidvietnam.com.vn/$1 [R=301,L]
Thì nó sẽ chuyển các thanh điều hướng từ canho-24h.com sang said.. nhưng lại bị báo lỗi xóa cokie..em xóa corki thì web bị lỗi luôn á..a có thể giúp em giải quyết những vấn đề này được không ạ..Em cảm ơn !!!
Trung Hiếu đã bình luận:
12/09/2018 at 08:55Nếu bạn đổi đúng cách thì sẽ không bị mất backlinks nhé. Còn thứ hạng tìm kiếm thì còn tùy vào chất lượng của domain mới so với domain cũ nữa. Nhưng nếu làm đúng cách thì sẽ hầu như giữ nguyên được thứ hạng. Cơ bản việc đổi domain sẽ gồm 4 bước:
1. Copy các file mã nguồn từ thư mục của tên miền cũ sang thư mục của tên miền mới.
2. Đổi link trong database
3. Thiết lập redirect 301 từ link tương ứng của tên miền cũ về link của tên miền mới.
4. Khai báo với Google về việc thay đổi tên miền.
Kha Trần đã bình luận:
16/10/2018 at 10:17Em chặn google font luôn được không anh.
Trung Hiếu đã bình luận:
16/10/2018 at 10:40Được bạn. Nếu bạn dùng plugin Autoptimize hay LiteSpeed Cache thì chúng có sẵn tính năng loại bỏ Google Fonts đấy.
Van Trong đã bình luận:
29/03/2019 at 20:37cho bài viết chi tiết về gỡ bỏ code tích hợp font trong them hoặc plugin đi bạn! hihi