Apa Itu RENDER BLOCKING CSS?

INFO: Blog ini sudah discontinue sejak Desember 2018. Untuk info tutorial SEO terupdate silahkan ke halaman Belajar SEO di Kepointernet.com

Kemarin kita sudah membahas bagaimana cara memperbaiki kecepatan respon server, dengan tujuan mempercepat waktu loading dari halaman website kita. Ini adalah hal-hal yang penting diperhatikan saat kita akan membuat sebuah website untuk tujuan SEO.

Nah, ternyata selain server yang lambat.... Render Blocking CSS atau CSS yang menghalangi proses render halaman juga bisa menjadi masalah untuk kecepatan website anda. Jadi ini salah satu yang perlu dipelajari saat anda belajar cara membuat website yang cepat dimuat.

Apa itu Render Blocking CSS?

Render Blocking CSS menunda sebuah halaman web untuk beberapa saat

• Setiap file CSS menunda halaman web kita dari proses render halaman
• Semakin besar CSS, maka semakin lama halaman dimuat
• Begitu juga semakin banyak file CSS, maka semakin lama halaman dimuat.

Kenapa Render Blocking CSS ini masalah?

Ini masalah user experience. Banyak sekali halaman web yang ditinggalkan penggunanya karena terlalu lama menunggu proses render sampai halaman bisa dilihat.

Dalam algoritma perayapan Google untuk mobile version, Google berharap konten paruh atas atau yang ditampilkan di layar browser itu bisa ditampilkan dalam 1 detik (menurut standar kecepatan koneksi Google tentunya), dan selebihnya bisa dimuat dalam 2 detik.

Jadi tentunya kita perlu belajar cara membuat website agar CSS tidak terlalu banyak mengambil waktu render untuk konten paruh atas (above the fold content).

Bagaimana Cara Mengatasi Render Blocking CSS?

Ada beberapa hal yang perlu kita perhatikan saat membuat website agar masalah Render Blocking CSS ini tidak merusak kecepatan muat halaman website kita. Beberapa hal yang perlu diperhatikan adalah:

1. Memanggil CSS dengan benar
2. Kurangi jumlah file CSS

Artikel ini akan membahas lebih detil lagi setiap poin di atas dan bagaimana anda bisa melakukannya sendiri.

Jadi langsung saja kita mulai...

1. Memanggil CSS dengan benar

CSS bisa dipanggil dalam beberapa cara dalam halaman web anda. Ada cara yang sudah sangat salah dilakukan di era gadget saat ini....

Beberapa hal yang harus diperhatikan saat memanggil file CSS:

• Jangan gunakan @import
• Memberi Label CSS dengan benar

JANGAN GUNAKAN @IMPORT

Metode memanggil file CSS ini buruk karena ini akan ditambahkan ke waktu yang diperlukan untuk memuat CSS anda sebelum halaman bisa dimuat

Solusinya adalah cari semua @import dan ganti.

Ini biasanya ada di bagian atas file halaman web dan bentuknya seperti di bawah ini:

@import url("style.css")

Daripada memanggil CSS dengan metode import, adalah lebih baik untuk membuatnya tetap dalam satu file. Caranya copas isi CSS yang diimport ke dalam CSS halaman. Kalau karena suatu alasan anda tidak bisa melakukan itu, anda bisa memasukkan beberapa CSS dengan menggunakan kode berikut:

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

Pastikan anda mengganti style.css dengan alamat lokasi dari file CSS anda.

MEMBERI LABEL CSS DENGAN BENAR

Pada saat CSS tidak dilabeli dengan benar, maka secara default browser akan memuat semua CSS sebelum melakukan render halaman web.

Solusinya adalah dengan melabeli file CSS dengan benar supaya browser tahu tidak semua CSS perlu dimuat untuk memulai proses render halaman.

Tampilan umum CSS yang dpanggil adalah seperti di bawah ini:

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

Ini adalah kode dasar yang hanya memberitahu browser "hei ini link untuk CSS"

Semua yang ada dalam link CSS di atas akan dimuat oleh browser sebelum melakukan render ke semua konten halaman web anda.

Sekarang coba lihat contoh CSS yang tidak peru dimuat sebelum melakukan render halaman. Kita beri nama CSS ini instruksi untuk print.

<link href="print.css" rel="stylesheet" media="print">

Ini akan memberitahu browser "Hei ini ada link CSS, tapi hanya kalau ada yang mem-print"...

CSS ini tetap akan dimuat tapi tidak diprioritaskan sehingga tidak menghalangi pemuatan halaman.

Lihat contoh lain di mana CSS dimuat hanya saat halaman ditampilkan pada ukuran tertentu saja....

 <link href="other.css" rel="stylesheet" media="(min-width: 40em)">

Browser terbaru akan mengenali kode ini sebagai kode yang hanya dipergunakan dalam kondisi khusus. Jadi jika kondisinya tidak tercapai, maka CSS tidak dimuat sebelum render dilakukan.

2. Gunakan Lebih Sedikit File CSS

Selalu utamakan CSS yang wajib ada sebelum halaman bisa ditampilkan. Jika anda sudah memberi label pada CSS, maka anda sudah melakukan sebagian dari proses ini.

CSS yang akan kita bahas ini adalah FILE dari CSS; dan bukan CSS yang ada di dalam file tersebut.

Setiap file CSS yang bisa anda singkirkan akan mempercepat waktu muat dari halaman website anda.

Jadi ada 2 cara untuk menggunakan lebih sedikit FILE CSS, yaitu:

1. Menggabungkan file CSS
2. Menggunakan inline CSS

Menggabungkan file CSS

Sebuah halaman web biasanya mempunyai satu file CSS utama dan beberapa file CSS pendukung. Contohnya website wordpress yang biasanya mempunyai file CSS utama; tapi juga bisa saja datang dengan banyak file CSS pembantu untuk widget atau plugins-nya.

Ini juga bisa muncul di halaman website statis, karena ada banyak desainer website yang berpikir lebih baik mempunyai file-file CSS yang terpisah; karena akan lebih mudah dalam mengerjakan halaman webnya. Sayangnya cara seperti ini menimbulkan masalah performa pada website.

Bagaimana Menggabungkan CSS?
Mudah saja, anda bisa menggabungkan CSS ini dengan mengcopy CSS dari satu file dan paste ke file CSS yang lain. Setelah melakukan itu anda tinggal menghapus "pemanggil" CSS yang sudah dicopy kodenya tadi.

Inline CSS file
Anda bisa menaruh CSS langsung ke dalam sebuah halaman web, jadi halaman web tersebut tidak perlu melakukan request untuk mendapatkan CSS-nya.

Bagaimana melakukan inline CSS? Anda bisa mengcopy isi dari suatu file CSS dan masukkan ke dalam html halaman. Setelah anda membuat inline CSS ini, sekarang anda sudah bisa menghapus "pemanggil" CSS tadi.

Cara meletakkan CSS secara inline di dalam halaman adalah dengan mengapitnya dengan <style> tag.

<style>
.... Masukkan CSS di sini .....
</style>

Anda juga bisa mencoba untuk menyederhanakan CSS anda, tapi ini bukan pekerjaan yang mudah, karena anda harus tahu elemen apa saja yang menggunakan sebuah CSS dan bagaimana elemen tersebut bisa tetap terlihat baik; saat anda menyederhanakan CSS.

Tapi kalaupun anda tidak bisa menyederhanakan CSS, setidaknya teknik di atas sudah bisa mengatasi render blocking CSS di halaman web anda....