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

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

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.

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

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

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.

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