Ini dia, solusi Loading Lambat dalam Penggunaan Font Awesome / Font Icon.

Lagi-lagi tips optimasi menjadi dorongan saya untuk menulis artikel di "Blog Tetangga" yang sebelumnya "rian-nurherdian.blogspot.com" .. entah kenapa, rasa-nya liat website keren tapi loading lelet itu bagai "sayur" tanpa "garam" (*Inul daratista)..

Terkadang, seorang blogger yang lagi asyik sama utak-atik desain blog nya melupakan hal yang sangat penting dimata pengunjung! yaitu "Kecepatan" dalam mengakses.. dannnn pada kesempatan kali ini saya ingin berbagi sedikit trik jQuery Bind Load, yang saya padukan dengan javascript inject untuk mengoptimasi speed/kecepatan loading website blog sobat tentu-nya.

Langsung saja, berikut tutorial nya..

Pertama, Pastikan blog / website sobat sudah menyimpan kode jQuery library dibawah ini :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jika belum, silahkan simpan kode di atas tepat sebelum tag </head>

Kedua, disini saya menggunakan plugin icon font-awesome versi 4.7.0 sebagai contoh penerapan tutorial Cara Menggunakan Font Awesome / Font Icon agar di load setelah loading halaman selesai.

Terakhir, simpan kode jquery & javascript yang sudah saya custom tepat di atas tag </body>

<script>
 // <![CDATA[
 $(window).bind("load", function() {
 var fontAwesome = document.createElement("link");
 fontAwesome.rel = "stylesheet";
 fontAwesome.href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
 document.head.appendChild(fontAwesome);
 });
</script>

Update 16 Mei, 2018 -
Versi "JavaScript" mentah :

<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
window.addEventListener("load", function() {
    document.head.appendChild(link);
}, false);
</script>

"Terima kasih @Taufik Nurrohman"

Penjelasan : kode di atas akan otomatis membuat tag link external css yang berfungsi untuk mengambil CSS dari Font Awesome versi 4.7.0 (https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css) setelah loading halaman selesai.

Jadi, Plugin CSS Font Awesome ini tidak akan membebani proses loading halaman website / blog sobat pada saat pertama diakses, namun setelah nya.

Berikut adalah hasil Inspect element dari kode jQuery & javascript yang saya custom di atas.
Sekian penjelasan seputar tutorial tentang optimasi / mempercepat loading icon font awesome ala kang rian (tetangga sebelah), jika ada yang ingin ditanyakan silahkan tanyakan melalui kotak komentar disqus dibawah ini. semoga bermanfaat!