• Trang chủ
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugins
    • WordPress Themes
  • Hosting và Domain
  • Kiếm tiền
  • Đánh giá
  • Khuyến mãi
  • Thông báo
  • Giới thiệu
  • Liên hệ

WP Căn bản

Kiến thức căn bản cho người dùng WordPress

paradise-child-theme-wordpress-theme-tot-nhat
  • Dịch vụ WordPress Hosting
  • Dịch vụ tối ưu WordPress
  • Dịch vụ quét mã độc WordPress
  • Mua Paradise child theme
Trang chủ » WordPress » Thủ thuật WordPress » Khắc phục lỗi Google Fonts trong Google PageSpeed Insights
hosting-tot-nhat-danh-cho-wordpress

Khắc phục lỗi Google Fonts trong Google PageSpeed Insights

Cập nhật: 13/11/2023 Trung Hiếu 25 Bình luận

Mục lục Hiện
  • 1. Lỗi Google Fonts chặn hiển thị (render-blocking)
  • 2. Khắc phục lỗi Google Fonts chặn hiển thị nội dung
    • 2.1. Loại bỏ Google Fonts
    • 2.2. Tải không đồng bộ (async) Google Fonts
      • 2.2.1. Sử dụng plugin
      • 2.2.2. Phương pháp thủ công

Khắc phục lỗi Google Fonts chặn hiển thị (render-blocking) trong Google PageSpeed Insights.

khac-phuc-loi-google-fonts-chan-hien-thi-render-blocking

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 website của họ. Không thể phủ nhận được rằng, nhờ có Google Fonts, giao diện của các 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 website của bạn load chậm hơn một chút hoặc rất nhiều 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 theme, plugin 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:

<link href='https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

Đ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.

loi-google-fonts-trong-google-pagespeed-insights

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, Flying Fonts by WP Speed Matters 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 => Page Optimization => [3] Optimization => chuyển mục Remove Google Fonts sang trạng thái ON.

loai-bo-google-fonts-voi-litespeed-cache

  • Đối với plugin Autoptimize, các bạn truy cập Settings => Autoptimize =>Extra => Google Fonts => chọn Remove Google Fonts.

go-bo-google-fonts-bang-plugin-autoptimize

  • Đối với các plugin như Disable Google Fonts hay Flying Fonts by WP Speed Matters, các bạn chỉ cần cài đặt và kích hoạt chúng là được.

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.

Sử dụng plugin

Nếu bạn đang sử dụng plugin LiteSpeed Cache, hãy truy cập LiteSpeed Cache => Page Optimization => [3] Optimization => chuyển mục Remove Google Fonts sang trạng thái OFF, chuyển mục Load Google Fonts Asynchronously sang trạng thái ON.

tai-khong-dong-bo-google-fonts-bang-plugin-litespeed-cache

Nếu bạn đang sử dụng plugin Autoptimize, hãy truy cập Settings => Autoptimize =>Extra => Google Fonts => chọn Combine and link deferred in head (fonts load late, but are not render-blocking), includes display:swap.

tai-khong-dong-bo-google-fonts-bang-plugin-autoptimize

Phương pháp thủ công

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>:

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Noto+Serif:400,400italic,700,700italic' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

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. :)

  • Chia sẻ lên Facebook
  • Chia sẻ lên Twitter
  • Chia sẻ lên LinkedIn

Bài viết liên quan

Ra mắt plugin APCu Object Cache độc quyền tại WP Căn bản
Ra mắt plugin APCu Object Cache độc quyền tại WP Căn bản
Tính năng Crawl Optimization của plugin Yoast SEO
Tính năng Crawl Optimization của plugin Yoast SEO
Vô hiệu hóa WooCommerce Brands để tăng tốc độ
Vô hiệu hóa WooCommerce Brands để tăng tốc độ

Chuyên mục: Thủ thuật WordPress Thẻ: Google PageSpeed/ LiteSpeed Cache/ Tăng tốc WordPress

dich-vu-wordpress-hosting-chong-ddos-mien-phi

Nói về Trung Hiếu

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Tôi là người sáng lập và đứng sau mọi hoạt động của WP Căn bản. Tìm hiểu thêm về tôi tại đây.

Bài viết trước « Ẩn các thông báo trong WordPress Admin một cách đơn giản
Bài viết sau Mở thêm server Việt Nam cho dịch vụ WordPress Hosting »

Reader Interactions

Bình luận

    Để lại một bình luận Hủy

    Tất cả các bình luận đều sẽ được kiểm duyệt nghiêm ngặt. Mọi bình luận trái quy định sử dụng sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn. Vui lòng đọc kỹ quy định trước khi bình luận. Xin cảm ơn!

  1. quốc bình 1 bình luậnviết

    24/07/2021 lúc 17:01

    Mình dùng cách Tải không đồng bộ (async) Google Fonts cho blogspot mà không được.

    Bình luận
  2. Bùi Thắng Lợi 2 bình luậnviết

    06/03/2020 lúc 12:12

    Anh ơi em sài wp rocket và Autoptimize cùng một lúc được không anh, vì e thấy wp rocket k có tính năng chặn google font. E xin cảm ơn

    Bình luận
    • Trung Hiếu Quản lýviết

      06/03/2020 lúc 12:45

      Dùng được bạn nhé. Nhưng theo mình chỉ nên dùng 1 trong 2 thôi. WP Rocket hình như cũng có tính năng tối ưu Google Fonts mà?

      Bình luận
      • Bùi Thắng Lợi 2 bình luậnviết

        06/03/2020 lúc 12:46

        Anh có thể cho e biết chỗ nào không ạ. E cảm ơn a

        Bình luận
        • Trung Hiếu Quản lýviết

          06/03/2020 lúc 12:48

          Trong “File Optimization” hình như có mục “Combine Google Fonts files” đó bạn. Nếu mình nhớ không nhầm thì là thế. Tại lâu lắm rồi không dùng WP Rocket nên không biết giờ mặt mũi nó ra sao.

          Bình luận
  3. Anh Việt 9 bình luậnviết

    14/11/2019 lúc 11:16

    Wp rocket và Automize theo Hiếu cái nào tốt hơn.

    Bình luận
    • Trung Hiếu Quản lýviết

      14/11/2019 lúc 14:01

      WP Rocket tốt hơn bạn nhé. Autoptimize đâu có tính năng cache. Nó chỉ có thể tối ưu JS, CSS và HTMTL thôi.

      Bình luận
      • Anh Việt 9 bình luậnviết

        14/11/2019 lúc 15:00

        Thanks Hiếu nhiều

        Bình luận
  4. KeniVinh 166 bình luậnviết

    19/06/2019 lúc 23:53

    Plugin Litespeed cache có tính năng Tải không đồng bộ Google Font, có nên dùng không Hiếu? Mình sợ lỗi gì thì mệt quá.

    Bình luận
    • Trung Hiếu Quản lýviết

      20/06/2019 lúc 08:50

      Nên bật để web load nhanh hơn nhé. Lỗi thì tắt tính năng đi là được, có gì mà sợ?

      Bình luận
  5. Van Trong 9 bình luậnviết

    29/03/2019 lúc 20:37

    cho 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

    Bình luận
  6. Kha Trần 15 bình luậnviết

    16/10/2018 lúc 10:17

    Em chặn google font luôn được không anh.

    Bình luận
    • Trung Hiếu Quản lýviết

      16/10/2018 lúc 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.

      Bình luận
  7. dương 2 bình luậnviết

    12/09/2018 lúc 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 +FollowSymLinks
    RewriteEngine 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 !!!

    Bình luận
    • Trung Hiếu Quản lýviết

      12/09/2018 lúc 08:55

      Nế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.

      Bình luận
  8. Digimark Center 73 bình luậnviết

    19/08/2018 lúc 13:26

    Anh ơ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?

    Bình luận
    • Trung Hiếu Quản lýviết

      19/08/2018 lúc 13:33

      Bạ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.

      Bình luận
    • Trung Hiếu Quản lýviết

      19/08/2018 lúc 13:34

      P/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“.

      Bình luận
  9. Lại Đình Cường 33 bình luậnviết

    12/01/2018 lúc 10:42

    Google đã 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.

    Bình luận
    • Trung Hiếu Quản lýviết

      12/01/2018 lúc 11:03

      Bá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

      Bình luận
      • Cường 33 bình luậnviết

        12/01/2018 lúc 11:14

        Cập nhật hôm 10/01/2018, trang của mình chưa có dữ liệu mới buồn :(

        Bình luận
  10. Trúc 3 bình luậnviết

    20/11/2017 lúc 23:42

    Em thấy sử dụng fonts chữ trên wordpress ngon lành mà bác

    Bình luận
    • Trung Hiếu Quản lýviết

      21/11/2017 lúc 19:47

      Ngon 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

      Bình luận
1 2 »

Sidebar chính

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới!

Tham gia cùng 10.000+ người khác.

Theo dõi qua mạng xã hội

Facebook Group

wpcanban-facebook-group

Bạn đang tìm gì?

WordPress căn bản

Bảo mật WordPress

Tăng tốc WordPress

Sửa lỗi WordPress

Thủ thuật Genesis

Thủ thuật SEO

Thủ thuật CloudFlare

Thủ thuật LiteSpeed

Thủ thuật WooCommerce

Sử dụng theme Paradise

Dịch vụ tối ưu WordPress miễn phí

dich-vu-toi-uu-wordpress-mien-phi

Dịch vụ quét mã độc miễn phí

dich-vu-quet-ma-doc-wordpress-mien-phi

Footer

Bài viết mới nhất

  • Năm 2025 rồi, có nên viết blog nữa không? 07/05/2025
  • Ra mắt plugin APCu Object Cache độc quyền tại WP Căn bản 16/04/2025
  • Tính năng Crawl Optimization của plugin Yoast SEO 31/03/2025
  • Vô hiệu hóa WooCommerce Brands để tăng tốc độ 09/03/2025

Bình luận mới nhất

  • Trung Hiếu trong Năm 2025 rồi, có nên viết blog nữa không?
  • Tuấn Kỷ Nguyên Blog trong Năm 2025 rồi, có nên viết blog nữa không?
  • Trung Hiếu trong Năm 2025 rồi, có nên viết blog nữa không?
  • Tịnh Nguyễn Blog trong Năm 2025 rồi, có nên viết blog nữa không?

Thông tin hữu ích

  • Giới thiệu bản thân
  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung

Thống kê WP Căn bản

9 Chuyên mục - 999 Bài viết - 35.502 Bình luận

Bản quyền © 2014 - 2025 · WP Căn bản (tiền thân là eBooksvn.com) · Sử dụng Paradise child theme và dịch vụ WordPress Hosting