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.

cara memperbaiki render blocking css

Nah, ternyata selain server yg lambat…. Render Blocking CSS atau CSS yg menghalangi proses render laman juga bisa sebagai kasus untuk kecepatan website anda. Jadi ini keliru satu yg perlu dipelajari saat anda belajar cara membentuk 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 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 buat mobile version, Google berharap konten paruh atas atau yang ditampilkan pada layar browser itu mampu ditampilkan dalam 1 dtk (menurut baku kecepatan koneksi Google tentunya), dan selebihnya sanggup dimuat dalam dua dtk.

Jadi tentunya kita perlu belajar cara menciptakan website supaya CSS tidak terlalu poly merogoh waktu 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 eksklusif saja kita mulai…

1. Memanggil CSS menggunakan 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 wajib diperhatikan ketika 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 masih ada pada permukaan arsip page web

@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….

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *