Apa Itu Render-Blocking Resources & Bagaimana Memperbaiki Masalah Render Blocking

Sumber daya yang memblokir perenderan adalah salah satu alasan paling umum untuk situs web yang memuat lambat. Dan jika situs web Anda tidak cukup cepat, Anda tidak hanya merugikan pengalaman pengguna pengunjung Anda, tetapi juga peringkat mesin pencari Anda. Berita buruknya adalah, jika situs web Anda lambat, Anda kehilangan pelanggan dan pendapatan.

Namun, ada juga kabar baik – Anda dapat meningkatkan kecepatan situs web Anda dengan menghilangkan sumber daya yang memblokir render. Dalam artikel ini, kami akan menjelaskan bagaimana sumber daya yang memblokir perenderan memengaruhi waktu pemuatan Anda dan menunjukkan cara memperbaikinya.

Apa Itu Sumber Daya Pemblokiran Render?

Sumber daya pemblokiran render yang paling umum adalah file JavaScript dan CSS yang terletak di bagian atas halaman web Anda. Mereka dimuat di area paruh atas (atau area yang biasanya Anda lihat di situs web sebelum menggulir ke bawah untuk melihat konten lainnya) dan merupakan bagian dari jalur rendering penting yang digunakan oleh browser web.

Dalam istilah awam, itu berarti bahwa peristiwa tertentu perlu terjadi agar browser Anda menampilkan (merender) tampilan awal halaman web dengan benar. Berikut adalah contoh cara kerja jalur rendering dasar:

• Browser mengunduh halaman web yang terdiri dari file HTML yang menyimpan struktur halaman web
• Browser kemudian membaca HTML dan melihat 3 file tambahan: file css, file javascript, dan gambar
• Browser akan mengunduh gambar terlebih dahulu
• Browser kemudian menyadari bahwa itu tidak dapat terus menampilkan halaman tanpa mengambil CSS dan JavaScript
• Browser mengunduh file CSS dan membacanya untuk memastikan tidak ada lagi yang dipanggil
• Browser mengunduh file JavaScript dan membacanya untuk memastikan tidak ada lagi yang dipanggil
• Browser akhirnya dapat menampilkan halaman web

Saat browser sibuk memuat dan membaca setiap file CSS dan JavaScript, pengunjung Anda menatap layar kosong, menunggu situs Anda dimuat. Jika Anda menggunakan CMS seperti WordPress, browser Anda dapat menjadi sibuk cukup lama karena tidak hanya memuat file gaya dan skrip tema Anda, tetapi juga skrip dan file gaya yang disertakan dengan WordPress itu sendiri. yang datang dengan semua plugin dan widget yang Anda gunakan.

Ketika datang untuk mengoptimalkan kecepatan situs web Anda, tugas pertama di daftar Anda harus mengurangi waktu yang dibutuhkan pengguna Anda untuk dapat melihat dan berinteraksi dengan konten Anda. Cara termudah untuk melakukannya adalah dengan mengoptimalkan jalur rendering penting Anda.

Cara Memperbaiki Masalah Pemblokiran Render

Sekarang setelah Anda mengetahui apa yang menyebabkan masalah pemblokiran render dan bagaimana pengaruhnya terhadap kecepatan situs Anda, mari kita bicara tentang cara memperbaiki masalah tersebut.

Render-Blocking CSS

Ada tiga cara untuk memperbaiki masalah CSS yang memblokir render:

• Panggil file CSS Anda dengan benar – file CSS Anda harus ditautkan dalam file HTML Anda seperti ini: <link rel="style.css" href=“style.css"> alih-alih mengandalkan penggunaan metode @import . Metode @import biasanya akan berada di dekat bagian atas stylesheet biasa Anda dan menyebabkan browser kembali dan menemukan file yang diimpor sebelum dapat membaca sisa file CSS dan mengakibatkan penundaan yang lebih besar saat merender halaman web Anda
• Kurangi jumlah file CSS di jalur kritis – jika memungkinkan, gabungkan semua file CSS yang berbeda menjadi satu dan hapus panggilan ke file tersebut dari HTML Anda

JavaScript Pemblokiran Render

Untuk menghapus JavaScript yang memblokir render, Anda perlu mengetahui berapa banyak file JavaScript yang dimuat dan di mana mereka dipanggil dalam HTML Anda. Cara yang baik untuk mengetahuinya adalah dengan menggunakan alat Google PageSpeed ​​Insights. Ketika perusahaan pembersih yang berbasis di Australia, This Is Neat Cleaning, sedang membangun situs web mereka, mereka menggunakan Google PageSpeed ​​Insights sebagai tolok ukur mereka, menguji berbagai skenario untuk mengetahui dengan tepat apa yang mereka butuhkan untuk seluler dan desktop.

Terbukti dari pengujian, bahwa menyisipkan sebagian besar skrip di bagian bawah file HTML, menghasilkan hasil terbaik. Alasan utamanya adalah memindahkan skrip ke bagian bawah halaman menghapus render yang memblokir javascript agar tidak mengulur pengalaman pengguna. Dengan CSS penting yang masih dimuat di paro atas, pengguna masih dapat menggunakan situs secara mendasar, sementara interaksi dan fungsionalitas masih dimuat di latar belakang.

Menggunakan Plugin

Tentu saja, seperti apa pun yang terkait dengan WordPress, Anda dapat menggunakan plugin untuk memperbaiki masalah pemblokiran render. Dengan lebih dari satu juta total instalasi aktif, tidak perlu dipikirkan lagi bahwa This is Neat Cleaning akan menggunakan W3 Total Cache untuk caching, minifying, dan pengoptimalan kinerja.

Inilah cara Anda dapat menggunakan W3 Total Cache untuk memperbaiki masalah pemblokiran render.

Di dasbor WordPress Anda, buka Performance > Settings dan gulir ke bawah ke bagian Minify . Centang kotak yang mengatakan Aktifkan dan kemudian pilih Manual dari menu dropdown di sebelah mode minify. Simpan pengaturan . Anda kemudian harus menambahkan semua skrip dan gaya yang ingin Anda perkecil.

Untuk mengetahui di mana letak skrip dan stylesheet yang memblokir perenderan, buka Alat Wawasan Kecepatan Laman Google dan analisis situs web Anda. Kemudian, lihat tab saran dan temukan bagian yang berbunyi: Hilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas . Klik Show how to fix dan pilih dan salin URL file.

Kembali ke dashboard WordPress Anda dan arahkan ke W3 Total Cache > Performance > Minify . Gulir ke bawah ke bagian JavaScript dan di bawah Operasi di area pastikan jenis penyematan diatur ke Non-blocking using defer untuk bagian <head> . Kemudian, klik tombol Tambahkan skrip dan tempel URL yang Anda salin dari alat Google PageSpeed.

Setelah Anda menambahkan semua file skrip, gulir ke bawah ke bagian CSS , klik Tambahkan lembar gaya dan tambahkan URL file lembar gaya yang disalin dari Google PageSpeed ​​Insights.

Setelah selesai, klik tombol Simpan pengaturan dan bersihkan cache .

Pikiran Akhir

Sumber daya yang memblokir perenderan dapat menyebabkan kekacauan dalam hal kecepatan situs web. Untungnya, ada beberapa cara untuk memperbaiki masalah tersebut, jadi gunakan tip yang disediakan di sini untuk meningkatkan kecepatan situs web Anda dan memastikan pengunjung Anda mendapatkan pengalaman pengguna sebaik mungkin.