Minifier CSS, JavaScript & HTML — Kode Lebih Kecil dan Cepat

Apa Itu Minifier Kode?

Minifier Kode (कोड मिनिफ़ायर) memperkecil file CSS, JavaScript, dan HTML tanpa mengubah fungsinya. Kode yang ditulis untuk manusia penuh dengan hal yang tidak dibutuhkan browser: komentar penjelasan keputusan, indentasi, baris kosong, nama variabel deskriptif yang panjang, dan titik koma opsional. Setiap karakter itu harus diunduh oleh setiap pengunjung. Minify membuangnya, sehingga halaman diunduh dan diproses lebih cepat — membantu pengunjung dengan data seluler lambat, meningkatkan Core Web Vitals, dan dapat mendukung peringkat pencarian yang lebih baik.

Tool gratis ini meminify ketiga bahasa web sekaligus di satu tempat. CSS dan HTML langsung di-minify oleh minifier buatan kami yang hati-hati, yang melindungi string, nilai url(), ekspresi calc(), dan elemen yang peka terhadap spasi. JavaScript di-minify oleh Terser, mesin yang sama dengan yang dipakai tools build populer, dengan mangling nama variabel opsional. Anda melihat ukuran asli, ukuran hasil minify, dan persentase yang dihemat, dan Anda bisa mengunduh hasilnya — tanpa mengunggah kode ke mana pun.

Fitur Utama

• Tiga bahasa — CSS, JavaScript, dan HTML.
• Terser untuk JavaScript — kompresi, penghapusan dead code, dan mangling opsional.
• Minify CSS yang aman — string, nilai url() tanpa tanda kutip, dan calc() tidak pernah rusak.
• Minify HTML yang konservatif — isi pre, textarea, script, dan style tidak disentuh.
• Komentar lisensi dipertahankan — pemberitahuan /*! … */ dijaga secara default.
• CSS inline — opsional minify blok <style> di dalam HTML.
• Laporan penghematan dalam byte dan persen.
• Buka, salin, dan unduh file .min.

Cara Minify Kode — Langkah demi Langkah

1. Pilih tab bahasa.
2. Tempel kode Anda atau klik Buka file. Contoh sudah dimuat agar Anda bisa melihat cara kerjanya.
3. Atur opsi — pertahankan komentar lisensi, mangle nama (JS), minify style inline (HTML).
4. Tekan Minify (CSS dan HTML juga diperbarui otomatis saat Anda mengetik).
5. Periksa penghematan dan pesan jika ada error.
6. Salin atau unduh file hasil minify.

Contoh Perhitungan

Stylesheet contoh di halaman ini berukuran 333 byte dengan komentar lisensi, komentar biasa, indentasi, dan spasi di sekitar titik dua dan kurung kurawal. Setelah di-minify, menjadi 248 byte — sekitar 25.5% lebih kecil:

/*! Theme v1 | MIT */ .card{margin:0 auto;padding:16px 24px;width:calc(100% - 2rem);background:url("img/bg one.png") no-repeat}.card>h2,.card .title:hover{color:#1B98E0;font-family:"Open Sans",sans-serif}@media (max-width:600px){.card{padding:8px}}

Perhatikan apa yang dipertahankan: komentar lisensi, spasi di dalam calc(), spasi di dalam nama file bertanda kutip, spasi di “.card .title” (yang berarti “.title di dalam .card”), dan spasi setelah “@media”. HTML contoh menyusut sekitar 28% sementara blok <pre> mempertahankan spasinya persis.

Cara Kerja Minify CSS di Sini

• Komentar dihapus, kecuali komentar lisensi /*! jika Anda mempertahankannya.
• String bertanda kutip dan nilai url() tanpa tanda kutip disalin persis.
• Spasi berurutan diringkas, dan spasi di sekitar { } ; , dan > dihapus.
• Spasi sebelum titik dua dihapus di dalam deklarasi tetapi dipertahankan di selector, karena “a :hover” dan “a:hover” artinya berbeda.
• Titik koma terakhir sebelum kurung kurawal penutup dihapus.
• Spasi di samping + dan - tidak pernah disentuh, sehingga calc(), selector sibling, dan nilai negatif tetap valid.

Minifier ini tidak menulis ulang warna, memperpendek nol, atau menggabungkan aturan — optimasi yang menghemat sedikit lebih banyak tetapi berisiko lebih besar. Untuk optimasi agresif di pipeline build, tools seperti cssnano atau Lightning CSS bisa melangkah lebih jauh.

Minify JavaScript dengan Terser

Terser mengurai JavaScript Anda menjadi syntax tree, menerapkan transformasi aman — menghapus dead code, melipat konstanta, memperpendek ekspresi — dan mencetaknya kembali tanpa spasi yang tidak perlu. Dengan mangle aktif, nama variabel dan fungsi lokal seperti monthlyRate menjadi satu huruf. Nama global dan properti objek dibiarkan, karena mengubahnya dapat merusak kode di tempat lain. Fungsi EMI contoh menjadi satu baris pendek yang menghitung hasil yang persis sama. Jika kode Anda memiliki kesalahan sintaks, Terser melaporkan baris dan kolomnya agar Anda bisa memperbaikinya.

Minify HTML Tanpa Kejutan

Spasi di HTML kadang bermakna: dua tautan yang dipisahkan spasi tampak berbeda dari dua tautan yang menempel, dan apa pun di dalam <pre> atau <textarea> ditampilkan persis. Karena itu minifier ini menghapus komentar (tetapi mempertahankan komentar kondisional Internet Explorer lama), meringkas spasi berurutan menjadi satu spasi, menghapus spasi di antara tag block-level, dan mengembalikan satu spasi di antara elemen inline umum. Script dan style dilindungi; blok <style> inline dapat di-minify secara opsional dengan minifier CSS.

Minify, Kompresi, dan Kecepatan Halaman

Minify dan kompresi server (gzip atau Brotli) saling melengkapi. Stylesheet umum bisa menyusut 25% dari minify lalu 70–80% lagi saat transfer terkompresi. Bersama caching, optimasi gambar (coba Kompres Gambar kami), dan lebih sedikit resource yang memblokir render, aset hasil minify membantu halaman mencapai skor Largest Contentful Paint yang baik. Tools seperti Google PageSpeed Insights menandai CSS dan JavaScript yang belum di-minify sebagai peluang perbaikan — minifier ini cara cepat memperbaikinya untuk situs kecil tanpa sistem build.

Alur Kerja Sederhana untuk Website Kecil

1. Simpan file yang bisa diedit sebagai style.css dan script.js di folder sumber.
2. Saat siap dipublikasikan, minify masing-masing di sini dan simpan sebagai style.min.css dan script.min.js.
3. Rujuk file .min di HTML Anda, tambahkan nomor versi seperti ?v=20261018 agar browser mengambil salinan baru.
4. Unggah file hasil minify dan uji halaman live di desktop dan ponsel.
5. Lain kali Anda mengubah sesuatu, edit file sumber dan ulangi — jangan pernah mengedit file .min secara langsung.

Saat proyek berkembang melebihi segelintir file, otomatiskan langkah-langkah ini dengan tool build seperti Vite, esbuild, atau webpack, yang menjalankan Terser dan minifier CSS untuk Anda di setiap build.

Debugging Kode Hasil Minify

Kode hasil minify sulit dibaca, sehingga error di produksi sering menunjuk ke “baris 1, kolom 4,312”. Tools build mengatasinya dengan source map, file yang memetakan posisi hasil minify kembali ke kode asli Anda; developer tools browser memuatnya secara otomatis. Minifier online ini tidak menghasilkan source map, yang menjadi alasan lain untuk menyimpan file asli Anda: jika ada yang rusak, tiru masalahnya dengan versi yang belum di-minify lebih dulu, perbaiki di sana, lalu minify lagi.

Kegunaan Umum

• Minify stylesheet dan script untuk website statis kecil.
• Memperkecil kode sebelum diunggah ke shared hosting seperti Hostinger.
• Mengurangi ukuran template email HTML, karena sebagian klien email memotong pesan yang sangat besar.
• Menyiapkan snippet untuk widget, bookmarklet, dan embed.
• Mengecek seberapa banyak yang bisa dihemat oleh langkah build.
• Memperbaiki peringatan PageSpeed “minify CSS / JavaScript”.
• Merapikan script dan style inline di landing page yang dibuat manual.

Kesalahan Umum yang Perlu Dihindari

• Menimpa file asli — simpan file sumber yang terbaca dan simpan salinan hasil minify secara terpisah.
• Lupa memperbarui tautan — arahkan halaman Anda ke style.min.css dan script.min.js.
• Mangling kode yang memakai nama saat runtime (misalnya function.name atau dependency injection di beberapa framework).
• Tidak menaikkan versi cache — browser mungkin menyimpan file lama; tambahkan query versi seperti ?v=2.
• Melewatkan pengujian setelah minify.

Pemecahan Masalah

• Error JavaScript dengan baris dan kolom — perbaiki kesalahan sintaks di sumber Anda, lalu minify lagi.
• “Tidak dapat memuat minifier JavaScript” — minify JS pertama memerlukan internet untuk mengambil Terser.
• Tata letak berbeda setelah minify HTML — spasi di antara elemen inline mungkin penting; tambahkan &nbsp; atau sesuaikan sumbernya.
• Penghematan sangat kecil — kode kemungkinan sudah ringkas atau sudah di-minify.
• Komentar lisensi hilang — pastikan “Pertahankan komentar /*! lisensi */” dicentang dan komentar diawali /*!.
• Output kosong — tempel kode dulu; pesan akan menjelaskan masalah yang ditemukan.

Glosarium Singkat

• Minify: menghapus karakter yang tidak diperlukan untuk eksekusi.
• Mangling: mengganti nama variabel lokal menjadi lebih pendek.
• Dead code: kode yang tidak akan pernah berjalan, aman dihapus.
• Source map: file yang memetakan kode hasil minify kembali ke aslinya untuk debugging.
• gzip / Brotli: kompresi sisi server yang diterapkan saat transfer.
• Resource pemblokir render: CSS atau JS yang menunda tampilan pertama halaman.
• Beautifier / formatter: kebalikan minifier — mengembalikan indentasi agar mudah dibaca.
• Cache busting: mengubah nama file atau query versi agar browser mengunduh file yang diperbarui.

Mengapa Memakai Minifier Ini?

Menangani CSS, JavaScript, dan HTML di satu tempat, memakai mesin teruji untuk JavaScript, melindungi bagian rumit CSS dan HTML, menampilkan penghematan nyata, dan menjaga kode Anda tetap privat — gratis dan tanpa daftar.

Minifier CSS / JS / HTML — Fakta Penting

Pertanyaan yang Sering Diajukan

Jelajahi Tools Prompt Minds Lainnya

Minifier CSS / JS / HTML bekerja dengan baik bersama tools gratis kami yang lain. Setiap tool Prompt Minds berjalan sepenuhnya di browser Anda — tanpa daftar, tanpa unggahan, tanpa watermark. Jelajahi semua tools gratis.