Cara Mengatasi Leverage Browser Caching Gambar Di Pagespeed Insights
Leverage Browser Caching Gambar di PageSpeed Insights - Memiliki blog atau website dengan skor PageSpeed yang sangat cepat sudah menjadi demam isu dikalangan para blogger masa kini. Jika dulunya banyak blogger yang berlomba-lomba untuk menghias tampilan blog yang di permak sehingga tampak keren dengan ditambahkan banyak sekali macam css maupun javascript yang bertujuan untuk mempercantik tampilan blog, kini para blogger lebih cenderung menciptakan 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 supaya skor pagespeed blog tidak terlalu jelek dan tentu saja supaya blog lebih ringan ketika di saluran oleh para pengunjung.
Skor yang kurang bagus sebuah blog ketika di cek melalui PageSpeed Insights kadang sangat kuat terhadap loading atau kecepatan saluran pengunjung ketika sedang membuka blog dan kita perlu memperbaikinya, akan tetapi tidak semua problem yang di timbulkan dari Leverage Browser Caching ini wajib kita perbaiki menyerupai pola problem Leverage Browser Caching dari Google Tag Manager atau Google Analystic lantaran hal ini tidak mengganggu dan tidak mensugesti kecepatan saluran blog.
Dan pada kesempatan kali ini aku akan membuatkan trik bagaimana Cara Mengatasi Leverage Browser Caching Gambar di PageSpeed Insights yang masih menjadi problem yang ditemukan dan di hadapi oleh para blogger. Namun sebelum itu perlu teman ketahui bahwa cara ini sudah aku test ketika aku masih memakai template Infinite Responsive Blogger dari Arlina Design dan alhasil problem Leverage Browser Caching Gambar di PageSpeed Insights ini tidak muncul dan menciptakan skor PageSpeed blog aku bertambah.
Untuk pengguna WordPress teman sanggup gunakan aba-aba ini. Akses file .htaccess pada Public Html hosting web WordPress kemudian tambahkan aba-aba dibawah ini
Dan untuk format gambar yang akan digunakan, aku sarankan teman memakai gambar berformat .png, lantaran gambar type .png ini mempunyai keunggulan dari gambar yang berformat .jpeg maupun .gif. Seperti salah satunya yaitu gambar berekstensi .png ini mempunyai kualitas gambar yang tidak pecah ketika teman sudah melaksanakan compress online.
Cara Mengatasi Leverage Browser Caching Gambar di PageSpeed Insights dengan cara mengkompres gambar terlebih dahulu ini sudah aku test work di template Infinite Arlina, jikalau teman masih gagal mendapat skor bagus di PageSpeed Insights, teman perlu memakai LazyLoad Image. Karena template infinite arlina premium sudah terpasang lazyload gambar, jadi aku eksklusif tidak repot-repot untuk memasang lazyload lagi. Dan untuk yang belum memakai lazyload untuk gambar, silahkan lanjut ke step dibawah ini.
Bagi teman yang masih gres didalam dunia blogging niscaya script ini terdengar asing. Namun tidak untuk teman yang sudah paham seluk beluk blogger (tidak termasuk saya). Script Lazyload yaitu script (Javascript) yang berkhasiat supaya elemen-elemen tertentu di blog anda dimuat sesaat sesudah blog sudah 100% dimuat (full load).
Dengan artian, misal aku menciptakan gambar thumbnail di blog aku dengan Lazyload, maka ketika teman mengunjungi blog saya, gambar thumbnail tidak akan muncul bila loading blog aku masih belum kelar, kecuali sudah final loadingnya (full load). Oleh karenanya, Lazyload ini sanggup menuntaskan problem Leverage Browser Caching ini.
Lha, apa hubungannya antara browser caching dengan load sesudah full-load?
Bila sebelumnya gambar "B" pada blog anda mempunyai problem dengan Google PageSpeed Insights, kemudian 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 sesudah full-load atau sanggup juga dikatakan thumbnail blog akan tampil ketika pengunjung menscroll halaman blog.
Nah, untuk memakai lazyload pada gambar atau thumbnail blog, silahkan teman ikuti tutorial berikut :
Pertama silahkan login ke Blogger - Template - Edit HTML dan cari aba-aba dibawah ini
Kemudian silahkan ganti aba-aba diatas dengan aba-aba dibawah ini
Selanjutnya silahkan salin aba-aba berikut dan letakkan sebelum aba-aba
Simpan di cek kembali skor PageSpeed blog sobat. Dan apabila sesudah memakai lazyload image ini menjadikan gambar atau thumbnail blog teman menjadi blur, silahkan salin javascript berikut dan letakkan sebelum aba-aba
Jika step ini berhasil teman terapkan, perlu di ingat bahwa gambar atau thumbnal post teman akan blank putih dan akan tampil ketika sudah di scroll.
Jika Cara Mengatasi Leverage Browser Caching Gambar di PageSpeed Insights memakai 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 jikalau teman tidak mau repot dengan lazyload yang diatas, teman sanggup coba gunakan lazyload yang pernah dipublikasikan oleh arlina berikut. Caranya silahkan teman salid script dibawah ini dan letakkan sebelum aba-aba
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.
Sumber https://www.pehawe.info/
Skor yang kurang bagus sebuah blog ketika di cek melalui PageSpeed Insights kadang sangat kuat terhadap loading atau kecepatan saluran pengunjung ketika sedang membuka blog dan kita perlu memperbaikinya, akan tetapi tidak semua problem yang di timbulkan dari Leverage Browser Caching ini wajib kita perbaiki menyerupai pola problem Leverage Browser Caching dari Google Tag Manager atau Google Analystic lantaran hal ini tidak mengganggu dan tidak mensugesti kecepatan saluran blog.
Dan pada kesempatan kali ini aku akan membuatkan trik bagaimana Cara Mengatasi Leverage Browser Caching Gambar di PageSpeed Insights yang masih menjadi problem yang ditemukan dan di hadapi oleh para blogger. Namun sebelum itu perlu teman ketahui bahwa cara ini sudah aku test ketika aku masih memakai template Infinite Responsive Blogger dari Arlina Design dan alhasil problem Leverage Browser Caching Gambar di PageSpeed Insights ini tidak muncul dan menciptakan skor PageSpeed blog aku bertambah.
Mengatasi Leverage Browser Caching Gambar
Masalah Leverage Browser Caching Gambar di PageSpeed Insights ini sanggup teman coba atasi dengan beberapa cara sebagai berikut :Mengatur Batas Expired
Cara pertama untuk mengatasi Leverage Browser Caching yaitu dengan cara mengatur batas expired cache dari css, javascript dan juga gambar. Untuk memakai cara ini silahkan teman Login ke Blogger > Edit HTML dan salin aba-aba berikut dan letakkan sebelum aba-aba<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 teman sanggup gunakan aba-aba ini. Akses file .htaccess pada Public Html hosting web WordPress kemudian tambahkan aba-aba 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 menciptakan saluran blog kita menjadi kurang cepat dan skor PageSpeed blog kita rendah, maka untuk mengatasi hal tersebut silahkan teman compress gambar yang akan teman 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, aku sarankan teman memakai gambar berformat .png, lantaran gambar type .png ini mempunyai keunggulan dari gambar yang berformat .jpeg maupun .gif. Seperti salah satunya yaitu gambar berekstensi .png ini mempunyai kualitas gambar yang tidak pecah ketika teman sudah melaksanakan compress online.
Cara Mengatasi Leverage Browser Caching Gambar di PageSpeed Insights dengan cara mengkompres gambar terlebih dahulu ini sudah aku test work di template Infinite Arlina, jikalau teman masih gagal mendapat skor bagus di PageSpeed Insights, teman perlu memakai LazyLoad Image. Karena template infinite arlina premium sudah terpasang lazyload gambar, jadi aku eksklusif tidak repot-repot untuk memasang lazyload lagi. Dan untuk yang belum memakai lazyload untuk gambar, silahkan lanjut ke step dibawah ini.
Lazy Load Gambar
Nah, kini mari kita lanjut ke bagaimana Cara Mengatasi Leverage Browser Caching Gambar blog dengan memakai LazyLoad.Bagi teman yang masih gres didalam dunia blogging niscaya script ini terdengar asing. Namun tidak untuk teman yang sudah paham seluk beluk blogger (tidak termasuk saya). Script Lazyload yaitu script (Javascript) yang berkhasiat supaya elemen-elemen tertentu di blog anda dimuat sesaat sesudah blog sudah 100% dimuat (full load).
Dengan artian, misal aku menciptakan gambar thumbnail di blog aku dengan Lazyload, maka ketika teman mengunjungi blog saya, gambar thumbnail tidak akan muncul bila loading blog aku masih belum kelar, kecuali sudah final loadingnya (full load). Oleh karenanya, Lazyload ini sanggup menuntaskan problem Leverage Browser Caching ini.
Lha, apa hubungannya antara browser caching dengan load sesudah full-load?
Disini sebetulnya kita sedikit "memanipulasi" Google PageSpeed Insights...
Bila sebelumnya gambar "B" pada blog anda mempunyai problem dengan Google PageSpeed Insights, kemudian 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 sesudah full-load atau sanggup juga dikatakan thumbnail blog akan tampil ketika pengunjung menscroll halaman blog.
Nah, untuk memakai lazyload pada gambar atau thumbnail blog, silahkan teman ikuti tutorial berikut :
Pertama silahkan login ke Blogger - Template - Edit HTML dan cari aba-aba dibawah ini
<img class='thumbnail-post' expr:src='...' />
Yang aku maksud dari titik-titik (...) diatas yaitu aba-aba bawaan dari template anda, silahkan anda simpan aba-aba tersebut.
Kemudian silahkan ganti aba-aba diatas dengan aba-aba 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 aba-aba src
- Silahkan anda ganti aba-aba titik-titik (...) diatas dengan aba-aba yang sudah disimpan tadi.
Selanjutnya silahkan salin aba-aba berikut dan letakkan sebelum aba-aba
</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 sesudah memakai lazyload image ini menjadikan gambar atau thumbnail blog teman menjadi blur, silahkan salin javascript berikut dan letakkan sebelum aba-aba
</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 teman terapkan, perlu di ingat bahwa gambar atau thumbnal post teman akan blank putih dan akan tampil ketika sudah di scroll.
Jika Cara Mengatasi Leverage Browser Caching Gambar di PageSpeed Insights memakai 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 jikalau teman tidak mau repot dengan lazyload yang diatas, teman sanggup coba gunakan lazyload yang pernah dipublikasikan oleh arlina berikut. Caranya silahkan teman salid script dibawah ini dan letakkan sebelum aba-aba </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/AVvXsEjkCfphmHJqUwe5kuFuR2UVKIiGY9OglqGARv419uSWPFY4XY7Kf01o6lk_lmXuJOApplFsBBQrO66kntj0otT8PoaVHOsVdl-xfb6X2SG0Q5ANBgci5g0Dd1d12kN1awuTCz8Gu7cDTBGp/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.
Sumber https://www.pehawe.info/
