Apakah Anda ingin menghilangkan JavaScript dan CSS pemblokiran render di WordPress?
Jika Anda menguji situs web Anda di Google PageSpeed wawasan, maka Anda kemungkinan akan melihat saran untuk menghilangkan skrip pemblokiran render dan CSS. Namun, itu tidak memberikan perincian tentang bagaimana melakukan itu di situs WordPress Anda.
Pada artikel ini, kami akan menunjukkan kepada Anda cara memperbaiki dengan mudah JavaScript dan CSS pemblokiran render di WordPress untuk meningkatkan skor Google PageSpeed Anda.
Render memblokir JavaScript dan CSS adalah file yang mencegah situs web menampilkan halaman web sebelum memuat file-file ini.
Setiap situs WordPress memiliki tema dan plugin yang ditambahkan JavaScript dan CSS file ke ujung depan situs web Anda. Ini skrip dapat meningkatkan waktu pemuatan halaman situs Anda, dan mereka juga dapat memblokir rendering halaman.
Peramban pengguna harus memuat skrip dan CSS tersebut sebelum memuat sisa HTML pada halaman. Ini berarti bahwa pengguna pada koneksi yang lebih lambat harus menunggu beberapa milidetik lagi untuk melihat halaman.
Script dan stylesheet ini disebut sebagai JavaScript render dan CSS.
Pemilik situs web yang berusaha mencapai skor Google PageSpeed 100 akan perlu memperbaiki masalah ini untuk mencapai skor sempurna itu.
Google PageSpeed Insights adalah alat uji kecepatan situs web dibuat oleh Google untuk membantu pemilik situs web mengoptimalkan dan menguji situs web mereka. Alat ini menguji situs web Anda terhadap pedoman Google untuk kecepatan dan menawarkan saran untuk meningkatkan waktu buka halaman situs Anda.
Ini menunjukkan Anda skor berdasarkan jumlah aturan yang dilewati situs Anda. Sebagian besar situs web mencapai antara 50-70. Namun, beberapa pemilik situs web merasa harus mencapai 100 (skor tertinggi yang dapat dicetak halaman).
Apakah Anda Benar-Benar Membutuhkan Skor Google PageSpeed ”100″ yang Sempurna?
Tujuan dari Google PageSpeed Insights adalah untuk memberikan Anda panduan untuk meningkatkan kecepatan dan kinerja situs web Anda. Anda tidak diharuskan untuk mengikuti aturan ini dengan ketat.
Ingatlah bahwa kecepatan hanyalah satu dari sekian banyak SEO situs web metrik yang membantu Google menentukan cara menentukan peringkat situs Anda. Alasan kecepatan sangat penting adalah karena meningkatkan pengalaman pengguna di situs Anda.
Pengalaman pengguna yang lebih baik membutuhkan lebih dari sekadar kecepatan. Anda juga perlu menawarkan informasi yang bermanfaat, antarmuka pengguna yang lebih baik, dan konten yang menarik dengan teks, gambar, dan video.
Tujuan Anda adalah membuat situs web cepat yang menawarkan pengalaman pengguna yang luar biasa.
Selama yang terakhir Desain ulang WPBeginner, kami menjaga fokus kami pada kecepatan serta meningkatkan pengalaman pengguna.
Kami menyarankan Anda menggunakan aturan Google Pagespeed sebagai saran, dan jika Anda dapat menerapkannya dengan mudah tanpa merusak pengalaman pengguna, maka itu bagus. Jika tidak, Anda harus berusaha untuk melakukan sebanyak yang Anda bisa, dan jangan khawatir tentang sisanya.
Karena itu, mari kita lihat apa yang dapat Anda lakukan untuk memperbaiki JavaScript dan CSS pemblokiran render di WordPress.
Kami akan membahas dua metode yang akan memperbaiki JavaScript dan CSS pemblokiran render di WordPress. Anda dapat memilih salah satu yang paling cocok untuk situs web Anda.
Untuk metode ini, kami akan menggunakan WP Rocket plugin. Ini adalah Plugin caching WordPress terbaik di pasar dan memungkinkan Anda untuk dengan cepat meningkatkan kinerja situs web Anda tanpa keterampilan teknis atau pengaturan rumit.
Pertama, Anda perlu menginstal dan mengaktifkan WP Rocket plugin. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami di cara menginstal plugin WordPress.
WP Rocket berfungsi dengan baik, dan itu akan mengaktifkan caching dengan pengaturan optimal untuk situs web Anda. Anda dapat mempelajari lebih lanjut tentang hal ini di panduan lengkap kami tentang cara melakukannya dengan benar instal dan atur WP Rocket di WordPress.
Secara default, ini tidak mengaktifkan opsi pengoptimalan JavaScript dan CSS. Optimalisasi ini berpotensi memengaruhi tampilan situs web Anda atau beberapa fitur, itulah sebabnya plugin memungkinkan Anda untuk mengaktifkan pengaturan ini secara opsional.
Untuk melakukan itu, Anda perlu mengunjungi Pengaturan »WP Rocket halaman lalu beralih ke tab ‘Optimasi File’. Dari sini, gulir ke bagian File CSS dan centang kotak di sebelah Minify CSS, Combine File CSS, dan Optimalkan opsi Pengiriman CSS.
catatan: WP Rocket akan berusaha untuk mengecilkan semua file CSS Anda, menggabungkannya, dan hanya memuat CSS yang diperlukan untuk bagian yang terlihat dari situs web Anda. Ini dapat memengaruhi tampilan situs web Anda, jadi Anda perlu menguji situs web Anda secara menyeluruh pada beberapa perangkat dan ukuran layar.
Selanjutnya, Anda perlu menggulir ke bagian File JavaScript. Dari sini, Anda dapat memeriksa semua opsi untuk peningkatan kinerja maksimum.
Anda dapat memperkecil dan menggabungkan file JavaScript seperti yang Anda lakukan untuk CSS.
Anda juga dapat menghentikan WordPress dari memuat file Migrasi jQuery. Ini adalah skrip yang dimuat WordPress untuk menyediakan kompatibilitas untuk plugin dan tema menggunakan versi jQuery lama.
Sebagian besar situs web tidak memerlukan file ini, tetapi Anda masih ingin memeriksa situs web Anda untuk memastikan bahwa menghapusnya tidak mempengaruhi tema atau plugin Anda.
Selanjutnya, gulirkan sedikit ke bawah lebih jauh dan centang kotak di sebelah opsi ‘Muat JavaScript Ditunda’ dan ‘Safe Mode for jQuery’.
Opsi-opsi ini menunda memuat JavaScripts yang tidak penting, dan mode aman jQuery memungkinkan Anda memuat jQuery untuk tema yang mungkin menggunakannya secara inline. Anda dapat membiarkan opsi ini tidak dicentang jika Anda yakin bahwa tema Anda tidak menggunakan jQuery inline di mana pun.
Jangan lupa klik tombol Simpan Perubahan untuk menyimpan pengaturan Anda.
Setelah itu, Anda mungkin juga ingin menghapus cache di WP Rocket sebelum menguji situs web Anda lagi dengan Google Page Speed Insights.
Di situs pengujian kami, kami dapat mencapai skor 100% di Desktop dan masalah pemblokiran render diselesaikan di skor seluler dan desktop.
Untuk metode ini, kami akan menggunakan plugin terpisah yang dibuat khusus untuk meningkatkan pengiriman file CSS dan JS situs web Anda. Meskipun plugin ini menyelesaikan pekerjaannya, plugin ini tidak memiliki fitur canggih lain yang dimiliki WP Rocket.
Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan Optimalkan secara otomatis plugin. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami di cara menginstal plugin WordPress.
Setelah aktivasi, Anda perlu mengunjungi Pengaturan »Optimalkan otomatis halaman untuk mengkonfigurasi pengaturan plugin.
Pertama, Anda perlu mencentang kotak di sebelah opsi ‘Optimalkan Kode JavaScript’ di bawah blok Opsi JavaScript. Pastikan opsi ‘Aggregate JS-files’ tidak dicentang.
Selanjutnya, gulir ke bawah ke kotak Opsi CSS dan centang opsi ‘Optimalkan Kode CSS’. Pastikan opsi ‘Agregat CSS-file’ tidak dicentang.
Anda sekarang dapat mengklik tombol ‘Simpan Perubahan dan Tembolok Kosong’ untuk menyimpan pengaturan Anda.
Silakan dan uji situs web Anda dengan alat Page Speed Insights. Di situs demo kami, kami dapat memperbaiki masalah pemblokiran render dengan pengaturan dasar ini.
Jika masih ada skrip pemblokiran render, maka Anda harus kembali ke halaman pengaturan plugin dan meninjau opsi di bawah opsi JavaScript dan CSS.
Misalnya, Anda dapat mengizinkan plugin untuk menyertakan inline JS dan menghapus skrip yang dikecualikan secara default seperti seal.js atau jquery.js.
Klik tombol ‘Simpan perubahan dan Kosongkan Tembolok’ untuk menyimpan perubahan dan mengosongkan cache plugin.
Setelah selesai, lanjutkan dan periksa situs web Anda lagi dengan alat Kecepatan Halaman.
Bagaimana cara kerjanya?
Optimalkan semua agregat JavaScript dan CSS enqueued. Setelah itu, ia menciptakan CSS dan JavaScripts yang diperkecil file dan melayani salinan dalam tembolok ke situs web Anda sebagai async atau ditangguhkan.
Ini memungkinkan Anda untuk memperbaiki masalah skrip dan gaya pemblokiran render. Namun, harap diingat bahwa itu juga dapat memengaruhi kinerja atau penampilan situs web Anda.
Bergantung pada bagaimana plugin dan tema WordPress Anda menggunakan JavaScript dan CSS, mungkin cukup sulit untuk sepenuhnya memperbaiki semua masalah pemblokiran render JavaScript dan CSS.
Meskipun alat di atas dapat membantu, plugin Anda mungkin memerlukan skrip tertentu pada tingkat prioritas yang berbeda untuk berfungsi dengan baik. Dalam hal ini, solusi di atas dapat merusak fungsionalitas plugin tersebut, atau mereka dapat berperilaku tidak terduga.
Google mungkin masih menunjukkan kepada Anda masalah-masalah tertentu seperti mengoptimalkan pengiriman CSS untuk konten di atas. WP Rocket memungkinkan Anda untuk memperbaikinya dengan secara manual menambahkan Critical CSS yang diperlukan untuk menampilkan area lipatan di atas tema Anda.
Namun, mungkin cukup sulit untuk mengetahui kode CSS apa yang Anda perlukan untuk ditampilkan di atas konten flip.
Kami harap artikel ini membantu Anda mempelajari cara memperbaiki JavaScript dan CSS pemblokiran render di WordPress. Anda mungkin juga ingin melihat panduan utama kami cara mempercepat kinerja WordPress untuk pemula, dan perbandingan kami WordPress hosting terbaik dikelola perusahaan.
Jika Anda menyukai artikel ini, silakan berlangganan artikel kami Saluran Youtube untuk tutorial video WordPress. Anda juga dapat menemukan kami di Indonesia dan Facebook.
.
Tanda tangan email berfungsi sebagai cara ampuh bagi individu dan bisnis untuk meninggalkan kesan abadi…
Apakah kesalahan 'ERR_SSL_VERSION_OR_CIPHER_MISMATCH' menghentikan Anda mengakses situs web WordPress? Kesalahan ini hanya terlihat saat mengunjungi…
Jika Anda adalah individu yang banyak akal dan berpikiran maju yang bekerja di bidang pemasaran,…
Siap menguasai Google Analytics 4 dengan sedikit bantuan dari MonsterInsights? GA4 adalah alat analitik yang…
Apakah Anda mencari cara untuk menerjemahkan plugin WordPress ke dalam bahasa Anda? Dengan menerjemahkan plugin…
Mencari solusi untuk hack redirect WordPress? ???????? Peretasan pengalihan WordPress sayangnya merupakan kejadian umum dan…