Mempercepat Loading Blog Dengan cara Ini
Kecepatan suatu blog merupakan cara atau bagian dari teknik SEO On-Page. Jika situsmu terasa lambat ketika diakses maka kemungkinan besar visitor atau pengunjung blog akan cepat meninggalkan dan mungkin saja tidak akan kembali lagi.
Pemilihan template yang tepat, mengurangi pemasangan widget ataupun mengkompres gambar, selain itu mengurangi jumlah iklan, dan juga mengurangi pemakaian CSS serta file js/javascript merupakan faktor pendukung untuk kecepatan loading blog anda. Sebab itu, anda tak hanya mengandalkan lazy load saja namun perlu memperhatikan faktor-faktor lainnya yang membantu mempercepat loading blog.
Namun bila terlanjur memilih template blog yang sudah dirasa sesuai dan banyak widget juga dipasang untuk mempercantik tampilan sah-sah saja. Untuk mempercepat loading blog cara ini bisa dipakai.
Saya sendiri juga sudah membuktikan bahwa memang ada perubahan sebelum menggunakan dan setelah menggunakan kode lazyload ini. langsung saja jika anda ingin menggunakan dibawah ini cara menggunakan atau penempatannya:
1. Salin/Copy script code dibawah ini:
<script type="text/javascript">
//<![CDATA[
!function(t,e){"object"==typeof exports?module.exports=e(t):"function"==typeof define&&define.amd?define([],e(t)):t.LazyLoad=e(t)}("undefined"!=typeof global?global:this.window||this.global,function(t){"use strict";const e={src:"data-src",srcset:"data-srcset",selector:".lazyload"},r=function(){let t={},e=!1,s=0,o=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(e=arguments[0],s++);let n=function(s){for(let o in s)Object.prototype.hasOwnProperty.call(s,o)&&(e&&"[object Object]"===Object.prototype.toString.call(s[o])?t[o]=r(!0,t[o],s[o]):t[o]=s[o])};for(;s<o;s++){n(arguments[s])}return t};function s(t,s){this.settings=r(e,s||{}),this.images=t||document.querySelectorAll(this.settings.selector),this.observer=null,this.init()}if(s.prototype={init:function(){if(!t.IntersectionObserver)return void this.loadImages();let e=this;this.observer=new IntersectionObserver(function(t){t.forEach(function(t){if(t.intersectionRatio>0){e.observer.unobserve(t.target);let r=t.target.getAttribute(e.settings.src),s=t.target.getAttribute(e.settings.srcset);"img"===t.target.tagName.toLowerCase()?(r&&(t.target.src=r),s&&(t.target.srcset=s)):t.target.style.backgroundImage="url("+r+")"}})},{root:null,rootMargin:"0px",threshold:[0]}),Array.prototype.forEach.call(this.images,function(t){e.observer.observe(t)})},loadAndDestroy:function(){this.settings&&(this.loadImages(),this.destroy())},loadImages:function(){if(!this.settings)return;let t=this;Array.prototype.forEach.call(this.images,function(e){let r=e.getAttribute(t.settings.src),s=e.getAttribute(t.settings.srcset);"img"===e.tagName.toLowerCase()?(r&&(e.src=r),s&&(e.srcset=s)):e.style.backgroundImage="url("+r+")"})},destroy:function(){this.settings&&(this.observer.disconnect(),this.settings=null)}},t.lazyload=function(t,e){return new s(t,e)},t.jQuery){const e=t.jQuery;e.fn.lazyload=function(t){return(t=t||{}).attribute=t.attribute||"data-src",new s(e.makeArray(this),t),this}}return s}); $('img').addClass('lazyload'); $("img").each(function() { var $this = $(this), src = $this.attr("src"); $this.attr( "data-src", src ); $this.removeAttr("src"); }); $('img').attr('src', "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidG8PwV3mIaHGlHoBknEItafPFKuXprycijRU8ApTGCDdPU8cDQjIVOFn-wgs8uolnxqU4N2yvwpLaFwviWZVJpwL2FJoWkqXm8qrA2HzgBhqPQmSD2xBX_niYShz5Nf-3wVFkvMh74zvU/s1600/Bars-1s-200px.gif"); window.addEventListener("scroll", function(event) { lazyload(); }); $(window).on('load', function () { $('img').each(function () { if (lazyload(this)) { $(this).attr('src', $(this).data('src')).removeAttr('data-src'); } }); });
//]]>
</script>
2. Login blog - dasbhoard
3. Edit HTML/Mode Edit
4. Jika sudah anda bisa cari kode </body> atau <!--</body>--></body> dengan klik CTRL + F dan paste kode tersebut agar lebih mudah.
Silakan anda copy kode no 1 di atas kemudian paste kodenya tepat diatas kode </body>
5. Save
Silahkah di lihat tampilan blog anda; untuk memastikan silahkan mengecek skornya di pagespeed google maupun di gtmetrix.
Selamat mencoba | Salam Blogger
Gabhex | Bisa Papua
Pemilihan template yang tepat, mengurangi pemasangan widget ataupun mengkompres gambar, selain itu mengurangi jumlah iklan, dan juga mengurangi pemakaian CSS serta file js/javascript merupakan faktor pendukung untuk kecepatan loading blog anda. Sebab itu, anda tak hanya mengandalkan lazy load saja namun perlu memperhatikan faktor-faktor lainnya yang membantu mempercepat loading blog.
Namun bila terlanjur memilih template blog yang sudah dirasa sesuai dan banyak widget juga dipasang untuk mempercantik tampilan sah-sah saja. Untuk mempercepat loading blog cara ini bisa dipakai.
Saya sendiri juga sudah membuktikan bahwa memang ada perubahan sebelum menggunakan dan setelah menggunakan kode lazyload ini. langsung saja jika anda ingin menggunakan dibawah ini cara menggunakan atau penempatannya:
1. Salin/Copy script code dibawah ini:
<script type="text/javascript">
//<![CDATA[
!function(t,e){"object"==typeof exports?module.exports=e(t):"function"==typeof define&&define.amd?define([],e(t)):t.LazyLoad=e(t)}("undefined"!=typeof global?global:this.window||this.global,function(t){"use strict";const e={src:"data-src",srcset:"data-srcset",selector:".lazyload"},r=function(){let t={},e=!1,s=0,o=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(e=arguments[0],s++);let n=function(s){for(let o in s)Object.prototype.hasOwnProperty.call(s,o)&&(e&&"[object Object]"===Object.prototype.toString.call(s[o])?t[o]=r(!0,t[o],s[o]):t[o]=s[o])};for(;s<o;s++){n(arguments[s])}return t};function s(t,s){this.settings=r(e,s||{}),this.images=t||document.querySelectorAll(this.settings.selector),this.observer=null,this.init()}if(s.prototype={init:function(){if(!t.IntersectionObserver)return void this.loadImages();let e=this;this.observer=new IntersectionObserver(function(t){t.forEach(function(t){if(t.intersectionRatio>0){e.observer.unobserve(t.target);let r=t.target.getAttribute(e.settings.src),s=t.target.getAttribute(e.settings.srcset);"img"===t.target.tagName.toLowerCase()?(r&&(t.target.src=r),s&&(t.target.srcset=s)):t.target.style.backgroundImage="url("+r+")"}})},{root:null,rootMargin:"0px",threshold:[0]}),Array.prototype.forEach.call(this.images,function(t){e.observer.observe(t)})},loadAndDestroy:function(){this.settings&&(this.loadImages(),this.destroy())},loadImages:function(){if(!this.settings)return;let t=this;Array.prototype.forEach.call(this.images,function(e){let r=e.getAttribute(t.settings.src),s=e.getAttribute(t.settings.srcset);"img"===e.tagName.toLowerCase()?(r&&(e.src=r),s&&(e.srcset=s)):e.style.backgroundImage="url("+r+")"})},destroy:function(){this.settings&&(this.observer.disconnect(),this.settings=null)}},t.lazyload=function(t,e){return new s(t,e)},t.jQuery){const e=t.jQuery;e.fn.lazyload=function(t){return(t=t||{}).attribute=t.attribute||"data-src",new s(e.makeArray(this),t),this}}return s}); $('img').addClass('lazyload'); $("img").each(function() { var $this = $(this), src = $this.attr("src"); $this.attr( "data-src", src ); $this.removeAttr("src"); }); $('img').attr('src', "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidG8PwV3mIaHGlHoBknEItafPFKuXprycijRU8ApTGCDdPU8cDQjIVOFn-wgs8uolnxqU4N2yvwpLaFwviWZVJpwL2FJoWkqXm8qrA2HzgBhqPQmSD2xBX_niYShz5Nf-3wVFkvMh74zvU/s1600/Bars-1s-200px.gif"); window.addEventListener("scroll", function(event) { lazyload(); }); $(window).on('load', function () { $('img').each(function () { if (lazyload(this)) { $(this).attr('src', $(this).data('src')).removeAttr('data-src'); } }); });
//]]>
</script>
2. Login blog - dasbhoard
3. Edit HTML/Mode Edit
4. Jika sudah anda bisa cari kode </body> atau <!--</body>--></body> dengan klik CTRL + F dan paste kode tersebut agar lebih mudah.
Silakan anda copy kode no 1 di atas kemudian paste kodenya tepat diatas kode </body>
5. Save
Silahkah di lihat tampilan blog anda; untuk memastikan silahkan mengecek skornya di pagespeed google maupun di gtmetrix.
Selamat mencoba | Salam Blogger
Gabhex | Bisa Papua
