Minifikasi – Situs web dibuat menggunakan banyak file yang sebagian besar adalah HTML, CSS, dan JS. File-file ini mengandung banyak kode yang dihasilkan secara otomatis atau ditulis oleh pengembang. Ini membuat mereka punya ukuran. Kode yang ditulis dalam file-file ini dapat dibaca oleh manusia karena mereka perlu ‘diberdayakan’. Namun, hal yang sama tidak berlaku untuk mesin karena mereka dapat membaca kode dengan cepat. Singkatnya, itu berarti bahwa komputer tidak perlu kode berformat yang dapat kita gunakan untuk menghemat ruang dan membantu meningkatkan ukuran file situs web.
Sebelum memulai dengan proses yang sebenarnya, pertama-tama kita akan mempelajari apa sebenarnya cara mengecilkan dan bagaimana itu dapat menguntungkan waktu pemuatan situs web.
Apa itu Minify?
Minify atau minifikasi adalah proses dimana ruang atau karakter yang tidak diperlukan dihapus dari kode. Ruang dan karakter ini tidak diperlukan untuk menjalankan kode dan karenanya hanya menambahkan ukuran ke file. Ketika mereka dihapus, file menjadi lebih ringan yang pada gilirannya meningkatkan waktu pemuatan halaman.
Apa yang Dihapus saat Minifikasi?
- Karakter baris baru.
- Karakter spasi putih.
- Blok pembatas.
- Komentar.
Semua karakter dan komentar ini menambah keterbacaan pada kode yang hanya dimaksudkan untuk pembaca manusia. Pembaruan membantu keseluruhan data ditransfer ketika situs web diminta dari server.
Sebagai developer, mudah untuk membedakan antara file yang diperkecil dan file yang tidak dikecilkan. File yang dikecilkan memiliki ekstensi .min di dalamnya. Misalnya, header.min.css
Perbedaan Minifikasi dan Kompresi
Kompresi tidak sama dengan Minifikasi. Kompresi adalah teknik di mana ukuran file dikurangi dengan menggunakan algoritma kompresi atau skema ushc sebagai brotli atau gzip. Keduanya melayani tujuan mengurangi ukuran file tetapi dengan pendekatan yang berbeda. Jadi, pada dasarnya, kalian dapat mengecilkan file dan kemudian mengompresnya sebelum mengirimnya ke klien yang meminta situs web. File yang pernah diterima dari sisi klien kemudian akan dikompres dan kemudian digunakan untuk tujuan rendering.
Baca juga: Validasi Ekstensi File Menggunakan Javascript.
Minifikasi Manual
Sekarang kita telah memahami apa itu Minifikasi dan perbedaannya dengan Kompresi, sekarang saatnya kita mempelajari cara mengecilkan CSS, JS, dan HTML.
Proses pertama sangat mudah. Yang perlu kita lakukan adalah menghapus hal-hal yang tidak perlu dari kode milik kita. Mari kita lihat contoh di bawah ini:
<!DOCTYPE html> <html> <head> <title>Portfolio</title> <meta charset=”utf-8"> <meta name=”viewpoint” content=”width=device-width”, initial-scale=”1"> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav> <ul> <li>Home</li> </ul> </nav> </body> </html>
Setelah proses Minifikasi, akan terlihat seperti ini:
<!DOCTYPE html><html><head><title>Portfolio</title><meta charset=”utf-8"><meta name=”viewpoint” content=”width=device-width”, initial-scale=”1"><link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><nav><ul><li>Home</li></ul></nav></body></html>
Apakah sulit dibaca? Mungkin untuk manusia, tetapi tidak untuk komputer. Format di atas menghilangkan spasi putih yang tidak perlu, jeda dan sebagainya sehingga lebih kecil dan karenanya mengurangi waktu pemuatan file.
Minifikasi Menggunakan Online Tool
Proses manual tentu bisa, namun akan sangat membuang waktu jika kode milik kita sangat banyak. Itu sebabnya kami memiliki alat yang melakukan minifikasi untuk kalian. Jadi, mari simak daftar di bawah ini.
CSS
CSSminifier.com: Alat yang mudah digunakan yang memungkinkan kita mengecilkan CSS. Yang perlu kita lakukan hanyalah salin dan tempel kode kita dan unduh versi yang telah dikecilkan sebagai file.
Javascript
Jscompress.com: Ini adalah alat minifikasi berbasis JavaScript. Alat ini memungkinkan kita menyalin-tempel kode kita dan mengunduh kode yang sudah melalui tahap minifikasi.
HTML
htmlcompress.com: Alat minifikasi online yang memungkinkan kita mengecilkan HTML, CSS, dan JavaScript.
HTMLMinifier: Kita juga dapat memeriksa kompresor HTML berbasis JavaScript ini. Ini adalah salah satu yang terbaik dan dapat diintegrasikan ke dalam proyek kalian dengan mudah.
Penutup
Di zaman ini, ada banyak sekali persaingan online. Agar berhasil, kita perlu memanfaatkan peralatan, teknik, dan metode yang tersedia. Itulah sebabnya kita harus melangkah maju dan berbagi wawasan tentang minifikasi. Kami juga mencantumkan alat yang memungkinkan kita melakukan pembenaran secara alami. Jika kalian menggunakan CMS seperti WordPress, kalian akan menemukan banyak caching atau bahkan plugin minification khusus yang melakukannya untuk kalian.
Jadi, apa pendapat kalian tentang minifikasi? Apakah kalian berencana menggunakannya dalam proyek kalian? Jika ya, berikan komentar di bawah dan beri tahu kami. Sekian artikel tentang Minifikasi, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya.
Jujur saya roaming mas
Baru tau deh sekarang bedanya file .css biasa dan dengan extensi .min.css
Jujur, gua terjebak disitus ini,artikel sangat mantap jiwa, untuk beginner coding.
informasinya mantap bnget kak .. terimakasih btw ^^
informasinya kereeenn