Xin chào các blogger, nếu bạn thường xuyên theo dõi blog của tôi chắc cũng đã gặp nhiều bài đề cập tới tốc độ tải trang. Tuy nhiên tôi muốn có một bài tổng quát nhất dành riêng cho nền tảng blogger mà tôi đang tin dùng để xây dựng website nói về vấn đề tốc độ tải trang và tất cả sẽ được đề cập đến trong bài viết này !
Trước khi bắt đầu các thủ thuật, nếu còn non kinh nghiệm bạn nên backup lại template để tránh lỗi đáng tiếc xảy ra
I. Loại bỏ css và js mặc định từ blogger
Mặc định với mỗi template blogger đều có bao gồm các file css và js. Với css sẽ là 2 file css_bundle.css và authorization.css phục vụ cho phần hiển thị. Với js sẽ là file widget.js sử dụng cho các tiện ích mà blogger cung cấp như
- Contact Form.
- Thống kê blog
- Slideshow Widget
- Lưu trữ blog
- Wikipedia widget
- Newsreel widget
- Tiện ích Search do blogger cung cấp
- Chế độ xem ảnh Lightbox
Ngoài ra còn có thêm file plusone.js phục vụ cho các chức năng dành cho Google +.
Nếu bạn xác định không cần đến những thứ kể trên thì hoàn toàn có thể xóa bỏ chúng để tăng tốc độ tải trang
* Loại bỏ css mặc định
+ Nếu bạn đang dùng widget layout v3: để xóa file css_bundle.css chỉ cần thêm b:css='false' vào thẻ <html...
Code sẽ như sau
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3'...>
Để xóa file authorization.css bạn sẽ thay đổi cặp thẻ <head>...</head> như sau
<head> ... </head><!--<head/>-->
+ Nếu dùng widget layout version cũ hơn
Để xóa cả 2 file bạn sẽ thay đổi cặp thẻ <head>...</head> như sau
<head> ... </head><!--<head/>-->
Kết quả khi view-sources
* Loại bỏ js mặc định
+ Nếu bạn đang dùng widget layout v3: để xóa file chỉ cần thêm b:js='false' vào thẻ <html...Code sẽ như sau
<html b:js='false' b:defaultwidgetversion='2' b:layoutsVersion='3'...>
Tuy nhiên khi lưu mẫu và trở ra phần bố cục bạn sẽ không thể chỉnh sửa được, còn về phía trang web nó vẫn sẽ hiển thị bình thường, nếu bạn muốn chỉnh sửa bố cục thông qua giao diện UI có thể thay false thành true, sau khi sửa xong lại trả về false. Điều này hơi bất tiện nhưng khi view-sources bạn sẽ không thấy đoạn js dài ở cuối nữa
Cách 2: Nếu không thích cách trên bạn có thẻ thay thẻ đóng </body> thành
<!--</body>--> </body>
Khi view-sources
+ Nếu dùng widget layout version cũ hơn
Thay thẻ đóng </body> thành
<!--</body>--> </body>
* Chỉ xóa file plusone.js: Bạn chèn code sau trước thẻ đóng </body>
<!--<script src='https://apis.google.com/js/plusone.js' type='text/javascript'></script>-->
Kết quả
Về phần js tôi đã đề cập đến những tiện ích sẽ không hoạt động khi xóa file widget.js. Về phần css mặc định, một số template khi xóa sẽ ảnh hưởng khá nhiều tới giao diện cũng như bố cục, lúc này hoàn toàn phụ thuộc vào trình độ css của bạn.
II. Áp dụng cho ảnh
Ảnh là yếu tố ảnh hưởng rất nhiều tới tốc độ tải trang, nếu đã dùng nền tảng blogger, bạn nên upload ảnh khi viết bài, tránh sử dụng ảnh từ nguồn khác vì khi bạn upload ảnh qua blogger, ảnh có thể chỉnh sửa được kích thước cũng như không bị lỗi thumbnail.
Trước tiên để tránh sử dụng jquery resize bạn cần tinh chỉnh lại kích thước thumbnail. Tại đây tôi có một bài viết rất chi tiết đó là Blogger Thumbnail và những điều bạn cần biết
Tiếp theo để tăng tốc load trang bạn có thể sử dụng plugin lazy load image bằng cách chèn code sau trước thẻ đóng </body>
<script type='text/javascript'> //<;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container:window})"})})(jQuery);$(function(){$(".post img").lazyload({placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC",effect:"fadeIn",threshold:"0"})}) //]]></script>
Ảnh sẽ không phải load hết từ đầu mà sẽ load khi bạn scroll chuột tới
Cuối cùng đó là yếu tố chất lượng ảnh. Trước khi upload ảnh, bạn nên nén lại để ảnh tối ưu hơn. Bạn có thể dùng trang https://tinypng.com để nén ảnh trước khi upload. Định dạng đề nghị upload là .png, nên hạn chế tối đa định dạng .gif vì nhiều ảnh gif sẽ gây lag khi đọc bài viết
III. Vấn đề thư viện
Tôi có dạo qua một số blog thì thấy nhiều blogger chưa tối ưu phần này, có người dùng tới 2 3 thư viện jquery, 2 3 thư viện font awesome cũng như tải quá nhiều font từ google mà chẳng hề dùng tới.
Lời khuyên ở đây đó là bạn cần làm chủ được thư viện mình đang sử dụng. NÊN sử dụng bản mới nhất để được support tối hơn. Nên lựa chọn các nhà cung cấp dịch vụ CDN để giảm thiểu độ giật lag khi đứt cáp (tham khảo https://cdnjs.com)
Nếu bạn có điều kiện có thể mua hosting tốc độ cao để lưu trữ file. Hoặc nhà nghèo thì có thể dùng Github làm host lưu trữ chính. Bạn NÊN tập trung lưu trữ file css, js về 1 host tránh tải quá nhiều tài nguyên từ nhiều nguồn vì khi họ gặp sự cố cũng ảnh hưởng rất nhiều tới trang của bạn
Bạn NÊN sử dụng 1 tới 2 font cho web của mình và loại bỏ tối đa các font gọi mà không dùng.
IV. Sử dụng Cloudflare
Nếu bạn đã mua một domain hoàn toàn có thể sử dụng DNS trung gian https://www.cloudflare.com để tăng tính bảo mật và cải thiện tốc độ cho website
Cloudflare có mạng lưới CDN lớn, cũng như chức năng nén code và đang xây dựng tiện ích rocket script, sẽ giúp website của bạn tải nhanh hơn rất nhiều. Tham khảo bài viết Hướng dẫn trỏ tên miền về Blogspot sử dụng Cloudflare
V. Vấn đề css và js
Đây là vấn đề không thể nói hay được. Trước tiên bạn cần làm chủ được code css và js của mình. Nếu có đoạn css hoặc js nào không sử dụng tới có thể xóa bỏ nó đi để giảm kích thước trang
* Sử dụng thẻ điều kiện để tối ưu code css, js
Đây là điều mà hầu hết blogger mới vào nghề chưa nghĩ tới, một số code được chuyên dụng cho trang bài viết, trang tĩnh nhưng cũng được tải ở trang chủ thì điều đó thật lãng phí. Vì vậy khi bạn đã làm chủ được code js, css của mình, hãy dùng thẻ điều kiện để giới hạn phạm vi hoạt động của nó (tham khảo Thẻ điều kiện blogger 2018 )
* Hạn chế tải feed
Blogger có cung cấp API để lấy các dữ liệu phục vụ cho nhu cầu người dùng qua việc tải feed. Tuy nhiên việc tải feed quá nhiều sẽ tăng độ trễ và khiến website trở nên rất ì ạch. Vì vậy bạn cực kì hạn chế việc sử dụng nhiều tiện ích thủ thuật liên quan đến tải feed lấy dữ liệu, nên tập trung vào các tiện ích sử dụng HTML và CSS* Nén code
Khi đã hoàn chỉnh code css hoặc js, bạn nên nén chúng lại để giảm kích thước trang.- Để nén css truy cập https://cssminifier.com
- Để nén js truy cập https://javascript-minifier.com
- Để bỏ nén tham khảo bài Hướng dẫn tạo tool làm đẹp code JS, HTML, XML, CSS
* Loại bỏ blogger comment
Blogger comment là 1 iframe load từ server của blogger, dạo gần đây có vẻ nhiều blogger xuất hiện nên nó hơi bị lag 😅. Khi kiểm tra tốc độ thì đây là yếu tố hàng đầu làm chậm tốc độ tải trang. Vì vậy tôi đã quyết định không sử dụng hệ thống bình luận của blogger nữa và thay vào đó là sử dụng plugin bình luận của FacebookĐể tắt bạn làm như sau
Với facebook comment ta có thể tùy biến nhiều thứ hơn, có thể tối ưu load js sdk (sẽ trình bày ở phần dưới), hơn nữa bạn online facebook nhiều hơn là ngồi check mail nên chắc chắn việc nhận thông báo bình luận và phản hồi cũng được nhanh hơn.
Tham khảo bài viết Connect Facebook plugins with Blogger
* Iframe
Khi nhúng video từ nguồn khác vào thường khiến cho trang chạy rất chậm. Giải pháp đưa ra là trì hoãn việc tải iframe cho đến khi tải xong trangVí dụ bạn nhúng 1 video từ youtube vào với code như sau
<iframe width="560" height="315" src="https://www.youtube.com/embed/MhQKe-aERsU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Bạn chỉ cần thay đổi thành
<iframe width="560" height="315" data-src="https://www.youtube.com/embed/MhQKe-aERsU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Và xuất bản bài đăng
Tiếp theo bạn sẽ truy cập vào trang chỉnh sửa template và dán đoạn code sau trước thẻ đóng </body>
<script type='text/javascript'>//<![CDATA[ function init() { var vidDefer = document.getElementsByTagName('iframe'); for (var i = 0; i < vidDefer.length; i++) { if (vidDefer[i].getAttribute('data-src')) { vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src')); } } } window.onload = init; //]]></script>
* Lazy load javascript
Thực ra trong quá trình tải trang một số js không nhất thiết phải tải ngay, ta có thể trì hoãn việc tải nó bằng việc sử dụng một số phương thức cơ bản của javascript như sau+ Sử dụng scroll()
function function_name() { // Your code } $(window).scroll(function() { if ($(window).scrollTop() > XXX) { function_name(); } });
Hiểu đơn giản function_name() sẽ được load khi cuộn trang tới độ cao XXX mà bạn đặt.
Trong trường hợp bạn muốn load js từ nguồn thứ 3 code có dạng
function >function_name() { var t = document.createElement("script"); t.src = "https://yourcode.js"; document.body.appendChild(t); } $(window).scroll(function() { if ($(window).scrollTop() > XXX) { function_name(); } });
+ Sử dụng getBoundingClientRect()
Ví dụ tôi muốn load sdk của facebook, khi đó bạn sẽ cần chỉ định 1 div nào đó với id nào đó (ở đây tôi lấy 1 div có id là fb-plugin), khi cuộn chuột chạm tới div đó js mới được load. Code có dạng
function loadSDK() { var t = document.createElement("script"); t.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12&appId=285887815280112&autoLogAppEvents=1", document.body.appendChild(t) } window.onscroll = function() { document.getElementById("fb-plugin").getBoundingClientRect().top < window.innerHeight && (loadSDK(), window.onscroll = null) };
+ Sử dụng button ?
Cái này khá hay nhỉ, bấm vào mới bắt đầu tải js ! Thử nó với facebook comment xem sao
Code demo với button
<button id='showcmt' onClick='showComments();'>Comments</button> <fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' numposts='5' width='100%'/>
Tạo function load SDK Facebook khi có sự kiện click vào button
function showComments() { (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.12&appId=285887815280112&autoLogAppEvents=1'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); }
+ Sử dụng sự kiện onload
function your_function() { // Your code } window.onload = your_function;
với Jquery
function your_function() { // Your code } $(window).on('load', function() { your_function() });
Theo đó khi tải xong trang (js, css, image,...) thì code trong hàm your_function mới được thực thi. Phương thức này rất hay khi cần tải js nặng (sdk facebook, google analytics,...)
KẾT LUẬN: Trải nghiệm người dùng là điều mỗi webmaster cần đặc biệt chú ý, khi gặp một website có tốc độ tải trang chậm, tâm lý chung của người xem thường rất ngại quay lại trang. Vì thế ngoài nội dung, giao diện bạn cũng cần quan tâm đến vấn đề tối ưu thời gian tải trang
Trên đây là kinh nghiệm tôi rút ra được trong quá trình cải thiện hiệu suất tải trang blog, có thể sẽ có thiếu xót rất hân hạnh được tiếp thu góp ý từ phía bạn đọc. Trong thời gian tới nếu tìm hiểu thêm được các kĩ thuật cải thiện hiệu suất tải trang cho blog tôi sẽ tiếp tục cập nhật tại bài viết này vì vậy hãy thường xuyên ghé thăm để cập nhật những tri thức mới
Chúc bạn thành công !
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên
mình đã tối ưu tốc độ hình ảnh ( logo + cành đào )
Có cần tối ưu tốc độ quảng cáo google adsense không nhỉ :s mà không biết tối ưu như thế nào, mình thấy có cách khi người dùng scroller trượt đọc bài thì quảng cáo mới hiện, nhưng mình lại không muốn áp dụng vì mình muốn vào trang là thấy quảng cáo luôn :s