Mengatasi CSS Yang Memblokir Perenderan Laman (Font Awesome)

Mengatasi CSS Yang Memblokir Perenderan Laman (Font Awesome), Mengatasi CSS Yang Memblokir Perenderan Laman (Font Awesome)

Mengatasi CSS Yang Memblokir Perenderan Laman (Font Awesome)

Kebanyakan desainer menggunakan Font Awesome pada blog website. Ini menjadi kendala ketika di gunakan secara berlebihan karena jelas akan mempengaruhi loading blog wesite. Ini di sebabkan oleh perenderan konten yang di blokir oleh kode CSS yang salah satunya Font Awesome tersebut. Namun jika tanpa script CSS kita juga tidak bisa menikmati keindahan dari sebuah blog web, jadi meskipun CSS memberi beban terhadap perenderan loading halaman kita akan mengatasi proses tersebut dengan siasat sederhana.

Anda mungkin pernah menggunakan tool untuk melihat bagaimana kecepatan blog anda jika bekerja, seperti salah satu tool gratis dari google yaitu google PageSpeed Insights, dan mungkin kebingungan bagaimana anda bisa mengatasi hal semacam itu. Seperti gambar dibawah;

pecahkan masalah loading page yang lambat

Dari hasil tes menunjukan agar kita perlu mengoptimalisasi CSS, lalu bagaimana cara untuk bisa mengatasi masalah ini?

Cara Memanipulasi CSS Font Awesome Dengan Metode Asynchronous

Asynchronous adalah media yang bisa kita manfaatkan untuk meningkatkan kecepatan blog website. Pada dasarnyas Asynchronous di sebut sebagai proses komunikasi atau transformasi data yang kecepatannya cukup relatif namun tidak tetap, setidaknya itu dalam bahasa jaringan komputer. Sama halnya Google Adsense yang menggunakan trik ini untuk pengiriman iklan mereka yang tampil pada situs, karena menggunakan trik Asynchronous maka proses Font Awesome  tidak akan menghalangi perenderan.

Saya pikir cukup untuk penjelasan deskriptif. Next.. ikuti perintah komandan ok 🙂

step 1 Masuk ke dasboard blogger anda.

step 2 Pilih Template >> Edit HTML.

step 3 Setelah loading ke template editor, tekan Ctrl F pada keyboard, lalu cari kode di bawah lalu copy pada notepad atau aplikasi catatan lainnya;
“Ada dua jenis Font Awesome, cari mana yang sesuai”



atau;

step 4 Copy/paste CSS di bawah ini menggantikan posisi font awesome pada template (hapus font awesome pada template lalu paste kode di bawah);