HTML Minifier

Apa Itu Minifikasi HTML?

Minifikasi HTML adalah proses memperkecil ukuran dokumen HTML tanpa mengubah cara browser merendernya. Sebuah HTML minifier menghapus karakter yang hanya ada untuk keterbacaan pengembang: spasi kosong antar tag, komentar, tag penutup opsional, dan nilai atribut yang redundan. Hasilnya secara fungsional identik dengan sumber aslinya namun lebih kecil dalam ukuran byte, yang berarti unduhan lebih cepat dan waktu first-paint yang lebih singkat bagi pengguna.

Browser mengurai HTML menjadi pohon DOM dan membuang sebagian besar spasi kosong selama proses tersebut. Rangkaian spasi dan baris baru di antara dua tag div tidak memiliki efek visual pada halaman yang dirender. Komentar juga diabaikan oleh parser. Minifikasi memanfaatkan aturan-aturan ini, menghapus apa yang akan dibuang parser sehingga tidak perlu ditransfer melalui jaringan.

Penghematan dari minifikasi HTML bervariasi per dokumen. Template yang banyak komentar, halaman yang di-render server dengan indentasi dalam, dan output CMS dengan style inline sering mengalami pengurangan ukuran 15-30% dari minifikasi saja. Untuk dokumen kecil, penghematan absolutnya sederhana, tetapi pada situs dengan lalu lintas tinggi bahkan beberapa kilobyte per pemuatan halaman dapat terakumulasi menjadi penghematan bandwidth nyata di jutaan permintaan.

Mengapa Menggunakan HTML Minifier Ini?

Tempel HTML Anda dan dapatkan output terminifikasi secara instan. Tidak perlu menginstal build tool, tidak ada file konfigurasi, tidak perlu membuat akun.

Kasus Penggunaan HTML Minifier

Apa yang Dihapus Minifikasi HTML

HTML minifier berfitur lengkap menerapkan beberapa transformasi di luar penghapusan spasi kosong. Tabel di bawah ini mencantumkan teknik yang paling umum, diurutkan dari yang paling aman (selalu lossless) hingga yang paling agresif (mungkin merusak kasus tepi jika diterapkan secara membabi buta).

Minifikasi vs. Kompresi Gzip

Para pengembang kadang bertanya apakah minifikasi masih diperlukan ketika server sudah menerapkan kompresi Gzip atau Brotli. Jawaban singkatnya: ya, dan keduanya bekerja paling baik secara bersamaan.

Minifikasi mengurangi input yang diproses Gzip, sehingga output terkompresi juga lebih kecil. Panduan PageSpeed Google merekomendasikan penerapan keduanya. Pada halaman tipikal, minifikasi menghemat 15-25% ukuran mentah dan Gzip mengompresi hasilnya sebesar 60-80% lagi. Gabungan keduanya, total ukuran transfer dapat turun menjadi 10-20% dari dokumen asli yang tidak diminifikasi dan tidak dikompres.

Contoh Kode

Berikut adalah contoh minifikasi HTML yang berfungsi dalam empat lingkungan. Setiap contoh menghapus komentar dan menggabungkan spasi kosong.

import { minify } from 'html-minifier-terser'

const html = `
  <div class="card">
    <!-- user profile -->
    <p>  Hello, world!  </p>
  </div>
`

const result = await minify(html, {
  collapseWhitespace: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeEmptyAttributes: true,
})
// → '<div class="card"><p>Hello, world!</p></div>'

import htmlmin

html = """
<div class="card">
  <!-- user profile -->
  <p>  Hello, world!  </p>
</div>
"""

result = htmlmin.minify(html, remove_comments=True, remove_empty_space=True)
# → '<div class="card"><p>Hello, world!</p></div>'

package main

import (
    "fmt"
    "github.com/tdewolff/minify/v2"
    "github.com/tdewolff/minify/v2/html"
)

func main() {
    m := minify.New()
    m.AddFunc("text/html", html.Minify)

    input := `<div class="card">
  <!-- user profile -->
  <p>  Hello, world!  </p>
</div>`

    result, _ := m.String("text/html", input)
    fmt.Println(result)
    // → <div class=card><p>Hello, world!</div>
}

# Install globally
npm install -g html-minifier-terser

# Minify a file
html-minifier-terser --collapse-whitespace --remove-comments input.html -o output.html

# Pipe from stdin
cat index.html | html-minifier-terser --collapse-whitespace --remove-comments

# With all common optimizations
html-minifier-terser \
  --collapse-whitespace \
  --remove-comments \
  --remove-redundant-attributes \
  --remove-empty-attributes \
  --minify-css true \
  --minify-js true \
  input.html -o output.min.html

Pertanyaan yang Sering Diajukan