Cara Minify Compress Css Javascript

Posted on
Cara Minify Compress Css Javascript

Minify adalah sebuah cara atau metode yang digunakan para webmaster untuk memperkecil ukuran sebuah script website. Metode minify ini dapat juga disebut compressor yang artinya sama yaitu memperkecil ukuran file dari sebelumnya. Bagi seorang webmaster professional tentunya meminify script html, css atau javascript pada website maupun blog mereka sangat diperlukan.

Artikel Lain: Media Online Suara.com

Hal tersebut tidak terlepas dari fungsi dan manfaat minify atau mengcompress file html, css dan javascript yaitu dapat mempercepat loading website atau blog kita sekaligus menghemat ukuran tempat tag html. Berikut ini akan dijelaskan sedikit mengenai berbagai keuntungan yang didapat jika kita mengcompress script website atau blog kita:

1. Ukuran website ditinjau dari berat dan panjangnya script jika semakin kecil akan semakin optimal. Artinya bahwa meminify script website atau blog kita dapat mengurangi ukuran muatan website dan blog ketika, karena prinsip minify atau yang sering disebut compress akan menghapus tag-tag yang tidak diperlukan pada script website maupun blog.

Keterangan: Contoh script atau tag-tag yang tidak diperlukan misalnya “Spasi( )”, “Titik Koma (;)”, “Judul (/* title */)” dan lain sebagainya, namun tetap dalam situasi dan kondisi tertentu. Minify akan menghapus baris kode-kode tersebut jika memang benar-benar tidak dibutuhkan, namun jika dibutuhkan minify tidak akan menghapusnya dan tetap membiarkannya agar script berjalan sebagaimana mestinya.

2. Website kita menjadi semakin cepat di load, ini karena ukuran script pada website atau blog kita berkurang secara drastis setelah di minify. Hal ini sangat berdampak tentunya pada permorma website atau blog dimata para pengunjung, jika website atau blog cepat pengunjung tidak akan mudah begitu saja pergi ke website lain karena menunggu loading web blog kita yang terlalu lama membutuhkan waktu loading. Artinya pengunjung sudah malas dan kemungkinan menutup wesbite atau blog kita sebelum semua halaman selesai dimuat.

Keterangan: Mengapa saya katakan cepat di load? Anda sekarang dapat membayangkan misalnya terdapat 20 karung plastik bawang, anda berencana membawa 20 plastik bawang sekaligus pulang kerumah. Dapat dibayangkan betapa sulitnya membawa ke-20 karung bawang tersebut secara bersamaan. Coba bandingkan dengan anda yang mempunyai 20 karung bawang, lalu ingin membawanya pulang sekaligus dan anda berpikir akan lebih mudah jika dijadikan satu dalam karung yang besar lalu dibawa pulang. Seperti itulah kira-kira konsep meminify script website dan blog kita, mempersatukan (menjadikan satu baris kode) yang dibutuhkan agar lebih kecil sehingga cepat dimuat.

3. Pengunjung website dan blog akan semakin banyak. Tentunya hal ini adalah efek domino dari website kita yang cepat di load sehingga membuat pengunjung betah belama-lama diwebsite kita, sekaligus akan membuat pengunjung datang dan datang kembali dilain waktu.

Keterangan: Tidak dapat dipungkiri website yang lama sekali dimuat akan membuat pengunjung malas membuka website atau blog tersebut. Sering terjadi misalnya pada diri saya sendiri, saat mencari sebuah informasi dan menemukannya pada search engine, saya membukanya dan setelah cukup lama menunggu tetapi semua halaman belum selesai dimuat, maka seketika itu saya tutup dan mencari di website lain. Tentunya anda tidak mau hal itu terjadi pada website dan blog anda bukan?

4. Blog atau Website yang cepat dimuat (fast load) akan menjadi lebih baik dimata search engine. Saya pernah membaca di suatu artikel bahwa kecepatan muat sebuah website atau blog saat ini juga menjadi prioritas search engine terbesar seperti Google. Apalagi Google juga menyediakan tools Pagespeed Insights yang dapat digunakan untuk mengetahui kecepatan website dan blog kita.

Keterangan: Saat sebuah search engine menampilkan hasil penelusuran yang sama, misalkan anda mencari artikel “Cara mengetik yang benar” terdapat dua artikel di dua buah website yang sama-sama berkualitas isinya, maka kemungkinan search engine akan menampilkan artikel pada website yang lebih cepat dimuat. Hal ini agar pengunjung merasa puas dan konten yang diberikan juga berkualitas, artinya relevan dengan yang dia cari, namun hal ini tidak menyangkut tentang SEO.

Setelah kita mengetahui manfaat serta fungsi dari meminify script website atau blog kita, sekarang saatnya untuk melakukan itu pada website kita. Disini saya merekomendasikan menggunakan tools online Yui Compressor untuk mengcompress atau meminify Css dan Javascript anda. Untuk mengcompress atau meminify Css dan Javascript dapat anda lakukan dengan mengikuti langkah-langkah dibawah:

1. Sebelumnya siapkan terlebih dahulu Css atau Javascript anda yang akan di compress atau diminify. Dalam ilustrasi kasus ini saya mempraktekkannya menggunakan Css milik saya. Berikut adalah Css yang akan saya Compress atau Minify.

Before:

<style>
/* Posts */
h2.date-header{color:#808080; font-size:11px; font-weight:normal}
.post{background:#fff none repeat scroll 0 0; border:1px solid #BFBFBF; float:left; height:200px; margin:5px; overflow:hidden; padding:0px; position:relative; width:200px}
#post-title-wrapper{background:#A0B222; clear:both; left:0; padding:2px; position:absolute; top:0px}
.post ul li{background:transparent url(http://1.bp.blogspot.com/_1_qkt6bisvU/TAxTafZlcBI/AAAAAAAAAZw/u6p8QtU04UQ/s400/bullet.gif) no-repeat scroll left center; line-height:25px; padding-left:20px}
.post ol li{line-height:25px; list-style-position:inside; list-style-type:decimal}
.post li a{}
.post li a:hover{}
.post h3{bottom:5px; color:#333; font-size:14px; font-weight:bold; letter-spacing:0; margin:0}
.post h3 a, .post h3 a:visited, .post h3 strong{color:#fff}
.post h3 strong, .post h3 a:hover{color:#808080}
.post-body{color:#333; font-size:14px; line-height:1.4em}
.post-body blockquote{}
.post-footer{bottom:5px; color:#5F5E5E; font-size:11px; margin:0; padding:0; position:absolute; right:5px}
.comment-link{}
.post img{background:#CCC none repeat scroll 0 0; height:175px; margin-bottom:9999px; padding:0; width:200px}
.post blockquote{background:#808080 url(http://4.bp.blogspot.com/_1_qkt6bisvU/TAy5ThJnYBI/AAAAAAAAAbM/tbc10kkIqf4/s400/aspas.png) no-repeat scroll 10px 10px; color:#FFF; font-family:georgia; padding:20px 20px 20px 50px}
.post blockquote p{}
.post-footer-line-1{display:none}
.post-labels{display:none}
</style>

Keterangan: Usahakan menyertakan tag pembuka dan penutup script misalnya untuk Css “<style></style>” dan untuk javascript “<script type=”text/javascript”></script>”. Hal ini dilakukan agar anda tidak mengetikkan ulang ketika di input inline ke html laman anda.

2. Jika sudah anda siapkan Css atau Javascript yang ingin di compress (minify), buka halaman tools online Yui Compressor silakan klik disini. Setelah terbuka pastekan script atau kode css maupun javascript anda pada kolom code yang sudah disediakan.

Keterangan: Lakukan langkah diatas dengan lebih cepat menggunakan kombinasi shortcut keyboard (Ctrl+A dan Ctrl+V).

3. Sekarang sebelum di compress  (minify) kita pilih opsi-opsinya terlebih dahulu. Pada pilihan “File Type” silakan tentukan apakah file yang ingin anda compress (minify) bertype Css ataupun Javascript. Jangan sampai salah memilih dalam tahap ini.

Keterangan: Untuk membedakkannya dapat anda lihat tag pembuka dan penutupnya, jika Css “<style></style>” atau jika javascript “<script></script>” kira-kira seperti itu.

4. Pada bagian “Global Options” silakan centang “Display informational messages and warnings”. Hal ini dilakukan apabila terjadi error maka akan ditampilkan pada output Css atau Javascript yang telah kita compress.

Keterangan: Jika terdapat error atau pesan kesalahan, sebaiknya anda jangan megcompress file Css atau Javascript tersebut. Biarkan saja yang tidak bisa dikompress, cari Css atau Javascript anda yang bisa dikompress saja, agar tampilan website anda tidak berantakan nantinya.

5. Untuk “Javascript options” anda pilih saja yang “Minify only, no symbol obfuscation”. Ini kita pilih karena kita hanya ingin mengcompress atau meminify Javascript kita. Sedangakn pada “Css options” jangan centang apapun, karena “Insert line breaks…” akan membuat Css kurang efektif.

Keterangan: Ini adalah opsi yang saya contohkan, jika tidak sesusai dengan pilihan anda maka silakan sesuaikan dengan opsi pilihan anda sendiri.

6. Pada bagian “Redirect options” silakan dipilih jika ingin tetap dihalaman setelah mengcompress pilih “No redirect”, jika langsung redirect pada hasil compressnya pilih “Redirect to output” dan jika langsung pada hasil compressnya dalam bentuk gzipped pilih “Redirect gzipped output”.

Keterangan: Saya sarankan pilih yang “No redirect” agar mengetahui apakah hasil compressnya ada yang error atau bermasalah.

7. Setelah itu klik button atau tombol “Compress”. dan lihatlah hasil dari Css saya diatas setelah di Compress (minify).

After:

<style>h2.date-header{color:gray;font-size:11px;font-weight:normal}.post{background:#fff none repeat scroll 0 0;border:1px solid #bfbfbf;float:left;height:200px;margin:5px;overflow:hidden;padding:0;position:relative;width:200px}#post-title-wrapper{background:#a0b222;clear:both;left:0;padding:2px;position:absolute;top:0}.post ul li{background:transparent url(http://1.bp.blogspot.com/_1_qkt6bisvU/TAxTafZlcBI/AAAAAAAAAZw/u6p8QtU04UQ/s400/bullet.gif) no-repeat scroll left center;line-height:25px;padding-left:20px}.post ol li{line-height:25px;list-style-position:inside;list-style-type:decimal}.post h3{bottom:5px;color:#333;font-size:14px;font-weight:bold;letter-spacing:0;margin:0}.post h3 a,.post h3 a:visited,.post h3 strong{color:#fff}.post h3 strong,.post h3 a:hover{color:gray}.post-body{color:#333;font-size:14px;line-height:1.4em}.post-footer{bottom:5px;color:#5f5e5e;font-size:11px;margin:0;padding:0;position:absolute;right:5px}.post img{background:#CCC none repeat scroll 0 0;height:175px;margin-bottom:9999px;padding:0;width:200px}.post blockquote{background:#808080 url(http://4.bp.blogspot.com/_1_qkt6bisvU/TAy5ThJnYBI/AAAAAAAAAbM/tbc10kkIqf4/s400/aspas.png) no-repeat scroll 10px 10px;color:#FFF;font-family:georgia;padding:20px 20px 20px 50px}.post-footer-line-1{display:none}.post-labels{display:none}</style>

Sangat kecil dan menjadi satu line bukan? Tentu ini akan membuat website dan blog anda semakin professional. Tetapi sebelum mengcompress (minify) saya sarankan backup script anda yang asli terlebih dahulu untuk berjaga-jaga kalau ada human error. Semoga artikel ini dapat membantu anda, lihat juga video pembuktiannya dibawah. Jangan lewatkan artikel sebelumnya mengenai membuat menu tab tersembunyi di Visualbasic .Net.

Download Video
Download Code

 

6 thoughts on “Cara Minify Compress Css Javascript

Leave a Reply

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