Bu araç hakkında
HTML küçültme, sayfanın işlenme biçimini değiştirmeden dosya boyutunu küçültmek için bir web sayfasının kaynağından gereksiz karakterleri (etiketler, yorumlar, gereksiz alıntılar, isteğe bağlı kapatma etiketleri arasındaki boşluklar) çıkarır. Tasarruflar sayfa başına mütevazı düzeydedir (genellikle %10-30), ancak özellikle statik siteler veya dinamik sıkıştırma olmadan sunulan sayfalar için birçok istek karşısında bileşiktir.
Bu küçültücü, blok düzeyindeki öğeler arasındaki boşlukları kaldırır, önemli olmayan metin içindeki boşluk dizilerini daraltır, HTML yorumlarını çıkarır (IE koşullu yorumları hariç), HTML5 spesifikasyonunun izin verdiği yerlerde gereksiz özellik alıntılarını kaldırır ve spesifikasyonun izin verdiği yerlerde isteğe bağlı kapatma etiketlerini (</p>, </li>) kaldırır. Sonuç, her tarayıcıda kaynakla aynı şekilde oluşturulur.
Küçültme, sunucu düzeyinde gzip veya Brotli sıkıştırmasıyla eşleştirildiğinde en kullanışlıdır. Sıkıştırma, küçültmenin sağladığı tasarrufların çoğunu zaten ortadan kaldırıyor ancak bu ikisinin birleşimi, özellikle bant genişliği maliyetlerinin önemli olduğu yüksek trafikli siteler için hâlâ tek başına sıkıştırmayı geride bırakıyor.
Neden HTML'yi Küçültün?
Daha küçük HTML, özellikle daha yavaş bağlantılarda ve mobil ağlarda daha hızlı yüklenir. Sayfa ağırlığı, Önemli Web Verilerini doğrudan etkiler — En Büyük İçerikli Boyama ve İlk Bayta Kadar Geçen Süre, sunucu ayrıştırmak için daha az HTML döndürdüğünde iyileşir. SEO sıralamasının Core Web Vitals puanlarına bağlı olduğu siteler için küçültme ölçülebilir bir gelişmedir.
Küçültülmüş HTML aynı zamanda bant genişliği maliyetlerini de geniş ölçekte azaltır. Sayfa başına 10 KB tasarrufla günde bir milyon sayfaya hizmet veren bir site, günlük 10 GB çıkış tasarrufu sağlar. Veri aktarımıyla faturalandırılan CDN'lerden sunulan statik siteler için etki bileşikleri.
Teknik Detaylar
Minifier, HTML jetonunu jeton bazında işler. Blok düzeyindeki öğeler (<div>, <p>, <ul>) arasındaki boşluk, oluşturmayı etkilemediğinden kaldırıldı. Satır içi bağlamların (<span>, <a>, metin içeriği) içindeki boşluklar, oluşturmayı etkileyebileceğinden korunur.
Yorumlar varsayılan olarak çıkarılır ancak koşullu yorumlar (<!--[if IE]>) korunur. Öznitelik tırnak işaretleri, HTML5 ayrıştırıcısının izin verdiği durumlarda kaldırılır; boşluk veya özel karakterler içermeyen tek sözcüklü öznitelik değerleri, tırnak işaretlerini atlayabilir.
İsteğe bağlı kapanış etiketleri HTML5 spesifikasyonuna göre atlanır: </p>, </li>, </td> ve kapanışlarını ima eden bir kardeş tarafından takip edildiğinde birkaç etiket daha atlanabilir. Bu, okunması alışılmadık ancak tarayıcıların aynı şekilde ayrıştırdığı geçerli HTML5'tir.
Sık sorulan sorular
- HTML küçültmesi neyi kaldırır?
- Etiketler arasında gereksiz boşluk, HTML yorumları (<!-- -->), isteğe bağlı kapatma etiketleri (</li>, </p>, </td>), varsayılan özellik değerleri (girişlerde type = "text") ve boolean özellik değerleri (disabled = "disabled" → devre dışı).
- Küçültme sayfamı bozabilir mi?
- Nadiren, ancak CSS'niz satır içi öğeler arasındaki boşluklara dayanıyorsa veya JavaScript, innerHTML karşılaştırmaları kullanıyorsa mümkündür. Her zaman küçültülmüş çıktıyı test edin. Araç, varsayılan olarak muhafazakar ayarları kullanır.
- Next.js gibi bir çerçeve kullanırsam HTML'yi küçültmeli miyim?
- Çoğu modern çerçeve (Next.js, Nuxt, Angular), üretim yapılarında HTML'yi otomatik olarak küçültür. Bu araç, statik HTML dosyaları, e-posta şablonları ve derleme sistemi olmayan projeler için kullanışlıdır.
- Bu, satır içi CSS ve JavaScript'i de küçültüyor mu?
- Bu araç HTML yapısına odaklanır. Satır içi <stil> ve <script> içerikleri olduğu gibi korunur. Bunlar için en iyi sonuçları elde etmek üzere özel CSS ve JavaScript küçültücüleri kullanın.
- İsteğe bağlı kapatma etiketlerinin kaldırılması güvenli midir?
- HTML5 spesifikasyonuna göre evet, ancak sonucun okunması daha zordur. Bazı takımlar, netlik sağlamak amacıyla bu dönüşümü devre dışı bırakarak hafif boyut cezasını kabul ediyor.
- HTML'im bir sunucuya yüklendi mi?
- Hayır. Küçültücü tarayıcınızda çalışır.
- Bu, html-minifier-terser ile nasıl karşılaştırılır?
- html-minifier-terser, kanonik Node.js HTML küçültücüsüdür ve biraz daha agresif sonuçlar üretir. Bu araç, derleme kurulumu olmadan tarayıcı tarafında kullanım için aynı dönüşümleri kapsar.
- Her zaman mı yoksa seçerek mi küçültmeliyim?
- Her zaman üretim için. Sürüm kontrolünde kaynak kodu için asla; Kaynaktaki okunabilir HTML, bakım için gereklidir.