Cara Minify Javascript Dan Css Untuk Mempercepat Loading Blog

Dalam membangun sebuah website, Minify menjadi salah satu cara yang digunakan untuk memperkecil atau mengkompres ukuran file html, css dan javascript yang ada pada website Anda. Minify adalah merupakan dari istilah dalam suatu programan yang nantinya akan mengacu pada proses penghapusan karakter tidak diperlukan dalam mengeksekusi sebuah kode. 

Secara sederhana, proses ini akan menghapus semua spasi dan karakter yang tidak diperlukan, baris baru, komentar, serta pembatas dari kode Anda. Karakter-karakter tersebut digunakan untuk tujuan visual dan kemudahan dalam membaca, tetapi tidak diperlukan untuk mengeksekusi code. 

Tujuannya teknik ini ialah untuk meringankan dan meningkatkan loading halaman website Anda ketika diakses oleh pengunjung,  yang dalam jangka panjang nantinya dapat berpengaruh untuk meningkatkan kenyamanan pelanggan pada website Anda.

Berikut ada beberapa langkah cara untuk mempercepat website atau blog dengan teknik minify baik secara manual maupun menggunakan Tools online, baik menggunakan plugin WordPress maupun akses Ftp hingga perintah Php.

Melakukan Kompres Javascript dan CSS

Cara agar loading website lebih cepat dan ringan dari sebelumnya ialah dengan mengkompres atau semua Javascript dan css inline yang berada dalam website Anda, baik secara manual maupun menggunakan tools. Dua cara tersebut yang paling sering Admin lakukan dalam membangun halamn website atau blog (blogger), dan hasilnya sangat memuaskan.

Menggunakan Teknik Manual

Dengan teknik manual Anda perlu hati-hati dan teliti dalam melakukanya, karena jika ada kesalahan sedikit saja kemungkinan akan ada beberapa komponen atau widget yang tidak berfungsi bahkan kerusakan. Lakukan back-up terlebih dahulu serta peninjawan berkala agar terhindar dari hal yang tidak di inginkan.

Untuk tutorial Minify atau melakukan kompres pada javascript dan css secara manual ialah dengan 3 cara:

1. Hapus Spasi atau Karakter yang tidak diperlukan

Hapus semua spasi, paragraf atau karakter yang tidak diperlukan yang ada pada javascript dan css, jika Anda bingung dibawah ada sedikit contoh css yang di kompres secara manual.

Contoh sebelum di kompres

#header {

    background: #ff5311;

    color: #ffffff;

    font-size: 26px;

    font-weight: bold;

    text-transform: upercase;

    max-width: 1000px;

    margin: 0;

    padding: 30px 15px;

}

pada contoh pertama bisa Anda lihat terdapat 10 paragraf dan beberapa spasi yang tidak diperlukan.

Contoh setelah di kompres

#header{background:#ff5311;color:#ffffff;font-size:26px;font-weight:bold;text-transform:upercase;max-width:1000px;margin:0;padding:30px 15px;}

untuk contoh yang kedua hanya terdapat satu paragraf saja dan tidak ditemukan spasi yang tidak diperlukan.

Anda juga bisa melakukan teknik diatas pada javascript. Yang di maksud paragraf atau spasi yang tidak diperlukan, meskipun dihapus itu tidak akan terjadi eror dan tetap berfungsi sebagaimana mestinya.

2. Menggunakan Karakter Entitas

Di dalam template, terdapat bayak Javascript atau Css inline yang berada diantara tag <script> dan </script> atau tag <style> dan </style>

Untuk menggunakan karakter entitas, Anda tinggal mengubah kode-kode berikut:

   <  menjadi  &lt;

   >  menjadi  &gt;

   "   menjadi  &quot;

    '   menjadi  &apos;

   &  menjadi  &amp;

contoh :  <style> menjadi &lt;style&gt;

atau :  <script type="text/javascript"> menjadi &lt;script type=&quot;text/javascript&quot;&gt;

3. Menambahkan atribut Defer atau  Async

Menambahkan atribut Defer atau Asyns pada javascript dengan cara berikut.

contoh : <script async src=".... .js"></script>

atau : <script async="async" src=".... .js"></script>

Rata-rata cara ini digunakan untuk javascript external, dan cara ini memang bukan untuk mengkompres javascript, tapi untuk menunda rendering atau memberi tahu server akan javascript external hingga pemuatan rendering selesai.

Baca juga : Perbedaan antara Async dan Defer (Atribut Javascript)

Menggunakan Tools Online

Jika Anda tidak mau repot menghapus satu persatu, Anda dapat menggunakan tools online untuk mengkompres javascript atau css secara otomatis. Diantaranya ialah dengan CSS Compressor atau JS Compressor atau tools online lainnya dengan metode copy and paste.

Menggunakan Akses FTP 

Untuk mengetahui file mana saja yang harus di Minify, Anda dapat melakukan analisa pada GT Metrix. Berikut adalah contoh javascript perlu di optimasi atau Minify dari hasil analisa GT Metrix.

Pada gambar tersebut terdapat beberapa javascript yang perlu di optimasi, silakan lakukan analisa pada website Anda menggunakan GT Metrix. Menariknya, dengan menggunakan GT Metrix Anda bisa  mengklik link optimized version di samping link file asli, dengan begitu Anda akan mendapatkan file javascript atau css yang sudah optimasi. Anda dapat menggunakan file tersebut untuk mengganti file lama Anda pada website melalui FTP atau file manager yang ada di control panel hosting Anda. Dan untuk lokasi filenya, akan terlihat dari url hasil analisa pada GT Metrix.

Menggunakan Perintah PHP

Jika Anda membuat website menggunakan php, Anda dapat menggunakan perintah berikut untuk mengkompres setiap tag html yang ada dalam website Anda.

Perintahnya : 

function minify($buffer){

     $search = array(

         '/\>[^\S ]+/s',

         '/[^\S ]+\</s',

         '/(\s)+/s'

     );

     $replace = array(

         '>',

         '<',

         '\\1'

     );

     if (preg_match("/\<html/i",$buffer) == 1 && preg_match("/\<\/html\>/i",$buffer) == 1) {

     $buffer = preg_replace($search, $replace, $buffer);

     }

   return $buffer;

}

ob_start("minify");

Letakkan perintah tersebut dibagian awal ketika Anda akan menulis perintah php. Sehingga nantinya fungsi Minify tersebut dapat berjalan dengan baik di website Anda.

Menggunakan Plugin WordPress

Apabila Anda membuat website menggunakan WordPress, Anda dapat mengkompres setiap perintah html, css, dan javascript dengan menggunakan plugin W3 Total Cache.

Kesimpulan

Salah satu kriteria website yang baik adalah waktu peng aksesan atau loading halaman website tersebut sangat cepat. Untuk itu Anda perlu lakukan teknik Minify atau kompres pada html, css dan javascript yang ada di website Anda.

Manfaat

Setelah Anda berhasil melakukan proses Minify atau Kompres, kecepatan loading,  parsing dan rendering pada website Anda akan lebih cepat dan Ringan. Bisa cek langsung perubahannya di GT Metrix atau Google PageSpeed Insight. 

Selain itu, cara di atas akan sedikit membantu memperbaiki masalah - masalah seperti berikut:

• Masalah waktu untuk interaktif Google Pagespeed
• Masalah total waktu pembelokiran Google Pagespeed
• Masalah indeks kecepatan Google Pagespeed
• Masalah reduce initial server response time Google Pagespeed
• Masalah minimalkan pekerjaan thread utama Google Pagespeed
• Masalah prefer asynchronous resources Gtmetrix
• Masalah defer parsing of javascript Gtmetrix
• Masalah minify jafascript and css Gtmetrix

Peringatan :

Untuk keamanan website Anda. Sebaiknya setiap akan melakukan perubahan pada website, pastikan bahwa Anda sudah melakukan back-up terlebih dahulu pada website atau blog Anda.

Ali Hyuuga

Hanya seorang blogger pemula yang selalu ingin tau

Share :

Subscribe Or Neweslater