(0275) 2974 127
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.
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 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.
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:
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.
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.
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!
Apakah Anda menggunakan kartu ATM atau kartu debit? Suka bertransaksi secara cashless? Sepertinya Anda perlu…
Design website toko online tidak hanya soal estetika, tapi juga UX yang bagus secara keseluruhan.…
Sebelum memulai karir Anda sebagai desainer UX, Anda harus membuat portofolio yang mencakup semua pengalaman…
Keep-Alive memungkinkan browser pengunjung Anda mendownload semua konten (JavaScript, CSS, gambar, video, dll) melalui koneksi…
Job description seorang web developer adalah membuat situs web menggunakan berbagai bahasa pemrograman. Tanggung jawab…
Secara default, WordPress tidak mendukung A/B testing. Tapi jangan khawatir. Di bawah ini, kami telah…