Mempercepat Loading Blog Dengan Lazyload Pure Javascript

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, semoga sanggup memakai resolusi gambar yang besar untuk mendapat hasil yang jerniah / tidak buram sanggup mencoba memakai script LazyLoad Image Pure JavaScript ini.

Baca Juga Tutorial Blogger:

• Mempercepat Loading Blog Dengan Menghapus Script Bawaan Blogger

• Page Navigation Menjadi Autoload Ketika Di Scroll

• Cara Membuat Loading Page Dengan Animasi Gif Di Blog

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, alasannya ialah nanti kita akan merubah / menambah tag imagenya secara manual..

Tutorial Mempercepat Loading Blog Menggunakan LazyLoad

• Login ke akun blogger kalian

• Masuk ke sajian Template → Edit HTML, cari arahan </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 Makara  <img class="lazy" src='.../link-image-resolusi-kecil.png' data-src=".../link-image-kalian.png"> 

Okeh, sebagai teladan saya akan menawarkan tutorial buat kalian yang memakai readmore tanpa javascript menyerupai pada template Evo Magz alasannya ialah mungkin banyak di antar kalian yang menggunakannya

• Langkah pertama, silahkan cari arahan data:post.thumbnailUrl Kira-kira penampakannya menyerupai 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGUsenlzscU-ladi_jqHpKLldtFwwPy5nKfsAUryDpVbAlCTBc6pDG-nLQ8rOkX9SJFEULWUzGytGWCQN7eM28bcXfAMxSz4Y9EwWX9Aso4UjtyA04x54JHJhJHlUhTOzT7SNBqlhTtfSx/w200-c-h150/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGUsenlzscU-ladi_jqHpKLldtFwwPy5nKfsAUryDpVbAlCTBc6pDG-nLQ8rOkX9SJFEULWUzGytGWCQN7eM28bcXfAMxSz4Y9EwWX9Aso4UjtyA04x54JHJhJHlUhTOzT7SNBqlhTtfSx/w200-c-h150/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

Share this post