Solusi Sederhana untuk Mengatasi Render-Blocking JavaScript dan CSS di WordPress

Apa Itu Eliminate render-blocking JavaScript and CSS in above-the-fold content?

Untuk memahami hal ini dengan lebih baik, Anda harus melihat kriteria Google untuk menentukan peringkat website di PageSpeed ​​​​Insights. Ada 10 aturan kecepatan website yang ditetapkan oleh Google. Jika Anda tidak menerapkan salah satu aturan ini, website Anda mungkin akan dikenakan sanksi. Salah satu dari 10 aturan ini adalah Render-blocking JS and CSS in above-the-fold content. Skrip JS dan CSS khususnya menyebabkan browser web menunda pemuatan halaman HTML. Tentu saja itu bukan masalah besar. Faktanya, itulah yang Anda inginkan. Tidak seorang pun ingin melihat konten yang tidak terorganisir. Namun, render-blocking JS and CSS mengacu pada skrip yang menyebabkan penundaan pemuatan, tetapi tidak digunakan dalam above-the-fold (ATF) content. Konten ATF mengacu pada bagian halaman web yang terlihat saat halaman web dimuat. Bagian di mana Anda harus menggulir halaman ke bawah bukan ATF.

Oleh karena itu, dengan pemberitahuan ini, Google memberi tahu Anda bahwa halaman web ini memiliki skrip JS dan CSS yang menyebabkan pelambatan halaman web yang tidak perlu. Ini karena pengguna tidak dapat melihat di mana halaman tersebut melambat. Dalam tutorial situs WordPress ini, kami menggunakan Google PageSpeed ​​​​Insights untuk mengidentifikasi skrip pemblokiran rendering. Selanjutnya, kami akan menunjukkan cara mengatasi masalah ini di situs WordPress Anda menggunakan dua metode berbeda. Selain itu, Anda juga harus mempertimbangkan cara untuk membuat website yang lebih cepat sehingga dapat menarik lebih banyak pengunjung. Seperti yang telah kami sebutkan, kecepatan memuat website kini menjadi pertimbangan besar dalam hal SEO dan SEO adalah salah satu kunci utama kesuksesan online sebuah website. Jadi, jangan ragu dan mulailah mengoptimalkan website Anda.

Memulihkan Error Eliminate render-blocking JavaScript and CSS in above-the-fold Content

JS dan CSS adalah hal terpenting untuk website modern dan keduanya berfungsi di setiap bagian, tidak hanya di tingkat atas. Namun penurunan kinerja tidak bisa dihindari. Namun, ada beberapa cara untuk mempercepat website Anda. Misalnya: Menunda parsing JavaScript. Namun, terkadang hal itu saja tidak cukup. Tentu saja, kita berbicara tentang JavaScript dan CSS yang memblokir render. Untuk mengatasi masalah ini, Anda harus memverifikasi terlebih dahulu bahwa masalah tersebut benar-benar ada dan bukan hoax. Setelah Anda mendapatkan konfirmasi tentang skrip pemblokiran render di website, langkah selanjutnya adalah mencari berbagai cara untuk memperbaikinya.

Langkah 1 – Memakai Google PageSpeed Insights untuk Mencari Render-blocking JS and CSS

Langkah pertama untuk mengatasi render blocking adalah dengan mengukur kecepatan website Anda menggunakan Google PageSpeed ​​Insights. Kunjungi halaman Google PageSpeed ​​​​Insights dan masukkan URL website Anda pada kolom input. Klik Analisis untuk melihat laporan tentang website Anda. Sebagian besar situs memiliki nilai atau poin antara 50 dan 70. Ini harus menjadi tolok ukur untuk mengevaluasi website Anda. Bersamaan dengan rating Anda, Google membuat daftar saran untuk meningkatkan kinerja situs Anda.

Meskipun Anda telah mengukur kecepatan website Anda menggunakan tool PageSpeed ​​​​Insights dan juga menerima instruksi Eliminate render-blocking JavaScript and CSS in above-the-fold content, Anda tetap harus membaca tutorial WordPress ini. Harap diingat, tujuannya di sini bukan untuk mendapatkan skor sempurna 100 di PageSpeed ​​​​Insights. Yang terpenting adalah melakukan yang terbaik untuk mendapatkan skor bagus saat menjelajahi website Anda tanpa mengorbankan pengunjung Anda. Jika situs WordPress Anda memiliki skrip penting untuk UX yang kuat, jangan menghapusnya hanya untuk mendapatkan skor lebih tinggi di PageSpeed ​​​​Insights. Aturan yang digunakan Google untuk menilai website Anda hanya dimaksudkan sebagai pedoman dan harus dibiarkan apa adanya.

Langkah 2 – Memperbaiki render-blocking JavaScript and CSS

Opsi 1 – Gunakan W3 Total Cache

Sekarang Anda memiliki kode untuk memblokir render-blocking di website Anda. Ada beberapa opsi untuk mengatasi masalah ini. Kami menyarankan untuk mengunduh plugin yang memudahkan mengatasi kesalahan tersebut. Salah satu plugin favorit kami adalah W3 Total Cache. Instal dan aktifkan pluginnya. Setelah plugin diinstal, ikuti langkah-langkah berikut:

1. Buka Performance – General Settings. Periksa heading Minify di halaman tersebut.
2. Di bawah heading terdapat beberapa pilihan. Pilihan pertama adalah Minify; beri tanda centang pada kotak Enable di samping pilihan tersebut.
3. Di opsi Minify mode, pilih Manual, dan klik tombol Save all settings.
4. Pada poin ini, Anda harus mengeluarkan semua script JS dan CSS yang menyebabkan render-blocking. Kedua script ini dapat ditemukan melalui Google PageSPeed Insights. Ketika tab PageSpeed tidak ditutup seperti yang disarankan di Langkah 1, maka Anda akan menemukan teks Show how to fix yang dapat diklik di bawah petunjuk render-blocking. Klik teks tersebut. Setelah itu, semua daftar yang memuat script dan stylesheet penyebab render-blocking dapat diketahui.
5. Kembali ke WordPress. Buka Performance -> Minify. Anda harus me-minify kedua file JS dan CSS secara terpisah.
6. Pertama, mari kita lihat JS. Di halaman tersebut, Periksa heading JS. Kemudian Anda akan melihat bagian Operations in areas. Pilih Non-blocking using defer sebagai tipe yang di-embed untuk tag before <head>.
7. Di bawah sub-heading JS file management, pilih tema yang aktif dan klik tombol Add Script. Kemudian salin (copy)  URL script JS dari tab PageSpeed, dan tempel (paste) script tersebut satu per satu. Langkah akan ini memperbaiki file JS.
8. Sekarang saatnya menangani CSS. Di halaman yang sama, gulir ke bawah untuk menemukan bagian CSS. Di bawah sub-heading CSS file management, pilih tema yang aktif dan klik Add a style sheet. Sama seperti script JS, salin/tempel (copy/paste) stylesheet dari PageSpeed Insights ke bagian ini.
9. Terakhir, klik tombol Save settings and purge cache.

Kembali ke halaman Google PageSpeed ​​​​Insights Anda dan periksa apakah rendering-blocking telah teratasi. Pada tangkapan layar di bawah, Anda dapat melihat bahwa mengelola pengaturan cache W3 sebenarnya dapat memperbaiki error JavaScript and CSS in above-the-fold content di situs yang kita uji.  Jika Anda ingin kontrol lebih besar atas above-the-fold content, lihat Above The Fold Optimization. Plugin ini dirancang khusus untuk konten ATF dan dapat digunakan bersama plugin populer lainnya seperti W3 Total Cache dan Autoptimize.

Opsi 2 – Gunakan Autoptimize

Cara mudah untuk mengatasi masalah render-blocking adalah dengan menggunakan plugin lain yang disebut Autoptimize. Unduh dan instal pluginnya. Setelah proses instalasi selesai, buka Pengaturan WordPress -> Optimasi otomatis. Klik kotak centang Optimalkan kode JavaScript untuk ngoptimalkan kode CSS Anda. Klik tombol Save Changes and Empty Cache.

Umumnya, langkah ini sudah cukup untuk mengatasi masalah render-blocking (tergantung pada tema dan plugin yang aktif). Untuk mengetahui apakah cara ini ampuh, maka buka situs Anda melalui PageSpeed Insights sekali lagi.

Langkah ini biasanya mampu untuk menyelesaikan masalah render-blocking (tergantung pada tema dan plugin yang aktif). Untuk melihat apakah cara ini efektif, coba buka kembali website Anda melalui PageSpeed ​​Insights.

Kesimpulan

Pemblokiran rendering berdampak negatif pada kecepatan dan kinerja situs WordPress Anda. Dalam tutorial WordPress ini, Anda telah mempelajari cara Eliminate render-blocking JavaScript and CSS in above-the-fold content di website. Meskipun masih memiliki skrip dan stylesheet render-blocking yang diperlukan untuk website, kami berharap tutorial ini akan membantu Anda mengatasi masalah tersebut. Semoga beruntung!