Cara minified js dan css wordpress

Artikel ini terakhir diperbaharui pada 27 Juli 2020.

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 :

sebelum minified js dan css

Kemudian ini adalah hasil test setelah saya minified js dan css nya :

sesudah minified js dan css

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.

rekomendasi gtmetrix untuk minify js
minify js menggunakan tools

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.

tidak pakai cdn untuk beberpa file css dan js

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

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Scroll to Top