MENGENAL DAN MENGATASI MASALAH RENDER BLOCKING CSS
Selamat Datang di Blog Orang IT . Postingan sebelumnya saya telah membahas bagaimana cara mengatasi leverage browsing caching oleh javascript tepatnya beberapa fungsi pemanggilan javascript dari iklan adnow atau tracking histat berpotensi memblokir perenderan oleh google bot nah kali ini saya ingin membahas secara lengkap pengertian render blocking yang ditampilkan oleh pengujian google pagespeed insight dan bagaimana cara memperbaikinya .
Ada banyak hal yang mempengaruhi SEO seperti faktor eksternal yang bersumber dari luar contohnya backlink spam dan faktor internal yang berasal dari dalam website itu sendiri . Saat kita melakukan testing performa website dengan alat penguji google pagespeed insight , kita menemukan saran untuk memperbaiki render blocking terkait script eksternal CSS
Baca juga : Memperbaiki leverage browsing caching
Selain menghalangi perenderan oleh google bot yang menyebabkan website sulit di index oleh google , ternyata adanya penghalang dari dalam script template juga menyebabkan loading blog menjadi lama karena request yang dikirimkan memerlukan waktu responds
Pengertian render blocking CSS
Efek render blocking CSS akan menunda perenderan halaman untuk sementara waktu , memastikan website selalu uptime itu penting oleh karena itu sedikit penundaan akan memberikan pengalaman buruk bagi pengunjung terlebih ketika jatah kuota index goole bot malam ini datang sementara script tertentu dalam website anda memblokir perenderan, hal ini menyebabkan aktivitas googlebot dalam mengumpulkan data halaman website menjadi tidak optimal
– Beberapa CSS menunda halaman untuk dapat dirender oleh bot crawl
– Semakin banyak CSS yang kita gunakan maka proses pemuatan halaman juga menjadi lebih lambat
– Semakin besar CSS yang digunakan / diambil maka proses loading blog juga menjadi berat
Render blocking CSS adalah masalah penting
Selain berpengaruh terhadap seo , masalah render blocked CSS juga menjadi tolak ukur bagi user experience ketika sebuah halaman sedang dimuat dan terjadi permintaan yang dblokir oleh CSS pastinya halaman web tidak merespons permintaan user jadinya pengunjung pergi kewebsite lain karena website anda dianggap error
Dalam algoritma google khususnya versi seluler google berharap halaman paruh atas bisa dimuat dalam waktu 1 detik dan sisanya selama 2 detik , yang penting main konten nya terlebih dahulu harus dimuat pertama kali sisanya seperti eksternal JS CSS diberikan waktu selama 2 detik untuk dimuat pada proses selanjutnya . Waktu 1 detik diambil berdasarkan standart kecepatan jaringan 4G dengan perhitungan 4 kali proses perjalanan untuk memuat halaman paruh atas ( above the fold content ) terlebih dahulu atau sekitar 0,6Mb dari total ukuran website
Sebagai pemilik website kita harus belajar bagaimana cara mengoptimalkan kecepatan loading blog agar maksimal , jika anda tidak punya skill programming fokus saja kepada konten berkualitas dan serahkan masalah optimasi template kepada ahlinya
Cara mengatasi render blocking CSS
Ada beberapa hal yang harus kita lakukan saat mengoptimalkan blog agar masalah render blocking CSS bisa diminimalisir diantaranya dengan
– Memanggil CSS dengan benar dan terstruktur
– Mengurangi modifikasi / pemanggilan CSS
Lebih jelasnya mengenai kedua hal diatas akan saya bahas berdasarkan pengalaman pribadi
1. Memanggil CSS dengan benar
Pemanggilan CSS bisa dilakukan dengan beberapa cara berbeda , diera seluler modern sekarang ini banyak website menggunakan cara yang salah dalam pemanggilan CSS
Berikut hal yang harus diperhatikan dalam pemanggilan CSS
– Jangan gunakan fungsi import
Metode memanggil file CSS ini buruk karena akan ditambahkan ke waktu yang diperlukan untuk memuat CSS anda sebelum halaman lain bisa dimuat , solusinya silahkan cari kode @import dan ganti
Biasanya pemanggilan import ada dibagian paling atas dari struktur website dan formatnya kurang lebih eperti ini
@import url(“style.css”)
Dari pada memanggil kode CSS dengan format import alangkah baiknya menggabungkan beberapa CSS menjadi satu file jadi tidak terlalu banyak proses permintaan , cara nya silahkan copy paste beberapa CSS yang di import kedalam satu halaman atau jika anda mengalami kesulitan masukkan saja beberapa CSS kedalam format berikut
<link rel=”stylesheet” href=”style.css”>
silahkan anda ganti style.css dengan lokasi tempat CSS anda berada
– Memberikan label CSS degan benar
Pada saat CSS tidak dilabeli dengan benar, maka secara default browser akan memuat semua CSS sebelum melakukan render halaman web. Solusinya berikan penanda label pada semua file CSS agar google tidak memuat semua fungsi CSS yang ada dalam satu halaman penuh karena selain memblokir perenderan juga menyebabkan penundaan
Tampilan CSS pada umumnya biasanya dipanggil dengan perintah
<link href=”style.css” rel=”stylesheet”>
Ini adalah kode dasar yang intinya memberi tahu google bahwa ini adalah perintah 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 perlu dimuat sebelum melakukan render halaman. Kita beri nama CSS ini instruksi untuk print.
<link href=”print.css” rel=”stylesheet” media=”print”>
Fungsi CSS diatas akan memberi tahu google bahwa CSS hanya dirender ketika halaman sedang diprint . 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 versi terbaru menganggap CSS seperti diatas sebagai kode khusus yang akan dimuat ketika syaratnya terpenuhi , jika kondisinya tidak terpenuhi maka CSS tidak akan dimuat oleh browser sampai proses perenderan awal selesai . Sama-sama dirender namun tidak menjadi prioritas
2. Gunakan lebih sedikit CSS
Selalu utamakan CSS yang wajib ada sebelum element lain bisa ditampilkan. Jika anda sudah memberi label pada CSS, maka anda sudah melakukan sebagian dari proses ini.
CSS yang akan kita bahas kali ini merupakan file CSS nya bukan CSS pemanggilan seperti pada point pertama , Setiap file CSS yang bisa anda hapus akan mempercepat waktu pemuatan dari halaman website anda. Ada 2 tips mengurangi 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 memiliki banyak file CSS pembantu untuk widget atau plugins-nya.
Ini juga bisa muncul di halaman 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.
Cara menggabungkan file CSS mudah saja ya, tinggal copy paste isi dari beberapa file CSS menjadi satu kemudian silahkan hapus kode pemanggil CSS yang berbeda sumbernya . Cukup sekali pemanggilan untuk mendapatkan fungsi yang diperlukan jadi hanya butuh sekali request
– Menggunakan inline CSS
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 sebelumnya
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 , namun cara 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.
