Apa Itu Render Blocking Css?

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

Nah, ternyata selain server yang lambat.... Render Blocking CSS atau CSS yang menghalangi proses render halaman juga dapat menjadi persoalan untuk kecepatan website anda. Makara ini salah satu yang perlu dipelajari ketika anda berguru cara menciptakan 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 usang halaman dimuat
• Begitu juga semakin banyak file CSS, maka semakin usang halaman dimuat.

Kenapa Render Blocking CSS ini masalah?

Ini persoalan user experience. Banyak sekali halaman web yang ditinggalkan penggunanya alasannya ialah terlalu usang menunggu proses render hingga halaman dapat dilihat.

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

Makara tentunya kita perlu berguru cara menciptakan website biar 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 ketika menciptakan website biar persoalan 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 dapat melakukannya sendiri.

Makara eksklusif saja kita mulai...

1. Memanggil CSS dengan benar

CSS dapat dipanggil dalam beberapa cara dalam halaman web anda. Ada cara yang sudah sangat salah dilakukan di kala gadget ketika ini....

Beberapa hal yang harus diperhatikan ketika memanggil file CSS:

• Jangan gunakan @import
• Memberi Label CSS dengan benar

JANGAN GUNAKAN @IMPORT

Metode memanggil file CSS ini jelek alasannya ialah ini akan ditambahkan ke waktu yang diharapkan untuk memuat CSS anda sebelum halaman dapat dimuat

Solusinya ialah cari semua @import dan ganti.

Ini biasanya ada di bab atas file halaman web dan bentuknya ibarat di bawah ini:

@import url("style.css")

Daripada memanggil CSS dengan metode import, ialah lebih baik untuk membuatnya tetap dalam satu file. Caranya copas isi CSS yang diimport ke dalam CSS halaman. Kalau alasannya ialah suatu alasan anda tidak dapat melaksanakan itu, anda dapat memasukkan beberapa CSS dengan memakai 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 ketika CSS tidak dilabeli dengan benar, maka secara default browser akan memuat semua CSS sebelum melaksanakan render halaman web.

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

Tampilan umum CSS yang dpanggil ialah ibarat di bawah ini:

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

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

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

Sekarang coba lihat pola CSS yang tidak peru dimuat sebelum melaksanakan render halaman. Kita beri nama CSS ini arahan 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 pola lain di mana CSS dimuat hanya ketika 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. Makara kalau kondisinya tidak tercapai, maka CSS tidak dimuat sebelum render dilakukan.

2. Gunakan Lebih Sedikit File CSS

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

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

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

Makara ada 2 cara untuk memakai lebih sedikit FILE CSS, yaitu:

1. Menggabungkan file CSS
2. Menggunakan inline CSS

Menggabungkan file CSS

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

Ini juga dapat muncul di halaman website statis, alasannya ialah ada banyak desainer website yang berpikir lebih baik memiliki file-file CSS yang terpisah; alasannya ialah akan lebih gampang dalam mengerjakan halaman webnya. Sayangnya cara ibarat ini menimbulkan persoalan performa pada website.

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

Inline CSS file
Anda dapat menaruh CSS eksklusif ke dalam sebuah halaman web, jadi halaman web tersebut tidak perlu melaksanakan request untuk mendapat CSS-nya.

Bagaimana melaksanakan inline CSS? Anda dapat mengcopy isi dari suatu file CSS dan masukkan ke dalam html halaman. Setelah anda menciptakan inline CSS ini, kini anda sudah dapat menghapus "pemanggil" CSS tadi.

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

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

Anda juga dapat mencoba untuk menyederhanakan CSS anda, tapi ini bukan pekerjaan yang mudah, alasannya ialah anda harus tahu elemen apa saja yang memakai sebuah CSS dan bagaimana elemen tersebut dapat tetap terlihat baik; ketika anda menyederhanakan CSS.

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

Share this post