HTML Küçültücü

HTML Küçültme Nedir?

HTML küçültme, tarayıcının sayfayı render etme biçimini değiştirmeden bir HTML belgesinin boyutunu azaltma işlemidir. Bir HTML küçültücü, yalnızca geliştirici okunabilirliği için var olan karakterleri kaldırır: etiketler arasındaki boşluklar, yorumlar, isteğe bağlı kapanış etiketleri ve gereksiz öznitelik değerleri. Çıktı işlevsel olarak kaynakla aynıdır ancak bayt boyutu daha küçüktür; bu da kullanıcılar için daha hızlı indirme ve daha kısa ilk boyama süresi (time-to-first-paint) anlamına gelir.

Tarayıcılar HTML'yi bir DOM ağacına ayrıştırır ve bu süreçte çoğu boşluğu atar. İki div etiketi arasındaki boşluk ve satır sonu dizileri render edilen sayfa üzerinde hiçbir görsel etkiye sahip değildir. Yorumlar da ayrıştırıcı tarafından yoksayılır. Küçültme bu kurallardan yararlanarak, ayrıştırıcının zaten atacağı şeyleri kaldırır; böylece bu verinin ağ üzerinden hiç iletilmesi gerekmez.

HTML küçültmeden elde edilen kazanım belgeye göre değişir. Yoğun yorumlu şablonlar, derin girintiye sahip sunucu taraflı render edilmiş sayfalar ve satır içi stiller içeren CMS çıktıları genellikle yalnızca küçültmeyle %15-30 boyut küçülmesi sağlar. Küçük belgeler için mutlak kazanım mütevazı olabilir; ancak yüksek trafikli sitelerde milyonlarca istek genelinde birkaç kilobayt bile gerçek bant genişliği tasarrufu anlamına gelir.

Bu HTML Küçültücüyü Neden Kullanmalısınız?

HTML'nizi yapıştırın ve küçültülmüş çıktıyı anında alın. Yüklenecek derleme aracı yok, yapılandırma dosyası yok, hesap oluşturma yok.

HTML Küçültücü Kullanım Senaryoları

HTML Küçültme Neleri Kaldırır

Tam özellikli bir HTML küçültücü, boşluk kaldırmanın ötesinde çeşitli dönüşümler uygular. Aşağıdaki tablo en yaygın teknikleri, en güvenliden (her zaman kayıpsız) en agresife (körü körüne uygulandığında uç durumları bozabilecek) doğru sırayla listeler.

Küçültme ve Gzip Sıkıştırma Karşılaştırması

Geliştiriciler zaman zaman sunucu Gzip veya Brotli sıkıştırması zaten uyguluyorken küçültmenin hâlâ gerekli olup olmadığını sorar. Kısa yanıt: evet, ve birlikte en iyi sonucu verirler.

Küçültme, Gzip'in işlediği girdiyi azaltır; böylece sıkıştırılmış çıktı da daha küçük olur. Google'ın PageSpeed kılavuzları her ikisinin de uygulanmasını önerir. Tipik bir sayfada küçültme ham boyutun %15-25'ini tasarruf ederken Gzip sonucu %60-80 daha da sıkıştırır. Birlikte, toplam aktarım boyutu orijinal küçültülmemiş ve sıkıştırılmamış belgenin %10-20'sine kadar düşebilir.

Kod Örnekleri

Aşağıda dört ortamda çalışan HTML küçültme örnekleri yer almaktadır. Her örnek yorumları kaldırır ve boşlukları daraltır.

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

Sıkça Sorulan Sorular