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 memberikan tutorial untuk mengatasi gambar thumbnail yang memberatkan loading blog ketika di cek menggunakan 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 membuat gambar thumbnail menjadi blur / buram.

Nah, agar dapat menggunakan resolusi gambar yang besar untuk mendapatkan hasil yang jerniah / tidak buram bisa mencoba menggunakan 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 tentang HTML, karena nanti kita akan merubah / menambah tag imagenya secara manual..

Tutorial Mempercepat Loading Blog Menggunakan LazyLoad

• Login ke akun blogger kalian

• Masuk ke menu Template → Edit HTML, cari kode </body>

• Setelah ketemu, masukan script lazyload images dibawah ini tepat 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 menentukan 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 Jadi

<img class="lazy" src='.../link-image-resolusi-kecil.png' data-src=".../link-image-kalian.png">

Okeh, sebagai contoh saya akan memberikan tutorial buat kalian yang menggunakan readmore tanpa javascript seperti pada template Evo Magz karena mungkin banyak di antar kalian yang menggunakannya

• Langkah pertama, silahkan cari kode data:post.thumbnailUrl Kira-kira penampakannya seperti 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/AVvXsEjTpSW2069pntdDvHjysOpl6WB6Da6PcOJNCIIUfNk4Rnfg6fYX1dsAVnDRSAWF_TTaxVBJ6f3BGW6stffvDqROMFm9LGy8aZ8JJ-0PWUYFvUzfbAxTRtIjNPEFx0vm9WUBUJvG7qVHCLGH/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/AVvXsEjTpSW2069pntdDvHjysOpl6WB6Da6PcOJNCIIUfNk4Rnfg6fYX1dsAVnDRSAWF_TTaxVBJ6f3BGW6stffvDqROMFm9LGy8aZ8JJ-0PWUYFvUzfbAxTRtIjNPEFx0vm9WUBUJvG7qVHCLGH/w200-c-h150/no-image.png' /></div>
        </a>
    </b:if>
</b:if>

Kalo kalian menggunakan reamore dengan javascript, tinggal rubah srcnya menjadi data-src
Intinya, kalian cari tag <img lalu 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 tentang cara mempercepat loading blogger menggunakan 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 Mudah Mempercepat Loading Blog