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 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.

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 TemplateEdit 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

46 komentar
  1. Terima kasih banyak kang teja buat scriptnya, sekarang masalah Add Expires Header di GTMetrix dan masalah Cache di PageSpeed insight udah tuntas tas tas.... Cara pasangnya juga mudah, gak seribet blog-blog lain ngejelaskannya

    ReplyDelete
    Replies
    1. Sama sama gan.
      Allhamdulilah kalo bisa d pahami :3

      Delete
  2. Bikin tutorial defer parsing of javascript juga mas :v

    ReplyDelete
    Replies
    1. Itu script yang di atas saya defer agar bekerja ketika page sudah di load :3

      Delete
  3. parah itu kecepatannya (y) ,
    komen dulu baru coba,..
    coba praktekin ya kang :)

    ReplyDelete
  4. Tidak cocok sama template ku . coba kunjungi http://bankpengangguran.blogspot.com/

    bener" beda sama ditutor

    ReplyDelete
    Replies
    1. Baca di post gan.
      Coba cari kode ini ↓
      <div class="crop"><img src="'+img[0].src+'" max-width="535;" /></div>

      Rubah jadi ↓
      <div class="crop"><img class='lazy' data-src="'+img[0].src+'" max-width="535;" /></div>

      (y)

      Delete
  5. Akhirnya Jadi Cepat Juga.. Thanx Mas Teja.

    Tadi ane ngalamin kendala sih, tapi contact mas teja langsung di respond, fast respond (Y)

    ReplyDelete
  6. trimakasih mas Tamvan, spertinya saya berhasil mengikuti turtorial diatas meskipun belum bisa 100%. Sukses untuk mas Tamvan

    ReplyDelete
    Replies
    1. ya kang, mungkin ada faktor lain seperti kode javascript yang di hosting / kode bawaan blogger. (y)

      Delete
  7. berarti semua src harus diganti ya

    ReplyDelete
    Replies
    1. Tergantung agan.
      kalo Pengen semua image d pasang lazyload ya harus semuanya.

      Kalo pengen sebagian juga gpp (y) ga akan ngaruh / jadi rusak.

      Delete
  8. cepat cepat buat cucu abg ea :v

    ReplyDelete
  9. Mas, kalau pada IMG sudah ada class sendiri, nah kemudian di tambah class lagi, kan pasti bentrok, itu solusinya gimana mas ?

    ReplyDelete
    Replies
    1. Tambahin gan, misal...


      <img class='tagpertama' src='linkimage'/>

      Rubah jadi

      <img class='tagpertama lazy' data-src='linkimage'/>

      Delete
    2. ngelawak ente gan class kok bisa bentrok =D. Kalo ada property yang sama namun value berbeda mungkin bisa, tapi ini kan gak kena ke CSS =D

      Delete
    3. kalo ane sih rubahnnya kayak gini:
      <img class='tagpertama' src='linkimage'/>

      Rubah jadi

      <img class='lazy tagpertama' data-src='linkimage'/>

      Delete
    4. Bisa juga gan, asal kasih spasi.

      Delete
  10. mantap!!!!
    versi mobile yang semula 89, langsung jadi 97 :3
    makasih boss que

    ReplyDelete
  11. mas kok pada bagian tag <img aku tambahkan atribut class='lazy' eror yha!,gak mau ngesave

    ReplyDelete
    Replies
    1. pesan errornya apa?
      Mungkin di dalam tag img sudah ada atribut classnya, agan ga usah tambah class='lazy' lagi, cukup tambahkan lazynya aja.
      misal

      <img class='tagpertama' src='linkimage'/>

      rubah jadi

      <img class='tagpertama lazy' src='linkimage'/>

      Delete
  12. gan, OOT nih bikin postingan tentang META TAG SEO dong yang terbaru 2017.

    ReplyDelete
  13. Mas, bikin widget simple recent comment dong..

    ReplyDelete
    Replies
    1. Sudah ada gan ↓

      http://mastamvan.blogspot.com/2016/11/recent-comments-blogger-with-avatar.html

      Delete
  14. Hello.

    I implemented this on my blog but my Images are no longer showing. It shows at first and the all the images will stop showing . This is the URL of my blog, please check it for me.

    mymegatext.blogspot.com

    ReplyDelete
  15. It is not working on my blog. Images are no longer showing

    ReplyDelete
    Replies
    1. You must add class='lazy' in tags image n replace src with data-src.

      Delete
  16. gimana caranya agar ini https://rawgit.com/mastamvan/backup/master/lazyload.js tidak terdeteksi leverage browser caching gan.

    ReplyDelete
    Replies
    1. Itu sudah saya defer dan saya cek tidak ada leverage browser caching..

      Delete
  17. Kalau misalnya, image javascript kayak gini gimana caranya mas

    document.write(thumb_size("",""));

    ReplyDelete
    Replies
    1. Kalo ada kode seperti ini

      <img width="'+n+'" height="'+r+'" src="'+e.replace("/s72-c/","/w"

      Coba rubah jadi gini ↓

      <img class="lazy" width="'+n+'" height="'+r+'" data-src="'+e.replace("/s72-c/","/w"

      Delete
  18. makasih bang tutornya sangat membantu (y)

    GTmetrix : 88% & 68% jadi 93% & 75%

    kalo dicek di page speed gk ada perubahan.

    ReplyDelete
  19. kalau lazy load gambarnya sementara diganti dengan animasi loading gimana ya caranya?

    ReplyDelete
  20. Untuk GTMetrix, Fully Loaded Time yang awalnya 2,3s menjadi 1,5s. Mungkin itu works. Tapi kalo orang mau lihat gambar di blog kita, harus discroll dulu baru kelihatan gambarnya. Betulkan?

    ReplyDelete
  21. min kalo template saya bukan pake <img class bla...bla..> tapi make > a href> terus gambar nya ada di atribute tag a nya itu min ,kek gini : <a class='lazy' href='' style='background:url() no-repeat center center;background-size:cover'>

    saya bingung untuk nempatin expr:data-src:'...' nya dimana kang,mohon bantuanyya kang :)

    ReplyDelete
  22. Saya tidak paham pada langkah kedua, dimana mencari kode tersebut? karena di html saya tidak ketemu

    ReplyDelete
    Replies
    1. Tahap kedua itu mencari tag img yang mana nanti akan ditambahkan kode class="lazy" lalu merubah src menjadi expr-src

      Delete
  23. ohh ok juga ni kayaknya,,langsung di perktekan berhasil atau gak ya. hehe

    ReplyDelete
  24. Sukses gan.. Tapi kalau file .jsnya dijadikan script langsung ke body gimana yah? Itukan ada di host lain..

    ReplyDelete
  25. Thnks Gan Bermanfaat Banget.... (y)

    ReplyDelete
  26. wah mantap sekaliartikel nya, udh mutar mutar kemana mana (sampai puyeng) ,blog ini yang cocok dengan yang sy cari...tks

    ReplyDelete