• Chào mừng bạn đến với Diễn đàn đá tự nhiên - Natural stone forum - NSF.VN >> Hãy đọc kỹ nội quy khi tham gia diễn đàn >> Nghiêm cấm Spam dưới mọi hình thức >> Hệ thống tên miền chính của diễn đàn: www.nsf.vn || www.stonecare.vn || www.stonecare.com.vn || www.naturalstone.vn || www.naturalstone.com.vn ||
    1. Diễn đàn đá tự nhiên | NSF.VN - Là kênh thông tin số 1 về ngành đá tự nhiên tại Việt Nam, NSF.VN không chỉ cung cấp thông tin nhanh, chính xác, khách quan đến bạn đọc mà còn là nơi tư vấn, giải đáp những thắc của bạn đọc về các lĩnh vực liên quan tới đá tự nhiên như: kiến trúc xây dựng, phong thủy, nội-ngoại thất, pháp lý nhà đất...

      NSF.VN đang và sẽ trở thành một thư viện về ngành đá, hiện nay NSF.VN đang hợp tác cùng các chuyên gia uy tín trong lĩnh vực Kiến trúc, Phong Thủy, Văn bản pháp luật xây dựng. Nếu có nhu cầu tư vấn, bạn đọc hãy đặt câu hỏi tại đây, NSF.VN sẽ kết hợp cùng các chuyên gia giải đáp những thắc mắc của bạn đọc trong thời gian sớm nhất.

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

    Discussion in 'Thủ thuật hay' started by Stonecare, Jul 12, 2018.

    1. Stonecare
      Offline

      Stonecare Staff Member

      Joined:
      Sep 6, 2013
      Messages:
      846
      Likes Received:
      18
      Trophy Points:
      101
      Location:
      Hà Nội
      Home page:
      Credit:
      44,543,702,860,450VND
      Facebook Profile
      Twitter Profile
      Google+ Profile
      Yahoo! Messenger
      Skype
      Map Profile
      0903295454


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

      [​IMG]

      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.

      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:

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

      [​IMG]

      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ỏ 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, Autoptimize.

      [​IMG]

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

      Code:
      <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“. Đơn giản vậy thôi. Chúc các bạn thành công!

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

      Bài viết trích từ: wpcanban

    Share This Page

    Ban Ten Mien
    HUMITSU LED LIGHT FROM JAPAN