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 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 kasus?

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

Dalam prosedur pemecahan perayapan Google untuk mobile version, Google berharap konten paruh atas atau yang ditampilkan pada layar browser itu sanggup ditampilkan dalam 1 detik (menurut standar kecepatan koneksi Google tentunya), & selebihnya bisa dimuat dalam dua dtk.

Jadi tentunya kita perlu belajar cara membuat website supaya CSS tidak terlalu banyak merogoh saat render buat 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 sahih

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

Beberapa hal yg harus diperhatikan waktu 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 merupakan cari semua @import dan ganti.

Ini umumnya ada di bagian atas file laman web dan bentuknya seperti pada bawah ini:

@import url("style.Css")

Daripada memanggil CSS menggunakan metode import, merupakan lebih baik buat membuatnya tetap dalam satu arsip. Caranya copas isi CSS yang diimport ke dalam CSS page. Kalau lantaran suatu alasan anda nir bisa melakukan itu, anda sanggup memasukkan beberapa CSS menggunakan memakai kode berikut:

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

Pastikan anda mengganti style.Css dengan alamat lokasi berdasarkan arsip 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 menggunakan melabeli file CSS menggunakan sahih agar browser memahami tidak seluruh CSS perlu dimuat buat memulai proses render halaman.

Tampilan umum CSS yg dpanggil merupakan seperti di bawah ini:

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

Ini merupakan kode dasar yg hanya memberitahu browser "hei ini link buat CSSdanquot;

Semua yg terdapat pada link CSS pada atas akan dimuat sang browser sebelum melakukan render ke semua konten laman web anda.

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

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

Ini akan memberitahu browser "Hei ini terdapat link CSS, akan tetapi hanya kalau terdapat yg mem-print"...

CSS ini permanen akan dimuat tapi tidak diprioritaskan sebagai akibatnya nir menghalangi pemuatan laman.

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

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

Browser terkini akan mengenali kode ini menjadi kode yang hanya digunakan pada syarat spesifik. Jadi bila kondisinya tidak tercapai, maka CSS nir dimuat sebelum render dilakukan.

Dua. 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 yg akan kita bahas ini merupakan FILE dari CSS; dan bukan CSS yg ada pada pada file tadi.

Setiap arsip CSS yg mampu anda singkirkan akan mempercepat saat muat menurut laman website anda.

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

1. Menggabungkan arsip CSS
2. Menggunakan inline CSS

Menggabungkan arsip 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 pula mampu ada di laman website tidak aktif, karena ada banyak desainer website yg berpikir lebih baik mempunyai arsip-arsip CSS yg terpisah; lantaran akan lebih gampang pada mengerjakan page webnya. Sayangnya cara seperti ini menimbulkan perkara performa dalam website.

Bagaimana Menggabungkan CSS?

Mudah saja, anda bisa menggabungkan CSS ini menggunakan mengcopy CSS berdasarkan satu arsip & paste ke arsip CSS yang lain. Setelah melakukan itu anda tinggal menghapus "pemanggil" CSS yang sudah dicopy kodenya tadi.

Inline CSS file

Anda mampu memberikan CSS langsung ke dalam sebuah halaman web, jadi halaman web tadi tidak perlu melakukan request buat mendapatkan CSS-nya.

Bagaimana melakukan inline CSS? Anda bisa mengcopy isi dari suatu arsip CSS dan masukkan ke pada html page. Setelah anda menciptakan inline CSS ini, sekarang anda telah sanggup 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 nir bisa menyederhanakan CSS, setidaknya teknik di atas sudah bisa mengatasi render blocking CSS pada laman web anda....