Mempercepat Loading Blog Dengan Lazyload Pure Javascript

Mempercepat Loading Blog Dengan Lazyload Pure Javascript

lazyload pure javascript percepat loading blog

Tutorial Cara Mempercepat Loading Blog Menggunakan Script Lazyload Pure Javascript

Cara Mengatasi Leverage browser caching Image di Google PageSpeed Insights, kali ini saya akan menawarkan tutorial untuk mengatasi gambar thumbnail yang memberatkan loading blog dikala di cek memakai Google PageSpeed Insights / gtmetrix.com dengan LazyLoad Image Pure JavaScript.

Ketika kalian mengecek kecepatan loading blog di google page speed dan ada gambar thumbnail yang ukurann resolusinya besar maka akan disuruh untuk mengompres gambar / menyesuaikan ukuran gambarnya supaia loading blog menjadi cepat, Properly formatting and compressing images can save many bytes of data., tapi itu biasanya akan menciptakan gambar thumbnail menjadi blur / buram.

Nah, supaya sanggup memakai resolusi gambar yang besar untuk mendapat hasil yang jerniah / tidak buram sanggup mencoba memakai script LazyLoad Image Pure JavaScript ini.

Sekarang mari kita lanjut ke tahap-tahap memasang LazyLoad image di bloger untuk meningkatkan kecepatan loading blog dan mengatasi leverage browser caching image.
Demo Setelah Memasang Script Ini

Kalian harus sedikit paham perihal HTML, sebab nanti kita akan merubah / menambah tag imagenya secara manual..

Tutorial Mempercepat Loading Blog Menggunakan LazyLoad

  • Login ke akun blogger kalian
  • Masuk ke sajian TemplateEdit HTML, cari aba-aba </body>
  • Setelah ketemu, masukan script lazyload images dibawah ini sempurna diatasnya
  •  <script type="text/javascript"> //<![CDATA[ //LazyLoad Image function loadScript(d){var o=document.createElement("script");o.src=d,document.body.appendChild(o)}function downloadJSAtOnload(){loadScript("https://rawgit.com/mastamvan/backup/master/lazyload.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload; //]]> </script> 
  • Save Template...

Nah tahap selanjutnya kita tinggal memilih gambar thumbnail mana yang ingin di defer mengunakan lazy load ini.

Kalian harus menambahkan class='lazy' pada tag imagenya dan Kalian Harus Merubah src menjadi data-src atau expr:src menjadi expr:data-src. Contoh
 <img src=".../link-image-kalian.png"> <img expr:src="dataimagenya">  Rubah Menjadi  <img class="lazy" data-src=".../link-image-kalian.png"> <img class="lazy" expr:data-src="dataimagenya">  Atau Kalian Juga Bisa Merubahnya Kaprikornus  <img class="lazy" src='.../link-image-resolusi-kecil.png' data-src=".../link-image-kalian.png"> 

Okeh, sebagai pola saya akan menawarkan tutorial buat kalian yang memakai readmore tanpa javascript ibarat pada template Evo Magz sebab mungkin banyak di antar kalian yang menggunakannya

  • Langkah pertama, silahkan cari aba-aba data:post.thumbnailUrl Kira-kira penampakannya ibarat berikut
  •  <b:if cond='data:post.thumbnailUrl'>     <a expr:href='data:post.url'>         <div class='img-thumbnail'><img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 200, &quot;400:300&quot;)' expr:title='data:post.title' /></div>     </a>     <b:else/>     <b:if cond='data:post.firstImageUrl'>         <a expr:href='data:post.url'>             <div class='img-thumbnail'><span class='rollover' /><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title' /></div>         </a>         <b:else/>         <a expr:href='data:post.url'>             <div class='img-thumbnail'><span class='rollover' /><img expr:alt='data:post.title' expr:title='data:post.title' src='//3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w200-h150-c/no-image.png' /></div>         </a>     </b:if> </b:if> 
  • Kalian Rubah menjadi
  •  <b:if cond='data:post.thumbnailUrl'>     <a expr:href='data:post.url'>         <div class='img-thumbnail'><img class="lazy" expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 200, &quot;400:300&quot;)' expr:title='data:post.title' /></div>     </a>     <b:else/>     <b:if cond='data:post.firstImageUrl'>         <a expr:href='data:post.url'>             <div class='img-thumbnail'><span class='rollover' /><img class="lazy" expr:alt='data:post.title' expr:data-src='data:post.firstImageUrl' expr:title='data:post.title' /></div>         </a>         <b:else/>         <a expr:href='data:post.url'>             <div class='img-thumbnail'><span class='rollover' /><img class="lazy" expr:alt='data:post.title' expr:title='data:post.title' data-src='//3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w200-h150-c/no-image.png' /></div>         </a>     </b:if> </b:if> 
    Kalo kalian memakai reamore dengan javascript, tinggal rubah srcnya menjadi data-src
    Intinya, kalian cari tag <img kemudian rubah bagian.
    src menjadi data-src atau expr:src menjadi expr:data-src
    dan tambahkan class lazy
  • Kalau sudah, tinggal cek dan lihat hasilnya. salam tamvan

Cukup sekian artikel perihal cara mempercepat loading blogger memakai lazy load image ini semoga bermanfaat, apabila ada yang tidak di mengerti silahkan bertanya di kolom komentar. Keyword Terkait : eliminate render-blocking javascript and css in above-the-fold content, cara mempercepat loading website wordpress, cara mempercepat loading blog dengan script, Cara Praktis Mempercepat Loading Blog


Sumber https://mastamvan.blogspot.com/

Baca juga:

Blogger
Disqus
Pilih Sistem Komentar

No comments

Silahkan berkomentar.
Perhatian! Komentar yang mengandung spam tidak akan di terima.