Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Mengatasi Font Awesome Yang Lambat

font awesome yang cepat

penggunaan Ikon pada desin website merupakan bagian yang tidak bisa dipisahkan. menyisipkan ikon dapat dengan mudah apabila menggunakan font awesome. Font awesome adalah salah satu font web yang menyediakan banyak icon. Hampir semua jenis ikon tersedia. selain itu juga banyak sekali pilihan icon yang bisa digunakan. seperi namanya font "awesome" "mengagumkan"

Situs web biasanya menggunakan setidaknya 4 hingga 5 ikon. Jika ingin menyertakan ikon share button, ikon menu, dan ikon footer, tentu jumlah icon yang dibutuhkan bertambah. namun dengan adanya font awesome membuat icon dapat dilakukan dengan mudah misalkan saja untuk lambang amplop tinggal ketik "fa envelope" tanpa harus membuat kode yang panjang

#Font Awesome CSS - Memuat terlalu lambat

Font Awesome masih dianggap cara terbaik untuk menyediakan ikon untuk situs web. dibalik kehebatan font awesome. ternyata, ukurannya font awesome sendiri cukup besar untuk dimuat sehingga membuat blog loading dengan lambat. tes kecepatan load blog yang menggunakan font awesome di page speed insight google biasanya akan muncul himbauan kurang lebih seperti ini "Hilangkan resource yang memblokir render, Resource memblokir first paint halaman. Sebaiknya kirim inline JS/CSS kritis dan tunda semua JS/gaya yang tidak kritis" dalam bahasa inggris "Eliminate render-blocking resources, Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles." dengan menyertakan ukuran dari font awesome dibawahnya.


setelah di tes di PageSpeed, Pingdom, GTmetrix, dll. salah satu yang memperlambat situs web blog adalah FontAwesome. Ukuran Font Awesome yang lumayan membuat waktu buka hampir 2 detik hanya untuk memuat FontAwesome saja.

oleh karenanya perlu Mengatasi Font Awesome CSS - Memuat terlalu lambat

#Mengatasi Font Awesome CSS - Memuat terlalu lambat

sesuai namanya "awesome" " mengagumkan". font ini sangat luar biasa tetapi masih perlu dioptimalkan.

Mengapa kita harus mengoptimalkan font awesome?

pengunjung maupun pemilik web /blog senang jika blog web memuat lebih cepat di desktop maupun di perangkat seluler.

1. Gunakan Font Awesome Sesuai Kebutuhan

Karena font awesome adalah file yang sangat besar, penggunaannya pun harus menyesuaikan kebutuhan. Jika kita hanya butuh menggunakan 10 ikon maka mengapa kita harus memuat 100 ikon lainnya? Ukuran font web font awesome biasanya 90KB. Ditambah, font awesome css biasanya 30KB. Jadi secara keseluruhan 120KB, tentu ini akan mengurangi kecepatan loading blog. oleh karenanya penggunaan font awesome harus disesuaikan dengan kebutuhan

2. Menggunakan CDN (content delivery network)

Cara Mengatasi Font Awesome Yang Lambat ? Solusinya adalah menggunakan Font Awesome dari content delivery network (CDN) - jaringan server di seluruh dunia yang masing-masingnya memiliki file Font Awesome yang siap untuk disajikan kepada pengguna yang paling dekat dengan lokasi mereka.

Menggunakan CDN tidak hanya mengurangi waktu muat Font Awesome tetapi juga meningkatkan kemungkinan pengguna telah memiliki Font di-cache di komputer mereka bahkan jika mereka belum mengunjungi situs web blog- jika mereka telah mengunjungi situs lain yang menggunakan CDN yang sama maka Font Awesome seharusnya sudah ada di komputer pengunjung.

Font Awesome dari content delivery network (CDN) -mengoptimalkan situs dan skornya di PageSpeed,  GTmetrix, Pingdom dll. merupakan salah satu bentuk perhatian terhadap kecepatan loading blog. ingin menampilkan icon di web blog tapi Font Awesome memperlambat loading blog.

3. Menggunakan Pustaka Font Awesome Yang Memuat lebih Cepat

setelah mengunjungi beberapa forum yang membahas tentang permasalahan font awesome di tes kecpatan loading blog, akhirnya menemukan beberapa pustaka css font awesome yang diklaim lebih cepat, walaupun tidak cepat cepat amat

berikut adalah Pustaka Font Awesome Loading Cepat / Fast Load yang bisa disimpan sebelum tag </head> di html blog.



<link rel=“stylesheet” href=“https://cdnjs.Cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css” />




<script type="text/javascript"> (function() { var css = document.createElement('link'); css.href = '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'; css.rel = 'stylesheet'; css.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(css); })(); </script>

atau

<script type="text/javascript"> (function() { var css = document.createElement('link'); css.href = 'https://use.fontawesome.com/releases/v5.1.0/css/all.css'; css.rel = 'stylesheet'; css.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(css); })(); </script>


  •  menggunakan Font awesome versi terbaru


ada juga yang menganjurkan menggunakan font awesome versi terbaru
Untuk daftar tautan pustaka font awesome terbaru, klik link di bawah ini:

URL: https://cdnjs.com/libraries/font-awesome

contoh yang digunakan saat ini (ketika artikel ini dibuat) :

<link rel=“stylesheet” href=“https://cdnjs.Cloudflare.com/ajax/libs/font-awesome/5.8.2/css/fontawesome.min.css” />

#Solusi Lain

apabila font awesome dikira masih lambat maka coba gunakan Icon SVG : Solusi Efektif Font Awesome Yang Lambat
pada tahun 1999, World Wide Web Consortium (W3C) mengembangkan format gambar Scalable Vector Graphics (SVG) yang menggunakan XML (Extensible Markup Language) sebagai dasar untuk membentuk gambar vektor dua dimensi.

SVG dapat dicari, di-index, ditulis dengan bahasa pemograman dan dikompres. Karena berbasis XML, SVG dapat dibuat dan disunting dengan aplikasi teks apa saja.

Sejumlah peramban web populer seperti Mozilla Firefox, Internet Explorer, Google Chrome, Opera, dan Safari sudah mulai mendukung penggunakan format SVG.

penggunaan SVG mampu mengatasi lambatnya pemuatan penggunaan icon, ini bisa dijadikan solusi sebagai pengganti dari font awesome. menggunakan icon svg merupakan salah satu cara mengatasi loading blog yang berat

icon SVG bisa dijadikan  solusi pengganti font awsome yang membuat blog lambat dalam memuat icon.

  • Font Awesome css

kelebihan 
menyisipkan ikon dengan font awesome cepat dan mudah dengan misalkan saja untuk lambang amplop tinggal ketik "fa envelope" tanpa harus membuat kode yang panjang.

kekurangan
berat dimuat membuat loading blog menjadi lambat 
  • SVG (Scalable Vector Graphics)
kelebihan 
membuat loading blog menjadi cepat

Oleh karena nya apabila tidak ingin menggunakan font awesome karena masih lambat maka coba gunakan Icon SVG : Solusi Efektif Font Awesome Yang Lambat

demikian adalah Cara Mengatasi Font Awesome Yang Lambat semoga bermanfaat

Posting Komentar untuk "Cara Mengatasi Font Awesome Yang Lambat"

data-ad-format="auto">
data-ad-format="auto">

Berlangganan via Email