Dimana Anda dapat melihat hasil karya kami?

Tempat kecil membuat kombinasi, namun persilangan yang terjadi didalamnya tidak memberikan banyak kombinasi. Jadi, berhati-hatilah dalam membuat justifikasi, terutama SEO.

7 Cara Eliminate Render Blocking Resource pada Website Anda

Terakhir diperbarui: Mar 01, 2023

Disclaimer: Panduan SEO cmlabs ini berisi informasi lengkap tentang SEO, seperti pengantar dan panduan umum. Anda mungkin saja mengunjungi laman SEO Terms di cmlabs.co melalui pihak ketiga atau tautan website asing. Kami tidak bertanggung jawab atas keakuratan atau keandalan informasi apa pun yang ditawarkan oleh situs web pihak ketiga.

Dalam pengembangan website, Anda tentu mengenal HTML, CSS, JavaScript, serta banyak istilah lainnya. Bahkan, mungkin Anda sudah pernah mendengar tentang render blocking resource. Meski begitu, tak banyak orang yang tahu bagaimana cara melakukan eliminate render blocking resource untuk mengoptimalkan kinerja website mereka.

Artikel berikut ini akan menjelaskan apa itu render blocking resource, jenis-jenis render blocking resource, hingga bagaimana cara eliminate render blocking resource. Anda dapat langsung menyimak penjelasan lengkapnya berikut ini.

Apa Itu Render Blocking Resource?

html css javascript — Gambar 1: Bahasa HTML, CSS, dan JavaScript, yang Digunakan untuk Mengembangkan Web

Render blocking resource adalah sekumpulan atribut statis, seperti file font, HTML, CSS, dan JavaScript, yang diperlukan dalam proses rendering halaman website.

Saat browser menemukan render blocking resource, browser berhenti mengunduh resource lainnya hingga file-file penting diproses. Sementara itu, seluruh proses rendering akan ditunda.

Di sisi lain, non-render blocking resource tidak akan menunda proses rendering halaman. Browser dapat mengunduhnya dengan aman setelah halaman awal selesai di-render.

Namun, tidak semua resource yang dianggap render blocking oleh browser itu penting. Hal ini tergantung pada karakteristik masing-masing halaman website.

Ada best practice yang bisa Anda gunakan untuk mengubah non-critical render blocking resource ini menjadi non-render blocking resource.

Selain itu, Anda juga dapat mengurangi ukuran render blocking resource yang masih critical dan tidak dapat dihilangkan.

Anda dapat mengurangi ukuran resource menggunakan minify tools sehingga laman tersebut memiliki ukuran yang lebih ringan untuk dimuat.

Jenis-Jenis Render Blocking Resource

Setelah mengetahui apa itu render blocking resource, kini tiba saatnya Anda mengetahui apa saja jenis render blocking resource.

Browser menganggap segala hal yang ia temukan di <head> section pada HTML sebagai render blocking. Adapun jenis-jenis render blocking resource antara lain:

CSS style sheets
Font yang ditambahkan dari local server
HTML imports
File JavaScript yang ditambahkan pada bagian <head>

Sementara itu, gambar, media files, dan tag <script> yang ditempatkan di bagian bawah section <body> akan diidentifikasi sebagai non-render blocking resource.

Cara Eliminate Render Blocking Resource

Setelah mengetahui apa saja jenis-jenis render blocking resource, kini Anda perlu mengetahui bagaimana cara eliminate render blocking resource pada website Anda. Simak penjelasannya di bawah ini.

1. Identifikasi Render Blocking Resource Anda

Cara eliminate render blocking resource yang pertama adalah mengidentifikasi render blocking resource pada website Anda. Hal pertama yang perlu dilakukan adalah menemukan render blocking resource, sehingga Anda dapat mengetahui bagaimana cara untuk mengatasinya.

Kabar baiknya, saat ini sudah banyak tools yang bisa Anda gunakan untuk melakukan hal ini. Tools yang paling banyak digunakan untuk mengidentifikasi render blocking resource adalah Lighthouse.

Selain itu, ada tools PageSpeed Insights dan GTmetrix yang merupakan aplikasi berbasis website gratis yang menggunakan library Lighthouse untuk mengukur kecepatan halaman, core web vitals, dan parameter penting lainnya.

2. Eliminasi Render Blocking JavaScript dengan ‘defer’ dan ‘async’

Mirip dengan CSS, file JavaScript yang ditambahkan ke bagian <head> dokumen juga diperlakukan sebagai render blocking resource secara default.

Salah satu cara untuk melakukan eliminate render blocking resource adalah menggunakan atribut defer dan async. Keduanya adalah atribut Boolean yang artinya jika ditambahkan, mereka akan diaktifkan tanpa konfigurasi lebih lanjut.

Mereka juga membuat skrip yang ditambahkan ke bagian <head> HTML tanpa proses render blocking. Atribut defer menginstruksikan browser untuk mengunduh skrip di latar belakang sehingga tidak memblokir proses rendering halaman. Skrip yang ditangguhkan akan dijalankan setelah DOM siap sebelum DOMContentLoaded diaktifkan.

3. Jangan Tambahkan @import pada Kode CSS Anda

Cara eliminate render blocking resource yang selanjutnya adalah jangan menambahkan @import pada kode CSS Anda. Meskipun @import mampu menjaga file HTML Anda tetap bersih, hal ini bukanlah opsi yang baik.

Hal tersebut dikarenakan @import memang memungkinkan Anda mengimport CSS dari stylesheet lain. Akan tetapi, cara ini menyebabkan browser memproses file CSS Anda lebih lambat karena terdapat file impor yang perlu diunduh. Pada akhirnya, proses rendering pun akan terblokir.

Jika Anda ingin menambahkan lebih dari satu file CSS ke halaman website, Anda dapat menggunakan tag <link> atau menggabungkan file menggunakan minify tools.

4. Hapus Kode CSS dan JavaScript yang Tidak Terpakai

Cara eliminate render blocking resource yang selanjutnya adalah menghapus kode CSS dan JavaScript yang tidak terpakai.

Gunakan tools seperti PurgeCSS, yang memungkinkan Anda untuk memeriksa kode CSS dan menghapus bagian-bagian yang sudah tak terpakai, termasuk dari Bootstrap bila Anda menggunakannya.

Menemukan dan menghapus JavaScript yang tidak terpakai sedikit lebih rumit karena Anda harus menganalisis kodenya secara manual. Anda dapat melakukan analisis kode menggunakan Chrome DevTools, yang akan menyorot kode JavaScript yang tidak terpakai dengan warna merah.

Menghapus kode CSS dan JavaScript yang sudah tidak terpakai akan mengoptimalkan kinerja website Anda. Sebab, website Anda tidak lagi menyimpan program atau sekumpulan kode yang belum tentu berfungsi bagi website tersebut.

5. Gunakan Atribut Media

Secara default, browser menganggap bahwa semua file CSS adalah render blocking resource. Namun, jika Anda menambahkan atribut media ke tag <link>, Anda dapat menunjukkan keberadaan file CSS spesifik ke browser.

CSS spesifik hanya berlaku dalam kondisi tertentu, seperti di bawah atau di atas ukuran viewport, atau pada halaman cetak. Dengan atribut media, Anda dapat menentukan kondisi media khusus untuk file CSS.

Jika Anda memiliki file CSS dengan satu atau beberapa kueri media, Anda dapat mengekstrak semua @media dan menyimpannya sebagai file terpisah menggunakan plugin PostCSS.

6. Pisahkan Kode ke Bundle yang Lebih Kecil

Memisahkan kode ke bundle yang lebih kecil dapat menjadi salah satu cara eliminate render blocking resource yang bisa Anda lakukan.

Anda dapat menggunakan bundler modul seperti Webpack untuk membagi kode Anda menjadi bundel yang lebih kecil.

Meskipun melakukan memisahkan kode dapat dilakukan dengan cara manual, penggunaan tools bundler modul akan membuatnya lebih mudah.

Saat ini, sebagian besar alat bundling hadir dengan fungsi pemecahan kode tanpa konfigurasi yang rumit, akan tetapi mereka juga memungkinkan Anda mengubah konfigurasi secara manual jika Anda memerlukannya.

7. Menunda Penggunaan Non-critical CSS

Semua file CSS yang Anda tempatkan di bagian <head> halaman HTML secara otomatis dianggap sebagai render blocking resource.

Memisahkan CSS menjadi dua bagian, yaitu critical dan non-critical merupakan teknik optimasi yang bisa menjadi salah satu opsi terbaik dalam melakukan eliminate render blocking resource pada website Anda.

Pembagian CSS menjadi critical dan non-critical tidak perlu dilakukan secara manual. Salah satu tools yang bisa Anda gunakan adalah Critical Path CSS Generator. Tools ini menghasilkan dua file CSS yang dapat diunduh, yakni file critical CSS, dan file gabungan.

Anda dapat menambahkan file CSS yang penting sebagai sumber daya eksternal ke bagian <head> atau menyisipkannya menggunakan tag <style> guna mengurangi jumlah permintaan HTTP.

File CSS gabungan mencakup keseluruhan aturan CSS, dan Anda perlu memindahkannya ke bagian bawah sebelum tag <body> penutup, sehingga hal ini akan menjadi non-render blocking resource.

Demikianlah pembahasan mengenai apa itu render blocking resource, jenis-jenisnya, hingga bagaimana cara eliminate render blocking resource untuk mengoptimalkan kinerja website Anda.

Gunakan jasa SEO untuk membantu Anda dalam mengoptimalkan kinerja website, sehingga website Anda pun siap digunakan untuk menjalankan strategi bisnis yang telah ditentukan.

Mitra kami yang berharga

Aliansi strategis ini memungkinkan kami untuk menawarkan kepada klien-klien kami berbagai solusi inovatif SEO dan pelayanan yang luar biasa. Pelajari Lanjut

cmlabs

Bagaimana pendapat Anda? Apakah Anda menyukai artikel ini?