ba5710ab89f8b9785b59892e3f42485a60c031ba33d1789fd68ba447482eb3e21df77c321b12fdc7

Cara Pasang Lazy Load Auto di Blogger

kareelkunPhoto Ditulis oleh kareelkun
Diposting
2 Comments
Diperbarui
Kareel Blog - Cara pasang auto lazyload di blogger untuk mempercepat loading blog/ halaman. Para blogger juga harus memperhatikan kesehatan blog yang dikelolanya, memperhatikan kesehatan blog dengan cara terus mengoptimalkan kinernjanya agar tampilan, loading dan konten terus berkembang menjadi lebih baik.

Mengoptimalkan loading blog memang menjadi masalah yang selalu dihadapi oleh para blogger, terutama blogger yang menggunakan flatform blogspot, mungkin tidak menjadi begitu masalah bagi mereka yang menggunakan flatform wordpress dengan self host, karena tersedia plugin tinggal install untuk mengoptimalkan loading blog untuk mempercepat loading meski banyak file dan gambar yang terunggah didalamnya.

Lalu bagaimana untuk para blogger dengan flatform blogspot?
Apakah bisa mengoptimalkan loading blog agar lebih cepat seperti wordpress?
Jawabanya sih bisa, karena pada kesempatan kali ini Kareel Blog akan memberikan tutorial cara mempercepat blog/ halaman dengan metode Auto Lazyload full page script.

Sebelum melanjutkan ke tutorial, mari kita cari tau dulu apa itu Lazyload? ... Lazyload merupakan plugin untuk menunda pemuatan gambar default untuk sementara sampai pemuatan halaman selesai gambar default akan berubah otomatis menjadi gambar asli (original images). Biasanya gambar default sementara berupa gambar dengan kompresi dan ukuran gambar rendah (Low Size). Dengan gambar default yang low size maka akan meningkatkan kecapatan loading blog/ halaman.

Saya kira anda sudah mengerti apa itu lazyload dan bagaimana lazylaod berfungsi dalam blog, lalu sekarang bagaimana cara memasangnya di blog?... sangat mudah, anda hanya perlu untuk memasang script yang akan Kareel Blog bagikan dibawah ini untuk blog anda. Carannya simak langkah pemasangan seperti dibawah ini.

Cara Pasang Auto Lazyload di Blogger Terbaru (Full Page Script)
Adapun langkah demi langkah yang harus anda lakukan berikut ini:
  1. Masuk Dashboard Blogger
  2. Cari dan klik menu Template
  3. Didalam menu template cari dan klik Edit HTML maka akan tampil kolom textarea edit tema
  4. Arahkan kursor ke kolom tema, lalu tekan keyboard CTRL + F
  5. Ditahap ini kita akan mencari kode untuk peletakan plugin lazyload caraya ketik </body> lalu enter, makan akan ketemu kode </body> yang dicari
  6. Pastikan kode </body> masih ada arahkan kursor diatas kode </body>
  7. Kemudian salin dan tempelkan semua kode dibawah ini taruh tepat diatas kode </body>
    <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/AVvXsEgFuVhbMzE98M3-8ojquB1Hjmhih6AZ8mOu1snCxNpprWqveC30oHN8c24OVZhbf7BgGNVFVDiIDnNyv7TE8ASp7yN5TiMdJM8RjMihyphenhyphenQkwa5YI-aaZ0vqfK4gwdd35L5mFtrtiMcE_S2Xk/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>
  8. Simpan / Save 

Keterangan:

- Script diatas menggunakan JQuery pastikan di blog sudah terpasang JQuery versi 2 keatas
- Cara kerja script ini menggunkan addEventListener scroll dengan scroll gambar ori akan tampil
- Menggunakan full page script dimana gambar disemua pages akan menjadi Lazyload Script

Demikianlah tutorial yang saya berikan semoga bermanfaat jika suka silahkan berikan rating diatas artikel ini atau share artikel ini ke teman anda. See you next time
View: - Tags: Blogger, Tutorial
  1. Cara mengetahui sudah terpasang JQuery versi 2 keatas gmn gan?

    BalasHapus
    Balasan
    1. Pengguna Browser PC
      Edit HTML Template pada dashboard blogger, kemudian kursor arahkan ke kolom edit sambil tekan CTRL+F ketikan "jquery" tanpa petik dua atas. Jika ketemu nanti ada angka seperti dibawah ini
      ajax.googleapis,com/ajax/libs/jquery/2.2.4/jquery.min.js
      didepan tulisan jquery diatas ada angka 2.2.4 itu adalah versi jquery

      Hapus

Posting Komentar