Apakah Kamu ingin menghilangkan render blocking JavaScript dan CSS di WordPress? Seandainya menguji laman di Google PageSpeed, Kamu akan melihat diantara saran yang diberikan oleh Google yaitu menghilangkan skrip render blocking JavaScript dan CSS.
Di artikel ini, kami akan menjelaskan cara gampang memperbaiki render blocking JavaScript dan CSS di WordPress bagi meningkatkan skor Google PageSpeed Kamu.
Cara Kerja Render Blocking JavaScript dan CSS
Setiap laman di WordPress mempunyai tema dan plugin yang di dalamnya terdapat file JavaScript dan CSS. Skrip ini berakibat di meningkatnya waktu loading halaman laman. Selain itu, skrip tersebut pun dapat memblokir rendering page.
Ketika Kamu mengunjungi sebuah laman, hal pertama-tama yang dilakukan oleh browser yaitu memproses JavaScript dan CSS. Kemudian browser memproses HTML di halaman laman sehingga muncul tampilan full halaman dari laman.
Jadi, apabila Kamu berada di koneksi yang lebih lambat, proses bagi melihat halaman laman akan lebih lama.
Di panduan ini, kami akan membahas cara memperbaiki blocking render JavaScript dan CSS di WordPress menggunakan dua plugin. Kedua plugin tersebut yaitu Autoptimize dan W3 Total Cache. Kamu dapat memilih diantara dari cara yang kami berikan.
1. Memperbaiki Render Blocking JavaScript dan CSS dengan Autoptimize
Cara pertama-tama ini yaitu cara yang sangat sederhana dan kami rekomendasikan bagi Kamu.
Hal pertama-tama yang perlu Kamu lakukan yaitu menginstall dan mengaktifkan plugin Autoptimize. Bagi detail pemasangan plugin, Kamu dapat melihat panduan langkah demi langkah di artikel cara install plugin WordPress.
Setelah proses aktivasi, masuk ke halaman Settings >> Autoptimize bagi menjalankan konfigurasi pengaturan plugin.
Langkah 1 Optimasi Kode JavaScript
Berikutnya, di bagian pengaturan JavaScript centang kotak di sebelah tulisan Optimize JavaScript Code? bagi merubah pengaturan JavaScript.
Setelah itu, lakukan optimasi di JavaScript dengan mencentang beberapa alternatif yang terdapat.
- Aggregate JS-files?: Menggabungkan seluruh file JavaScript yang terdapat di file laman bagi memproses non-render blocking. Seandainya alternatif ini tak aktif, masing-masing file JS akan tetap di tempatnya tetapi akan diperkecil ukuran filenya.
- Also aggregate inline JS?: Alternatif ini berfungsi bagi mengekstrak JavaScript dari HTML.
- Force JavaScript in <head>?: Alternatif ini berfungsi bagi memproses JavaScript lebih awal. Seandainya mengaktifkan alternatif ini, akan berpotensi membangun JavaScript Render Blocking.
- Exclude scripts from Autoptimize: Mengecualikan skrip yang akan dioptimasi.
Di panduan ini kami memilih Aggregate JS-files? dan Also aggregate inline JS?. Dengan seperti itu, Kamu dapat mengizinkan plugin bagi menambahkan inline JS dan menghapus skrip yang dikecualikan secara default oleh WordPress, contoh seperti jquery.js.
Langkah 2 Optimasi Kode CSS
Kemudian, scroll ke bawah di bagian CSS Options centang di kotak di samping tulisan Optimize CSS Code? bagi menampilkan pengaturan CSS.
Setelah itu, lakukan optimasi di CSS dengan cara mencentang beberapa alternatif yang terdapat. Berikut ini yaitu keterangan dari beberapa alternatif tersebut.
- Aggregate CSS-files?: Alternatif ini akan menggabungkan seluruh file-file CSS yang terdapat di file laman.
- Also aggregate inline CSS?: Mengoptimalkan CSS pada file HTML.
Di panduan ini memilih, Aggregate CSS-files? dan Also aggregate inline CSS?. Tujuannya agar seluruh file CSS yang terdapat di laman ukurannya diperkecil sehingga load time laman akan jauh lebih cepat.
Kemudian simpan perubahan yang telah dibangun dengan cara menekan tombol Save Changes and Empty Cache.
Bagi memastikan kesuksesan perubahan di plugin Autoptimize, Kamu dapat menjalankan pengecekan di Google PageSpeed.
Pastikan lakukan pengecekan di laman bagi melihat tak ada yang rusak dikala Kamu mengoptimalkan JavaScripts atau CSS.
2. Memperbaiki Render Blocking JavaScript dan CSS dengan W3 Total Cache
Cara kedua ini akan membutuhkan sedikit lebih banyak langkah dan disarankan bagi pengguna yang telah familiar atau terbiasa menggunakan plugin W3 Total Cache.
Hal pertama-tama yang perlu Kamu lakukan yaitu menginstall dan mengaktifkan plugin W3 Total Cache.
Langkah 1 Optimasi Kode JavaScript dan CSS
Berikutnya, pilih fitur Perfomance >> General Settings dan scroll ke bawah di bagian fitur Minify.
Kemudian aktifkan fitur Minify dengan cara mencentang tulisan Enable dan pilih Minify mode Manual. Contoh seperti di gambar di bawah ini.
Setelah itu, klik tombol Save Settings Purge Caches bagi menyimpan perubahan.
Berikutnya, Kamu mesti mencari file atau link JavaScript yang ingin Kamu perkecil (minify).
Bagi memperoleh link JavaScript yang akan di perkecil, Kamu dapat menjalankan pengecekan menggunakan Google PageSpeed. Setelah itu, cari tab fitur Eliminate render-blocking resources seperti di bawah ini.
Kemudian, pilih diantara di antara render-blocking yang terdapat dengan cara klik kanan di diantara link lalu Copy link address.
Lalu masuk ke dashboard WordPress Kamu dan pilih fitur Performance >> Minify.
Lalu scroll ke bawah di fitur JS danu aktifkan JS Minify Settings dengan mencentang logo Enable seperti di bawah ini.
Setelah mengaktifkan JS minify settings, Kamu akan melihat bagian Operations in areas. Pilih Non-blocking using asyncsrc selaku tipe yang di-embed bagi tag before <head>. Sesuaikan perubahan seperti di gambar di bawah ini.
Kemudian, di bawah sub-heading JS file management, pilih tema yang aktif dan klik tombol Add Script.
Lalu salin (copy) URL script JavaScript dari tab PageSpeed, dan tempel (paste) script tersebut satu per satu. Di panduan ini akan memperbaiki file JavaScript.
Setelah selesai menambahkan URL JavaScript, simpan perubahan dengan menekan tombol Save all settings.
Bagi memastikan kesuksesan render-blocking JavaScript dan CSS, masuk ke halaman Google PageSpeed Insights bagi mengecek apakah render-blocking telah dapat teratasi. Dari screenshot di bawah ini, dapat diketahui bersama bahwa mengelola pengaturan W3 total cache ternyata dapat mengatasi error JavaScript and CSS.
Setelah menjalankan kedua panduan di atas, Kamu perlu tahu cara menggunakan Google Page Speed. Agar Kamu dapat membedakan hasil speed laman yang telah diperbaiki dan diperkecil (minify) filenya menggunakan kedua plugin di atas.
Kesimpulan
Render-blocking memberi pengaruh negatif di kecepatan dan performa laman WordPress Kamu. Di panduan kali ini Kamu telah mempelajari cara memperbaiki Render-Blocking JavaScript and CSS di laman Kamu. Meskipun laman Kamu masih mempunyai skrip dan stylesheet render-blocking yang diperlukan, panduan ini diinginkan dapat menolong Kamu pada menangani masalah seperti ini.
Demikian panduan mengenai cara memperbaiki Render-Blocking JavaScript and CSS Seandainya masih ada pertanyaan jangan sungkan bagi meninggalkan di kolom komentar. Jangan lupa pun subscribe bagi memperoleh informasi VPS dan WordPress dari kami.
Sumber https://niagahoster.co.id/