Render blocking CSS, Bagaimana Cara Mengatasinya ?

Render blocking CSS, menjadi salah satu penyebab loading yang lama dari sebuah website atau blog. Maka, perlu di atasi, walaupun sebenarnya, tidak krusial menurut saya. Karena sepanjang website atau blog dapat diakses dengan baik entah melalui desktop atau smart phone, itu sudah cukup.

Pun demikian dengan masalah yang dialami blog ini. Render blocking CSS juga sedikit memperlambat halaman blog ini diakses. Pada awalnya, saya selalu berusaha untuk mengatasi hal ini. Salah satunya adalah membuat CSS menjadi inline, yaitu menempatkan CSS di head secara langsung. Bukan di simpan di folder terntentu. Masalah dengan hal ini adalah, volume halaman index saya menjadi besar, karena blog ini menggunakan CSS dari bootstrap, font awesome, dan custom css untuk layoutnya. Dan ini, menjadi masalah lagi.

Akhirnya, saya menggunakan langkah terakhir saya, yaitu, hanya menyimpan satu file CSS saja di sebuah folder, dan memanggilnya dengan kode berikut :

<link rel="stylesheet" href="style.css">

Saat saya cek di page speed insight, masih tetap terdeteksi render blocking, namun dari sisi kecepatan, menjadi lebih cepat ditampilkan. Bagi saya, itu sudah cukup. Jadi, ini saya lakukan untuk mengatasi render blocking.

Mengatasi render blocking css

Mengganti cara pemanggilan kode CSS dengan kode di atas. Kebanyakan, terutama saya, menggunakan kode @import url("style.css"), untuk memanggil CSS blog. Cara ini buruk untuk saat ini. Karena itu akan membuat render halaman menjadi lama, karena browser harus mendownload file dulu sebelum menampilkannya. Kalau Anda menggunakan Wordpress, dan menggunakan Child theme, dan masih menggunakan cara impor css, gantilah dengan menggunakan wp_enqueue_style(). Masukkan kode di bawah pada functions.php di child theme Anda.

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Kalau ukuran file CSS kita kecil, lebih baik di muat inline menggunakan kode berikut :

<style type="text/css">
Kode CSS di sini
</style>

Kalau menggunakan cara ini, perhatikan path dari url yang ada di CSS. Misal kita menggunakan background, maka harus dibenarkan URL path nya. Sebab, kalau salah, maka gambar background tidak akan muncul.

Kalau ukuran CSS kita besar, cara yang ditempuh untuk mengatasi render adalah menyatukan file css menjadi sebuah file saja. Gunakan nama baru misal utama.css

Selanjutnya, gunakan kode pemanggil yang saya tulis di atas yaitu :

<link rel="stylesheet" href="style.css">

Pastikan style.css diganti sesuai nama file CSS nya. Misal utama.css tadi.

Hasil dari cara ini sudah cukup bagi saya. Grade di pingdom test juga sudah cukup menurut saya, karena dapat B dengan nilai 83. Pada GT Metrix juga sudah lumayan karena nilainya A.

Cara lainnya adalah dengan menggunakan less css. Saya sendiri kurang paham dengan penggunaannya. Bagi saya, itu sulit. Jadi, saya memilih menggunakan cara kedua, yaitu menggabungkan semua css dalam satu file saja. Tidak mungkin saya tampilkan inline, karena besarnya file. Memang dapat diatasi dengan mengkompres kode css. Tapi, saya berpikir, ini malah akan menyulitkan saya sendiri nantinya, kalau saya ingin meng-edit CSS blog ini.

Jadi, itulah cara saya mengatasi render blocking css. Anda punya cara yang lain ? Mari berkomentar ... :)