David Kurniawan A Technical Content Writer at Niagahoster, specializing in Virtual Private Servers (VPS), WordPress, and Internet Marketing. David is eager to help people to improve their business on the internet.

Cara Memperbaiki Render-Blocking JavaScript and CSS

2 min read

perbedaan java dan javascript

Apakah Anda ingin menghilangkan render blocking JavaScript dan CSS di WordPress? Jika menguji  website di Google PageSpeed, Anda akan melihat salah satu saran yang diberikan oleh Google adalah  menghilangkan skrip render blocking JavaScript dan CSS. 

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

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.

Pada panduan ini, kami akan membahas cara memperbaiki blocking render JavaScript dan CSS di WordPress menggunakan dua plugin. Kedua plugin tersebut adalah Autoptimize dan W3 Total Cache. Anda dapat memilih salah satu dari cara yang kami berikan.

1. Memperbaiki Render Blocking JavaScript dan CSS dengan Autoptimize

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

Hal pertama yang perlu Anda lakukan adalah menginstall dan mengaktifkan plugin Autoptimize. Untuk detail pemasangan plugin, Anda bisa melihat panduan langkah demi langkah pada artikel cara install plugin WordPress.

Setelah proses aktivasi, masuk ke halaman Settings > Autoptimize untuk melakukan konfigurasi pengaturan plugin.

halaman settings autoptimize

Langkah 1: Optimasi Kode JavaScript

Selanjutnya, pada bagian pengaturan JavaScript centang kotak di sebelah tulisan Optimize JavaScript Code? untuk merubah pengaturan JavaScript.

optimize javascript code di autoptimize

Setelah itu, lakukan optimasi pada JavaScript dengan  mencentang beberapa pilihan yang ada.

  • Aggregate JS-files?: Menggabungkan semua file JavaScript yang ada di file website untuk memproses non-render blocking. Jika pilihan ini tidak aktif, masing-masing file JS akan tetap di tempatnya tetapi akan diperkecil ukuran filenya.
  • Also aggregate inline JS?: Pilihan ini berfungsi untuk mengekstrak JavaScript dari HTML.
  • Force JavaScript in <head>?: Pilihan ini berfungsi untuk memproses JavaScript lebih awal. Jika mengaktifkan pilihan ini, akan berpotensi membuat JavaScript Render Blocking.
  • Exclude scripts from Autoptimize: Mengecualikan skrip yang akan dioptimasi.

Pada panduan ini kami memilih Aggregate JS-files? dan Also aggregate inline JS?. Dengan begitu, Anda dapat mengizinkan plugin untuk menambahkan inline JS dan menghapus skrip yang dikecualikan secara default oleh WordPress, contoh seperti jquery.js.

opsi aggregate js files

Langkah 2: Optimasi Kode CSS

Kemudian, scroll ke bawah pada bagian CSS Options centang pada kotak di samping tulisan Optimize CSS Code? untuk menampilkan pengaturan CSS.

opsi optimize css code

Setelah itu, lakukan optimasi pada CSS dengan cara mencentang beberapa pilihan yang ada. Berikut ini adalah keterangan dari beberapa pilihan tersebut.

  • Aggregate CSS-files?: Pilihan ini akan menggabungkan semua file-file CSS yang ada di file website.
  • Also aggregate inline CSS?: Mengoptimalkan CSS dalam file HTML.
opsi aggregate css files

Pada panduan ini memilih, Aggregate CSS-files? dan Also aggregate inline CSS?. Tujuannya agar semua file CSS yang ada di website ukurannya diperkecil sehingga load time website akan jauh lebih cepat.

Kemudian simpan perubahan yang telah dibuat dengan cara menekan tombol Save Changes and Empty Cache.

tombol save changes and empty cache di autoptimize

Untuk memastikan keberhasilan perubahan pada plugin Autoptimize, Anda bisa melakukan pengecekan pada Google PageSpeed.

Pastikan lakukan pengecekan pada website untuk melihat tidak ada yang rusak saat Anda mengoptimalkan JavaScripts atau CSS.

Baca Juga: Cara Minify CSS untuk Mempercepat Loading Website

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

Cara kedua ini akan membutuhkan sedikit lebih banyak langkah dan disarankan untuk pengguna yang sudah familiar atau terbiasa menggunakan plugin W3 Total Cache.

Hal pertama yang perlu Anda lakukan adalah menginstall dan mengaktifkan plugin W3 Total Cache

Selanjutnya, pilih menu Perfomance >> General Settings dan scroll ke bawah pada bagian fitur Minify.

bagian minify di plugin w3 total cache

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

pengaturan minify di w3 total cache

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

Setelah melakukan kedua panduan di atas, Anda perlu tahu cara menggunakan Google Page Speed. Agar Anda bisa membedakan hasil speed website yang sudah diperbaiki dan diperkecil (minify) filenya menggunakan kedua plugin di atas.

Baca juga: Mempercepat Loading WordPress dengan Defer Parsing JavaScript

Kesimpulan

Render-blocking memberi pengaruh negatif pada kecepatan dan performa website WordPress Anda. Pada panduan kali ini Anda telah mempelajari cara memperbaiki Render-Blocking JavaScript and CSS di website Anda. Meskipun website Anda masih memiliki skrip dan stylesheet render-blocking yang diperlukan, tutorial ini diharapkan dapat membantu Anda dalam menangani masalah seperti ini.

Demikian panduan mengenai cara memperbaiki Render-Blocking JavaScript and CSS Jika masih ada pertanyaan jangan sungkan untuk meninggalkan di kolom komentar. Jangan lupa juga subscribe untuk mendapatkan informasi VPS dan WordPress dari kami.

Banner Download Ebook WordPress Super Cepat

David Kurniawan A Technical Content Writer at Niagahoster, specializing in Virtual Private Servers (VPS), WordPress, and Internet Marketing. David is eager to help people to improve their business on the internet.

Leave a Reply

Your email address will not be published. Required fields are marked *