HTML kodunuzu sıkıştırın veya güzelleştirin. Yorum satırlarını kaldırın, boşlukları optimize edin.
HTML minification, şablonlardaki yorumları ve gereksiz boşlukları kaldırarak sayfa boyutunu küçültür. Gzip sıkıştırmasıyla birlikte kullanıldığında kayda değer performans artışı sağlar. Beautifier ise tek satıra indirilmiş HTML'yi yeniden okunabilir formata dönüştürür.
HTML dosyaları genellikle geliştirme sırasında eklenen girintiler, açıklayıcı yorumlar ve fazla boşluk karakterleri içerir. Bu karakterler sayfanın görsel çıktısını etkilemez ancak dosya boyutunu gereksiz yere artırır. Özellikle çok sayfalı projelerde bu fazlalık toplam bant genişliği tüketiminde belirgin bir fark oluşturur.
1. Mod Seçin: Sayfanın üst kısmından "Sıkıştır" veya "Güzelleştir" modunu belirleyin. Sıkıştırma modu HTML'yi küçültür, güzelleştirme modu okunabilir hale getirir.
2. HTML Kodunu Girin: Metin alanına HTML kodunuzu yapıştırın veya bir .html dosyasını sürükleyip bırakın.
3. Seçenekleri Belirleyin: "Yorumları kaldır", "Fazla boşlukları kaldır" ve "Tırnak işaretlerini kaldır" seçeneklerini ihtiyacınıza göre ayarlayın. Tırnak kaldırma seçeneği, tek kelimelik öznitelik değerlerindeki tırnak işaretlerini siler.
4. İşleyin ve Alın: "İşle" düğmesine tıkladığınızda çıktı sağ panelde görünür. Orijinal ve çıktı boyutları ile tasarruf yüzdesi otomatik olarak hesaplanır. Sonucu "Kopyala" ile panoya alabilir veya "İndir" ile dosya olarak kaydedebilirsiniz.
HTML sıkıştırma sırasında şu öğeler işlenir:
HTML yorumları: <!-- ... --> biçimindeki geliştirici notları tamamen kaldırılır. Açıklama amaçlı eklenen bu yorumlar, üretim ortamında gereksizdir ve dosya boyutunu artırır.
Fazla boşluklar ve satır sonları: Etiketler arasındaki gereksiz boşluklar, girintiler ve boş satırlar kaldırılır. Ardışık boşluk karakterleri tek bir boşluğa indirgenir.
Özniteliklerdeki tırnak işaretleri: İsteğe bağlı olarak, tek kelimelik öznitelik değerlerindeki tırnak işaretleri kaldırılabilir (ör. class="main" yerine class=main). Bu seçenek birkaç byte ek tasarruf sağlar.
Bu işlemlerin hiçbiri sayfanın tarayıcıdaki görünümünü veya davranışını değiştirmez.
HTML dosyası tarayıcının ilk indirdiği kaynaktır. Bu dosyanın boyutunun küçük olması, sayfanın parse edilme süresini kısaltır ve ilk anlamlı içeriğin (First Contentful Paint) daha erken görüntülenmesini sağlar. Sunucu tarafı gzip veya brotli sıkıştırmasıyla birlikte uygulandığında, minify edilmiş HTML daha yüksek sıkıştırma oranlarına ulaşır ve toplam indirme süresi önemli ölçüde azalır.
HTML minify sayfa görünümünü etkiler mi?
Hayır. Minification yalnızca boşluk ve yorum gibi işlevsel olmayan karakterleri kaldırır; tarayıcı tarafından oluşturulan görsel çıktı değişmez. CSS ve JavaScript'in çalışması da etkilenmez.
HTML minify ne kadar boyut tasarrufu sağlar?
Tipik bir HTML dosyasında %10–30 arası boyut azalması sağlanır. Çok sayıda yorum ve geniş girintileme kullanan dosyalarda bu oran daha yüksek olabilir. Gzip ile birlikte toplam tasarruf %60–80'e çıkabilir.
Inline script ve style etiketleri için güvenli mi?
HTML minification işlemi, <script> ve <style> etiketlerinin içeriğini doğrudan değiştirmez. Ancak bu etiketler arasındaki boşluk düzenlemesi yapılabilir. Kritik inline kodlarınız varsa, işlem sonrasında çıktıyı kontrol etmeniz önerilir.
Koşullu yorumlar (conditional comments) ne olur?
Internet Explorer'a özel koşullu yorumlar (<!--[if IE]> gibi) standart HTML yorumları olarak algılanır ve "Yorumları kaldır" seçeneği aktifken silinir. Günümüzde IE desteği gerektirmeyen projelerde bu sorun oluşturmaz. IE desteği gerekiyorsa "Yorumları kaldır" seçeneğini kapatabilirsiniz.
Geliştirme ortamında HTML'yi minify etmeli miyim?
Geliştirme ortamında minify etmek önerilmez. Okunabilir HTML, hata ayıklama ve kod inceleme süreçlerini kolaylaştırır. Minification yalnızca canlı ortam (production) build sürecinde uygulanmalıdır. Geliştirme sırasında güzelleştirilmiş kodu, canlıda sıkıştırılmış kodu kullanmak en iyi pratiktir.