Tips Memperbaiki Render-Blocking JavaScript Dan CSS – Apakah Anda ingin menghilangkan pemblokiran JavaScript dan CSS di WordPress? Jika Anda menguji situs web Anda di Google PageSpeed, Anda akan melihat bahwa salah satu rekomendasi Google adalah menghapus JavaScript dan skrip rendering CSS.

Pada artikel ini, javascriptoo akan menjelaskan cara memperbaiki JavaScript dan pemblokiran rendering CSS dengan mudah di WordPress untuk meningkatkan skor Google PageSpeed ​​Anda.

Cara Kerja Pemblokiran Render Javascript Dan CSS

Tips Memperbaiki Render-Blocking JavaScript Dan CSS
Source : technumero.com

Setiap situs web di WordPress memiliki tema dan plugin yang berisi file JavaScript dan CSS. Script ini menyebabkan waktu loading halaman website meningkat. Selain itu, skrip ini juga dapat mencegah perenderan halaman.

Saat Anda mengunjungi situs web, hal pertama yang harus dilakukan browser adalah memproses JavaScript dan CSS. Browser kemudian memproses HTML pada halaman situs web untuk menampilkan seluruh halaman situs web.

Oleh karena itu, jika kecepatan koneksi lambat, proses melihat halaman web akan memakan waktu lebih lama.

Dalam panduan ini, kami akan memperkenalkan cara memperbaiki JavaScript dan pemblokiran rendering CSS di WordPress menggunakan dua plugin. Kedua plugin tersebut adalah Autoptimize dan W3 Total Cache. Anda dapat memilih salah satu metode yang kami sediakan.

1. Tingkatkan pemblokiran JavaScript dan rendering CSS melalui pengoptimalan otomatis

Metode pertama adalah metode paling sederhana, dan kami menyarankan Anda untuk menggunakannya.

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin Autoptimize. Untuk detail tentang memasang plugin, silakan lihat panduan langkah demi langkah di artikel tentang cara memasang plugin WordPress.

Baca Juga : Memanggil Fungsi PHP Dari Javascript

Setelah proses aktivasi selesai, masuk ke halaman Settings >> Auto Optimization untuk mengkonfigurasi pengaturan plugin.

Source : niagahoster.co.id

Langkah Pertama Optimasi JavaScript

Selanjutnya, di bagian “Setelan JavaScript”, centang kotak di samping “Optimalkan kode JavaScript?” Ubah pengaturan JavaScript.

Source : niagahoster.co.id

Setelah itu, optimalkan di JavaScript dengan mencentang beberapa opsi.

  • File JS agregat? : Gabungkan semua file JavaScript di file situs web untuk pemblokiran non-rendering. Jika opsi ini tidak diaktifkan, setiap file JS akan tetap berada di lokasi aslinya, tetapi ukuran file akan dikurangi.
  • Bisakah juga menggabungkan JS sebaris? : Opsi ini memungkinkan Anda mengekstrak JavaScript dari HTML.
  • Paksa JavaScript di <head>? ? : Opsi ini digunakan untuk memproses JavaScript sebelumnya. Mengaktifkan opsi ini dapat membuat pemblokiran rendering JavaScript.
  • Kecualikan skrip dari “pengoptimalan otomatis”: Kecualikan skrip yang akan dioptimalkan.

Dalam tutorial ini, kami memilih untuk menggabungkan file JS? Dan juga menggabungkan JS sebaris? Dengan cara ini, Anda dapat mengizinkan plugin untuk menambahkan JS sebaris dan menghapus skrip yang dikecualikan WordPress secara default, seperti jquery.js.

Langkah Kedua Optimasi Kode CSS

Lalu, gulir ke bawah ke bagian “Opsi CSS” dan centang kotak di samping “Optimalkan Kode CSS?” Tampilkan pengaturan CSS.

Setelah itu, optimalkan CSS dengan mencentang beberapa opsi. Di bawah ini adalah deskripsi dari beberapa opsi ini.

  • Gabungkan file CSS? : Opsi ini akan menggabungkan semua file CSS di file situs web.
  • Bisakah juga menggabungkan CSS sebaris? : Mengoptimalkan CSS dalam file HTML.

Dalam panduan ini, pilih “file CSS agregat”? Dan juga menggabungkan inline CSS? . Tujuannya adalah untuk mengurangi ukuran semua file CSS di situs web sehingga situs web memuat lebih cepat.

Kemudian tekan tombol “Simpan Perubahan dan Hapus Cache” untuk menyimpan perubahan.

Untuk memastikan bahwa perubahan pada plugin Autoptimize berhasil diselesaikan, Anda dapat memeriksa Google PageSpeed.

Pastikan untuk memeriksa situs web untuk memastikan semuanya baik-baik saja saat mengoptimalkan JavaScript atau CSS.

2. Meningkatkan pemblokiran rendering JavaScript dan CSS menggunakan total cache W3

Metode kedua akan membutuhkan lebih banyak langkah dan direkomendasikan untuk pengguna yang terbiasa atau terbiasa menggunakan plugin W3 Total Cache. Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin W3 Total Cache.

Langkah 1 Optimasi Kode JavaScript dan CSS

Selanjutnya, pilih menu Performance >> General Settings, lalu scroll ke bawah hingga ke bagian zoom out function.

Source : niagahoster.co.id

Kemudian aktifkan fungsi zoom out dengan memilih kata aktifkan dan memilih mode zoom out manual. Contohnya ditunjukkan pada gambar di bawah ini.

Setelah itu, klik tombol “Simpan Pengaturan dan Hapus Cache” untuk menyimpan perubahan.

Selanjutnya, Anda perlu menemukan file atau link JavaScript yang ingin Anda perkecil.

Untuk mendapatkan link JavaScript yang akan diperkecil, Anda bisa menggunakan Google PageSpeed ​​untuk mengeceknya. Setelah itu cari tab menu “Erase Render Block Resources” seperti gambar di bawah ini.

Kemudian, dengan mengklik kanan salah satu link, lalu menyalin alamat link, pilih salah satu blok rendering yang tersedia.

Baca Juga : 20 Template Website Responsive Gratis

Lalu masuk ke dashboard WordPress dan pilih menu Performance >> Minify.

Kemudian gulir ke bawah ke fitur JS dan aktifkan pengaturan minifikasi JS dengan memeriksa logo aktifkan (ditampilkan di bawah).

Setelah mengaktifkan pengaturan minimisasi JS, Anda akan melihat bagian tentang operasi area. Pilih “Gunakan asyncsrc untuk non-pemblokiran” sebagai jenis tag <head> yang akan disematkan. Sesuaikan perubahan seperti yang ditunjukkan di bawah ini.

Kemudian, di bawah sub-judul manajemen file JS, pilih tema aktif, lalu klik tombol “Tambahkan Skrip”.

Kemudian salin (salin) URL skrip JavaScript dari tab PageSpeed, lalu tempel skrip satu per satu. Tutorial ini akan memperbaiki file JavaScript.

Setelah Anda selesai menambahkan URL JavaScript, tekan tombol “Simpan semua pengaturan” untuk menyimpan perubahan.

Untuk memastikan bahwa rendering JavaScript dan CSS berhasil diblokir, buka halaman Google PageSpeed ​​Insight untuk memeriksa apakah rendering telah diselesaikan. Seperti yang Anda lihat dari gambar di bawah, mengelola pengaturan cache total W3 sebenarnya dapat menyelesaikan kesalahan JavaScript dan CSS.

Setelah menyelesaikan dua panduan di atas, Anda perlu mengetahui cara menggunakan Google Page Speed. Dengan cara ini Anda dapat membedakan hasil dari kecepatan situs web tetap dan berkurang menggunakan dua plugin di atas.

Kesimpulannya

Memblokir rendering dapat berdampak negatif pada kecepatan dan kinerja situs WordPress Anda. Dalam tutorial ini, Anda telah mempelajari cara memperbaiki JavaScript dan pemblokiran rendering CSS di situs Anda. Meskipun Anda masih memiliki skrip pemblokiran render dan lembar gaya yang diperlukan di situs web Anda, tutorial ini diharapkan dapat membantu Anda mengatasi masalah tersebut.

Ini adalah panduan tentang cara memperbaiki JavaScript dan pemblokiran rendering CSS. Jangan lupa berlangganan untuk mendapatkan informasi VPS dan WordPress kami.