Mediaachmad.com - Cara Memperbaiki Leverage Browser Caching di Favicon.ico Blog. Apa itu Favicon (Favorite icon)? Favicon adalah sebuah gambar icon yang beresolusi kecil yang muncul di tab browser saat membuka sebuah halaman web yang biasanya bergambar icon Logo dari web halaman tersebut
Untuk platform blogger secara default favicon akan mendapatkan icon bawaan yang miliki ekstensi .ico dan biasanya memiliki url berikut, dan iconnya menggunakan logo blogger.
https://www.namablogkalian.com/favicon.icoNamun, dengan adanya Favicon tersebut bisa menyebabkan peringatan Leverage Browser Caching saat di cek dengan GTmetrix dan tentunya akan membuat sedikit gatal karena ingin segera mengatasinya. Kali ini saya akan memberikan tutorial bagaimana cara mengatasinya, dan tentunya ampuh.
Untuk mengatasinya kita hanya perlu menjadikan Logo Favicon tersebut menjadi base64. Kenapa base64? Karena menurut admin image base64 bisa mempercepat loading blog, Namun di balik itu ada sebuah alamat URL yang Panjang, jadi tetap saja pakai image base64 karena tujuan kita mempercepat website. Jadi langsung simak tutorial dibawah ini.
Cara Ampuh Atasi Favicon.ico Leverage Browser Caching dengan Base64.
- Kalian siapkan gambar Logo atau Icon sesuai keingan kalian, dengan Syarat gambar dibawah ini.
- Dimensi gambar harus kotak (square) dengan ukuran sama besar. Contoh 16 x 16 px. (saya sarankan gunakan ukuran 16 x 16px, karena itu akan berpengaruh dengan panjangnya url image base64 nantinya).
- Ukuran Tidak boleh melebihi ukuran 100KB.
- Format gambar bisa berupa .png, .ico, .gif, dan .jpg.
- Kita akan mengconvert gambar menjadi base64.
- Silakan kunjungi url berikut ini.
- Silakan Drag & Drop gambar icon kalian ke halaman web tersebut atau kalian bisa mengklik “OR CLICK HERE” kemudian pilih gambar icon kalian yang sudah memenuhi syarat di point no 1.
- Website akan memproses otomatis, jika sudah sukses, sekarang klik “Show Code”.
- Akan muncul pop up, kemudian Copy url tersebut dengan klik “Copy to Clipboard” dan kalian bisa pastekan di notepad dahulu.
- Jika terdapat Favicon.ico di dalam EDIT HTML Template kalian, Pastikan kalian hapus dulu. Kalian bisa mencarinya dengan CTRL + F, lalu ketik favicon.ico. jika tidak ada silakan lanjut langkah selanjutnya.
- Buka blogger kalian masuk ke dashboard, pilih TEMA, kemudian masuk ke EDIT HTML. Copy Code dibawah ini, dan letakkan diBAWAH <head> atau kalian bisa letakkan di tengah - tengah kumpulan tag meta meta.(ingat bukan di dalam tag meta ya..)
- Kemudian ganti yang ditandai url-img-base64-kalian, dengan URL Image base64 yang kalian copy tadi.
- Lalu Simpan Tema, dan lihat hasilnya di GTMetrix.
https://www.base64-image.de
<link href='url-img-base64-kalian' rel='icon' type='image/x-icon'/><head>
<link href='url-img-base64-kalian' rel='icon' type='image/x-icon'/><!-- bisa kalian letakkan disini dibawah head persis-->
...
<meta .... />
<meta .... />
<meta .... />
..
<link href='url-img-base64-kalian' rel='icon' type='image/x-icon'/><!-- atau bisa kalian letakkan disini-->
..
<meta .... />
<meta .... />
<meta .... />
...
</head>
Mungkin itu yang dapat admin sampaikan tentang Cara Ampuh Atasi Favicon.ico Leverage Browser Caching dengan Base64 di Blogger, Semoga dapat bermanfaat, Sekian dan terima kasih.
Udah coba terapin cara ini di tamplateku (viomagz), tapi masih belum bener mengatasi masalah Favicon Leverage Browser Caching pas aku tes di gtmetrix. Kira2 apa ya penyebabnya gan??
BalasHapuspenyebabnya adalah di dalam template viomagz ada kode
Hapus<b:include data='blog' name='all-head-content'/>
yang dimana code itu jika di ekstrak hasilnya seperti ini
...
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
...
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
...
...
</b:if>
...
<!--[if IE]><script type="text/javascript" src="https://www.blogger.com/static/v1/jsbin/579771828-ieretrofit.js"></script>
<![endif]-->
<!--[if IE]><script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script>
<![endif]-->
...
di dalam kode all-head-content itu terdapat link favicon.ico, yang dimana nantinya akan bertabrakan dengan tutorial yang saya buat ini.. kalau template saya ini saya lebih memilih untuk ekstrak lalu menghapus favicon.ico ganti dengan tutorial yang saya buat ini..
all-head-content juga mempengaruhi SEO untuk website selengkapnya agan bisa cari di google
Ooh itu toh ternyata penyebabnya. Terimakasih atas jawabannya..👍
Hapustemplate mas sendiri masih belom fix untuk favicon.ico :D
BalasHapusWkwk iya.. sih.. tapi sudah tau cara mengatasinya..
Hapusfavicon.ico itu sudah nyatu sama tag
all-head-content
mau saya extrak all head content nya.. nanti mempengaruhi seo..
Makanya saya pakai all-head-content..
+ template saya juga masih dalam pengembangan.. ada beberapa yg kelupaan untuk di perbaiki
Hapus