Liên hệ Zalo 0948.713.329 Để Nhận Tư Vấn Hỗ Trợ

Hướng dẫn tối ưu tốc độ tải trang blogspot nhanh nhất trên PageSpeed Insights

Hướng dẫn tối ưu tốc độ tải trang blogspot nhanh nhất trên PageSpeed Insights

Cập nhật ngày Bởi
Xin chào tất cả cá các bạn mình admin trang Yingvn.Com hướng dẫn các bạ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.
tối ưu tốc độ tải trang blogspot nhanh nhất
Đây là kết quả đánh giá tốc độ tải trang của girl.yingvn.com bằng công cụ PageSpeed Insights

Thông số PageSpeed Insights

Các bạn nhìn chỉ số thấy thích không mọi người

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ụ mình có link thư viện jquery như này

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

    //]]>
</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.
Xem thêm : Hướng dẫn thêm Facebook cho blogspot không giảm tốc độ tải trang

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.

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

Xem thêm : Hướng dẫn thêm Analytics cho blogspot mà không ảnh hưởng tốc độ tải trang

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

9. Dùng thẻ if else blogspot

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

Hướng dẫn :  Hướng dẫn tạo Lazy Load ảnh giúp tăng tốc độ cho blogspot 

Ngoài những cách trên các bạn nào còn cách khác thì comment link bên dưới để mọi người cùng giao lưu học hỏi nhé.
Chúc bạn thành công!

Comments

Call
0948713329
Contact Me on Zalo