Daftar Isi :
Halo selamat malam semua, kecepatan akses sebuah website memang dipengaruhi oleh banyak faktor, salah satunya adalah yang akan saya share kali ini, terkait minified js dan css pada wordpress.
Beberapa pakar dalam forum diskusi wordpress menyarankan agar melakukan minified / memperkecil ukuran file js dan css wich is itu adalah menyederhanakan baris-baris program. Agar saat webiste di akses akan lebih ringan.
Sebenarnya anda bisa menggunakan plugin yang tersedia di wordpress untuk melakukan minified pada js dan css, namun demikian pada artikel ini saya akan coba share agar anda melakukannya secara manual.
Audit website
Berikut adalah langkah-langkah nya :
- Tools yang sering digunakan adalah gtmetrix, jadi silahkan anda kunjungi website tersebut.
- Input url web anda pada kolom url misal : http://hendrawijaya.net.
- Klik “Test your site”.
- Tunggu hingga beberapa menit agar laporan lengkap dari website anda keluar.
Berikut ini adalah hasil test dari blog saya, sebelum di minified js dan css nya :
Kemudian ini adalah hasil test setelah saya minified js dan css nya :
Minified JS
Kembali ke hasil test yang belum di lakukan minified, pada tab PageSpeed, ada menu Minify CSS dan Minify JS, klik menu tersebut, didalamnya anda akan melihat rekomendasi dari gtmetrix dimana file js dan css anda yang dapat di reduce.
- Klik kanan open in new tab file js nya, misal : https://hendrawijaya.net/wp-content/themes/twentytwenty/assets/js/index.js?ver=1.4
- Kemudian akan muncul di browser anda baris-baris kode js.
- Copy semua baris kode js tersebut.
- Buka https://javascript-minifier.com/
- Paste file js original ke text area Input JavaScript
- Klik tombol minify
- Hasilnya ada disebelah kanan text area minified output
- Klik copy to cliboard
Replace File JS
Langkah selanjutnya adalah masuk kedalam cpanel hosting anda, cari file index.js pada folder wp-content, themes, twentytwenty, assets. atau anda bisa gunakan theme editor pada dashboard worpress : apperance > theme editor. Anda sesuaikan dengan file js yang direkomendasikan untuk di minify oleh gtmetrix ya, ini hanya sebagai contoh saja.
- Backup terlebih dahulu file index.js dengan cara di download.
- Klik edit pada file index.js
- Select all semua baris kode di index.js
- Paste hasil minified output pada index.js
- Klik save
Minified CSS
Lakukan berulang untuk file js dan css yang berada pada domain anda, sampai semua rekomendasi nya di selesaikan, untuk minify css ikuti langkah diatas namun gunakan website minify css untuk mengecilkan file css.
Pagespeed tergantung dari banyaknya http request yang dibuat, jika anda memasang analytic ataupun adsense akan berpengaruh kepada hasil speed test nya.
Pengujian blog saya merah pada CDN, karena saya memang tidak pakai CDN seperti cloudfare, namun demikian versi gratis nya photon milik jetpack mungkin juga berguna seperti yang saya gunakan.
Silahkan anda cek kembali tampilan website nya, jika ada masalah terkait menu-menu yang tidak responsive atau tampilan yang tidak sesuai silahkan kembalikan dengan cara upload ulang file js dan css yang sudah anda backup sebelumnya.
Selamat mencoba.
Wassalam
Hendra Wijaya