Beberapa waktu lalu saya sempat ditanya hal menarik:
“Apakah kalau kita ganti Font Awesome dengan SVG, bisa bikin situs lebih cepat?“
Jawaban saya: iya, bisa banget dan Worth It!
Tapi tentu ada beberapa catatan penting supaya efeknya terasa. Yuk, saya jelaskan pelan-pelan biar kalian bisa menilainya sendiri.
Masalah utama Font Awesome
Font Awesome itu sebenarnya ikon berbasis font. Artinya, semua ikon disatukan ke dalam satu file besar yang biasanya memiliki format WOFF2 atau TTF.
Masalahnya adalah browser tetap harus mengunduh seluruh file font itu, meskipun kalian cuma pakai satu ikon saja di suatu halaman web.
Bayangkan saja:
- File
fa-solid-900.woff2bisa berukuran 70–100 KB. - Ditambah
fontawesome.min.csssekitar 20 KB lagi.
Jika ditotal adalah sekitar 100-120 KB hanya untuk ikon.
Pertanyaannya adalah apakah kalian akan membuat website yang berisi ratusan ikon?
Saya rasa enggak! Maksud saya jika website kalian berisi puluhan dan ratusan font, penggunaan Font Awesome mungkin akan berguna. Namun jika hanya satu atau dua (under 10) font, cukuplah menggunakan SVG.
SVG Icons: Lebih ringan dan efisien
SVG alias Scalable Vector Graphics bukanlah sebuah font, melainkan gambar yang memiliki vektor berbasis XML. Untuk dunia per-web-an SVG ini punya banyak keunggulan, diantaranya:
- Bisa inline langsung di HTML, jadi tidak perlu request file tambahan.
- Hanya ikon yang dipakai saja yang di-load.
- Bisa dikompresi pakai gzip atau Brotli, dan menghasilkan file size yang jauh lebih kecil.
- Tidak butuh waktu render, langsung tampil begitu HTML selesai dimuat.
Best practice migrasi ke SVG
Kalau kalian ingin mulai migrasi, saya saranin langkah-langkah ini:
- Gunakan inline SVG untuk ikon penting (misal di navbar, tombol share, sosial icons).
- (Opsional) Simpan semua ikon di file sprite seperti
sprite.svg, lalu panggil pakai tag<use href="#iconname">. - Kompres SVG-nya pakai tool seperti SVGO.
- Hapus seluruh CSS dan font Font Awesome dari
<head>. - (Opsional) Kalau mau fleksibel, pakai library modern seperti Iconify, Heroicons, atau Lucide — semuanya berbasis SVG modular.
Tidak Berhubungan Langsung, Tapi Impact ke SEO dan Page Speed
Jika dalam proyek web kalian bisa menghindari load font dari remote, misalnya kasus font-awesome diatas. Setidaknya website bakal langsung mendapatkan manfaat berikut:
- Situs jadi lebih ringan.
- Render ikon lebih cepat.
- Tidak ada lagi blocking font.
- Skor “Reduce unused CSS / font” di PageSpeed bisa hilang total. (Tapi tidak 100% sih)
Migrasi ke SVG ini sebenarnya adalah langkah kecil, tapi dampaknya besar apalagi kalau kalian peduli dengan performa situs dan SEO.
Tapi belum tentu juga, situs cepat = SEO auto bagus, karena kembali lagi ke struktur website itu sendiri dan juga isi konten.
Saya sendiri sudah mulai mengganti semua ikon Font Awesome di beberapa proyek-proyek web ke SVG dan yaaa hasilnya memang lebih responsif, ringan dan bersih.
Leave a Reply