Cara Mengatasi Leverage Browser Caching Gambar di PageSpeed Insights
Friday, September 21, 2018
Add Comment
Leverage Browser Caching Gambar di PageSpeed Insights - Memiliki blog atau website dengan skor PageSpeed yang sangat cepat sudah menjadi trend dikalangan para blogger masa kini. Jika dulunya banyak blogger yang berlomba-lomba untuk menghias tampilan blog yang di permak sehingga tampak keren dengan ditambahkan berbagai macam css maupun javascript yang bertujuan untuk mempercantik tampilan blog, kini para blogger lebih cenderung membuat page speed atau skor blog mereka ringan dan cepat dengan memperbaiki masalah-masalah yang disebabkan oleh salah satunya yaitu Leverage Browser Caching atau dalam bahasa indonesianya "manfaatkan penyimpanan cache browser" dari eksternal javascript bahkan gambar blog agar skor pagespeed blog tidak terlalu buruk dan tentu saja agar blog lebih ringan ketika di akses oleh para pengunjung.
Skor yang kurang bagus sebuah blog ketika di cek melalui PageSpeed Insights kadang sangat berpengaruh terhadap loading atau kecepatan akses pengunjung ketika sedang membuka blog dan kita perlu memperbaikinya, akan tetapi tidak semua masalah yang di timbulkan dari Leverage Browser Caching ini wajib kita perbaiki seperti contoh masalah Leverage Browser Caching dari Google Tag Manager atau Google Analystic karena hal ini tidak mengganggu dan tidak mempengaruhi kecepatan akses blog.
Dan pada kesempatan kali ini saya akan berbagi trik bagaimana Cara Mengatasi Leverage Browser Caching Gambar di PageSpeed Insights yang masih menjadi masalah yang ditemukan dan di hadapi oleh para blogger. Namun sebelum itu perlu sobat ketahui bahwa cara ini sudah saya test ketika saya masih menggunakan template Infinite Responsive Blogger dari Arlina Design dan hasilnya masalah Leverage Browser Caching Gambar di PageSpeed Insights ini tidak muncul dan membuat skor PageSpeed blog saya bertambah.
Untuk pengguna WordPress sobat bisa gunakan kode ini. Akses file .htaccess pada Public Html hosting web WordPress kemudian tambahkan kode dibawah ini
Dan untuk format gambar yang akan digunakan, saya sarankan sobat menggunakan gambar berformat .png, karena gambar type .png ini memiliki keunggulan dari gambar yang berformat .jpeg maupun .gif. Seperti salah satunya adalah gambar berekstensi .png ini memiliki kualitas gambar yang tidak pecah ketika sobat sudah melakukan compress online.
Cara Mengatasi Leverage Browser Caching Gambar di PageSpeed Insights dengan cara mengkompres gambar terlebih dahulu ini sudah saya test work di template Infinite Arlina, jika sobat masih gagal mendapatkan skor bagus di PageSpeed Insights, sobat perlu menggunakan LazyLoad Image. Karena template infinite arlina premium sudah terpasang lazyload gambar, jadi saya pribadi tidak repot-repot untuk memasang lazyload lagi. Dan untuk yang belum menggunakan lazyload untuk gambar, silahkan lanjut ke step dibawah ini.
Bagi sobat yang masih baru didalam dunia blogging pasti script ini terdengar asing. Namun tidak untuk sobat yang sudah paham seluk beluk blogger (tidak termasuk saya). Script Lazyload adalah script (Javascript) yang berguna agar elemen-elemen tertentu di blog anda dimuat sesaat setelah blog sudah 100% dimuat (full load).
Dengan artian, misal saya membuat gambar thumbnail di blog saya dengan Lazyload, maka ketika sobat mengunjungi blog saya, gambar thumbnail tidak akan muncul bila loading blog saya masih belum kelar, kecuali sudah selesai loadingnya (full load). Oleh karenanya, Lazyload ini dapat menyelesaikan masalah Leverage Browser Caching ini.
Lha, apa hubungannya antara browser caching dengan load setelah full-load?
Disini sebenarnya kita sedikit "memanipulasi" Google PageSpeed Insights...
Bila sebelumnya gambar "B" pada blog anda memiliki masalah dengan Google PageSpeed Insights, lalu anda berikan gambar "B" tadi script Lazyload, maka ketika anda cek blog anda di Google PageSpeed Insights, ia tidak akan mendeteksi bahwa blog anda mempunyai gambar "B" tadi, padahal ada. Akan tetapi di-load setelah full-load atau bisa juga dikatakan thumbnail blog akan tampil ketika pengunjung menscroll halaman blog.
Nah, untuk menggunakan lazyload pada gambar atau thumbnail blog, silahkan sobat ikuti tutorial berikut :
Pertama silahkan login ke Blogger - Template - Edit HTML dan cari kode dibawah ini
Kemudian silahkan ganti kode diatas dengan kode dibawah ini
Selanjutnya silahkan salin kode berikut dan letakkan sebelum kode
Simpan di cek kembali skor PageSpeed blog sobat. Dan apabila setelah menggunakan lazyload image ini mengakibatkan gambar atau thumbnail blog sobat menjadi blur, silahkan salin javascript berikut dan letakkan sebelum kode
Jika step ini berhasil sobat terapkan, perlu di ingat bahwa gambar atau thumbnal post sobat akan blank putih dan akan tampil ketika sudah di scroll.
Jika Cara Mengatasi Leverage Browser Caching Gambar di PageSpeed Insights menggunakan lazyload ini tidak work, silahkan hapus semua setelan yang mengikuti step ini. Kemudian silahkan ganti dengan step berikut :
Bonus Lazy load Gambar Ala Arlina
Nah jika sobat tidak mau repot dengan lazyload yang diatas, sobat bisa coba gunakan lazyload yang pernah dipublikasikan oleh arlina berikut. Caranya silahkan sobat salid script dibawah ini dan letakkan sebelum kode
Demikian tutorial bagaimana Cara Mengatasi Leverage Browser Caching Gambar di PageSpeed Insights ini semoga membantu dan bermanfaat. Jika ada yang perlu ditanyakan silahkan tinggalkan komentar mengenati artikel ini. Selamat mencoba dan salam luar biasa.
Skor yang kurang bagus sebuah blog ketika di cek melalui PageSpeed Insights kadang sangat berpengaruh terhadap loading atau kecepatan akses pengunjung ketika sedang membuka blog dan kita perlu memperbaikinya, akan tetapi tidak semua masalah yang di timbulkan dari Leverage Browser Caching ini wajib kita perbaiki seperti contoh masalah Leverage Browser Caching dari Google Tag Manager atau Google Analystic karena hal ini tidak mengganggu dan tidak mempengaruhi kecepatan akses blog.
Dan pada kesempatan kali ini saya akan berbagi trik bagaimana Cara Mengatasi Leverage Browser Caching Gambar di PageSpeed Insights yang masih menjadi masalah yang ditemukan dan di hadapi oleh para blogger. Namun sebelum itu perlu sobat ketahui bahwa cara ini sudah saya test ketika saya masih menggunakan template Infinite Responsive Blogger dari Arlina Design dan hasilnya masalah Leverage Browser Caching Gambar di PageSpeed Insights ini tidak muncul dan membuat skor PageSpeed blog saya bertambah.
Mengatasi Leverage Browser Caching Gambar
Masalah Leverage Browser Caching Gambar di PageSpeed Insights ini dapat sobat coba atasi dengan beberapa cara sebagai berikut :Mengatur Batas Expired
Cara pertama untuk mengatasi Leverage Browser Caching adalah dengan cara mengatur batas expired cache dari css, javascript dan juga gambar. Untuk menggunakan cara ini silahkan sobat Login ke Blogger > Edit HTML dan salin kode berikut dan letakkan sebelum kode<head><include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.gif'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>
Untuk pengguna WordPress sobat bisa gunakan kode ini. Akses file .htaccess pada Public Html hosting web WordPress kemudian tambahkan kode dibawah ini
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##
Compress Gambar
Penggunaan gambar dengan ukuran dan resolusi yang tinggi merupakan salah satu penyebab yang membuat akses blog kita menjadi kurang cepat dan skor PageSpeed blog kita rendah, maka untuk mengatasi hal tersebut silahkan sobat compress gambar yang akan sobat gunakan thumbnail blog melalui link dibawah ini sesuai type ekstensi gambar yang akan di perkecil ukurannya.- compresspng.com (untuk gambar ekstensi PNG)
- compressjpeg.com (untuk gambar ekstensi JPG dan JPEG)
- gifcompressor.com (untuk gambar ekstensi GIF)
Dan untuk format gambar yang akan digunakan, saya sarankan sobat menggunakan gambar berformat .png, karena gambar type .png ini memiliki keunggulan dari gambar yang berformat .jpeg maupun .gif. Seperti salah satunya adalah gambar berekstensi .png ini memiliki kualitas gambar yang tidak pecah ketika sobat sudah melakukan compress online.
Cara Mengatasi Leverage Browser Caching Gambar di PageSpeed Insights dengan cara mengkompres gambar terlebih dahulu ini sudah saya test work di template Infinite Arlina, jika sobat masih gagal mendapatkan skor bagus di PageSpeed Insights, sobat perlu menggunakan LazyLoad Image. Karena template infinite arlina premium sudah terpasang lazyload gambar, jadi saya pribadi tidak repot-repot untuk memasang lazyload lagi. Dan untuk yang belum menggunakan lazyload untuk gambar, silahkan lanjut ke step dibawah ini.
Lazy Load Gambar
Nah, sekarang mari kita lanjut ke bagaimana Cara Mengatasi Leverage Browser Caching Gambar blog dengan menggunakan LazyLoad.Bagi sobat yang masih baru didalam dunia blogging pasti script ini terdengar asing. Namun tidak untuk sobat yang sudah paham seluk beluk blogger (tidak termasuk saya). Script Lazyload adalah script (Javascript) yang berguna agar elemen-elemen tertentu di blog anda dimuat sesaat setelah blog sudah 100% dimuat (full load).
Dengan artian, misal saya membuat gambar thumbnail di blog saya dengan Lazyload, maka ketika sobat mengunjungi blog saya, gambar thumbnail tidak akan muncul bila loading blog saya masih belum kelar, kecuali sudah selesai loadingnya (full load). Oleh karenanya, Lazyload ini dapat menyelesaikan masalah Leverage Browser Caching ini.
Lha, apa hubungannya antara browser caching dengan load setelah full-load?
Disini sebenarnya kita sedikit "memanipulasi" Google PageSpeed Insights...
Bila sebelumnya gambar "B" pada blog anda memiliki masalah dengan Google PageSpeed Insights, lalu anda berikan gambar "B" tadi script Lazyload, maka ketika anda cek blog anda di Google PageSpeed Insights, ia tidak akan mendeteksi bahwa blog anda mempunyai gambar "B" tadi, padahal ada. Akan tetapi di-load setelah full-load atau bisa juga dikatakan thumbnail blog akan tampil ketika pengunjung menscroll halaman blog.
Nah, untuk menggunakan lazyload pada gambar atau thumbnail blog, silahkan sobat ikuti tutorial berikut :
Pertama silahkan login ke Blogger - Template - Edit HTML dan cari kode dibawah ini
<img class='thumbnail-post' expr:src='...' />
Yang saya maksud dari titik-titik (...) diatas adalah kode bawaan dari template anda, silahkan anda simpan kode tersebut.
Kemudian silahkan ganti kode diatas dengan kode dibawah ini
<img class='thumbnail-post lajarwo' src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" expr:data-src='...' />
Keterangan:
- Penambahan lajarwo pada class
- Pengantian dari expr:src menjadi expr:data-src
- Penambahan kode src
- Silahkan anda ganti kode titik-titik (...) diatas dengan kode yang sudah disimpan tadi.
Selanjutnya silahkan salin kode berikut dan letakkan sebelum kode
</body><script>//<daoLyzal,\"llorcs\"(renetsiLretsiger,)daoLyzal,\"daol\"(renetsiLretsiger})t,e+\"no\"(tnevEhcatta.wodniw:)t,e(renetsiLtnevEdda.wodniw?renetsiLtnevEdda.wodniw{)t,e(renetsiLretsiger noitcnuf})htdiWtneilc.tnemelEtnemucod.tnemucod||htdiWrenni.wodniw(=<tfel.t&&)thgieHtneilc.tnemelEtnemucod.tnemucod||thgieHrenni.wodniw(=<pot.t&&0=>thgir.t&&0=>mottob.t nruter;)(tceRtneilCgnidnuoBteg.e=t rav{)e(tropweiVnIsi noitcnuf}))\"crs-atad\"(etubirttAteg.]t[e=crs.]t[e(&&)]t[e(tropweiVnIsi)++t;htgnel.e<t;0=t,)\"yzal\"(emaNssalCyBstnemelEteg.tnemucod=e rav(rof{)(daoLyzal noitcnuf'['split']('')['reverse']()['join'](''));
//]]></script>
Simpan di cek kembali skor PageSpeed blog sobat. Dan apabila setelah menggunakan lazyload image ini mengakibatkan gambar atau thumbnail blog sobat menjadi blur, silahkan salin javascript berikut dan letakkan sebelum kode
</body><script>
//<![CDATA[
function resizeThumb(parentID, size) {
var parent = document.getElementById(parentID),
image = parent.getElementsByTagName('img');
for (var i = 0; i < image.length; i++) {
image[i].src = image[i].src.replace(/\/s72\-c/, "/s" +
size + "-c");
image[i].width = size;
image[i].height = size;
}
} resizeThumb('Blog1', 160);
//]]>
</script>>
Jika step ini berhasil sobat terapkan, perlu di ingat bahwa gambar atau thumbnal post sobat akan blank putih dan akan tampil ketika sudah di scroll.
Jika Cara Mengatasi Leverage Browser Caching Gambar di PageSpeed Insights menggunakan lazyload ini tidak work, silahkan hapus semua setelan yang mengikuti step ini. Kemudian silahkan ganti dengan step berikut :
Bonus Lazy load Gambar Ala Arlina
Nah jika sobat tidak mau repot dengan lazyload yang diatas, sobat bisa coba gunakan lazyload yang pernah dipublikasikan oleh arlina berikut. Caranya silahkan sobat salid script dibawah ini dan letakkan sebelum kode </body><script type='text/javascript'>
//<;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container:window})"})})(jQuery);$(function(){$(".post img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjecnaS84Xusd_85tmTwhSqmH520iArzPAS9h4ebuELSR-TCXcGTVWI51Q8bjQAUOIulFHHvDktdO4y2rhYAK3vmQXYP_afPn_pOTs8ev7LPHI5KEVWUKcTfqpjWm9_YORFdW8NrECE6LqB/s1600/spinner.gif",effect:"fadeIn",threshold:"0",effectTime:"2000"})});
//]]>
</script>
Demikian tutorial bagaimana Cara Mengatasi Leverage Browser Caching Gambar di PageSpeed Insights ini semoga membantu dan bermanfaat. Jika ada yang perlu ditanyakan silahkan tinggalkan komentar mengenati artikel ini. Selamat mencoba dan salam luar biasa.
0 Response to "Cara Mengatasi Leverage Browser Caching Gambar di PageSpeed Insights"
Post a Comment