Cara Memperbaiki JavaScript dan CSS Render-Blocking

Apakah Anda ingin menghilangkan JavaScript dan CSS yang memblokir render di WordPress? Saya yakin setelah Anda melakukan ini semua, Saya jamin Situs web Anda memiliki kecepatan yang sangat berbeda dari biasanya. Ikuti langkah demi langkah Cara Memperbaiki JavaScript dan CSS Render-Blocking di wordpress.

Jika Anda menguji situs web Anda di Google PageSpeed ​​insights , Anda mungkin akan melihat saran untuk menghilangkan skrip dan CSS yang memblokir perenderan. Namun, itu tidak memberikan detail apa pun tentang cara melakukannya di situs WordPress Anda.

Pada artikel ini Saya akan memberi tau cara memperbaiki JavaScript dan CSS yang memblokir perenderan di WordPress dengan mudah untuk meningkatkan skor Google PageSpeed ​​Anda.

Cara Memperbaiki JavaScript dan CSS Render-Blocking

 

Apa itu Render-Blocking JavaScript dan CSS?

Pemblokiran render JavaScript dan CSS adalah file yang mencegah situs web menampilkan halaman web sebelum memuat file ini.

Setiap situs WordPress memiliki tema dan plugin yang menambahkan file JavaScript dan CSS ke bagian depan situs web Anda. Skrip ini dapat meningkatkan waktu muat halaman situs Anda , dan juga dapat memblokir rendering halaman.

Apa itu Render-Blocking JavaScript dan CSS?

 

Browser pengguna harus memuat skrip dan CSS tersebut sebelum memuat sisa HTML di halaman. Artinya, pengguna dengan koneksi yang lebih lambat harus menunggu beberapa milidetik lagi untuk melihat halaman.

Skrip dan stylesheet ini disebut sebagai JavaScript dan CSS yang memblokir perenderan.

Pemilik situs web yang mencoba mencapai skor Google PageSpeed ​​100 perlu memperbaiki masalah ini untuk mencapai skor sempurna itu.

Cara Kerja Render Blocking JavaScript dan CSS

Setiap website pada WordPress memiliki tema dan plugin yang di dalamnya terdapat file JavaScript dan CSS. Skrip ini berakibat pada meningkatnya waktu loading halaman website. Selain itu, skrip tersebut juga dapat memblokir rendering page.

Ketika Anda mengunjungi sebuah website, hal pertama yang dilakukan oleh browser adalah memproses JavaScript dan CSS. Kemudian browser memproses HTML pada halaman website sehingga muncul tampilan full halaman dari website.

Jadi, apabila Anda berada di koneksi yang lebih lambat, proses untuk melihat halaman website akan lebih lama. Anda bisa membaca Cara mempercepat Website disini .

Apakah Skor Google PageSpeed ​​itu?

Google PageSpeed ​​Insights adalah alat uji kecepatan situs web yang dibuat oleh Google untuk membantu pemilik situs web mengoptimalkan dan menguji situs web mereka. Alat ini menguji situs web Anda berdasarkan pedoman Google untuk kecepatan dan menawarkan saran untuk meningkatkan waktu buka laman situs Anda.

Ini menunjukkan skor berdasarkan jumlah aturan yang dilewati situs Anda. Sebagian besar situs web berada di antara 50-70. Namun, beberapa pemilik situs web merasa terdorong untuk mencapai nilai 100 (skor tertinggi yang dapat diperoleh laman).

Apakah Anda Benar-benar Membutuhkan Skor Google PageSpeed ​​ yang Sempurna?

Tujuan dari wawasan Google PageSpeed ​​adalah untuk memberi Anda pedoman untuk meningkatkan kecepatan dan kinerja situs web Anda. Anda tidak diharuskan untuk mengikuti aturan ini dengan ketat.

Ingatlah bahwa kecepatan hanyalah salah satu dari banyak metrik SEO situs web yang membantu Google menentukan cara menentukan peringkat situs Anda. Alasan kecepatan sangat penting adalah karena kecepatan meningkatkan pengalaman pengguna di situs Anda.

Pengalaman pengguna yang lebih baik membutuhkan lebih dari sekadar kecepatan. Anda juga perlu menawarkan informasi yang berguna, 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.

Kecepatan sangatlah penting untuk pemilik Situs web, disamping itu Google sangat senang dengan pemilik Situs web yang mempunyai kecepatan tinggi.

Baca juga: 22 Cara mempercepat Website

Saya menyarankan Anda menggunakan aturan Google Pagespeed sebagai saran, dan jika Anda dapat menerapkannya dengan mudah tanpa merusak pengalaman pengguna, itu bagus. Jika tidak, Anda harus berusaha melakukan sebanyak yang Anda bisa, jangan khawatir dan terus membaca

mari kita lihat apa yang dapat Anda lakukan untuk memperbaiki JavaScript dan CSS yang memblokir render di WordPress.

Saya akan membahas dua metode yang akan memperbaiki JavaScript dan CSS yang memblokir render di WordPress. Anda dapat memilih salah satu yang paling sesuai untuk situs web Anda.

Metode 1: Perbaiki Render Blocking Scripts dan CSS dengan WP Rocket

Untuk metode ini, kami akan menggunakan plugin WP Rocket . Ini adalah plugin caching WordPress terbaik di pasaran dan memungkinkan Anda dengan cepat meningkatkan kinerja situs web Anda tanpa keahlian teknis atau pengaturan yang rumit.

Pertama, Anda perlu menginstal dan mengaktifkan plugin WP Rocket . Untuk lebih jelasnya, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress .

WP Rocket berfungsi di luar kotak, dan itu akan mengaktifkan caching dengan pengaturan optimal untuk situs web Anda.

Secara default, ini tidak mengaktifkan opsi pengoptimalan JavaScript dan CSS. Pengoptimalan 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 halaman [Pengaturan >WP Rocket] dan kemudian beralih ke tab [Pengoptimalan File]. Dari sini, gulir ke bagian File CSS dan centang kotak di sebelah Minify CSS, Gabungkan File CSS, dan opsi Optimalkan Pengiriman CSS.

Optimasi plugin WP Rocket

 

Catatan: WP Rocket akan mencoba 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 maksimal.

Peningkatan kerja JavaScript

 

Anda dapat mengecilkan dan menggabungkan file JavaScript seperti yang Anda lakukan untuk CSS.

Anda juga dapat menghentikan WordPress memuat file jQuery Migrate. Ini adalah skrip yang dimuat WordPress untuk menyediakan kompatibilitas untuk plugin dan tema menggunakan versi lama jQuery.

Sebagian besar situs web tidak memerlukan file ini, tetapi Anda tetap ingin memeriksa situs web Anda untuk memastikan bahwa menghapusnya tidak memengaruhi tema atau plugin Anda.

Selanjutnya, gulir ke bawah sedikit lebih jauh dan centang kotak di sebelah opsi [Load JavaScript Defered] dan [Safe Mode for jQuery].

JavaScript kode

 

Opsi ini menunda pemuatan 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 sebaris di mana pun.

Jangan lupa untuk mengklik tombol Save Changes 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.

Mungkin Banyak Orang menginginkan skor 100% di Desktop dan masalah pemblokiran render diselesaikan di skor seluler dan desktop.

JavaScript dan CSS custom

Metode 2: Perbaiki Render Blocking Scripts dan CSS menggunakan Autoptimize

Untuk metode ini, saya akan menggunakan plugin terpisah yang dibuat khusus untuk meningkatkan pengiriman file CSS dan JS situs Anda. Meskipun plugin ini menyelesaikan pekerjaan, plugin ini tidak memiliki fitur canggih lainnya yang dimiliki WP Rocket. Tapi ini juga dapat membantu meningkatkan kecepatan situs web Anda.

Apa yang di perlukan?

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin Autoptimize . Untuk lebih jelasnya, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress .

Setelah aktivasi, Anda perlu mengunjungi halaman [Pengaturan >> Pengoptimalan otomatis] untuk mengkonfigurasi pengaturan plugin.

Pertama, Anda perlu mencentang kotak di sebelah opsi [Optimalkan Kode JavaScript] di bawah blok Opsi JavaScript. Pastikan opsi [Gabungkan berkas JS] jangan dicentang.

Pengertian javascript custom

 

Selanjutnya, gulir ke bawah ke kotak Opsi CSS dan centang opsi [Optimalkan Kode CSS]. Pastikan bahwa opsi [Gabungkan berkas CSS] jangan dicentang.

Pentingnya javascript dan CSS custom

 

Sekarang Anda dapat mengklik tombol [Simpan perubahan dan kosongkan Cache] untuk menyimpan pengaturan Anda.

Lanjutkan dan uji situs web Anda dengan alat Wawasan Kecepatan Laman.

Jika masih ada skrip yang memblokir perenderan, Anda harus kembali ke halaman setelan plugin dan meninjau opsi di bawah opsi JavaScript dan CSS.

Misalnya, Anda dapat mengizinkan plugin untuk menyertakan JS inline dan menghapus skrip yang dikecualikan secara default seperti seal.js atau jquery.js.

Klik pada tombol [Simpan perubahan dan Kosongkan Cache] untuk menyimpan perubahan Anda dan mengosongkan cache plugin.

Setelah Anda selesai, lanjutkan dan periksa kembali situs web Anda dengan alat Kecepatan Halaman.

Bagaimana cara kerjanya?

Pengoptimalan otomatis menggabungkan semua JavaScript dan CSS yang diantrekan. Setelah itu, ini membuat file CSS dan JavaScripts yang diperkecil dan menyajikan salinan yang di-cache ke situs web Anda sebagai asinkron atau ditangguhkan.

Hal ini memungkinkan Anda untuk memperbaiki masalah skrip dan gaya yang memblokir perenderan. Namun, harap diingat bahwa ini juga dapat memengaruhi kinerja atau tampilan situs web Anda.

Perbaiki masalah

Bergantung pada bagaimana plugin dan tema WordPress Anda menggunakan JavaScript dan CSS, mungkin cukup menantang untuk sepenuhnya memperbaiki semua masalah JavaScript dan CSS yang memblokir perenderan.

Meskipun alat di atas dapat membantu, plugin Anda mungkin memerlukan skrip tertentu pada tingkat prioritas yang berbeda agar berfungsi dengan baik. Jika demikian, solusi di atas dapat merusak fungsionalitas plugin tersebut, atau dapat berperilaku tidak terduga.

Google mungkin masih menunjukkan kepada Anda masalah tertentu seperti mengoptimalkan pengiriman CSS untuk konten paruh atas. WP Rocket memungkinkan Anda memperbaikinya dengan menambahkan CSS Kritis secara manual yang diperlukan untuk menampilkan area lipatan atas tema Anda.

Namun, mungkin agak sulit untuk mengetahui kode CSS apa yang Anda perlukan untuk menampilkan konten paruh atas.

Saya harap artikel ini membantu Anda mempelajari cara memperbaiki JavaScript dan CSS yang memblokir perenderan di WordPress. Anda mungkin juga ingin melihat panduan dari saya tentang cara mempercepat kinerja WordPress untuk pemula.

Anda juga bisa mempelajari: Panduan SEO wordpress untuk meningkatkan Situs web Anda

Summary
Cara Memperbaiki JavaScript dan CSS Render-Blocking
Article Name
Cara Memperbaiki JavaScript dan CSS Render-Blocking
Description
Saya yakin setelah Anda melakukan ini semua, Saya jamin Situs web Anda memiliki kecepatan yang sangat berbeda dari biasanya.
Author
Publisher Name
Memperbaiki JavaScript dan CSS Render-Blocking
Publisher Logo

Tinggalkan Balasan