Mempercepat Blog #3 - Pasang Script Lazy Load Untuk Gambar

Cara memasang plugin lazy load di blog untuk meningkatkan score nilai YSlow di GTmetrix dan mengatasi masalah Add Expires header (browser caching).
Memasang Plugin Lazy Load Image di Blogger

Salah satu masalah umum yang kerap ditemui oleh pengguna Blogger adalah sulitnya mengatur expires header (browser caching). Bukan sulit lagi, tapi emang nggak bisa. Berhubung Blogger itu produk Google, jadi status kita cuma nebeng dan nggak bisa mengaturnya sendiri.

Penejelasan Singkat Tentang Cache

Ketika pengungjung pertama kali membuka blog kamu, browser akan melakukan beberapa permintaan untuk men-download semua konten dari blog. Idealnya, semua file tadi disimpan di dalam cache browser si pengunjung. Agar ketika dia kembali mengunjungi blog kamu, semua file bisa langsung diambil dari cache browser. Ini jelas akan meringankan loading blog, karena browser nggak perlu terus-terusan request file-nya ke server. Seberapa lamanya cache tersebut disimpan di browser bisa kamu atur sendiri. Beberapa jenis file yang perlu diatur cache-nya antara lain:
  1. Gambar: jpg, gif, png
  2. Favicon/ico
  3. Javascript
  4. CSS

Itu idealnya ya. Dan itu hanya bisa dilakukan di blog atau website yang memiliki hosting sendiri (self-hosted).

Karena ini Blogger, kamu NGGAK BISA atur expires header tersebut untuk mengontrol cache browser. Maka setiap kali pengunjung membuka blog kamu, browser akan langsung men-download ulang semua file langsung dari server. Maka waktu tempuh yang diperlukan untuk menampilkan halaman blog menjadi lebih lama. Salah satu faktor yang membuat score YSlow di GTmetrix nggak bisa dapet A (100%) kebanyakan ya karena masalah expires header ini.

But no worries. Kamu bisa pake script lazy load image untuk Blogger untuk mengatasi masalah expires header. Efek lainnya, page speed jadi meningkat dan loading blog jadi lebih cepat. Yuk langsung aja ke scriptnya.

Apa Itu Plugin Lazy Load?

Sebuah script yang akan menunda pemanggilan file sebelum dilakukannya aktifitas tertentu. Untuk script Lazy Load Gambar Blogger di artikel ini, pemanggilan file akan ditunda sebelum adanya aktifitas scroll halaman.

Cara Memasang Script Lazy Load di Blogspot

  1. Masuk ke menu Theme, lalu pilih Edit HTML.
  2. Cari kode tag HTML image <img> yang merupakan kode dari thumbnail blog. Di setiap template pasti berbeda, jadi saya contohkan kode thumbnail dari template saya. Buat kamu, cari sendiri ya kodenya. Pasti mirip-mirip.
    <img expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 225, "225:170")'/>

  3. Udah ketemu?
    - Tambahkan class='lazy' pada tag image-nya.
    - Ubah expr:src menjadi expr:data-src.
    - Tambahkan src dan value-nya diisi dengan data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=.

    Sehingga hasil akhirnya menjadi seperti ini:
    <img class='lazy' expr:alt='data:post.title' expr:title='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 225, "225:170")' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

  4. Ini dia bagian utamanya, yaitu script Lazy Load Gambar untuk Blogger. Simpan kode ini SEBELUM / DIATAS </body>.
    <script type='text/javascript'>//<![CDATA[
    function ignielLazyLoad(){eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('u B(){Y(v e=o.1r("B"),t=0;t<e.1q;t++)Q(e[t])&&(e[t].N=e[t].1p("1n-N"))}u Q(e){v t=e.1t();Z t.1x>=0&&t.1w>=0&&t.1v<=(y.1u||o.T.1m)&&t.1k<=(y.1c||o.T.1b)}v b=["\\r\\m\\m\\D\\G\\a\\f\\c\\M\\n\\p\\c\\a\\f\\a\\k","\\h\\f","\\r\\c\\c\\r\\l\\A\\D\\G\\a\\f\\c","\\g\\h\\r\\m","\\p\\l\\k\\h\\g\\g","\\V\\1a\\1e\\R\\h\\f\\c\\a\\f\\c\\M\\h\\r\\m\\a\\m","\\w\\p\\a\\1l\\p\\c\\k\\n\\l\\c","\\r","\\1f\\w\\a\\k\\L\\1j\\a\\g\\a\\l\\c\\h\\k\\W\\g\\g","\\g\\a\\f\\q\\c\\A","\\w\\p\\a\\k\\W\\q\\a\\f\\c","\\c\\a\\p\\c","\\m\\h\\l\\w\\F\\a\\f\\c\\D\\g\\a\\F\\a\\f\\c","\\1i\\h\\m\\L","\\l\\g\\n\\l\\1g","\\p\\l\\k\\h\\g\\g\\1h\\h\\J","\\c\\h\\J","\\q\\a\\c\\S\\h\\w\\f\\m\\n\\f\\q\\R\\g\\n\\a\\f\\c\\1z\\a\\l\\c","\\A\\k\\a\\X","\\a\\1y\\a\\l","\\q\\a\\c\\D\\g\\a\\F\\a\\f\\c\\S\\L\\1F\\m","\\p\\l\\k\\h\\g\\g\\U\\a\\n\\q\\A\\c","\\n\\f\\f\\a\\k\\U\\a\\n\\q\\A\\c","\\J\\k\\a\\G\\a\\f\\c\\V\\a\\X\\r\\w\\g\\c","\\n\\c\\a\\F"];u I(d,j){y[b[0]]?y[b[0]](d,j):y[b[2]](b[1]+d,j)}I(b[3],B),I(b[4],B),o[b[0]](b[5],u(){b[6];Y(v d=o[b[8]](b[7]),j=d[b[9]],s=/1D|1B/i[b[11]](1G[b[10]])?o[b[12]]:o[b[13]],C=u(d,j,s,C){Z(d/=C/2)<1?s/2*d*d*d+j:s/2*((d-=2)*d*d+2)+j};j--;){d[b[1C]](j)[b[0]](b[14],u(d){v j,E=s[b[15]],x=o[b[1A]](/[^#]+$/[b[19]](1H[b[18]])[0])[b[17]]()[b[16]],z=s[b[1d]]-y[b[1s]],O=z>E+x?x:z-E,K=1o,H=u(d){j=j||d;v x=d-j,z=C(x,E,O,K);s[b[15]]=z,K>x&&P(H)};P(H),d[b[1E]]()})}});',62,106,'||||||||||x65|_0x1b5d|x74|_0xdd48x2||x6E|x6C|x6F||_0xdd48x3|x72|x63|x64|x69|document|x73|x67|x61|_0xdd48x4||function|var|x75|_0xdd48x7|window|_0xdd48x8|x68|lazy|_0xdd48x5|x45|_0xdd48x6|x6D|x76|_0xdd48xb|registerListener|x70|_0xdd48xa|x79|x4C|src|_0xdd48x9|requestAnimationFrame|isInViewport|x43|x42|documentElement|x48|x44|x41|x66|for|return|||||||||||x4F|clientWidth|innerWidth|21|x4D|x71|x6B|x54|x62|x53|left|x20|clientHeight|data|900|getAttribute|length|getElementsByClassName|22|getBoundingClientRect|innerHeight|top|right|bottom|x78|x52|20|trident|24|firefox|23|x49|navigator|this'.split('|'),0,{}));} eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('j 4=["\\7\\9\\9\\e\\d\\a\\b\\8\\i\\g\\h\\8\\a\\b\\a\\k","\\f\\c\\7\\9","\\7\\8\\8\\7\\m\\l\\e\\d\\a\\b\\8","\\c\\b\\f\\c\\7\\9"];5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;',23,23,'||||_0xdfb4|window|ignielLazyLoad|x61|x74|x64|x65|x6E|x6F|x76|x45|x6C|x69|x73|x4C|var|x72|x68|x63'.split('|'),0,{}));
    //]]></script>

  5. Setelah selesai, klik tombol Save theme.

Nggak melulu harus gambar thumbnail aja. Di bagian lain pun, selama itu kode tag image <img>, bisa ditambahkan kok.

Cek lagi nilai page speed kamu di GTmetrix dan periksa di bagian YSlow. Semoga masalah di bagian Add Expires header bisa teratasi dengan plugin Lazy Load Blogspot ini.

Kok Gambarnya Jadi Blank Kalau di GTmetrix?

Iya, emang kaya gitu. Seperti yang udah dijelasin diatas, pemanggilan gambar ditunda sebelum ada aktifitas scroll. Berhubung GTmetrix nggak melakukan aktifitas scroll ketika pengecekan halaman, maka gambarnya masih blank.

Kok Nilai YSlow di Bagian Add Expires header-nya Masih Belum Dapat A?

Ayo...cek lagi masalah disana apa. Dan inget lagi ini artikel soal apa.
Ini script Lazy Load untuk gambar, bukan untuk lainnya. Jadi masalah yang muncul disana hanya tersisa soal Javascript, CSS, font, dsb. KECUALI SOAL GAMBAR, karena gambar sudah teratasi oleh script diatas.

Memasang Script Lazy Load Image di Blogspot
Dicek lagi, link yang menyebabkan masalah expires header diatas BUKAN link gambar, kan? Karena masalah gambar sudah teratasi.

Soal masalah yang lainnya semoga bisa dibahas di artikel berikutnya. Silakan kasih komen pake akun asli kalau masih ada yang kurang paham.
109
Mempercepat Blog #3 - Pasang Script Lazy Load Untuk Gambar
Mempercepat Blog #3 - Pasang Script Lazy Load Untuk Gambar
Cara memasang plugin lazy load di blog untuk meningkatkan score nilai YSlow di GTmetrix dan mengatasi masalah Add Expires header (browser caching).
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

109 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Paukuman
    08 Februari, 2024
    Profil: https://www.blogger.com/profile/01299745162792556727
    Mungkin ada yang mw belajar cara kerjanya, ini kode udah di deobfus dan unpack


    function ignielLazyLoad() {
    function lazy() {
    for (var e = document.getElementsByClassName("lazy"), t = 0; t < e.length; t++) isInViewport(e[t]) && (e[t].src = e[t].getAttribute("data-src"))
    }

    function isInViewport(e) {
    var t = e.getBoundingClientRect();
    return t.bottom >= 0 && t.right >= 0 && t.top <= (window.innerHeight || document.documentElement.clientHeight) && t.left <= (window.innerWidth || document.documentElement.clientWidth)
    }
    var Functions = ["addEventListener", "on", "attachEvent", "load", "scroll", "DOMContentLoaded", "use strict", "a", "querySelectorAll", "length", "userAgent", "test", "documentElement", "body", "click", "scrollTop", "top", "getBoundingClientRect", "href", "exec", "getElementById", "scrollHeight", "innerHeight", "preventDefault", "item", ];

    function registerListener(e, t) {
    window[Functions[0]] ? window[Functions[0]](e, t) : window[Functions[2]](Functions[1] + e, t)
    }
    registerListener(Functions[3], lazy), registerListener(Functions[4], lazy), document[Functions[0]](Functions[5], function() {
    Functions[6];
    for (var e = document[Functions[8]](Functions[7]), t = e[Functions[9]], n = /firefox|trident/i [Functions[11]](navigator[Functions[10]]) ? document[Functions[12]] : document[Functions[13]]; t--;) e[Functions[24]](t)[Functions[0]](Functions[14], function(e) {
    var t, d = n[Functions[15]],
    _ = document[Functions[20]](/[^#]+$/ [Functions[19]](this[Functions[18]])[0])[Functions[17]]()[Functions[16]],
    $ = n[Functions[21]] - window[Functions[22]],
    i = $ > d + _ ? _ : $ - d,
    r = function(e) {
    t = t || e;
    var _, $, b, x = e - t,
    o = (_ = x, $ = d, b = i, (_ /= 450) < 1 ? b / 2 * _ * _ * _ + $ : b / 2 * ((_ -= 2) * _ * _ + 2) + $);
    n[Functions[15]] = o, 900 > x && requestAnimationFrame(r)
    };
    requestAnimationFrame(r), e[Functions[23]]()
    })
    });
    }

    var Functions = ["addEventListener", "load", "attachEvent", "onload"];
    window[Functions[0]] ? window[Functions[0]](Functions[1], ignielLazyLoad, !1) : window[Functions[2]] ? window[Functions[2]](Functions[1], ignielLazyLoad) : window[Functions[3]] = ignielLazyLoad, window[Functions[0]] ? window[Functions[0]](Functions[1], ignielLazyLoad, !1) : window[Functions[2]] ? window[Functions[2]](Functions[1], ignielLazyLoad) : window[Functions[3]] = ignielLazyLoad;
  • kangutingo
    22 Januari, 2024
    Profil: https://www.blogger.com/profile/01658842602143309039
    ya puse el código en mi blog https://www.kangutingo.com/ pero cómo sé si realmente está funcionando? no vi mucha diferencia en la velocidad de carga
  • Paukuman
    01 November, 2023
    Profil: https://www.blogger.com/profile/01299745162792556727
    Hanya support di scroll window..
    ndak support ketika scroll nya di document pakai CSS overflow: scroll

    mungkin bisa diperbaiki lagi mbak..
    klo udh di fix, nnti saya comot :3

    makasi sbelumnya
  • Factqyu
    27 Agustus, 2023
    Profil: https://www.blogger.com/profile/03797223862840916422
    Untuk Template Igniplex gak Work ya kak ??
    • Igniel
      27 Agustus, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Igniplex udah ada lazyload gambar bawaan Gak perlu pakai yang lain lagi. Nanti bentrok.
  • Alin_Widiatmoko
    25 Desember, 2022
    Profil: https://www.blogger.com/profile/12520761954931500600
    Ini Lazy Load Manual atau Otomatis Mbak ?
    • Igniel
      25 Desember, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Maksudnya otomatis itu auto muncul saat loading halaman selesai ya? Kalau di tutorial ini, gambar muncul saat ada aktivitas scroll.
    • Alin_Widiatmoko
      25 Desember, 2022
      Profil: https://www.blogger.com/profile/12520761954931500600
      Coba Lihat Cek Di Website zonainternetku.blogspot.com ini Mbak Igniel :

      https://zonainternetku.blogspot.com/2020/01/cara-memasang-lazy-load-gambar-di-blogger.html

      Script LazyLoad Pada Website Mbak Igniel Tersebut Adalah Script Lazy Load Manual. Script Source Code LazyLoad itu Sama Dengan Script yang Ada Pada Website Zonainternetku.blogspot.com.

      Script LazyLoad Ada Yang Manual Juga Ada Yang Otomatis. Cara Kerjanya Sama , Gambar Akan Muncul Saat Ada Aktifitas Scroll Saat Loading Halaman.
    • Igniel
      25 Desember, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Oh...bukan manual sebutannya. Kurang pas. Dikasih class lazy karena gak semua perlu dikasih lazy load.

      Kalau otomatis ambil semua <img>, nanti gambar di dalam postingan juga ikut jadi lazyload. Saya menghindari ngasih lazyload ke gambar postingan karena takutnya gak keindex Google.

      Kecuali buat blog wallpaper boleh lah.
  • Ibnu Batauga
    13 Februari, 2022
    Profil: https://www.blogger.com/profile/02315806170912716246
    Sudah diterapkan ke blog, jadi gambarnya muncul jika discrol ya..
  • Anonim
    Anonim18 Januari, 2022
    #comments {margin:0; padding:10px 15px}jdjd
  • Admin
    03 November, 2021
    Profil: https://www.blogger.com/profile/09754759947551473410
    Terima Kasih Tutorial Nya Mbak. Semoga Berkah
  • tribun
    10 September, 2021
    Profil: https://www.blogger.com/profile/16633396085064635374
    makasih mbak igniel
  • K K UPGRADER
    15 Agustus, 2021
    Profil: https://www.blogger.com/profile/04316583289361519993
    Not working bro 🙁 please check kkupgrader.blogspot.com
  • Public Health
    15 Juni, 2021
    Profil: https://www.blogger.com/profile/04362057046952175693
    Ka, untuk template textrim udah dipasang lazy loading apa belum?
    Terimakasih
    • Igniel
      17 Juni, 2021
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tidak ada lazyload karena Textrim tidak pakai gambar di homepage.
  • Andika Leksana
    06 Maret, 2021
    Profil: https://www.blogger.com/profile/07187641116593193975
    Mba pas saya cari img nya ada banyak banget
  • hasheemi Rafsanjani
    15 Januari, 2021
    Profil: https://www.blogger.com/profile/01205852673505466263
    Terima kasih atas panduannya
    Saya pas searching saya menemukan suatu blog yang menjelaskan script expired header
    www.dirga.id/2019/03/expired-header-blogger.html
    • hasheemi Rafsanjani
      15 Januari, 2021
      Profil: https://www.blogger.com/profile/01205852673505466263
      Semoga jadi referensi
  • Syarhabil Abdussalam
    24 November, 2020
    Profil: https://www.blogger.com/profile/06050168441204379291
    mbak igniel,plis kok gk bisa ya di blog saya? blog toko online,mungkin mbak bisa cek https://arrwistore.blogspot.com/ apa ada yang salah gak mbak?
  • Berbagilmu
    17 Agustus, 2020
    Profil: https://www.blogger.com/profile/00449628215718477315
    Template ku pake template mbak igniel yg igniplex tapi loading thumbnail atau gambarnya lama bgt ya... mau hapus animasi loadingnya yang muter2 itu gimana ya mbak??
  • Ali Hyuuga
    12 Agustus, 2020
    Profil: https://www.blogger.com/profile/06361308303600420638
    sumpah makasih banget mbak tutornya,, js.y work!!!

    dan Add Expires Header pada "Yslow Score" dari 0 menjadi 87
  • Nandar IR
    10 Juli, 2020
    Profil: https://www.blogger.com/profile/04306717763193433351
    Mantap mbak, benar-benar membantu kecepatan blog saya. Semoga blognya makin sukses.
  • Java Sat
    27 Maret, 2020
    Profil: https://www.blogger.com/profile/01281960000646960429
    disertakan cara menambah class lazy pada related postnya...
  • Sahabat Event
    18 Maret, 2020
    Profil: https://www.blogger.com/profile/00368581077689368606
    terimakasih saya pake trik ini
  • Munir
    18 Januari, 2020
    Profil: https://www.blogger.com/profile/15000904957935300437
    Mbak kok gambar thumbnail di home page jadi ilang ya? walaupun udah di scroll? mohon pencerahannya makasih
  • Munir
    14 Januari, 2020
    Profil: https://www.blogger.com/profile/15000904957935300437
    Kok jsnya di ekripsi. Setau saya di developernya enggak tuh
  • Kei Kun
    31 Desember, 2019
    Profil: https://www.blogger.com/profile/05887632494948934510
    JS nya dienkripsi:(((
  • Jurnalis
    09 Desember, 2019
    Profil: https://www.blogger.com/profile/10668643000251508781
    Bagaimana cara kerja dari scripy ini? Aku lihat di template ada banyak tag <img expr:alt='data:post.title' dan itu mewakili 1 image.

    Apakah gambar yg disisipkan dari postingan akan ikut juga delay requestnya?

    Semoga dijawab
  • Tokumei
    06 Desember, 2019
    Profil: https://www.blogger.com/profile/17536767732913839807
    Mampir-mampir mas ke www.otakushinime.xyz
  • Andi
    03 Desember, 2019
    Profil: https://www.blogger.com/profile/14533261353021985246
    Mohon petunjuknya!.
    Cara pasang javascript lazy load di template fiksioner dari igniel gimana mbak/mas?

    Saya lihat-lihat script yang ada di template mirip dengan kode bawaan template igniel fiksioner.

    < div class='ignielToTop' />
    < script> //<![CDATA[
    eval(function(p,a,c,k,e,d)....

    saya pakai template dari igniel, jika kode lazy load di atas saya replace sesuai dokumentasi fiksioner tidak berfungsi.

    Mohon pencerahanya dari admin .
    • JAYA PURNAMA
      12 Oktober, 2020
      Profil: https://www.blogger.com/profile/12799748049536274210
      Saya juga memiliki masalah yang sama.. Mohon bantuannya mba, pengguna fiksioner👌
  • Yuki Ari
    01 Desember, 2019
    Profil: https://www.blogger.com/profile/15352095659481926903
    Cara penerapan di template igneplex gimana ? ia
  • Agw10
    14 September, 2019
    Profil: https://www.blogger.com/profile/01222058552621501984
    Makasih gan blog ane jadi cepatt
  • Revrine
    25 Agustus, 2019
    Profil: https://www.blogger.com/profile/00221476108869501741
    Mba Igniel, bgaimna cara buat animasi thumbnail pada homepage sbelum page di scroll ya ? :)
  • Cacha Febrianty
    06 Agustus, 2019
    Profil: https://www.blogger.com/profile/10706060697163611503
    kalau Lazy Load-nya buat Random Post yang kak igniel share di post lain ini

    https://www.igniel.com/2018/11/random-post-thumbnail.html

    gimana ya kak? mohon di bantu donk kak, trims
  • bassnations
    12 Juli, 2019
    Profil: https://www.blogger.com/profile/16289184187534321309
    mau nanya nih kak,, misal ane nengok ke blog ini via hp redmi 5a, pasti di home scrolnya agak berat,, kenapa ya apa hape ane yg udah kebanyakn memory??? hehehekak igniel
  • MasKalem
    30 Juni, 2019
    Profil: https://www.blogger.com/profile/01010187442206251770
    mba, kenaa setelah pasang script ini kok gambar featured post sama thumbnail di dalam artikel jadi blank. Apanya yang salah ya?
    • Igniel
      30 Juni, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Jangan pasang lazyload di dalam artikel. Cukup di homepage aja.
  • Rizal.amrr(ZLiAN)
    27 Mei, 2019
    Profil: https://www.blogger.com/profile/04707934397452869179
    Kak, add expire headers aku dapet D
    Link yang muncul ini kak
    https://lh3.googleusercontent.com/proxy/0GazEeGM_wHv1k8hx1IJDUMMcXpBkN3cKQmErlLBYtSWhBAIYdEpYs3a_Ad1xBMvhRDD8xAL395ZH0oBNZ9UIxQm1IXITIYafQp4S7-i=s0-d
    https://apis.google.com/js/plusone.js
    https://cdn.staticaly.com/gh/igniel/blogger/master/textrim/v1.js

    Itu tidak bisa biar B atau C minimal gitu kak:) btw aku make textrim template
  • Admin
    04 Mei, 2019
    Profil: https://www.blogger.com/profile/01349604778080565937
    Mbak Igniel kalo mau memasang lazyload di gambar related post gimana, soalnya script tag img nya kaya gini <img alt="" class="related-post-item-thumbnail" src="'+n+'" width="'+g.thumbnailWidth+'" height="'+g.thumbnailHeight+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+a+'" href="'+t+'"'+d+">"+l+"</a></div>"+m+"</li>")}r.innerHTML=o+="</ul>"+m,g.callBack()}},r(g.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]);
    };

    Mohon solusinya .
    • Igniel
      04 Mei, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Lihat class nya. Ubah jadi begini.
      class="related-post-item-thumbnail lazy"
    • Admin
      04 Mei, 2019
      Profil: https://www.blogger.com/profile/07046268239489408223
      Ga work, apa harus ada yang diganti lagi selain kode itu
    • Igniel
      04 Mei, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Related post itu letaknya di dalam postingan utama kan? Sementara script lazyload di atas cuma dijalankan di homepage. Gak bakal jalan kalau letak relatednya bukan di homepage.

  • Gunawan
    01 Mei, 2019
    Profil: https://www.blogger.com/profile/03249225231876715838
    komentar mau konsul error mulu. gak tau salahnya dimana.
    tolong sist, di cek ya saya SS nih. http://prntscr.com/nizew2
  • Anime scene
    30 April, 2019
    Profil: https://www.blogger.com/profile/17238466088797287499
    kalo diterapin di template textrim, apakah cara no 1 bisa dilewati?
    • Igniel
      30 April, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Textrim nggak perlu pakai lazyload karena di homepage nggak ada gambarnya.
  • Syafiq
    29 April, 2019
    Profil: https://www.blogger.com/profile/04007798583952663891
    Di Template blog saya (Evomagz) berhasil diterapkan. Tapi cuma di halaman utama, sedangkan di halaman posting Lazyload nggak berfungsi. Kenapa ya mbak?
    • Igniel
      30 April, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Memang cuma buat halaman utama aja mas
  • azid zainuri
    27 April, 2019
    Profil: https://www.blogger.com/profile/02060927327463751203
    kalau kode img nya berupa seperti dibawah ini caranya gmana kak? sudah saya kasih lazy tapi tetap tidak bisa

    maaf kak saya sertakan link js aslinya soalnya saya masukkan disini tidak bisa.

    https://cdn.jsdelivr.net/gh/KompiAjaib/js@master/kompiflexible8_home2.js

    didalam js tersebut terdapat random post. mohon bantuannya
  • Tentang Ilmu
    02 April, 2019
    Profil: https://www.blogger.com/profile/09231436451993220408
    biar gambar munculnya 1 / 1 ( gak langsung semuanya ) gmana ya mbak.
    kayak blog ini mbak..
  • Abdi
    16 Maret, 2019
    Profil: https://www.blogger.com/profile/03671596906159544118
    mba, numpang tanya. Kalo masang ini kok iklan adsense saya sering blank ya? Atau emg gitu pengaruhnya?
    • Igniel
      16 Maret, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Nggak ngaruh ke iklan. Ini cuma buat gambar.
    • Abdi
      20 Maret, 2019
      Profil: https://www.blogger.com/profile/03671596906159544118
      oh iya, saya ada juga masang lazy load adsense, apakah itu yg buat blank mba? mohon penjelasannya
    • Igniel
      30 April, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bisa jadi lazy load adsensenya yang error. Dicek lagi aja mas.
  • Admin
    15 Maret, 2019
    Profil: https://www.blogger.com/profile/00021993707851784086
    Izin coba mbak. Iya nih, blog saya loadingnya lama pakai BGT. :) Thanks
  • None
    13 Februari, 2019
    Profil: https://www.blogger.com/profile/00215002728742661763
    maaf mbk, kalo untuk postingan apa harus satu-satu nambahin class nya ?
    • Igniel
      13 Februari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Dalam postingan nggak perlu dikasih lazy load karena nanti berpengaruh ke index Google.
  • Azid Zainuri, S.Pd
    11 Februari, 2019
    Profil: https://www.blogger.com/profile/04057497464899163227
    makasih tutorialnya, dengan lazy load ini blog saya jadi super cepat. nyampai sempurna. :)
  • hadits21
    07 Februari, 2019
    Profil: https://www.blogger.com/profile/06980940808101722041
    kak igniel, bisa minta solusi buat script adsense agar cepat dan tidak terindeks gtmetrix atau memparsescript tersebut menjadi internal?.

    seperti milik.e kak igniel, saya lihat tidak ada kode pemanggil pagead2.googlesyndication.com,
  • Unduh Logo
    06 Februari, 2019
    Profil: https://www.blogger.com/profile/16125215230091372486
    Duh belum dibalas.. :(
  • Unduh Logo
    25 Januari, 2019
    Profil: https://www.blogger.com/profile/16125215230091372486
    Kalau gambarnya di dalam CSS gimana, mbak?

    Contoh img untuk background wrapper

    /* CSS BACKGROUND WRAPPER */
    #hero1{background:#00a8ff;background:url('https://2.bp.blogspot.com/-u8Myw0VZKCY/W91D7GeEHBI/AAAAAAAABMg/08BXkFGboYsIw59NuIx-GmvsbCLpeOFqgCLcBGAs/s1600/fixed-background-header.png');background-size:cover;background-position:center center;margin:55px auto 0 auto}
    • Unduh Logo
      25 Januari, 2019
      Profil: https://www.blogger.com/profile/16125215230091372486
      Salah satu yang bikin berat sih emang ini penggunaan background pake gambar, tapi pentiiing buat penampilan :D
    • Igniel
      07 Februari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Jangan bikin gambar jadi background. Ganti thumbnailnya pake cara ini.
      https://www.igniel.com/2018/08/membuat-resize-thumbnail-blogger-tanpa-script.html
      Trus pakein lazyload sesuai tutorial.
  • sufyan Yaan
    30 Desember, 2018
    Profil: https://www.blogger.com/profile/00896429756820287073
    wah hebat hasilnya sy cobakan ke salah satu blog coba coba buat belajar he he he...makasih banyak
  • Unknown
    30 November, 2018
    Profil: https://www.blogger.com/profile/08226983345184617601
    mas bagaimana cara page speed di desktop dan mobile bisa cepat
    say cek punya mas igniel untuk
    mobile :97
    dan dekstop : 100
    mantap sekali page speed nya mohon infonya
  • Galih Budi Prakoso
    21 November, 2018
    Profil: https://www.blogger.com/profile/15387026996590778516
    lagi dan lagi, di deobfus :(
  • Maki M.
    21 November, 2018
    Profil: https://www.blogger.com/profile/08446403296417996016
    saya bermaksud menggunakan lazy load di halaman(mobile ?m=1) posting, dan saya pakai javascript untuk menambahkan class, src, data-src. Jadi tidak perlu edit postingan satu-satu.

    Skenarionya :
    ketika laman di akses di desktop gambar dalam posting tidak menggunakan lazy-load, ketika di akses di laman mobile (m=1) dengan bantuan tag-conditional blogger barulah gambar menggunakan lazy-load.

    dan kode yang saya gunakan adalah

    var imagesl = document.getElementsByTagName('img'); for(var i = 0; i < imagesl.length; i++) {var currentSrc = imagesl[i].getAttribute('src'); imagesl[i].setAttribute('src','data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='); imagesl[i].setAttribute('data-src','currentSrc'); imagesl[i].className += ' lazy'; };

    ketika di coba semuanya berhasil kecuali di bagian 'data-src' value yang dihasilkan malah tulisan 'currentSrc' (src="currentSrc")..

    Pertanyaannya kira-kira apa yang salah dengan kode saya diatas dan bagaimana cara memperbaikinya? Mohon bimbingannya
    • Igniel
      21 November, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Hilangkan tanda kutipnya. Jadi kaya gini.
      imagesl[i].setAttribute('data-src',currentSrc);
  • Tedi Eka
    20 November, 2018
    Profil: https://www.blogger.com/profile/17195151981500818409
    Mbak saya sudah coba pasang dan berhasil, hanya saja kode data-src nya di blog saya tidak terbaca untuk script resize ukuran thumbnail homepage. Sehingga lebar thumbnailnya tidak sesuai. Bentuk scriptnya seperti ini:

    https://docs.google.com/document/d/16TbUGlp7YFAssoioA8QwzK7VIdKxYbJVdxBAzdb8YiA/edit?usp=sharing

    Kira-kira gimana caranya supaya script tersebut bisa membaca thumbnail yang dalam bentuk data-src? Atau adakah solusi lainnya? Terimakasih sebelumnya
    • Tedi Eka
      20 November, 2018
      Profil: https://www.blogger.com/profile/17195151981500818409
      Sudah beres mbak ternyata bisa pake yang ini hehe
      expr:src='resizeImage(data:postFirstImage, 300)'
  • Maki M.
    15 November, 2018
    Profil: https://www.blogger.com/profile/08446403296417996016
    Mba Igniel, apa ini nanti gambarnya akan tetap terindex di google search?
    • Igniel
      15 November, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tetep keindex. Karena ini cuma bekerja di halaman homepage. Sengaja dibikin begitu.
      Sementara yang diindex Google itu halaman postingan tunggal yang gak pake Lazy Load.
    • Maki M.
      15 November, 2018
      Profil: https://www.blogger.com/profile/08446403296417996016
      Berarti gambar yg di homepage tdk ke index ya, kalau misal saya pasang di halaman postingan ndante index ya gambarnya
  • Unknown
    11 November, 2018
    Profil: https://www.blogger.com/profile/08140404462004620210
    mbk igniel ane udah test dan berjalan oke, cek gt metrix yslow bagian add expires masih ada file png nya :( -_-
    • Igniel
      11 November, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Cek lagi URL gambarnya dari mana. Dari gambar widget kah atau lainnya. Tinggal tambahkan class lazy seperti penjelasan di atas.
  • Azid Zainuri, S.Pd
    09 September, 2018
    Profil: https://www.blogger.com/profile/04057497464899163227
    kak, untuk mengatasi masalah yang css dan javascript gamana? seperti script dari analytics dan adsense. tolong pencerahannya. hehehe
  • Sulameto
    21 Agustus, 2018
    Profil: https://www.blogger.com/profile/08100710338170559645
    thanks sob berguna sangat

    berfungsi di https://www.majalahlovebird.com/2018/08/manfaat-sawi-putih-untuk-lovebird.html
    • Sutan S.
      05 September, 2018
      Profil: https://www.blogger.com/profile/02549883444655871364
      plz jadilah pengkomen yang baik, jangan menebar backlink seenaknya dikomentar, bersainglah secara sehat, jangan menjatuhkan blog lain dengan berkomentar link hidup/mati. laman dg komen penuh link akan menjatuhkan sebuah laman dimata google. be smart plz
  • Lord of Noirful
    07 Agustus, 2018
    Profil: https://www.blogger.com/profile/15114308534748992986
    Pakai cara ini aku nemu satu masalah, ketika discroll gambar tetap blank/gak muncul, kasus ini aku nemu kalau pake template Arl*na, walau dia udah nyediain Lazyload tapi kurang efektif, kamu tau gimana cara solve nya?
    Makasih.
    • Igniel
      08 Agustus, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      1) Kalau di template sebelumnya ada script lazyload, hapus dulu biar gak bentrok.
      2) Cek dulu apa di template itu thumbnailnya dibikin pake javascript. Kalau iya, cek komentar Raka Aryanda diatas.

      Kalau masih belum bisa, tulis disini kode <img> di template itu.
  • Unknown
    21 Juni, 2018
    Profil: https://www.blogger.com/profile/16432740020601884573
    makasih
  • Palz
    01 Mei, 2018
    Profil: https://www.blogger.com/profile/00289713070850542558
    Terimakasih dan izin menerapkannya ya mba :D
  • Samehdaku
    24 April, 2018
    Profil: https://www.blogger.com/profile/11698735616610982996
    kalo tag img saya udah pasang class yang lain gimana mbak cara nambar nya?
    img class='posts-thumb' gitu??
    • Igniel
      24 April, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kalau class di dalam CSS bisa lebih dari satu. Jadi kodenya [img class='post-thumb lazy']
    • Samehdaku
      24 April, 2018
      Profil: https://www.blogger.com/profile/11698735616610982996
      thanks mbak berhasil (y)
  • Unknown
    22 April, 2018
    Profil: https://www.blogger.com/profile/11914482412360438530
    Kalo HTML Image nya pake Javascript gimana mbak?
    Udah nyoba cara diatas gak work.
    • Igniel
      23 April, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      cari kode [img src] di dalam JSnya dan ubah menjadi [img class="lazy" src="bblablabla"]
    • ./Bazengers
      19 Januari, 2019
      Profil: https://www.blogger.com/profile/01553333459408180948
      brarti setiap kita update artikel gambarnya hrus si kasih class terus yh?
    • Igniel
      19 Januari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Gak perlu. Kalo ngambil gambar thumbnailnya pake JS cukup tambahkan class seperti penjelasan di atas. Class akan otomatis bertambah ke semua thumbnail.
  • Anonim
    Anonim04 Maret, 2018
    Tapi, pas di Coba yg berhasil Cuma Gambar logo blog, Gambar selainnya seperti thumbnail related post, post updated gak berhasil
    • Igniel
      04 Maret, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Cari lagi tag <img yang lain. Tambahkan class 'lazy' ke semua tag img tersebut biar semua gambar berubah jadi lazy load.
  • Anonim
    Anonim03 Maret, 2018
    mbak, saya bingung, klo sempurna sama tag html image kyak yang dicontohin ditas gak ada yang sama, apa yg ni betul mbak?

    img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/></h1
    • Igniel
      04 Maret, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya yang itu bisa. Karena isi atribut img tiap blog beda-beda. Dicoba aja. Semoga berhasil.
  • Altgo
    18 Februari, 2018
    Profil: https://www.blogger.com/profile/10484940399209879457
    Ijin bookmark dlue y mb,, kyknye cocok nie di blog ane,,
  • Sutan S.
    11 Februari, 2018
    Profil: https://www.blogger.com/profile/02549883444655871364
    kak, klo utk gambar yg di widget gimana (logo di header)? terus jg setelah praktek masih ada masalah utk thumbnail yg ada di sidebar (recent post/popular/dll). lanjut tutor lg kak utk yg JS :D terutama yg dr adsense
    *terimakasih, post sangat bermanfaat :)
  • Lokerntb
    09 Februari, 2018
    Profil: https://www.blogger.com/profile/02846669987131502789
    Gimana ni, saya pakai template Cotempo bawaan google, saya cari kode diatas tapi tidak ada :( HELP
  • Rehan Firdaus
    04 Februari, 2018
    Profil: https://www.blogger.com/profile/03974475986059080709
    min, kode nya banyak banget yang di templateku, yang mana yang dipilih
  • PratamaYZ
    17 Desember, 2017
    Profil: https://www.blogger.com/profile/14673116678193507149
    kalo boleh ada saran/ masukan sis buat blog ane dikumpulbagi.blogspot.co.id .. udah ngikutin tutornya dari mempercepat blog 1-3 udah naik sih dari skor E ke D,.. tapi untuk ningkatin lagi gimana ya, setidknya B lah .. thanks sis :D
  • Anonim
    Anonim09 Desember, 2017
    Ijin pake scriptnya ya mbak..kayaknya cocok niih buat blog saya biar loadingnya gak lemot kyak siput :D
  • Anonim
    Anonim28 November, 2017
    Keren nih, fast load memang yg slalu sya inginkan.
  • fd
    15 November, 2017
    Profil: https://www.blogger.com/profile/06314243906977653319
    kalau blog sy, pagespeed 100 tap yslow cuma 88.... apa perlu dipraktekin trik di atas mb?
    • Igniel
      15 November, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      Perlu. Kan udah ditulis diatas. Cara ini buat meningkatkan score YSlow, terutama bagian Add Expires header :)
    • Igniel
      11 November, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      https://www.igniel.com/2018/08/atur-jumlah-snippet-tanpa-script.html
  • Unknown
    30 Oktober, 2017
    Profil: https://www.blogger.com/profile/00930134973479631132
    mantepp setelah praktek loading blog jadi joss