[blog]
Xin chào tất cả cá các bạn mình admin trang giaodienblog.net 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.
Đây là kết quả đánh giá tốc độ tải trang của giaodienblog.net bằng công cụ PageSpeed Insights
Trên PC
Trên mobile
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.
Để 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: Hướng dẫn kết nối Facebook cho blogspot mới nhất
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ô html tìm và sửa như sau
<body> thay đổi thành <body>
</body> thay đổi thành <!--<body/>-->
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: Hướng dẫn thêm Analytics cho blogspot mới nhất
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ó.
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 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
Xem hướng dẫn tại đây.
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!
[/blog]