Cara menggunakan KOSONG dalam JavaScript

Apakah Anda ingin menyingkirkan pemblokiran render dan CSS di WordPress? .  

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

Daftar Isi

Cara Kerja Pemblokiran Render JavaScript dan CSS

Setiap situs web di WordPress memiliki tema dan plugin yang berisi file JavaScript dan CSS. Skrip ini menghasilkan peningkatan waktu pemuatan halaman situs web. Selain itu, skrip juga dapat memblokir rendering halaman

Saat Anda mengunjungi situs web, hal pertama yang dilakukan browser adalah memproses JavaScript dan CSS. Kemudian browser memproses HTML pada halaman website tersebut hingga muncul tampilan halaman penuh dari website tersebut

Jadi, saat koneksi Anda lambat, proses melihat halaman website akan lebih lama

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

1. Memperbaiki Render Blocking JavaScript dan CSS dengan Autoptimize

Cara yang pertama ini merupakan cara yang paling sederhana dan kami rekomendasikan untuk Anda

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

Setelah proses aktivasi, buka halaman Settings >> Autoptimize untuk mengonfigurasi pengaturan plugin

Langkah 1 Pengoptimalan Kode JavaScript

Selanjutnya, di bagian pengaturan JavaScript, centang kotak di sebelah teks Optimalkan Kode JavaScript?

Setelah itu, optimalkan JavaScript dengan mencentang beberapa opsi yang tersedia

• Agregat file JS?. Gabungkan semua file JavaScript di file situs web untuk memproses pemblokiran non-render. Jika opsi ini tidak aktif, setiap file JS akan tetap di tempatnya tetapi ukuran file akan dikurangi
• Juga menggabungkan JS sebaris?. Opsi ini berfungsi untuk mengekstrak JavaScript dari HTML
• Force JavaScript in ?: Pilihan ini berfungsi untuk memproses JavaScript lebih awal. Jika mengaktifkan pilihan ini, akan berpotensi membuat JavaScript Render Blocking.
• Kecualikan skrip dari Autoptimize. Tidak termasuk skrip yang akan dioptimalkan

Pada panduan ini kami memilih file JS Agregat? . Dengan begitu, Anda dapat mengizinkan plugin untuk menambahkan inline JS dan menghapus skrip yang dikecualikan secara default oleh WordPress, misalnya jquery. js

Langkah 2 Optimasi Kode CSS

Kemudian, gulir ke bawah ke bagian Opsi CSS dan centang kotak di sebelah teks Optimalkan Kode CSS?

Setelah itu, optimalkan CSS dengan mencentang beberapa opsi yang tersedia. Berikut ini adalah deskripsi dari beberapa opsi

• Kumpulan file CSS?. Opsi ini akan menggabungkan semua file CSS di file situs web
• Juga menggabungkan CSS sebaris?. Mengoptimalkan CSS dalam file HTML

Pada panduan ini pilih, Agregat file CSS? . Tujuannya agar semua file CSS yang ada di website diperkecil ukurannya sehingga waktu loading website akan jauh lebih cepat

Kemudian simpan perubahan yang telah dilakukan dengan menekan tombol Save Changes and Empty Cache

Untuk memastikan keberhasilan perubahan pada plugin Autoptimize, Anda dapat memeriksa Google PageSpeed

Pastikan untuk memeriksa situs web untuk melihat bahwa tidak ada yang rusak saat Anda mengoptimalkan JavaScript atau CSS

Baca Juga. Cara Meminimalkan CSS untuk Mempercepat Loading Website

2. Memperbaiki Render Blocking JavaScript dan CSS dengan W3 Total Cache

Metode kedua ini 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 JavaScript dan Kode CSS

Selanjutnya, pilih menu Performance >> General Settings dan scroll ke bawah ke bagian Minify feature

Kemudian aktifkan fitur Minify dengan mencentang Enable dan pilih mode Minify Manual. Contoh seperti pada gambar di bawah ini

Setelah itu, klik tombol Save Settings & Purge Cache untuk menyimpan perubahan

Selanjutnya, Anda harus menemukan file atau tautan JavaScript yang ingin Anda perkecil.

Untuk mendapatkan link JavaScript yang akan diminimalkan, anda bisa cek menggunakan Google PageSpeed. Setelah itu cari tab menu Eliminate render-blocking resources seperti di bawah ini

Kemudian, pilih salah satu opsi pemblokiran render yang tersedia dengan mengklik kanan salah satu tautan dan Salin alamat tautan

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

Kemudian scroll ke bawah ke JS features dan aktifkan JS Minify Settings dengan mencentang logo Enable seperti di bawah ini

Setelah mengaktifkan JS minify settings, Anda akan melihat bagian Operations in areas. Pilih Non-blocking using asyncsrc sebagai tipe yang di-embed untuk tag before . Sesuaikan perubahan seperti pada gambar di bawah ini.

Kemudian, di bawah subjudul manajemen file JS, pilih tema aktif dan klik tombol Tambahkan Skrip.  

Lalu salin (copy) URL script JavaScript dari tab PageSpeed, dan paste (tempel) script satu per satu. Panduan ini akan memperbaiki file JavaScript

Setelah menambahkan URL JavaScript, simpan perubahan dengan menekan tombol Simpan semua pengaturan

Untuk memastikan keberhasilan pemblokiran perenderan JavaScript dan CSS, buka halaman Wawasan Google PageSpeed ​​​​untuk memeriksa apakah pemblokiran perenderan dapat diselesaikan. Dari screenshot di bawah ini, terlihat bahwa mengelola pengaturan cache total W3 dapat mengatasi kesalahan JavaScript dan CSS

Setelah melakukan kedua panduan di atas, Anda perlu mengetahui cara menggunakan Google Page Speed. Agar anda bisa membedakan hasil kecepatan website yang sudah di perbaiki dan di minified (diperkecil) filenya menggunakan kedua plugin diatas

Baca juga. Percepat Pemuatan WordPress dengan Tunda Parsing JavaScript

Kesimpulan

Pemblokiran render berdampak negatif pada kecepatan dan kinerja situs web WordPress Anda. Dalam panduan ini Anda telah mempelajari cara memperbaiki Render-Blocking JavaScript dan CSS di situs web Anda. Meskipun situs web Anda masih memiliki skrip dan stylesheet pemblokiran render yang diperlukan, tutorial ini diharapkan dapat membantu Anda dalam mengatasi masalah seperti ini

Demikian panduan cara memperbaiki Render-Blocking JavaScript dan CSS. Jika masih ada pertanyaan, jangan sungkan untuk meninggalkannya di kolom komentar. Jangan lupa berlangganan untuk mendapatkan informasi VPS dan WordPress dari kami