Giới hạn trong bài viết này mình sẽ không đi sâu vào phân tích cụ thể từng chi tiết làm cho blog của bạn tải chậm mà mình chỉ chia sẻ một số kinh nghiệm để bạn khắc phục vấn đề. Bạn có thể kiểm tra trang web của bạn bằng PageSpeed Insights, xem cảnh bảo các nguyên nhân sau đó đọc bài viết này thấy có vấn đề nào liên quan có thể áp dụng sửa lỗi.
Blogger có những hạn chế nhất định không như các mã nguồn khác, bạn có thể can thiệp sâu khi có tất cả quyền quản trị. Tuy nhiên với những gì bạn có thể làm được, hãy cố gắng tối ưu để trang Blog của bạn tải nhanh hơn. Dưới đây là tổng hợp một số phương pháp mà mình đã đúc kết được hi vọng sẽ giúp bạn vận dụng cho Blog của mình.
1. Tải trang theo thứ tự
CSS => HTML => JAVASCRIPT
<html>
<head>
CSS
</head>
<body>
HTML
JAVASCRIPT
</body>
</html>
2. Tắt CSS và JS mặc định của Blogger
Thêm 2 thuộc tính b:css='false' và b:js='false' trực tiếp trong thẻ tag html của template
<html b:css='false' b:js='false'>
3. Giảm thiểu requests xuống mức thấp nhất
Càng nhiều requests đồng nghĩa trình duyệt phải đọc và phân tích nhiều trong thời gian tải, và càng nhiều requests cũng làm cho kích thước trang càng tăng = > Thời gian chờ lâu
Giải pháp khi trang có nhiều requests: Trì hoãn các requests sau khi trang tải xong, tài liệu HTML đã sẵn sàng thì các requests mới được tải lần lượt
4. Tối ưu hình ảnh
Ả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.
Với ảnh hiển thị lấy từ data ngoài trang chủ, hay các trang label, lưu trữ, gọi chung là nhóm trang index, bạn có thể sử dụng hàm resizeImage mặc định để thay đổi ảnh cho kích thước tương đối. Giả sử khi lấy ảnh trong widget Blog thẻ data mặc định có dạng
<img expr:alt='data:post.title' expr:src='data:post.featuredImage'/>
Cho ra link ảnh dạng
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgohCGXPC_3p5CEBiYvaN-8MoXLaRePvFpWn5MdkQNNuRF2p5CHSWlvPS0CEEKms1oi_7qoLdvlk0JrG1-pFWDhVaYEcgj5LaRfkgVhd_79SrkY48kzNdOT9HtXk-ZSlv7mwu4gJIYW0DDV/S1600/lighthouse.jpg
Lúc đó bạn lấy ảnh bằng kích thước gốc (S1600) giả sử ảnh đó có kích thước 768px, trong khi hiển thị ảnh chỉ cần kích thước tối đa 320px là đủ, do đó sử dụng hàm resizeImage đặc biệt hữu ích
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.featuredImage, 320, "16:9")'/>
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 javscript sẽ đặt link ảnh trong thuộc tính data-src thay thế cho src sau đó lấy link ảnh từ thuộc tính data-src 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 chủ của bạn 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'/>
+ Trường hợp ảnh được tải từ dữ liệu data bài viết
Trong thẻ tag img các bạn thêm như sau:
<img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.featuredImage, 320, "16:9")' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
+ Trường hợp với link ảnh trực tiếp trong template
<img alt='' class='lazyload' data-src='link ảnh' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
+ Trường hợp với ảnh trực tiếp trong bài viết
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 thay thế
5. Hạn chế sử dụng nguồn cấp feeds để lấy dữ liệu
Khi muốn hiển thị các dạng bài viết: recent posts, recent posts by label, related posts., random posts, recent comments bắt buộc phải sử dụng đến nguồn cấp feeds để lấy dữ liệu hiển thị. Bình thường khi tải feeds thời gian lâu lại phải sử dụng đến callback nên sẽ càng lâu hơn mà điểm dở khi tải nguồn cấp feeds không được lưu vào bộ nhớ đệm của trình duyệt cho nên nếu bắt buộc phải sử dụng các bạn nên áp dụng theo các phương pháp trong bài viết Các phương pháp tải feeds hiệu quả làm tăng tốc độ tải trang của mình
6. Tận dụng bộ nhớ đệm của trình duyệt
Nếu trang của bạn sử dụng link css, link js hãy tìm các link này ở các host có thời gian lưu trữ bộ nhớ đệm lâu. Lấy ví dụ với link jquery.min.js trong ảnh trên nếu sử dụng host CDN Google hoặc CDN cloudflare cho thời gian lưu trữ trong bộ đệm cache lên tới 365 ngày thay vì sử dụng host khác có thời gian chỉ 1 đến 7 ngày
Trường hợp bạn lưu trữ css, js trên host Github hãy lấy link bằng host cdn.jsdelivr.net để có bộ đệm cache 7 ngày, cấu trúc link như sau:
https://cdn.jsdelivr.net/gh/<tên tài khoản>/<tên repository>/<tên tệp css, js>
Ví dụ
Tên tài khoản Github: thietkeblogspot
Tên repository: js
Tên link js trong js: cssformatter.js
=> Link cần lấy: https://cdn.jsdelivr.net/gh/thietkeblogspot/js/cssformatter.js
Lưu ý: Với link ảnh mặc định khi bạn tải lên chỉ có thời gian 1 ngày (rất ít) tuy nhiên bạn không thể can thiệp được vì đang sử dụng host của Blogger chỉ mong thời gian sau này các nhà phát triển Blogger họ có sửa lại hay không thôi
7. Sử dụng JavaScript để tải link css, js trong trường hợp các link này nằm trước thẻ đóng </head> của template
Giả sử bạn có các link link.css, link.js đặt trực tiếp trước thẻ đóng </head>, bạn có thể áp dụng JavaScript tải những link này
<body>
<script>//<![CDATA[
function loadCSSJS(filename, filetype) {
if (filetype == 'css') {
var fileref = document.createElement('link')
fileref.setAttribute('rel', 'stylesheet')
fileref.setAttribute('href', filename)
} else if (filetype == 'js') {
var fileref = document.createElement('script')
fileref.setAttribute('src', filename)
}
if (typeof fileref != 'undefined') {
document.getElementsByTagName('head')[0].appendChild(fileref)
}
}
document.addEventListener('DOMContentLoaded', function() {
loadCSSJS('link.css', 'css')
loadCSSJS('link.css', 'css')
loadCSSJS('link.js', 'js')
loadCSSJS('link.js', 'js')
})
//]]></script>
</body>
Lưu ý: Không sử dụng phương thức @import url chèn link.css trong style sẽ làm trang tải lâu hơn so với đặt link trực tiếp, do đó hoặc dùng JavaScript tải link hoặc đặt trực tiếp chứ không nên làm theo cách này.
8. Tối ưu iframe nhận xét
Phần nhận xét bao gồm khung iframe và link js mặc định của Blogger trong bài viết ảnh hưởng rất nhiều đến quá trình tải trang nguyên nhân là vì chúng được tải ngay khi tải trang. Hãy thử hình dung khi bạn truy cập url một bài viết nào đó trong Blog, phần hiển thị bạn thấy đầu tiên đó là nội dung bài viết và phần nhận xét sẽ nằm ở dưới do đó không có lý do gì phải tải iframe và link js mặc định khi bạn chưa cuộn trang đến vị trí này
