Nah, ternyata selain server yang lambat.... Render Blocking CSS atau CSS yang membatasi proses render halaman juga mampu menjadi dilema untuk kecepatan situs web anda. Makara ini salah satu yang perlu dipelajari dikala anda mencar ilmu cara menciptakan situs web yang cepat dimuat.
Apa itu Render Blocking CSS?
Render Blocking CSS menangguhkan suatu halaman web untuk beberapa dikala- Setiap file CSS menangguhkan halaman web kita dari proses render halaman
- Semakin besar CSS, maka makin lama halaman dimuat
- Begitu juga kian banyak file CSS, maka semakin lama halaman dimuat.
Kenapa Render Blocking CSS ini dilema?
Ini dilema user experience. Banyak sekali halaman web yang ditinggalkan penggunanya lantaran 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 kriteria kecepatan koneksi Google tentunya), dan selebihnya bisa diangkut dalam 2 detik.
Makara pastinya kita perlu mencar ilmu cara menciptakan situs web mudah-mudahan CSS tidak terlampau banyak mengambil waktu render untuk konten paruh atas (above the fold content).
Bagaimana Cara Mengatasi Render Blocking CSS?
Ada beberapa hal yang perlu kita amati saat membuat situs web supaya duduk perkara Render Blocking CSS ini tidak merusak kecepatan muat halaman situs web kita. Beberapa hal yang perlu diamati yaitu:- Memanggil CSS dengan benar
- Kurangi jumlah file CSS
Makara eksklusif saja kita mulai...
1. Memanggil CSS dengan benar
CSS bisa diundang dalam beberapa cara dalam halaman web anda. Ada cara yang sudah sungguh salah dilaksanakan di kala gadget dikala ini....Beberapa hal yang mesti diamati dikala memanggil file CSS:
- Jangan gunakan @import
- Memberi Label CSS dengan benar
JANGAN GUNAKAN @IMPORT
Metode memanggil file CSS ini buruk lantaran ini akan ditambahkan ke waktu yang dibutuhkan untuk memuat CSS anda sebelum halaman bisa dimuatSolusinya yakni cari semua @import dan ganti.
Ini lazimnya ada di potongan atas file halaman web dan bentuknya mirip di bawah ini:
@import url("style.css")
Daripada memanggil CSS dengan sistem import, yakni lebih baik untuk membuatnya tetap dalam satu file. Caranya copas isi CSS yang diimport ke dalam CSS halaman. Kalau karena suatu argumentasi anda tidak dapat melaksanakan itu, anda mampu memasukkan beberapa CSS dengan memakai instruksi berikut:
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 menampung semua CSS sebelum melaksanakan render halaman web.Solusinya merupakan dengan melabeli file CSS dengan benar agar browser tahu tidak semua CSS perlu dimuat untuk mengawali proses render halaman.
Tampilan biasa CSS yang dpanggil yakni mirip di bawah ini:
Ini merupakan kode dasar yang cuma menginformasikan browser "hei ini link untuk CSS"
Semua yang ada dalam link CSS di atas akan diangkut 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.
Ini akan memberitahu browser "Hei ini ada link CSS, tapi hanya bila ada yang mem-print"...
CSS ini tetap akan diangkut tapi tidak diprioritaskan sehingga tidak membatasi pemuatan halaman.
Lihat pola lain di mana CSS dimuat cuma dikala halaman ditampilkan pada ukuran tertentu saja....
Browser terbaru akan mengenali instruksi ini sebagai instruksi yang cuma dipergunakan dalam keadaan khusus. Makara bila kondisinya tidak tercapai, maka CSS tidak dimuat sebelum render dikerjakan.
2. Gunakan Lebih Sedikit File CSS
Selalu utamakan CSS yang wajib ada sebelum halaman bisa ditampilkan. Jika anda telah memberi label pada CSS, maka anda sudah melakukan sebagian dari proses ini.CSS yang mau kita bahas ini yakni 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 situs web anda.
Makara ada 2 cara untuk memakai lebih minim FILE CSS, ialah:
- Menggabungkan file CSS
- Menggunakan inline CSS
Menggabungkan file CSS
Sebuah halaman web lazimnya mempunyai satu file CSS utama dan beberapa file CSS penunjang. Contohnya situs web wordpress yang biasanya memiliki file CSS utama; tapi juga bisa saja datang dengan banyak file CSS pembantu untuk widget atau plugins-nya.Ini juga bisa timbul di halaman situs web statis, sebab ada banyak desainer situs web yang berpikir lebih baik mempunyai file-file CSS yang terpisah; alasannya ialah akan lebih gampang dalam melakukan halaman webnya. Sayangnya cara mirip ini mengakibatkan persoalan performa pada situs web.
Bagaimana Menggabungkan CSS?
Mudah saja, anda bisa memadukan 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 bisa menaruh CSS langsung ke dalam suatu halaman web, jadi halaman web tersebut tidak perlu melaksanakan request untuk menerima CSS-nya.
Bagaimana melaksanakan inline CSS? Anda bisa mengcopy isi dari suatu file CSS dan masukkan ke dalam html halaman. Setelah anda membuat inline CSS ini, kini anda sudah bisa meniadakan "pemanggil" CSS tadi.
Cara menaruh CSS secara inline di dalam halaman merupakan dengan mengapitnya dengan Anda juga bisa mencoba untuk menyederhanakan CSS anda, tetapi ini bukan pekerjaan yang simpel, alasannya adalah anda mesti tahu unsur apa saja yang menggunakan suatu CSS dan bagaimana unsur tersebut mampu tetap tampakbaik; dikala anda menyederhanakan CSS.
Tapi kalaupun anda tidak dapat menyederhanakan CSS, setidaknya teknik di atas sudah bisa mengatasi render blocking CSS di halaman web anda....