Apa Itu Render Blocking Css?

Kemarin kita sudah mengulas gimana trik memperbaiki kecepatan respon server, dengan tujuan mempercepat waktu loading dari halaman website kita. Ini yaitu hal-hal yg penting diperhatikan Saat kita bakal menciptakan sebuah website untuk tujuan SEO.

Nah, ternyata selain server yg lambat.... Render Blocking CSS atau CSS yg menghalangi proses render halaman juga dapat menjadi persoalan untuk kecepatan website anda. Makara ini Keliru satu yg perlu dipelajari Saat anda berguru trik menciptakan website yg 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.

Mengapa Render Blocking CSS ini masalah?

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

Dalam algoritma perayapan Google untuk mobile version, Google berharap konten paruh atas atau yg 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 trik menciptakan website supaya CSS tidak terlalu banyak mengambil waktu render untuk konten paruh atas (above the fold content).

Bagaimana Caranya Mengatasi Render Blocking CSS?

Ada beberapa hal yg perlu kita perhatikan Saat menciptakan website supaya persoalan Render Blocking CSS ini tidak merusak kecepatan muat halaman website kita. Beberapa hal yg perlu diperhatikan adalah:

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

Maknakel ini bakal mengulas lebih detil lagi setiap poin di atas dan gimana anda dapat melakukannya sendiri.

Makara eksklusif saja kita mulai...

1. Memanggil CSS dengan benar

CSS dapat dipanggil dalam beberapa trik dalam halaman web anda. Ada trik yg sudah sangat Keliru dilakukan di kala gadget Saat ini....

Beberapa hal yg Musti diperhatikan Saat memanggil file CSS:

• Jangan gunakan @import
• Memberi Label CSS dengan benar

JANGAN GUNAKAN @IMPORT

Metode memanggil file CSS ini jelek alasannya yaitu ini bakal ditambahkan ke waktu yg diharapkan untuk memuat CSS anda sebelum halaman dapat dimuat

Solusinya yaitu cari semua @import dan ubah.

Ini biasanya ada di pecahan atas file halaman web dan bentuknya mirip di bawah ini:

@import url("style.css")

Daripada memanggil CSS dengan metode import, yaitu lebih baik untuk membuatnya tetap dalam satu file. Caranyanya copas isi CSS yg diimport ke dalam CSS halaman. Jika alasannya yaitu suatu alasan anda tidak dapat melaksanakan itu, anda dapat memasukkan beberapa CSS dengan menggunakan kode berikut:

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

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

MEMBERI LABEL CSS DENGAN BENAR

Pada Saat CSS tidak dilabeli dengan benar, maka seCaranya default browser bakal memuat semua CSS sebelum melaksanakan render halaman web.

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

Tampilan umum CSS yg dpanggil yaitu mirip di bawah ini:

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

Ini yaitu kode dasar yg hanya memberitahu browser "hei ini link untuk CSS"

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

Sekarang coba lihat teladan CSS yg tidak peru dimuat sebelum melaksanakan render halaman. Kita beri nama CSS ini arahan untuk print.

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

Ini bakal memberitahu browser "Hei ini ada link CSS, tapi hanya Jika ada yg mem-print"...

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

Lihat teladan 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 bakal mengenali kode ini sebagai kode yg hanya dipergunakan dalam keadaan khusus. Makara Jika kondisinya tidak tercapai, maka CSS tidak dimuat sebelum render dilakukan.

2. Gunakan Lebih Sedikit File CSS

Selalu utamakan CSS yg Musti/harus ada sebelum halaman dapat ditampilkan. Jika anda sudah memberi label pada CSS, maka anda sudah melaksanakan sebagian dari proses ini.

CSS yg bakal kita bahas ini yaitu FILE dari CSS; dan bukan CSS yg ada di dalam file tersebut.

Setiap file CSS yg dapat anda singkirkan bakal mempercepat waktu muat dari halaman website anda.

Makara ada 2 trik 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 yg biasanya mempunyai 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 yaitu ada banyak desainer website yg berpikir lebih baik mempunyai file-file CSS yg terpisah; alasannya yaitu bakal lebih Mudah dalam mengerjakan halaman webnya. Sayangnya trik mirip 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 yg lain. setelah melaksanakan itu anda tinggal menghapus "pemanggil" CSS yg 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 mendapatkan 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.

Caranya meletakkan CSS seCaranya inline di dalam halaman yaitu dengan mengapitnya dengan <style> tag.

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

Anda juga dapat mencoba untuk menyederhanakan CSS anda, tapi ini bukan pekerjaan yg mudah, alasannya yaitu anda Musti tahu elemen apa saja yg menggunakan sebuah CSS dan gimana elemen tersebut dapat tetap terlihat baik; Saat anda menyederhanakan CSS.

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