Solusi Peringatan Leverage Browser Caching Favicon.ico

Peringatan Leverage Browser Caching Favicon.ico muncul karena disebabkan belum optimalnya pengaturan cache terhadap favicon tersebut dalam blog. Meskipun ukurannya kecil, tetapi hal ini tidak boleh disepelekan.

Pengaturan cache yang belum optimal menyebabkan loading speed halaman menjadi terhambat sehingga dinilai sebagai salah satu kekurang oleh alat inspeksi yang biasa digunakan para blogger seperti GTmetrix atau Page Insight milik Google.

Mengatasi Leverage Browser Caching Favicon.ico tersebut tidak sulit dan sudah seharusnya kamu lakukan sebagai pemilik blog agar situs blog mu populer di mata mesin pencari.

Penyebab Munculnya Peringatan Leverage Browser Caching

Sebelumnya kami telah menjelaskan secara mendalam alasan munculnya peringatan leverage browser caching dalam artikel Mengenal Leverage Browser Caching.

Secara singkat, peringatan ini muncul karena pengaturan cache blog yang terlalu cepat untuk dibersihkan. Pembersihan terlalu cepat menyebabkan data blog harus dimuat ulang setiap kali akses dilakukan.

Hal ini menyebabkan proses loading halaman yang lebih lambat sehingga alat inspeksi menyarankan untuk memanfaatkan chace untuk membantu meningkatkan kecepatan muat blog.

Sebagai elemen blog dalam format gambar, favicon juga membutuhkan proses download data. Meskipun ukurannya kecil, melakukan optimasi terhadap favicon juga termasuk usaha mempercepat proses muat blog.

Cara melakukan leverage browser caching pada favicon dapat dilakukan dalam dua teknik, yaitu dengan Base64 dan Statically.

Solusi Leverage Browser Caching Favicon.ico Menggunakan Base64

Metode ini kita akan melakukan konversi favicon kita menjadi format Base64. Kelebihannya adalah format ini dinilai jauh lebih ringan dan lebih mudah untuk ditransmisikan dibandingkan format umum lainnya melansir dari Inchoo.

Cara leverage browser caching favicon dengan metode ini, yaitu:

• Unduh favicon blog mu. Kamu dapat mengunduhnya dengan cara buka blog mu lalu klik kanan dan pilih View Page Source. Cari dan klik kode berikut ini,

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

• Buka Base64Guru
• Upload favicon blog mu dan pilih output format 'Data URI -- data:content/type;base64' dan simpan URL hasilnya

• Buka Tab Tema pada dasbor blogger dan pilih Edit HTML
• Cari kode favicon blog mu contohnya seperti berikut ini,

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

Kode setiap blog tidak harus sama persis karena perbedaan template yang digunakan. Untuk mempermudah pencarian, kamu dapat mencari dengan keyword 'favicon.ico'.

• Ganti kode tersebut menjadi bentuk ini,

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

URL BASE64 adalah URL yang didapatkan hasil konversi pada langkah 3 tadi. 

• Simpan Tema

Sekarang coba cek kembali apakah peringatan leverage browser caching favicon.com terhadap blog mu sudah berhasil dihilangkan atau belum. Berdasarkan pengalaman, cara ini telah terbukti berhasil.

Solusi Leverage Browser Caching Favicon.ico Menggunakan Statically

Metode kedua yang dapat kamu gunakan adalah dengan memanfaatkan Statically. Situs ini memberikan optimasi & CDN gratis terhadap gambar, CSS maupun javascript.

Kelebihan menggunakan Statically adalah metodenya yang jauh lebih sederhana tetapi hasilnya optimal. Bila dibandingkan dengan metode Base64, Statically lebih menguntungkan karena tidak memberatkan page size blog mu. Alasannya, Statically tidak menghasilkan kode yang panjang layaknya Base64.

Cara leverage browser caching favicon dengan Statically, yaitu:

• Buka Tab Tema pada dasbor blogger dan pilih Edit HTML
• Cari kode favicon blog mu contohnya seperti berikut ini,

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

Kode setiap blog tidak harus sama persis karena perbedaan template yang digunakan. Untuk mempermudah pencarian, kamu dapat mencari dengan keyword 'favicon.ico'.

• Ganti kode tersebut menjadi bentuk berikut ini,

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

Silahkan sesuaikan alamatblogmu.

• Simpan Tema
  

Sekarang kamu dapat melakukan inspeksi kembali dan melihat apakah cara ini berhasil mengatasi masalah peringatan leverage browser caching favicon.ico atau belum.

Keistimewaan menggunakan Statically juga karena kamu dapat mengatur seberapa lama cache tersimpan dalam browser orang yang mengakses blog mu selama mereka tidak menghapus cache.

Dalam artikel Cara Mengatur Leverage Browser Cache Pada Blog, sudah dijelaskan bahwa secara langsung Google merekomendasikan lama penyimpanan cache untuk sebuah aset statis sebaiknya diatur menjadi satu tahun.

Karena favicon dapat diklasifikasikan sebagai aset statis (aset statis juga dijelaskan diartikel tersebut). Kamu dapat mengatur lama cache menggunakan Statically dengan cara berikut ini,

• Modifikasi kode pada langkah 3 menjadi seperti ini,

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

Angka 31536000 merupakan lama waktu penyimpnan cache dalam satuan detik. Jadi bila dikonversi, angka tersebut sama dengan satu tahun. Kamu dapat mengubahnya sesuai dengan kebutuhan mu.

• Simpan Tema

Bila kamu ingin melihat langkah-langkahnya secara visual, kamu dapat melihat video dari Kompiajaib berikut ini,

Penutup

Jadi cara peringatan leverage browser caching favicon muncul karena belum optimalnya pemanfaatan cache pada blog. Solusinya adalah dengan melakukan formating menggunakan Base64 atau Statically. Semoga artikel ini dapat membantu.

***

Apabila memiliki pertanyaan seputar artikel Solusi Peringatan Leverage Browser Caching Favicon.ico, silahkan tulis dikolom komentar ya.

Baca juga: