Hướng dẫn tăng tốc độ tải trang Blogspot trên PageSpeed Insights
Google PageSpeed Insights là gì ?
PageSpeed Insights (PSI) sẽ đo performance (hiệu năng) của một trang trên mobile và desktop, sau đó cung cấp các đề xuất để cải thiện cho trang đó.
PageSpeed Insights được cung cấp bởi Lighthouse từ cuối 2018. Có nghĩa là kết quả báo cáo trong PSI dựa trên API Lighthouse.
Khi quét một trang, PageSpeed cung cấp hai loại dữ liệu chính: Lab và Field data.
Lab data được thu thập trong một môi trường được kiểm soát, với một loạt các thiết bị và cài đặt network được chuẩn bị trước.
Loại data này rất hiệu quả để gỡ lỗi các vấn đề về hiệu năng và quá trình test dễ dàng lặp lại nhiều lần.
Tuy nhiên, đôi lúc phương pháp này không hiệu quả với những lỗi thực tế.
Mặt khác, field data (còn được gọi là Real User Monitoring – RUM) sẽ bao gồm dữ liệu đến từ quá trình tải trang thực tế.
Loại dữ liệu này rất hiệu quả khi nắm bắt được trải nghiệm người dùng, tuy nhiên khả năng gỡ lỗi không lớn.
Cách tối ưu tốc độ tải trang tăng tốc độ load trang, 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ụ có 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 cũng 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[
......................Nội dung code...........................
//]]>
</script>
Sau đó thay nội dung này vào đoạn vừa xóa, tuy vậy nhược điểm của cách này làm template load chậm mỗi khi vào trình chỉnh sửa 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 các bạn có thể xem bài viết sau đây:
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 <head>
</head> thay đổi thành </head><!--<head/>-->
5. Chặn link js blogger tự có tương tự như chặn authorization.css:
Các bạn vào trình chỉnh sửa html tìm và sửa như sau
<body> thay đổi thành <body>
</body> thay đổi thành <!--<body/>-->
6. Sửa đoạn code sau
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.
Copy đoạn code phía dưới rồi dán vào 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>
Sau đó ' Save " để lưu lại.
7. Google Analytics với blogspot
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:
<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.
Copy đoạn code phía dưới rồi dán vào 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. Google Analytics với blogspot
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:
- Hướng dẫn thêm Analytics cho blogspot mới nhất
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:
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:
- Hướng dẫn cách thêm mã Google Adsense cho blogspot mới nhất
9. Dùng thẻ if else blogspot, các bạn có thể xem thêm bài viết dưới đây:
9. Dùng thẻ if else blogspot, các bạn có thể xem thêm bài viết dưới đây:
- Cách sử dụng câu lệnh điều kiện if - else trong Blogspot mới nhất
10. Lazy Load tăng tốc độ tải trang cho blogspot, các bạn có thể xem thêm bài viết dưới đây:
10. Lazy Load tăng tốc độ tải trang cho blogspot, các bạn có thể xem thêm bài viết dưới đây:
Post a Comment