Memperbaiki Add Expires Headers Dengan Lazy Load Image

Memperbaiki Add Expires Headers Dengan Lazy Load Image

optimize website speed yslow gtmetrix

Kecepatan loading blog adalah salah satu faktor pedukung Seo. Selain itu, dengan mempunyai loading blog cepat, tentunya akan disenangi oleh pengunjung.

Banyangkan jika Anda ingin mencari informasi di sebuah blog atau website, namun saat masuk ke artikelnya ternyata loadingnya begitu lama.

Pasti Saya jamin Anda akan meninggalkan website tersebut. Ya buat apakan berlama-lama menunggu, apalagi saat maksa nungguin ternyata informasi yang di dapat tidak sesuai harapan.

Secara otomatis pengunjung akan mengingat website loading lamban tersebut dan ketika melihat artikelnya di mesin pencari pasti akan diabaikan.

Karena pengunjung mengingat bahwa website itu memiliki kecepatan loading sangat lambat, pasti akan malas untuk kembali ke website tersebut. Baca: Mempercepat blog dengan Cdn Cloudflare

Untuk mengetahui kecepatan blog, Anda bisa menggunakan tools gratis seperti Google PageSpeed Insights atau Gtmetrix.

Selain untuk cek kecepatan, tools tersebut juga akan menampilkan masalah apa saja yang menyebabkan blog Anda menjadi lambat.

Salah satu masalah yang kerap ditemui oleh pengguna Blogger saat cek di tools Gtmetrix adalah Exipers Headers (Browser Caching).

Sebelum lanjut akan lebih jika Anda paham terlebih dahulu apa itu caching atau cache.

Bukan cacing tanah ya.

Apa sebenarnya Cache itu?


Jika Anda sering browsing di internet menggunakan app Crome, pernahkah terbesit pertanyaan kenapa ukuran aplikasi browser tersebut begitu besar.

Coba deh cek di smartphone Anda dan buka pengaturan, lalu ke menu manajer aplikasi (Di setiap hp namanya berbeda).

Pasti browser yang sering kamu pakai memiliki ukuran yang terbilang besar. Hal tersebut disebabkan karena cache.

Jadi cara kerjanya saat Anda pertama kali membuka blog, nantinya browser tersebut akan melakukan permintaan untuk mendownload konten yang ada di blog itu. Kemudian semua file tadi disimpan dalam bentuk cache di browser.

Jadi jika suatu saat Anda kembali ke blog tersebut, semua file yang disimpan tadi dapat langsung diambil dari cache browser.

Tetunya akan mempercepat loading, karena browser tidak perlu berulang melakukan permintaan filenya ke server.

Berikut ini beberapa jenis file yang perlu Anda atur cachenya:

  • Image (jpg, gif, png)
  • Favicon
  • Javascript
  • CSS

Tidak seperti Self Hosted, pada Blogger cache browser tak bisa dikontrol. Maka setiap kali pengunjung membuka blog, browser akan kembali mendownload ulang semua file langsung dari server.

Kembali ke topik Expires Header, Anda bisa mengatasi masalah tersebut menggunakan Lazy Load.

Apa itu Lazy Loading?


Lazy load adalah teknik menunda pemuatan dari resource yang tidak penting saat pemuatan halaman. Jadi resource yang tidak penting akan dimuat pada saat dibutuhkan.

Mudahnya, script Lazy Load akan menunda pemanggilan file sebelum Anda melakukan suatu aktivitas.

Karena disini kita membahas tentang Lazy Load gambar, jadi saat scriptnya bekerja maka pemuatan gambar akan ditunda dan akan tampil ketika Anda melakukan aktifitas Scrolling.

Dengan begitu, Saya harap ini bisa membantu meningkatkan nilai Yslow Anda di Gtmetrix dan tentunya mengatasi masalah Expires header.

So, silahkan simak dengan baik cara pemasangannya di bawah ini.

FYI, tampilan lazy load berikut ini memiliki slash seperti blog punya Igniel.com.

Cara Pasang Script Lazy Load Gambar di Template Blogger


1. Terlebihdahulu silahkan Anda login ke Blogger.com dan masuk ke dashboard Blogger.

2. Masuk ke menu TEMA > klik Edit HTML. (Saran, back up dulu template Anda)

3. Cari kode tag html img untuk thumbnail di hompage blog. Tag html pembukanya seperti berikut ini:

<img .............. />

4. Perlu diperhatikan bahwa kode tag html img nya untuk setiap blog sedikit berbeda. Namun jangan khawatir, kodenya pasti akan mirip seperti di bawah ini.

<img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title'/>

5. Sudah ketemu? jika sudah silahkan tambahkan attibut di bawah ini ke dalam semua tag html background img hompage tadi. Ingat ya, tag html background img biasa ada beberapa di setiap template.
  • Keterangan penambahan atributnya seperti di bawah ini. Silahkan lakukan sesuai perintah yang tertera.

1. Tambahkan class='lazy' pada tag html image tadi.

2. Rubah bagian expr:src jadi expr:data-src.

3. Lalu tambahkan atribut src, kemudian valuenya isi dengan kode berikut: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII=

Maka hasilnya akan seperti ini.
<img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII='/>

Peringatan! 
Jangan tambahkan class lazy pada tag html image yang ada pada halaman post ya, karena dapat mempengaruhi indeks.
6. Selanjutnya tambahkan kode Script Lazy Load Gambar di bawah ini tepat di atas kode </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>

7. Lalu untuk mempercantik tampilannya,  tambahkan css animasi slashnya di bawah ini tepat di atas kode ]]></b:skin> atau </style>.

/* css lazyload */
.lazy {animation: ignielShine 1s linear infinite;-moz-animation: ignielShine 1s linear infinite;-webkit-animation: ignielShine 1s linear infinite;-o-animation: ignielShine 1s linear infinite;background: #f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.78) 20%,rgba(255,255,255,0) 30%);background-size: 800px 104px;}
.Night .lazy{background:#252931 linear-gradient(to right,rgba(255,255,255,0) 5%,rgb(49,54,64) 20%,rgba(255,255,255,0) 30%);background-size:800px 104px}
@keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-webkit-keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-moz-keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-webkit-keyframes ignielShine{from{width:0%}to{width:100%}}
@-moz-keyframes ignielShine{from{width:0%}to{width:100%}}
@keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-webkit-keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-moz-keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes ignielZoom{from{width:0%}to{width:100%}}
@-webkit-keyframes ignielShine{from{width:0%}to{width:100%}}
@-moz-keyframes ignielShine{from{width:0%}to{width:100%}}

8. Terakhir, klik Save Template.

Cara Pasang Script Lazy Load Gambar di Template Viomags


Dibeberapa grub blogger, banyak yang mengeluhkan bahwa script lazy load ini tidak work dalam mengatasi masalah Expires Header di template Viomagz.

Padahal sebenarnya bekerja dengan baik kok, mungkin masalah Expires Headersnya tidak teratasi karena kesalahan dalam penempatan kode.

Maka dari itu di sini saya hadir untuk membantu Anda dalam mengatasi masalah tersebut.

Jadi bagaimana cara memasang lazy load yang benar di template Viomagz?

Berikut ini caranya:

1. Backup dulu template Anda. Lalu masuk ke Edit Html

2. Cari kode html seperti di bawah ini.


<b:includable id='postthumbnail' var='post'>
<div class='img-thumbnail'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title'/>
</a>
<b:elseif cond='data:post.thumbnailUrl'/>
<a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title'/>
</a>
<b:else/>
<a expr:href='data:post.url'><img expr:alt='data:post.title' expr:title='data:post.title' src='//3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w420-h280-c/no-image.png'/>
</a>
</b:if>
</div>
</b:includable>

3. Lalu hapus semua dan ganti dengan kode di bawah ini.

<b:includable id='postthumbnail' var='post'>
<div class='img-thumbnail'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'><img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 420, &quot;300:200&quot;)' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII='/>
</a>
<b:elseif cond='data:post.thumbnailUrl'/>
<a expr:href='data:post.url'><img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII='/>
</a>
<b:else/>
<a expr:href='data:post.url'><img class='lazy' data-src='//3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w420-h280-c/no-image.png' expr:alt='data:post.title' expr:title='data:post.title'/>
</a>
</b:if>
</div>
</b:includable>

4. Tambahkan kode Script Lazy Load Gambar tepat di atas kode </body>. (Kodenya sama seperti di cara pertama, lihat di atas)

5. Setelah script Lazy Load nya terpasang, selajutmya kita akan mempercantik tampilannya. Tambahkan css di bawah ini tepat di ataskode ]]></b:skin>

/* css lazyload */
.lazy {animation: ignielShine 1s linear infinite;-moz-animation: ignielShine 1s linear infinite;-webkit-animation: ignielShine 1s linear infinite;-o-animation: ignielShine 1s linear infinite;background: #f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.78) 20%,rgba(255,255,255,0) 30%);background-size: 800px 104px;}
.Night .lazy{background:#252931 linear-gradient(to right,rgba(255,255,255,0) 5%,rgb(49,54,64) 20%,rgba(255,255,255,0) 30%);background-size:800px 104px}
@keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-webkit-keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-moz-keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-webkit-keyframes ignielShine{from{width:0%}to{width:100%}}
@-moz-keyframes ignielShine{from{width:0%}to{width:100%}}
@keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-webkit-keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-moz-keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes ignielZoom{from{width:0%}to{width:100%}}
@-webkit-keyframes ignielShine{from{width:0%}to{width:100%}}
@-moz-keyframes ignielShine{from{width:0%}to{width:100%}}

6. Save dan selesai

Cek lagi page speed Anda di Gtmetrix, lihat pada bagian Yslow. Apakah ada perubahan atau tidak.

Jika belum ada perhatikan kembali penempatan class lazy nya. Apakah memang sudah benar, jika belum benar lakukan kembali langkah di atas sampai berhasil.

Saya akhiri, semoga bermanfaat.

refrensi:
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video
www.igniel.com/2017/10/pasang-lazy-load-blog.html

Share
Previous
« Prev Post

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel