HTML Küçült _

HTML küçültme nasıl çalışır?

Küçültücü, girişinizi olduğu gibi korunacak bölgeler (<pre>, <textarea>, <script>, <style>) ile boşlukların ve yorumların güvenle katlanabileceği düzenlenebilir bölgeler arasında ayrım yapan küçük bir durum makinesiyle işler.

1. Korunacak blokların tokenizasyonu. Tarayıcı, girişi karakter karakter okur ve bir <pre>, <textarea>, <script> veya <style> açma etiketiyle karşılaştığında koruma durumuna geçer. Bu etiketlerin içindeki her şey, eşleşen kapanış etiketine kadar bayt bayt kopyalanır.
2. Düzenlenebilir boşlukların katlanması. Düzenlenebilir bölgelerde tarayıcı, her ardışık boşluk, sekme ve satır sonu dizisini tek bir boşluğa katar; ardından etiket sınırları etrafındaki baştaki ve sondaki boşlukları kırpar. Görünür metin, tarayıcının onu oluşturduğu gibi yeniden akar.
3. Yorumların kaldırılması. Geçiş açıkken <!-- ... --> blokları kaldırılır. IE koşullu yorumları (<!--[if IE]> ... <![endif]-->), eski e-posta istemcileri hâlâ onlara bel bağladığından, ilgili geçiş açıkken korunur.
4. Mantıksal özniteliklerin katlanması. checked="checked", disabled="disabled" ve required="required" gibi ayrıntılı biçimler yalın öznitelik adına küçülür. HTML5 spec, yalın biçimi anlam olarak özdeş kabul eder; dolayısıyla oluşturulan DOM değişmez.
5. Bayt farklarının raporlanması. Hem özgün hem de küçültülmüş metin new TextEncoder().encode(...).byteLength ile ölçülür; bu, bir CDN veya HTTP sunucusunun kabloda gördüğü UTF-8 bayt sayısıdır. Metrik şerit özgün boyutu, küçültülmüş boyutu, tasarruf edilen baytları ve tasarruf yüzdesini gösterir.

HTML neden küçültülür?

• Daha hızlı sayfa yüklemeleri. Daha küçük HTML tarayıcıya daha çabuk ulaşır ve parser daha erken biter. Mobil ağlarda bayt tasarrufları doğrudan daha hızlı First Contentful Paint ve daha iyi Lighthouse performans puanına dönüşür.
• Daha düşük CDN egress faturaları. CloudFront, Cloudflare ve Fastly gigabayt egress başına fatura keser. Aylık milyonlarca görüntülemede %20'lik HTML azalması, herhangi bir resim veya betik optimizasyonu gelmeden önce faturada gerçek tasarrufa dönüşür.
• Daha temiz pull-request diff'leri. Bir repoya işlenen önceden derlenmiş statik HTML, her şablon değişikliği girintiyi yeniden düzenleyince gürültülü hale gelir. Dist klasöründe küçültülmüş HTML, boşluk gürültüsü yerine gerçek içerik değişikliklerine odaklanan daha dar PR diff'leri üretir.
• Daha küçük gömüler ve snippet'ler. E-posta şablonları, üçüncü taraf widget snippet'leri ve JSON veya YAML yapılandırmalarında saklanan HTML hepsi aynı bayt kesintisinden yararlanır. Küçültülmüş gömüler, işlemsel e-postaları ESP boyut sınırlarının altında tutar ve widget paketlerini küçültür.

Yaygın uygulamalar

HTML küçültme, neredeyse her statik site veya JAMstack derleme hattının sonunda ve baytların kaynak okunabilirliğinden daha önemli olduğu birkaç çalışma zamanı bağlamında görünür.

• Statik site derleme adımları: Eleventy, Hugo, Astro ve Next.js prodüksiyon derlemeleri, dağıtılan paketin kaynaktan küçük olması için HTML'yi dist klasörüne yazmadan önce bir küçültücüden geçirir.
• İşlemsel e-postalar: ESP'ler (SendGrid, Postmark, Mailgun) HTML gövde boyutunu sınırlar ve satır içi CSS genişlemesi bu sayıyı hızla artırır. Göndermeden önce gövdeyi küçültmek, iletiyi sınırın altında tutar.
• Gömülü widget'lar: satır içi HTML olarak gönderilen üçüncü taraf widget'lar ve sohbet snippet'leri, ana sayfa her ziyarette bunları indirmek zorunda olduğundan her bayt kesintisinden yararlanır.

Uygulamalı bir örnek

İki boşluklu girintiyle 500 baytlık ayrıntılı bir form snippet'i, satırlar arasında üç satır sonu, üstte bir HTML yorum bloğu ve <input type="checkbox" checked="checked" /> yapıştırın. Her seçenek açıkken çıktı yaklaşık 300 bayta küçülür — yaklaşık %40 tasarruf — oluşturulan DOM ağacı ise kaynakla bayt eşit kalır.

Küçültme HTML'imi bozar mı?

Hayır, varsayılan geçişlerle kullanıldığında. Küçültücü, <pre>, <textarea>, <script> ve <style> etiketlerinin içeriğini olduğu gibi korur; ilgili geçiş açıkken IE koşullu yorumları değişmeden bırakır; yalnızca HTML5 parser'ın önemsiz olarak sınıflandırdığı boşlukları katar. Oluşturulan DOM ağacı kaynakla bayt eşittir. Agresif geçişler (boş-öznitelikleri-kaldır), kasıtlı olarak value="" veya alt="" kullanan snippet'lerin davranışını değiştirebilir; bu nedenle bunları açarsanız çıktıyı gözden geçirin.

Bu araç satır içi CSS ve JS'yi küçültür mü?

Bu araçta hayır. Satır içi <style> ve <script> gövdeleri, küçültücünün bir dize sabitinin veya regex'in içindeki boşluğu katarak CSS kuralını ya da JS ifadesini bozmaması için olduğu gibi korunur. CSS'e özgü küçültme için CSS Minifier; JS için JS Minifier kullanın. HTML Küçültücüsü markup'ın kendisine odaklanır.

Ne kadar tasarruf edebilirim?

Elle yazılmış HTML'de tipik tasarruf, kaynağın ne kadar girinti, boş satır ve ayrıntılı öznitelik biçimi kullandığına bağlı olarak yüzde 10 ile 30 arasında değişir. Next.js gibi çerçevelerden önceden oluşturulmuş statik HTML genellikle %15 ile %25 arasında tasarruf sağlar; çünkü çerçeve bazı optimizasyonları zaten yapar ancak insan okunabilir boşlukları bırakır. Yoğun yorumlu şablonlar ve derin iç içe geçmiş e-posta tarzı HTML, %40 veya daha fazlasına ulaşabilir.

pre içeriği korunur mu?

Evet. Küçültücü, <pre>, <textarea>, <script> ve <style> bloklarını açıkça olduğu gibi korunacak bölgeler olarak tokenize eder ve içeriklerini çıktıya bayt bayt kopyalar. Bu etiketlerin içindeki boşluklar, satır sonları ve girintiler dokunulmadan kalır; dolayısıyla kod örnekleri ve ASCII sanatı küçültmeden sonra tam olarak aynı şekilde görüntülenir.

Tarayıcı taraflı HTML küçültme, derleme hattınızı basit ve markup'ınızı küçük tutar. Yukarıya herhangi bir HTML yapıştırın, seçenek geçişlerini ayarlayın ve küçültülmüş çıktıyı kopyalayın ya da indirin — yükleme yok, hesap yok, satıcı kütüphanesi yok.