Cara Mengatasi Leverage Browser Caching Untuk Favicon.ico di Blogger

Favicon merupakan sebuah ikon utama situs web yang muncul di sisi kiri tab browser dan merupakan logo situs web. Favicon juga bisa disebut sebagai shortcut icon, ikon situs web, ikon URL, atau ikon bookmark. Ini tentunya sangat berperan penting juga sebagai identitas dari situs web itu sendiri.

Merubahnya menjadi logo buatan sendiri juga memberikan dampak SEO yang bagus untuk blog. Kenapa? Karna logo adalah identitas maka ini akan menjadi pengingat visitor terhadap website kita. Logo kecil yang muncul pada browser pengunjung akan mempermudah mengenali situs yang dikunjungi.

Favicon ini pada dasarnya menggunakan gambar berekstensi .ico dengan ukuran yang cukup kecil, yaitu 16x16 piksel. Namun meski ukurannya tergolong kecil, gambar tersebut tetaplah berupa gambar. Dan ini biasanya menjadi masalah saat mengukur kecepatan memuat blog, yaitu memanfaatkan cache browser Favicon.ico.

Seperti yang sudah saya janjikan sebelumnya bahwa saya akan memberikan tutorial tentang cara mengatasi leverage browser caching favicon ini. Dimana sebelumnya tutorial lengkap cara pembuatan dan pemasangan favicon sudah saya ulas beberapa hari yang lalu.

Masalah ini paling mudah dideteksi menggunankan tool page speed seperti GT Metrix, google page speed insight dll. Contohnya bisa dilihat pada gambar dibawah ini:

Untuk mengatasi masalah ini, silakan ikuti triknya dibawah ini:

Convert Favicon Menggunakan Base64

Salah satu cara untuk mengatasi leverage browser caching dari Favicon.ico ini adalah dengan menggunakan favicon dengan base64, berikut caranya:

1. Silakan download gambar favicon blog Anda yang sekarang digunakan. lalu klik kanan pada halaman blog Anda lalu pilih View page source. Kemudian cari kode yang seperti berikut:

<link href='https://www.domainanda.com/favicon.ico' rel='icon' type='image/x-icon'/>

Atau seperti contoh gambar dibawah

2. silakan klik URL yang berwarna biru, setelah gambar faviconnya terbuka silakan simpan / save gambar tersebut di komputer.

3. Selanjutnya silakan gunakan tool konversi favicon to base64. Sebagi contoh dan juga rekomendasi, saya menggunakan tool dari https://www.base64-image.de.

4. Upload gambar favicon yang tadi disimpan di komputer lalu pilih, atau bisa juga menggunakan metode drag and drop file favicon langsung kedalam tool. File yang terupload otomatis akan terkonversi.

5. Selanjutnya klik show code untuk menampilkan format base64 favicon yang sudah terkonversi.

6. Copy semua file yang terdapat didalamnya. Pilih pada bagian For use in <img> elements.

7. Setelah itu masuk ke edit HTML blog lalu cari kode berikut atau yang mirip:

<link expr:href='data:blog.canonicalHomepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>

8. Kemudian silakan rubah menjadi seperti berikut ini:

<link href='URL BASE64 PADA LANGKAH 6' rel='icon' type='image/x-icon'/>

silakan ganti kode URL BASE64 PADA LANGKAH 6 tersebut dengan URL base64 dari favicon yang dikonversi pada langkah ke-6.

Atau contohnya mirip seperi gambar berikut.

9. Save template

Sekarang silakan cek blog Anda dengan tool pengukur kecepatan loading blog yang biasa Anda gunakan. Bagaimana sekarang? apakah notifikasi leverage browser cachingnya sudah hilang?

Menggunakan Staticaly

Kalau pada cara pertama sudah dijelaskan tentang konversi image favicon menjadi base64 dan memang terbukti sudah tidak memunculkan pesan leverage browser caching. Namun yang kemudian menjadi masalah adalah file html yang dihasilkan dari base64 converter sangat panjang dan pasti juga akan menambah besar jumlah HTML template. Maka sebagai alternatif dan banyak disarankan adalah menggunakan layanan CDN (Content Delivery Network) sebagai pihak ketiga unttuk menghosting file favicon kita.

Untuk CDN server hosting gambar yang gratis dan cukup efektif mengatasi leverage browser caching gambar favicon adalah layanan dari situs Staticaly.io. Cara penerapannya pun cukup mudah. Silakan simak tutorialnya dibawah ini:

1. Silakan masuk ke edit HTML blog lalu cari kode seperti berikut:

<link expr:href='data:blog.canonicalHomepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>

2. Kemudian silakan rubah menjadi seperti berikut ini:

<link href='https://cdn.statically.io/favicons/domainanda.com' rel='icon' type='image/x-icon'/>

silakan ganti kode domainanda.com dengan nama domain blog milik Anda.

Sekarang coba cek blog Anda dengan Page Speed Tool blog yang biasa Anda gunakan. Apakah notif leverage browser caching dari Favicon.ico sudah menghilang?

Sebagai alternative, Anda bisa menambahkan nilai cache favicon-nya seperti pada contoh dibawah ini:

<link href='https://cdn.statically.io/favicons/domainanda.com?cache=31556952' rel='icon' type='image/x-icon'/>

Demikian artikel tutorial blog kali ini tentang Cara Mengatasi Leverage Browser Caching Untuk Favicon.ico di Blogger. Semoga bermanfaat. Terima Kasih.

Sumber code & Referensi :

https://www.kompiajaib.com/2019/08/mengatasi-leverage-browser-caching.html