Jika Anda menjalankan situs web melalui Lighthouse, Anda mungkin melihat saran untuk menghapus sumber daya yang memblokir perenderan.
Dengan menunda JavaScript dan meletakkan gaya CSS penting sebaris, Anda dapat membuang sumber daya di WordPress yang memperlambat rendering. Ini didukung oleh sebagian besar plugin cache, Autoptimize, dan Async JavaScript. Elementor dan Divi memiliki cara bawaan untuk menyingkirkan sumber daya yang menghentikan rendering halaman, menggunakan CSS yang ditangguhkan dan sebaris. Menghapus CSS, JavaScript, dan kode pihak ketiga yang tidak diperlukan juga dapat membantu penyelesaiannya.
Dalam artikel ini, kami akan mendefinisikan sumber daya yang memblokir perenderan dan membahas keuntungan membuangnya dari situs web Anda. Kemudian, kami akan mendemonstrasikan lima cara alternatif untuk menghilangkannya untuk Anda.
Apa itu sumber pemblokiran render?
Memahami proses pemuatan situs web yang khas sangat penting sebelum kita melihat lebih dekat pada sumber daya yang memblokir perenderan. Seluruh konten situs web Anda harus dirender (atau diunduh) oleh browser pengunjung setelah mereka mengeklik tautannya. Itu membaca semua HTML, CSS, dan JavaScript di situs web Anda dari atas ke bawah. Situs web Anda tidak akan terlihat oleh pengunjung hingga browser selesai membaca antrean skrip ini. Mereka mungkin harus menunggu lama jika ada resource yang memblokir render. Pada dasarnya, file CSS atau JavaScript yang mencegah browser memuat konten lain saat sedang diproses adalah sumber pemblokiran render. Ini dapat menghentikan proses rendering dan membuat halaman terlihat belum selesai atau kosong.
Buat Situs Web Luar Biasa
Dengan Elementor pembuat halaman gratis terbaik
Mulai sekarangSaat ada sumber daya yang memblokir perenderan di situs web Anda, file tambahan dimuat di bagian atas kode. Sebelum melihat situs web, pengguna harus menunggu sementara file-file ini diproses. Sumber daya pemblokiran render berpotensi memengaruhi beberapa indikator kinerja situs web. Misalnya, cat konten terbesar mengukur berapa lama konten utama halaman dimuat. Pertama kali materi dari Model Objek Dokumen (DOM) situs Anda dirender oleh browser dikenal sebagai first contentful paint. Total waktu pemblokiran adalah waktu antara cat konten pertama dan waktu untuk berinteraksi (berapa lama waktu yang dibutuhkan halaman untuk menjadi sepenuhnya interaktif).
Meskipun tidak diperlukan untuk memuat, resource yang memblokir render dapat menghambat rendering. Pengalaman Pengguna situs web Anda mungkin menderita sebagai akibatnya (UX). Jadi sangat penting bagi Anda untuk menyingkirkan ini untuk menghentikan pengunjung meninggalkan halaman Anda.
Manfaat menghilangkan sumber daya pemblokiran render
Pengguna internet umumnya tidak suka menunggu situs web dimuat. Situs web cepat dapat memikat pengguna untuk menjelajahi materi Anda dan mencegah mereka mengunjungi pesaing. Dengan menghapus elemen pemblokiran render, Anda secara efektif membuat kode situs web Anda seringan mungkin, yang dapat menjadi rahasia untuk meningkatkan kecepatan halaman. Karena kinerja situs dan keterlibatan pengguna adalah dua faktor yang dipertimbangkan oleh raksasa mesin telusur seperti Google saat menilai situs web, menghapus file yang memblokir perenderan dapat membantu meningkatkan peringkat mesin telusur situs Anda.
Cara menghilangkan sumber pemblokiran render di WordPress
Anda mungkin bertanya-tanya bagaimana cara menghapus elemen pemblokiran render dari situs web Anda sekarang setelah Anda memahami cara menemukannya di WordPress. Untungnya, kami telah menyusun daftar banyak pendekatan yang dapat Anda ambil untuk mencapainya, dimulai dengan yang paling sederhana.
Optimalkan pemuatan CSS
Meningkatkan kecepatan pemuatan CSS di situs web Anda adalah salah satu teknik untuk menyingkirkan sumber daya yang memblokir perenderan. Browser memuat halaman web Anda dari atas ke bawah, seperti yang dikatakan sebelumnya. Hal ini dapat menyebabkan proses loading menjadi lebih lama ketika file tertentu perlu diproses. Sangat penting untuk diingat bahwa hanya beberapa file CSS yang harus dimuat agar halaman dapat ditampilkan. Oleh karena itu, Anda dapat menampilkan file yang paling penting terlebih dahulu saat mengoptimalkan pemuatan CSS. CSS pemblokiran render dapat dihapus secara manual, tetapi Anda juga dapat memasang plugin untuk mempermudah. Anda dapat mengoptimalkan situs web langsung dari dasbor WordPress menggunakan Jetpack Boost. Plugin ini mempermudah implementasi pemuatan malas, menunda JavaScript yang tidak penting, dan meningkatkan pemuatan CSS. Salah satu cara paling sederhana untuk menyingkirkan sumber daya pemblokiran render di WordPress adalah dengan melakukan ini.
Mulailah dengan mencari Jetpack Boost di bawah Plugins Add New di dasbor WordPress Anda. Instal dan aktifkan plugin di situs web Anda.
Anda dapat pergi ke Jetpack My Jetpack jika Anda sudah memuat Jetpack. Cari Boost dan pilih Activate dari daftar barang Jetpack.
Setelah plugin diaktifkan, klik tab Jetpack Boost dan pilih Mulai.
Situs web Anda akan langsung menerima peringkat kinerja dari Jetpack. Anda akan melihat nilai huruf beserta informasi skor desktop dan seluler Anda.
Kemudian, aktifkan fitur ini dengan menggulir ke bawah ke Optimalkan Pemuatan CSS. Saat diaktifkan, Jetpack Boost akan menaikkan CSS penting untuk situs web Anda sehingga memuat lebih cepat.
Tunda JavaScript yang tidak penting
Anda dapat mengambil lebih banyak tindakan untuk menyingkirkan sumber daya pemblokiran render di WordPress di luar hanya mengoptimalkan pemuatan CSS. JavaScript yang tidak penting juga dapat ditunda untuk mempercepat pemuatan situs web Anda lebih jauh. JavaScript yang tidak penting dapat ditunda untuk menunda beberapa proses hingga setelah konten Anda dimuat. Anda dapat menghentikan browser mengeksekusi file JavaScript jika tidak diperlukan untuk memuat halaman. Untungnya, menggunakan plugin Jetpack Boost membuat ini mudah dilakukan. Anda dapat dengan mudah menunda JavaScript yang tidak penting setelah mengoptimalkan proses pemuatan CSS. Alihkan tombol Tunda area JavaScript Non-Esensial ke aktif. Bagian ini dapat ditemukan di bawah bagian Optimalkan Pemuatan CSS.
Plugin akan memperbarui penilaiannya terhadap kinerja keseluruhan laman Anda setelah Anda mengaktifkan setelan ini. Skor Anda sebelum dan sesudah menggunakan Jetpack Boost akan ditampilkan.
Lihatlah skor di tangkapan layar yang diambil sebelum dan sesudah kami menyelesaikan proses ini. Anda akan melihat bahwa meningkatkan kecepatan halaman dicapai dengan menunda JavaScript yang tidak penting dan memuat CSS dengan lebih efisien. Browser dapat memuat konten Anda lebih cepat karena tidak perlu menjalankan skrip besar.
Tunda gambar di luar layar
Meskipun gambar bukan sumber daya yang mencegah perenderan halaman, Anda mungkin ingin memikirkan untuk mempercepat waktu pemuatannya. Situs web sering kali memiliki gambar di luar layar yang tidak muncul hingga pengguna berinteraksi dengan halaman tersebut, seperti menggulir. Anda dapat menunda ini dengan pemuatan lambat karena tidak diperlukan untuk memuat halaman web. Hanya gambar yang bisa dilihat pengunjung yang dimuat dengan malas. Foto-foto ini akan dimuat tepat sebelum ditampilkan di halaman setelah pengguna menggulir. Browser akan mencoba memuat setiap gambar pada halaman sekaligus jika pemuatan lambat tidak diaktifkan. Semakin lama materi Anda dimuat, semakin besar kemungkinan pengunjung akan meninggalkan situs Anda.
Pemuatan reguler mungkin tidak menjadi masalah jika pengunjung menggunakan komputer desktop. Ponsel cerdas dan tablet, di sisi lain, memiliki layar lebih kecil dan bandwidth lebih sedikit. Situs web Anda mungkin menghabiskan lebih banyak bandwidth dan membutuhkan waktu lebih lama untuk memuat bagi pengguna ponsel jika memuat semua fotonya sekaligus. Masalah ini diselesaikan melalui pemuatan lambat.
Untuk mengaktifkan pemuatan lambat di situs Anda, gunakan Jetpack Boost. Cari saja opsi Lazy Image Loading dan aktifkan.
Penampil hanya akan melihat gambar dimuat di situs web Anda saat mereka menggulir ke bawah halaman jika Anda melakukan ini. Meskipun foto bukanlah sumber daya yang merender blok, mengaktifkan pemuatan lambat dapat mempercepat halaman Anda.
Hilangkan Sumber Daya Pemblokiran Render Dengan Elementor/Divi
Elementor dan Divi menyertakan opsi untuk menghapus sumber daya yang menghalangi render.
Aktifkan Pemuatan CSS yang Ditingkatkan dan Font-Awesome Inline di pengaturan Eksperimen Elementor Anda untuk memuat CSS dan font sebaris, menjadikannya pemblokiran non-render. Pemuatan Aset yang Disempurnakan menghilangkan CSS/JavaScript yang tidak dibutuhkan, yang meningkatkan vitalitas web mendasar dalam berbagai cara.
Dengan menerapkan CSS penting, menunda CSS/JavaScript, dan memuat font Anda sebaris, opsi kinerja Divi juga dapat mengurangi sumber daya pemblokiran render.
Hapus JavaScript yang memblokir render secara manual
Anda juga dapat menghapus sumber daya pemblokiran render secara manual, meskipun menginstal plugin pengoptimalan adalah opsi yang jauh lebih mudah. Idealnya, Anda hanya boleh mempertimbangkan pilihan ini jika Anda seorang pembuat kode berpengalaman. Jika Anda ingin mengurangi jumlah plugin di situs web Anda, prosedur ini juga dapat membantu. Anda dapat memberi file Anda properti async atau defer untuk membantu JavaScript berjalan lebih efisien. Browser akan diinstruksikan untuk merender skrip non-kritis secara terpisah dengan menandainya. Kedua karakteristik tersebut dapat digunakan untuk mempercepat pemuatan informasi HTML.
File HTML diuraikan dengan cara yang khas hingga bertemu dengan file skrip. Penguraian kemudian akan berhenti saat menempatkan skrip. Setelah mengunduh dan menjalankannya, penguraian berlanjut.
Saat memproses HTML yang tersisa, browser dapat mengunduh JavaScript berkat fitur async. Setelah mengunduh, itu dapat menghentikan pemrosesan HTML dan menjalankan skrip.
Atribut defer bekerja dengan cara yang sama, memungkinkan browser mengunduh skrip saat mem-parsing HTML. Perbedaannya adalah bahwa ini juga menunda menjalankan skrip sampai parsing HTML selesai.
Anda harus menyertakan sepotong kode di file functions.php Anda untuk mengimplementasikan salah satu dari properti ini. Anda harus terlebih dahulu menemukan tag skrip> sumber daya yang memblokir perenderan. berikut ini sebagai atribut async:
<script src="resource.js" async></script>Sebagai alternatif, pertimbangkan bagaimana tampilan skrip saat properti defer digunakan:
http://resource.jsMeskipun plugin dapat menangani atribut ini untuk Anda, melakukannya sendiri dapat lebih sesuai dengan preferensi Anda. Jika demikian, sangat penting untuk memahami kapan harus menerapkan setiap atribut. Anda harus menggunakan properti penangguhan untuk skrip non-esensial yang bergantung pada skrip lain. Opsi async sesuai untuk skrip lainnya.
Terapkan atribut async atau defer dengan plugin
Gunakan plugin seperti Async JavaScript jika Anda mengalami masalah saat mengedit skrip secara manual. Anda memiliki kendali penuh atas skrip mana yang memiliki properti async atau defer berkat alat ini.
Setelah plugin terinstal, pilih Enable Async JavaScript di bawah Settings Async JavaScript.
Selanjutnya, buka bagian berjudul Async JavaScript Method. Anda dapat memilih untuk mengaktifkan async atau menunda atribut di sini.
Merupakan ide bagus untuk mengecualikan skrip ini karena banyak plugin bergantung pada jQuery. Menerapkan properti async ke jQuery dapat menyebabkan situs web Anda rusak.
Jika ragu, Anda dapat menggunakan atribut defer, tetapi mengecualikan jQuery sepenuhnya adalah tindakan terbaik.
Anda sekarang dapat menentukan skrip mana yang ingin Anda jalankan di async atau tunda. Anda harus berhati-hati untuk meletakkan setiap skrip di bagian yang sesuai.
Anda dapat mencantumkan skrip apa pun yang ingin Anda kecualikan dari prosedur ini di bagian Pengecualian Skrip.
Ada juga opsi untuk mengecualikan plugin dan tema di bagian bawah halaman. Skrip untuk tema atau plugin apa pun yang Anda sebutkan di sini tidak akan berlaku untuk karakteristik async atau defer.
Setelah melakukan penyesuaian yang diperlukan, Anda dapat mengklik Simpan Pengaturan. Pendekatan ini mungkin merupakan kompromi yang berguna antara mengubah skrip secara manual dan menggunakan plugin untuk menangani tugas untuk Anda. Sebagai alternatif, Anda dapat menghilangkan langkah-langkah tambahan ini dengan menggunakan aplikasi all-in-one seperti Jetpack Boost.
Membungkus
Dengan membuat browser pengunjung menunda perenderan konten paro atas saat mengunduh aset yang tidak segera diperlukan, sumber daya pemblokiran perenderan meningkatkan waktu pemuatan halaman yang dirasakan di situs WordPress Anda. Anda harus menunda pemuatan sumber daya yang tidak segera diperlukan untuk membantu pengunjung memuat area yang dapat dilihat di halaman Anda dengan lebih cepat. Gunakan plugin yang sudah jadi untuk menyingkirkan sumber pemblokiran render di WordPress. Anda dapat menggabungkan Autoptimize dan Async JavaScript, dua plugin yang dibuat oleh pengembang yang sama, untuk solusi bebas biaya. Anda dapat menggunakan WP Rocket, yang menawarkan interaksi khusus dengan Kinsta dan dapat membantu dengan banyak penyesuaian kinerja WordPress tambahan, jika Anda bersedia membayarnya.
