HTML Küçültme

Nasıl çalışır?

Sayfanızın ya da e-posta şablonunuzun HTML kodunu sol panele yapıştırın; küçültülmüş hali sağ panelde belirir. Araç önce girintileri ve satır sonlarını atar: blok etiketler (div, p, li, tr) arasındaki boşluklar tamamen silinir, metin içindeki art arda boşluklar teke iner. İki satır içi öğe arasındaki tek boşluk ise korunur, çünkü <strong>%20</strong> indirim gibi bir cümlede o boşluk sayfada görünür. <!-- ... --> yorumları silinir; eski Internet Explorer için yazılmış <!--[if IE]> koşullu yorumları bu ayarda da kalır. Etiketlerin içindeki fazladan boşluklar temizlenir ama öznitelik tırnakları kaldırılmaz. <style> içindeki CSS ve <script> içindeki JavaScript de küçültülür; application/ld+json yapılandırılmış verisi tek satıra iner. Okunamayan bir betik varsa olduğu gibi bırakılır ve sonuç satırında sayılır. <pre> ve <textarea> içeriğine hiç dokunulmaz. Sonuç satırı dosyanın kaç bayttan kaça indiğini, kaç yorumun silindiğini ve kaç bloğun küçültüldüğünü yazar.

Bu araç minify html, html minifier aramalarıyla da biliniyor.

HTML küçültme nedir?

HTML küçültme, sayfa kodunun tarayıcıda aynı görünmesini sağlayarak gereksiz karakterlerini silmektir: geliştiricinin okuması için konan girintiler, satır sonları ve yorumlar. Kazanç sayfanın yapısına bağlıdır; derin girintili ve bol yorumlu şablonlarda belirgindir. Asıl büyük kazanç çoğu zaman sayfaya gömülü CSS ve JavaScript'ten gelir; bu araç onları da kendi küçültücüleriyle sıkıştırır.

Koşullu yorum nedir?

Koşullu yorum, <!--[if IE]> ... <![endif]--> biçiminde yazılan ve yalnız eski Internet Explorer sürümlerinin (ve Word altyapılı Outlook'un) içini okuyup uyguladığı özel bir HTML yorumudur. Diğer tarayıcılar bunu sıradan yorum sayıp atlar. Bugün sitelerde nadirdir ama e-posta şablonlarında Outlook düzeltmeleri için hâlâ yaygındır; bu yüzden küçültmede silinmemesi gerekir.

Neden muhafazakâr küçültme?

HTML'de boşluk her yerde anlamsız değildir. İki satır içi öğe arasındaki boşluk (Ahmet <b>Bilgiç</b>) sayfada görünür; silinirse kelimeler yapışır. <pre> içindeki girinti bir kod örneğinin ya da şiirin parçasıdır. Bu araç bu yüzden yalnız görünümü değiştirmeyeceği kesin olan boşlukları siler: blok etiketlerin arasını ve metin içindeki art arda boşlukları. Bölünmez boşluk (&nbsp;) boşluk sayılmaz, olduğu gibi kalır.

Daha saldırgan küçültücülerin yaptığı bazı şeyler bilerek yapılmaz: öznitelik tırnakları kaldırılmaz (class=kart gibi), kapanış etiketleri silinmez, boş öznitelikler kısaltılmaz. Bunlar birkaç yüz bayt daha kazandırır ama bazı şablon motorlarında ve e-posta istemcilerinde kodu bozar. Bir uyarı: CSS ile yan yana dizilmiş liste öğeleri (display: inline-block) arasındaki boşluk da silinir; menü öğeleriniz arasında boşluğa güveniyorsanız aralığı CSS'te margin ile verin.

Hangi durumda hangi ayar

E-posta şablonu: yorumları silin, içerdeki kodu küçültün. Bazı e-posta istemcileri (Gmail gibi) belli bir boyutu aşan iletiyi kırpar; küçültme şablonu bu sınırın altında tutmaya yardım eder. Koşullu yorumlar Outlook için gerekli olabildiği için araç onları kendiliğinden korur.

Yorumları korumanız gereken durumlar: sayfada Knockout gibi yorumla çalışan bir kütüphane varsa, ya da yorumlar bir içerik yönetim sisteminin işaretleriyse. <style>/<script> içine dokunmamanız gereken durum: betik bir şablon motorunun ({{ }} gibi) yer tutucularını taşıyorsa; küçültücü bunları JavaScript sanıp okuyamayabilir. Kodu yalnız okumak için açmak istiyorsanız HTML biçimlendirme aracı ters yönde çalışır.

Sık sorulanlar

HTML kodu nasıl küçültülür?

Kodu bu sayfadaki sol panele yapıştırın; yorumları ve gereksiz boşlukları atılmış, içindeki CSS ve JavaScript de sıkıştırılmış hali sağ panelde belirir. Kopyalayabilir ya da .html dosyası olarak indirebilirsiniz. Sonuç satırı kaç bayt kazandığınızı gösterir.

HTML küçültmek sayfanın görünümünü bozar mı?

Bu araç yalnız görünümü değiştirmeyecek boşlukları siler: blok etiketlerin arasını ve metindeki art arda boşlukları. Satır içi öğeler arasındaki tek boşluk, <pre> ve <textarea> içeriği korunur. Tek istisna CSS ile yan yana dizilmiş liste öğeleridir; aralarındaki boşluk da silinir, aralığı CSS'te vermeniz gerekir.

<!--[if IE]> yorumları neden silinmedi?

Bunlar koşullu yorumlardır: eski Internet Explorer ve bazı Outlook sürümleri bunları okuyup içindeki kodu çalıştırır. Silinirlerse o istemcilerde düzen bozulabilir; araç bu yüzden onları her ayarda korur.

Kodum bir sunucuya gidiyor mu?

Hayır. Küçültme, CSS ve JavaScript küçültücüleri dahil tamamen tarayıcınızın içinde çalışır; HTML'iniz bu sayfadan çıkmaz.