Website

Meningkatkan Performa Website – Minify CSS, HTML dan JavaScript

Meningkatkan Performa Website - Minify CSS, HTML dan JavaScript

Pengenalan

Minify adalah istilah pemrograman yang artinya adalah proses menghilangkan karakter yang tidak diperlukan dalam kode untuk dieksekusi. Melakukan minify code akan mempercepat kecepatan loading website Anda, efeknya, pengunjung Ada akan senang begitu juga dengan mesin pencari. Singkatnya, proes ini akan menghapus semua karakter white space, baris baru, komentar & delimiter dari kode Anda. Tipe karakter ini digunakan agar kode Anda bisa mudah dibaca, namun sebenarnya tidak terlalu dibutuhkan dan tidak dieksekusi oleh kode. Sehingga, proses minify ini mampu menigkatkan kecepatan download, parsing dan waktu eksekusi website Anda.

Yang Anda butuhkan

Sebelum memulai, yang Anda butuhkan adalah:

  • Akses FTP

Langkah 1 – Mencari file CSS, HTML, JavaScript yang belum di-minify

Untuk langkah ini, kami rekomendasikan agar Anda menggunakan GTMetrix, yang juga kami gunakan untuk percobaan dengan hasil sebagai berikut:

minify-css-1.

minify-js-1.

Langkah 2 – Mengganti file yang belum di-minify

PENTING! Keamanan harus selalu jadi yang utama. Sebelum Anda melakukan perubahan apapun, pastikan Anda sudah mem-backup website WordPress Anda atau backup file yang ingin Anda ganti.

Opsi 1 – Ganti secara manual

Hal yang keren dari GTMetrix adalah Anda bisa melihat langsung versi CSS, JS dan HTML yang sudah di optimasi hanya dengan menekan tombol See optimized version di sebelah nama file. Setelah itu, file yang telah dioptimasi akan bisa di-download/dibuka di browser. Dengan mengunakan aplikasi FTP, ganti file yang lama dengan nama file yang sama dengan sebelumnya.

Opsi 2 – Plugin CMS

Pengguna WordPress bisa menggunakan plugin seperti Better WordPress Minify atau W3 Total Cache untuk mendapatkan hasil yang sama. Anda bisa mengikuti panduan ini untuk instruksi lebih detail mengenai cara meng-install plugin W3 Total Cache.

Opsi 3 – CloudFlare

CloudFlare – layanan gratis yang mampu mempercepat dan melindungi website Anda dengan cara menjadi proxy antara pengunjung dan server hosting. CloudFlare menawarkan perlindungan terhadap serangan DDoS dan uniknya layanan ini bersifat gratis. Salah satu fitur yang termasuk di paket gratisnya adalah tool untuk minify CSS, HTML dan JS. Anda bisa mengaktifkan minification resource melalui menu Performance -> Auto-Minify:

CloudFlare Performance section.

CloudFlare Auto Minify.

PENTING! Anda tidak direkomendasikan untuk menggunakan fitur Auto-Minify dari CloudFlare jika Anda sudah menggunakan plugin minify seperti W3 Total Cache. Selain itu, CloudFlare tidak melakukan minify terhadap script milik pihak ke-3 dan link (Facebook & Twitter).

Langkah 3 – Menguji perubahan

Setelah mengganti file/kode dengan versi yang telah di-minify, hal terakhir yang harus dilakukan adalah melakukan test. Ini bisa dilakukan dengan cara melakukan test lagi dengan GTMetrix. Sebagai perbandingan, setelah file diganti, hasilnya akan menjadi seperti ini:

minify-css-2.

minify-js-2.

Kesimpulan

Dalam panduan singkat ini, kita telah mempelajari bagaimana cara meningkatkan performa website Anda dengan cara melakukan minify CSS, JavaScript dan HTML.

1 Comment

Click here to post a comment

Gabung bersama ratusan ribu pelanggan di seluruh dunia

dan dapatkan tutorial baru langsung di email Anda

Please wait...

Abone olduğunuz için teşekkürler!

Dapatkan harga hemat!

Web Hosting Gratis Domain mulai dari

Rp.10.275
/bln