Hai phương pháp hay giúp tối ưu pagespeed cho trang bài viết blogspot

Trang bài viết tải nhanh có rất nhiều cái lợi giúp độc giả đọc nội dung nhanh hơn, trang được index nhanh trên các công cụ tìm kiếm, chưa cần biết content như thế nào nhưng cứ nhanh là đã hơn các blog khác viết cùng chủ đề. Chỉ có điều mặc định trang bài viết tải chậm hơn so với các trang khác trong blog nguyên nhân trang này có nhiều dữ liệu hiển thị như ảnh, iframe nhận xét, bài viết liên quan chưa kể đến các widget.

Đọc thêm: Chia sẻ một vài kinh nghiệm giúp bạn tối ưu Blog tải nhanh hơn

Khi độc giả truy cập liên kết từ bất kỳ nguồn nào chẳng hạn truy cập trực tiếp, từ các trang mạng xã hội, từ các công cụ tìm kiếm, v.v.., trang sẽ chỉ tải một lần duy nhất và rất hiếm khi độc giả tải lại làm mới trang mà bạn cũng biết bao giờ trang tải lại cũng nhanh hơn tải lần đầu nguyên nhân dữ liệu được lưu trong cache trình duyệt. Do đó tối ưu pagespeed rất quan trọng cho trang tải lần đầu. Hai phương pháp sau đây sẽ giúp trang bài viết nhanh hơn

1. Tối ưu hình ảnh bài viết

Ảnh gốc trước khi tải lên phải được thiết lập một kích thước vừa phải phù hợp với chiều rộng của trang web, và phải nén bằng phần mềm hay các trang nén ảnh online để giảm dung lượng xuống mức thấp nhất

Lấy ví dụ vùng chứa ảnh bài viết của bạn có chiều rộng 768px thì ảnh gốc phải có kích thước rộng tối đa 768px, sau đó bạn dùng phần mềm trên máy tính hoặc sử dụng các trang nén ảnh online nén bức ảnh đó lại tải về ảnh thay thế rồi mới tải lên khi đăng hay cập nhật bài viết.

Sử dụng lazyload trì hoãn tải ảnh khi trang được tải (Defer offscreen images), hiện tại có rất nhiều plugin js hỗ trợ phải kể đến như lazysizes.js, lazy.js. Cơ chế hoạt động của script sẽ đặt link ảnh trong thuộc tính data-src, data-original thay thế cho src sau đó lấy link ảnh từ thuộc tính data-src, data-original thay thế link ảnh trong src. Ngoài ra các plugin này còn có tác dụng chỉ tải ảnh cho vùng hiển thị trên màn hình nghĩa là vùng nào hiện thị trên màn hình trước sẽ được tải trước, còn ảnh nằm ở vị trí phía dưới chỉ khi nào được scroll đến thì ảnh mới được tải.

Lấy ví dụ trang bài viết có tổng cộng 20 ảnh khác nhau (20 requests), thay vì sẽ tải hết cả 20 ảnh cùng lúc, khi sử dụng plugin sẽ chỉ tải những ảnh nằm phía trên còn các ảnh nằm phía dưới đợi khi người dùng scroll đến ảnh mới được tải và hiển thị

Các bạn tham khảo sử dụng plugin được Google khuyên dùng có tên lazysizes, dưới đây là cách áp dụng vào Blog

Các bạn chèn link lazysizes.min.js dưới dùng ngay trước thẻ đóng </body> của template

<script async='' src='https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.1/lazysizes.min.js'/>

Khi soạn thảo bài mới hay chỉnh sửa lại bài cũ, lúc tải ảnh lên bạn thiết lập kích thước ban đầu cho tất cả các ảnh, sau đó bạn chuyển sang tab HTML của bài viết tìm thẻ tag img của ảnh, các bạn sửa lại thành như sau:

<img alt='' class='lazyload' data-src='link ảnh gốc' src='link ảnh kích thước nhỏ'/>

Ví dụ

<img alt="" class="lazyload" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioWsa4RdmbByIkmrIoxmANDx24csCZ9CIy_pSlF1MMXAJy_XrSgu-yldvZH954VmvuuVkgZOvaSsYB_Pw_u8hy7-N9P8Huw1qL79kis-gyP-0TrZYyARYqR8gdohVg30PABd-us6-quK8/s1600/dao-hon-noi-nha-trang-12-min.jpg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioWsa4RdmbByIkmrIoxmANDx24csCZ9CIy_pSlF1MMXAJy_XrSgu-yldvZH954VmvuuVkgZOvaSsYB_Pw_u8hy7-N9P8Huw1qL79kis-gyP-0TrZYyARYqR8gdohVg30PABd-us6-quK8/s24/dao-hon-noi-nha-trang-12-min.jpg"/>

=> Khi tải trang bài viết, các ảnh với kích thước nhỏ s24 sẽ được tải trước sau đó sẽ lấy link ảnh gốc s1600 trong thuộc tính data-src, data-original thay thế

2. Trì hoãn tải dữ liệu những vùng bị ẩn

Chả có lý do gì phải tải dữ liệu cho những vùng chưa nhìn thấy chẳng hạn khi truy cập bài viết thứ mà bạn nhìn thấy đầu tiên là nội dung bài viết sau đó mới đến thẻ iframe nhận xét nằm bên dưới bài viết và dưới nữa là các bài viết liên quan

Đọc thêm: Hướng dẫn load comment iframe và fix lỗi reply comment trong template layout v3

Sử dụng phương pháp jquery scroll đặc biệt hữu ích khi tải dữ liệu cho những vùng bị ẩn, đoạn script sau tải iframe và script của nhận xét

<script>//<![CDATA[

$(window).bind('load', function() {

  var url = window.location.href

  if (url.indexOf('#comments') != -1 && url.indexOf('?showComment') != -1) {

    $('.commentForm').append('<iframe class="blogger-iframe-colorize blogger-comment-from-post" id="comment-editor" name="comment-editor" src="" title="comment iframe"></iframe>')

    $.getScript('https://www.blogger.com/static/v1/jsbin/2567313873-comment_from_post_iframe.js').done(function() {

      BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html')

    })

  } else {

    var load_iframe = false

    $(document).on('scroll', function() {

      if ($(this).scrollTop() >= $('.post-footer').position().top-100) {

        if (!load_iframe) {

          load_iframe = true

          $('.commentForm').append('<iframe class="blogger-iframe-colorize blogger-comment-from-post" id="comment-editor" name="comment-editor" src="" title="comment iframe"></iframe>')

          $.getScript('https://www.blogger.com/static/v1/jsbin/2567313873-comment_from_post_iframe.js').done(function() {

            BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html')

          })

        }

      }

    })

  }

})

//]]></script>

Sử dụng điều kiện check url nếu theo sau url có kèm các tham số "#comments" hay "?showComment" sẽ load ngay iframe và link js còn nếu không sẽ chỉ load khi scroll đến gần cuối bài viết bên dưới có class ".post-footer" chẳng hạn

Đối với bài liên quan cũng vậy cũng chỉ load khi đã scroll đến gần cuối bài viết

<script>//<![CDATA[

$(window).bind('load', function() {

  var load_posts = false

  $(document).on('scroll', function() {

    if ($(this).scrollTop() >= $('.post-footer').position().top) {

      if (!load_posts) {

        load_posts = true

        // Code script lấy dữ liệu nguồn cấp đặt trong này

      }

    }

  })

})

//]]></script>

2 ảnh dưới đây minh họa bằng phương pháp scroll

Mới truy cập chưa scroll

Sau khi scroll đến cuối trang

Vùng mình đánh dấu màu đỏ là số requests cần tải lúc mới truy cập đầu trang chưa scroll chỉ có 22 requests và tăng dần đến 62 khi scroll đến chân trang => số requests bị trì hoãn 40 => Trang chỉ tải 1/3 requests lúc mới load => trang tải nhanh hơn.