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 animo 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 semoga skor pagespeed blog tidak terlalu jelek dan tentu saja semoga blog lebih ringan ketika di kanal oleh para pengunjung.
Skor yang kurang bagus sebuah blog ketika di cek melalui PageSpeed Insights kadang sangat kuat terhadap loading atau kecepatan kanal pengunjung ketika sedang membuka blog dan kita perlu memperbaikinya, akan tetapi tidak semua duduk kasus yang di timbulkan dari Leverage Browser Caching ini wajib kita perbaiki menyerupai pola duduk kasus Leverage Browser Caching dari Google Tag Manager atau Google Analystic lantaran hal ini tidak mengganggu dan tidak mempengaruhi kecepatan kanal blog.
Dan pada kesempatan kali ini aku akan membuatkan trik bagaimana Cara Mengatasi Leverage Browser Caching Gambar di PageSpeed Insights yang masih menjadi duduk kasus yang ditemukan dan di hadapi oleh para blogger. Namun sebelum itu perlu sahabat ketahui bahwa cara ini sudah aku test ketika aku masih memakai template Infinite Responsive Blogger dari Arlina Design dan kesudahannya duduk kasus Leverage Browser Caching Gambar di PageSpeed Insights ini tidak muncul dan menciptakan skor PageSpeed blog aku bertambah.
Untuk pengguna WordPress sahabat sanggup gunakan arahan ini. Akses file .htaccess pada Public Html hosting web WordPress kemudian tambahkan arahan dibawah ini
Dan untuk format gambar yang akan digunakan, aku sarankan sahabat memakai gambar berformat .png, lantaran gambar type .png ini mempunyai keunggulan dari gambar yang berformat .jpeg maupun .gif. Seperti salah satunya ialah gambar berekstensi .png ini mempunyai kualitas gambar yang tidak pecah ketika sahabat 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, kalau sahabat masih gagal mendapat skor bagus di PageSpeed Insights, sahabat 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 sahabat yang masih gres didalam dunia blogging niscaya script ini terdengar asing. Namun tidak untuk sahabat yang sudah paham seluk beluk blogger (tidak termasuk saya). Script Lazyload ialah script (Javascript) yang berkhasiat semoga elemen-elemen tertentu di blog anda dimuat sesaat sehabis blog sudah 100% dimuat (full load).
Dengan artian, misal aku menciptakan gambar thumbnail di blog aku dengan Lazyload, maka ketika sahabat mengunjungi blog saya, gambar thumbnail tidak akan muncul bila loading blog aku masih belum kelar, kecuali sudah tamat loadingnya (full load). Oleh karenanya, Lazyload ini sanggup menuntaskan duduk kasus Leverage Browser Caching ini.
Lha, apa hubungannya antara browser caching dengan load sehabis full-load?
Disini bergotong-royong kita sedikit "memanipulasi" Google PageSpeed Insights...
Bila sebelumnya gambar "B" pada blog anda mempunyai duduk kasus 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 sehabis 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 sahabat ikuti tutorial berikut :
Pertama silahkan login ke Blogger - Template - Edit HTML dan cari arahan dibawah ini
Kemudian silahkan ganti arahan diatas dengan arahan dibawah ini
Selanjutnya silahkan salin arahan berikut dan letakkan sebelum arahan
Simpan di cek kembali skor PageSpeed blog sobat. Dan apabila sehabis memakai lazyload image ini mengakibatkan gambar atau thumbnail blog sahabat menjadi blur, silahkan salin javascript berikut dan letakkan sebelum arahan
Jika step ini berhasil sahabat terapkan, perlu di ingat bahwa gambar atau thumbnal post sahabat 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 kalau sahabat tidak mau repot dengan lazyload yang diatas, sahabat sanggup coba gunakan lazyload yang pernah dipublikasikan oleh arlina berikut. Caranya silahkan sahabat salid script dibawah ini dan letakkan sebelum arahan
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 kuat terhadap loading atau kecepatan kanal pengunjung ketika sedang membuka blog dan kita perlu memperbaikinya, akan tetapi tidak semua duduk kasus yang di timbulkan dari Leverage Browser Caching ini wajib kita perbaiki menyerupai pola duduk kasus Leverage Browser Caching dari Google Tag Manager atau Google Analystic lantaran hal ini tidak mengganggu dan tidak mempengaruhi kecepatan kanal blog.
Dan pada kesempatan kali ini aku akan membuatkan trik bagaimana Cara Mengatasi Leverage Browser Caching Gambar di PageSpeed Insights yang masih menjadi duduk kasus yang ditemukan dan di hadapi oleh para blogger. Namun sebelum itu perlu sahabat ketahui bahwa cara ini sudah aku test ketika aku masih memakai template Infinite Responsive Blogger dari Arlina Design dan kesudahannya duduk kasus 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 sahabat coba atasi dengan beberapa cara sebagai berikut :Mengatur Batas Expired
Cara pertama untuk mengatasi Leverage Browser Caching ialah dengan cara mengatur batas expired cache dari css, javascript dan juga gambar. Untuk memakai cara ini silahkan sahabat Login ke Blogger > Edit HTML dan salin arahan berikut dan letakkan sebelum arahan<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 sahabat sanggup gunakan arahan ini. Akses file .htaccess pada Public Html hosting web WordPress kemudian tambahkan arahan 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 kanal blog kita menjadi kurang cepat dan skor PageSpeed blog kita rendah, maka untuk mengatasi hal tersebut silahkan sahabat compress gambar yang akan sahabat 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 sahabat memakai gambar berformat .png, lantaran gambar type .png ini mempunyai keunggulan dari gambar yang berformat .jpeg maupun .gif. Seperti salah satunya ialah gambar berekstensi .png ini mempunyai kualitas gambar yang tidak pecah ketika sahabat 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, kalau sahabat masih gagal mendapat skor bagus di PageSpeed Insights, sahabat 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 sahabat yang masih gres didalam dunia blogging niscaya script ini terdengar asing. Namun tidak untuk sahabat yang sudah paham seluk beluk blogger (tidak termasuk saya). Script Lazyload ialah script (Javascript) yang berkhasiat semoga elemen-elemen tertentu di blog anda dimuat sesaat sehabis blog sudah 100% dimuat (full load).
Dengan artian, misal aku menciptakan gambar thumbnail di blog aku dengan Lazyload, maka ketika sahabat mengunjungi blog saya, gambar thumbnail tidak akan muncul bila loading blog aku masih belum kelar, kecuali sudah tamat loadingnya (full load). Oleh karenanya, Lazyload ini sanggup menuntaskan duduk kasus Leverage Browser Caching ini.
Lha, apa hubungannya antara browser caching dengan load sehabis full-load?
Disini bergotong-royong kita sedikit "memanipulasi" Google PageSpeed Insights...
Bila sebelumnya gambar "B" pada blog anda mempunyai duduk kasus 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 sehabis 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 sahabat ikuti tutorial berikut :
Pertama silahkan login ke Blogger - Template - Edit HTML dan cari arahan dibawah ini
<img class='thumbnail-post' expr:src='...' />
Yang aku maksud dari titik-titik (...) diatas ialah arahan bawaan dari template anda, silahkan anda simpan arahan tersebut.
Kemudian silahkan ganti arahan diatas dengan arahan 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 arahan src
- Silahkan anda ganti arahan titik-titik (...) diatas dengan arahan yang sudah disimpan tadi.
Selanjutnya silahkan salin arahan berikut dan letakkan sebelum arahan
</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 sehabis memakai lazyload image ini mengakibatkan gambar atau thumbnail blog sahabat menjadi blur, silahkan salin javascript berikut dan letakkan sebelum arahan
</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 sahabat terapkan, perlu di ingat bahwa gambar atau thumbnal post sahabat 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 kalau sahabat tidak mau repot dengan lazyload yang diatas, sahabat sanggup coba gunakan lazyload yang pernah dipublikasikan oleh arlina berikut. Caranya silahkan sahabat salid script dibawah ini dan letakkan sebelum arahan </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/AVvXsEjAOqMQnK8NURUJFG36W03VQ14cNG-NB48f7kRyO-tKKeJDrFEQrNsoIpXih9MeYjgUnoH8lLcP3doGgxRhbt0sH0IkSFJj9wXfW39FuWbGSZCgRLBTohM97ld3y_HDkkVbDwIch83xTM5j/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