Cách tăng tốc độ tải trang blogspot trên PageSpeed Insights

Hướng dẫn cách tối ưu tốc độ tải trang tăng tốc độ load trang cho blog, giúp blogspot tải trang nhanh hơn, tối ưu blog trên PageSpeed Insights.


1. Hình ảnh: 


Trước tiên là hình ảnh, hình ảnh rất quan trọng góp phần blog của tải load lâu, tải trang lâu hơn, cách giải quyết ở đây là các bạn nén hình ảnh lại, kích thước càng nhỏ thì tốc độ tải trang cho blogspot sẽ nhanh hơn.

Hình ảnh các bạn nên để có kích thước < 15kb, nhược điểm thì nó giảm chất lượng hình ảnh.

2. Các thư viện link jquery:

Ví dụ link thư viện jquery như sau :

<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>

Sẽ sửa thêm async='async' thành

<script async='async' src='https://code.jquery.com/jquery-3.4.1.min.js'></script>

Tương tự tất các các thư viện jquery khác bạn sẽ làm như vậy.

Cách khác là các bạn xóa link trên và copy nội dung của nó dán vào trong code bên dưới

<script type='text/javascript'>
//<![CDATA[
Code của bạn
    //]]>
</script>

Sau đó thay nội dung này vào link vừa xóa, cách làm này cũng tốt, nhược điểm làm template của bạn nặng mỗi khi chỉnh sửa mục html.

3. Loại bỏ các thư viện không cần thiết:

- Facebook: Nếu web bạn có liên kết các tính năng với facebook như bình luận, like... thì nó rất nặng, nếu không cần thiết thì bạn xóa nó đi.

Để giải quyết cách thêm facebook cho blogspot không làm ảnh hưởng tới kết quả tải trang thì các bạn xem bài này >>> Cách chèn nút like Facebook vào bài viết của blogspot không sử dụng plugin

4. Chặn css mà blogger tự sinh ra:

Css có tên là authorization.css

Các bạn vô html tìm và sửa như sau

<head> thay đổi thành &lt;head&gt;

</head> thay đổi thành  &lt;/head&gt;&lt;!--<head/>--&gt;


5. Chặn link js blogger tự có tương tự như chặn authorization.css:

Các bạn vô html tìm và sửa như sau

<body> thay đổi thành &lt;body&gt;


</body> thay đổi thành &lt;!--<body/>--&gt;


6. Các bạn tìm <html và sửa <html b:css='false' b:js = "false" như dưới nó nằm ngày đầu code html

<html b:css='false'  b:js = 'false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='indie.xml' b:templateVersion='1.1.1' b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='vi' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Lưu ý: khi thêm b:js = 'false'  một số blog sẽ không hiển thị được tiện ích trong bố cục, không khung comment nút trả lời không hoạt động.

Cách làm thêm b:js = 'false' chức năng nó giống với bước 5, cho nên bạn có thể không cần thêm b:js = 'false' vì nó sẽ làm ẩn bố cục blog của bạn.

Cách sửa lỗi nút bình luận comment trả lời không hoạt động trên blogger sau khi chặn link js mặc định.

Các bạn copy code sau dán trước thẻ đóng </body>
<b:if cond='data:widgets.Blog.first.allBylineItems.comments and data:view.isSingleItem'>
<style>
.theme-button {
    position: relative;
    overflow: hidden;
    display: inline-block;
    min-width: 80px;
    height: 34px;
    line-height: 36px;
    padding: 0 10px;
    color: #fff!important;
    -webkit-appearance: none;
    font-size: 14px;
    letter-spacing: .5px;
    font-weight: 400;
    border: 0;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity .15s;
 background-color: #007bc7;
}
  .calcel-reply{margin-bottom: 25px;}
  .comment-reply:hover{cursor: pointer;}
</style>
<script>//<![CDATA[
$(function() {
  // load script
  $.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')
  })
  var l = '',id = '',li = ''
  // Gọi iframe khi click vào nút reply
  $('.comment a.comment-reply').click(function(e) {
    l = $('#comment-editor').attr('src')
    $('.calcel-reply').remove()
    $('.comment-actions').removeAttr('style')
    $('#top-continue.continue').hide()
    var $this = $(this),
    id = $this.attr('data-comment-id')
    l = l + '&parentID=' + id
    li = $this.parent().parent().parent().attr('id')
    $('#comment-editor').attr('src', l)
    $this.parent().hide()
    $('#comment-editor').appendTo($('#' + li + '>.comment-replybox-single'))
    $('#' + li + '>.comment-replybox-single').append('<div class="calcel-reply"><button class="theme-button" type="button">Hủy</button></div>')
    $('.calcel-reply').click(function() {
      $(this).remove()
      $('.comment-actions,#top-continue.continue').removeAttr('style')
      $('#comment-editor').appendTo($('.comment-form'))
    })
  })
  // Gọi iframe khi click vào nút Thêm nhận xét dưới cùng
  $('#top-continue.continue>a.comment-reply').click(function(e) {
    e.preventDefault()
    $(this).parent().hide()
    $('.calcel-reply').remove()
    $('.comment-actions').removeAttr('style')
    $('#comment-editor').appendTo($(this).parent().next())
    $('.comment-replybox-thread').append('<div class="calcel-reply"><button class="theme-button" type="button">Hủy</button></div>')
    $('.calcel-reply').click(function() {
      $(this).remove()
      $('.comment-actions,#top-continue.continue').removeAttr('style')
      $('#comment-editor').appendTo($('.comment-form'))
    })
  })
})
//]]></script>
</b:if>

7. Analytics

Analytics góp phần làm giảm tốc độ tải trang blog của bạn, tùy vô mục đích của bạn là nên dùng hoặc không.

Hoặc bạn có thể thêm Analytics cho blogspot mà không ảnh hưởng tới tốc độ tải trang thì xem bài viết này >>> Cách thêm Analytics cho blogspot mới nhất không làm ảnh hưởng tới tốc độ tải trang


8. Mã quảng cáo Google Adsense cho blogspot

Các đơn vị quảng cáo của adsense khiến blogspot của bạn chậm đáng kể, để giải quyết vấn đề này các bạn xem bài này >>> Hướng dẫn thêm mã Adsense cho blogspot mới nhất


9. Dùng thẻ if else blogspot

10. Lazy Load tăng tốc độ tải trang cho blogspot

Bạn Xem bài viết này >>> Tăng tốc độ tải trang cho blogspot bằng Lazy Load

Sau khi đã tối ưu xong những bước trên các bạn vô trang PageSpeed Insights và tiến hành kiểm tra xem thế nào nhé, và xem những lỗi cảnh báo trên PageSpeed Insights và tiến hành sửa lỗi của nó.

Chúc bạn thành công!







Đánh giá bài viết

Cảm ơn bạn đã đọc bài viết!

  • Mọi thắc mắc, gợi ý hoặc Báo link hỏng xin chia sẻ bên dưới hoặc Gửi Tin Nhắn
  • Không chèn liên kết quảng cáo, spam khi đăng nhận xét.
  • Không sử dụng những từ ngữ thô tục, vi phạm thuần phong mỹ tục.

Bình luận bài viết này!