Một số cách cơ bản để cải thiện hiệu suất Blog mà bạn nên biết

Một số cách cơ bản để cải thiện hiệu suất Blog mà bạn nên biết, đạt hơn 90 điểm nếu bạn áp dụng đúng cách.

Theo dữ liệu do Google đưa ra, 50% người dùng nói rằng tốc độ quan trọng đối với họ và họ sẽ bỏ qua trang web nếu nó tải trong hơn 5 giây.

Cải thiện hiệu suất Blogger

Hiệu suất tải trang Blog

Mỗi ngày, bạn phải truy cập vào khoảng 100 trang web và bạn cũng có thể cảm thấy thất vọng vì những trang tải rất chậm.

Theo dữ liệu do Google đưa ra, 50% người dùng nói rằng tốc độ quan trọng đối với họ và họ sẽ bỏ qua trang web nếu nó tải trong hơn 5 giây trên mạng 4G.

Bây giờ nếu bạn nhận ra rằng 5 giây là một khoảng thời gian nhỏ nhưng có, nó có thể thực hiện được nếu chúng ta triển khai chính xác các tập lệnh và các yếu tố khác trong blogspot của mình.

Thành phần ?m=1 URL bổ sung làm cho blog của bạn tải chậm một chút, điều này làm mất thêm thời gian để tải.

Nhưng chúng ta không thể làm bất cứ điều gì trong việc này vì nó là một thành phần URL phía máy chủ.

Bên cạnh đó, chúng ta có thể nâng hiệu suất của mình lên 100 nếu chúng ta đang sử dụng một template tốt và lên 90+ nếu sử dụng một số mẫu khác bằng cách triển khai các code đã cho.

Làm thế nào để kiểm tra hiệu suất blog?

Ở đây chúng ta có 2 trang web để kiểm tra phổ biến nhất. Nó giúp kiểm tra về thời gian tải trang web cần thiết, sau đó các yếu tố ảnh hưởng đến việc trang web tải chậm hay nhanh là gì...

Kiểm tra tốc độ tải trang

https://pagespeed.web.dev

Trang web này cũng thuộc sở hữu của Google và nó cung cấp tốc độ hoạt động của một trang web và những yếu tố nào chúng ta phải triển khai để chỉnh sửa càng sớm càng tốt.

Đo chất lượng trang

https://web.dev/measure

Kiểm tra các trang của bạn trong môi trường phòng thí nghiệm được cung cấp bởi PageSpeed Insights. Sau đó, nhận các mẹo và đề xuất để cải thiện trải nghiệm người dùng của bạn.

Kết luận: Cả hai công cụ này đều cung cấp cho bạn kết quả chính xác về hiệu suất của trang web của bạn.

Các bước để cải thiện hiệu suất blog

Loại bỏ ?m=1 trên url blog

Như chúng ta biết ?m=1 được blogger triển khai cho các thiết bị di động và mình cũng không biết tại sao blogger lại làm những việc như vậy cho các miền tùy chỉnh.

Về cơ bản điều này sẽ tạo ra nhiều url của trang web của bạn được lập chỉ mục và điều này sẽ ảnh hưởng đến SEO của trang web của bạn và sẽ ảnh hưởng đến hiệu suất của trang web của bạn vì nó là chuyển hướng hai chiều.

Tham khảo code ẩn ?m=1 trên Blogger. Các bạn dán đoạn code sau trên thẻ đóng </head> nhé:

<script>
//<![CDATA[
var uri = window.location.toString();
if (uri.indexOf("?m=1", "?m=1") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("?m=1"));
window.history.replaceState({}, document.title, clean_uri);
}
//]]>
</script>

Nhà nhà đều có Adsense

Nhắc tới câu 'nhà nhà đều có adsense' chắc nhiều ông đang chửi thầm vì chưa đăng ký được Adsense =)) Nói vui vậy thôi chư đa số các ông làm blog, làm web bây giờ đa số là đăng ký Adsense được hết rồi.

Quay lại vấn đề chính, khi chèn code Adsense vào Blog thì chắc ông nào cũng phải biết rồi không cần nói nhiều nữa đúng không? Vậy thì làm sao để khắc phục tình trạng giảm tốc độ trang khi có code Adsense? Hãy cùng tham khảo đoạn code sau đây nhé:

<script type='text/javascript'>//<![CDATA[var lazyadsense2 = false;window.addEventListener("scroll", function(){if ((document.documentElement.scrollTop != 0 && lazyadsense2 === false) || (document.body.scrollTop != 0 && lazyadsense2 === false)) {(function() { var ad = document.createElement('script'); ad.setAttribute('data-ad-client','ca-pub-xxxxxxxxxxxxxxxx'); ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();lazyadsense2 = true; }}, true);//]]></script>

xxxxxxxxxxxxxxxx: thay bằng ID adsense của bạn.

Code Google Analytics

Tương tự như Adsense thôi, Analytics có đoạn code gtag.js đủ nặng để trang web của bạn tải chậm đi.

Khi bạn lấy mã từ Google Analytics, sẽ có một mã bắt đầu từ UA-xxxxxxxx và bạn chỉ cần sao chép mã đó dán vào phần đánh dấu của đoạn code dưới đây:

<script type='text/javascript'>//<![CDATA[var lazyanalisis=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyanalisis||0!=document.body.scrollTop&&!1===lazyanalisis)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxxx ";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyanalisis=!0)},!0);//]]></script><script>//<![CDATA[ window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-xxxxxxx-x ');//]]></script>

Ok nhớ thay ID phần bôi đỏ.

Định dạng hình ảnh thế hệ mới

Theo web.dev, hình ảnh thế hệ tiếp theo là hình ảnh WebP giúp hình ảnh của bạn nhanh hơn 20% so với PNG và chứa ít dung lượng hơn PNG một chút.

Làm thế nào để tạo ảnh WebP từ PNG?

cloudconvert.com, nơi sẽ cung cấp cho bạn hình ảnh WebP cho hình ảnh PNG của bạn trong vài giây.

Và sau đó chỉ cần tải lên hình ảnh WebP đó tương tự như PNG và thậm chí sau đó hiệu suất hiển thị một số lỗi trong các phần hình ảnh. Đừng lo lắng vì đã có Anh Trai Nắng chia sẻ cho bạn đoạn code sau đây để sữa lỗi:

<script>//<![CDATA[// LazyLoad(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);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(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_j1I3Itl-_BiDrq-dn9kZq3zqO3agayPG3MUj_zE3iU7YhR7E3gNiwyLSyQHGTefqsEQ4b8vZJ_ZmheVP7IrKepE7Ke8KuKDutn8llJLICCAKOU9GjHh5iGf6_8JAWFcvy84EKt0eIP0O/s1600/sun.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>

Đoạn code này thì các bạn chèn lên thẻ đóng </body>. Sau đó đăng ảnh WebP thoải mái trên blog nhé!

Bổ sung Javascript Lazyload

Dưới đây là JavaScript tải chậm giúp Blog của bạn hiện các tập lệnh theo thứ tự khi người dùng lướt trên trình duyệt:

<script type='text/javascript'>//<![CDATA[var lazyanand=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyanand||0!=document.body.scrollTop&&!1===lazyanand)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://www.anandnawal.com/sw.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyanand=!0)},!0);//]]></script>

Chèn code này trên thẻ đóng </body> nhé!

Số lượng bài viết ở trang chủ

Khi các bạn vừa tạo Blog thì mặc định của nó ở trang chủ là 7 bài rồi. Và để Blog tải tốt thì đề xuất của các chuyên gia trong Cộng Đồng Blogger đưa ra là từ 7 - 9 bài hiện thị ở trang chủ là đẹp.

Tìm nạp trước DNS để tăng tốc

Bằng cách sử dụng tìm nạp trước DNS, bạn có thể tăng tốc độ trang web của mình nhiều hơn trước.

Hầu hết các trang web tiêu chuẩn cao trên blogger sử dụng tìm nạp trước DNS.

Điều này sẽ giúp bạn giảm "thời gian đến byte đầu tiên" và cải thiện điểm tốc độ trang.

Xem thêm: Tăng tốc độ tải trang Blogspot với DNS Prefetch

Kết luận

Bên trên là một số cách cơ bản để cải thiện hiệu suất Blog khá là đơn giản đúng không nào. Đừng lên để lại ý kiến của các bạn để giúp mình có động lực ra thêm nhiều bài viết khác nữa nhé. Cảm ơn vì đã ghé thăm!