Tüm makaleler

HTML küçültme: işaretlemedeki boşluklar neden önemli

İlk bakışta HTML işaretlemesindeki boşluklar önemsiz görünür — tarayıcı zaten her şeyi doğru şekilde render eder. Ama belgedeki birkaç nokta bu kuralın istisnasıdır ve orada boşlukların kaldırılması sayfanın görünümünü gerçekten değiştirir.

Güvenle silinebilecekler

Küçültücü, <!-- ... --> biçimindeki HTML yorumlarını, etiketler arasındaki gereksiz boşluk ve satır sonlarını, değerinde boşluk olmayan öznitelikleri saran tırnak işaretlerini ve bazen </li> gibi isteğe bağlı kapanış etiketlerini siler.

Klasik hata: iki kelimenin birleşmesi

İki satır içi (inline) öğe arasındaki tek bir boşluk, kaynak koddaki bir biçimlendirme değil, render edilmiş sayfada gerçekten görünen bir aralıktır. <span>merhaba</span> <span>dünya</span> aralıklı şekilde "merhaba dünya" olarak görünür; bu boşluk dikkatsizce silinirse sonuç sessizce "merhabadünya" olarak birleşir. Dikkatli bir küçültücü yalnızca görsel etkisi olmayan boşlukları siler — örneğin blok düzeyindeki etiketler arasındakileri — ve satır içi öğeler arasındaki boşluğa dokunmaz.

Geliştirme sırasında okunabilirlik ile küçültme

Geliştirme aşamasında HTML genellikle girintili ve biçimlendirilmiş bırakılır, çünkü bu, DevTools'ta yapıyı görmeyi kolaylaştırır. Küçültme yalnızca yayına almadan önceki son derlemeye uygulanır; o noktada insan tarafından okunabilirliğin artık bir önemi kalmaz.

Bu neden gerekli

  • Canlıya almadan önce bir HTML sayfasının boyutunu küçültmek.
  • Geliştirici yorumlarını son işaretlemeden temizlemek.
  • Boşlukları yalnızca gerçekten güvenli olan yerlerde silerek hatalardan kaçınmak.

Mobil bağlantılarda sayfa boyutunun önemi

Türkiye'de kullanıcıların önemli bir kısmı sitelere mobil cihazlar ve 4G üzerinden erişir. HTML, bir sayfadaki görseller veya JavaScript kadar ağır olmasa da, gereksiz boşluk ve yorumlardan arındırılmış bir HTML dosyası, özellikle bağlantısı daha yavaş ya da veri paketi sınırlı kullanıcılar için ilk render süresine küçük ama gerçek bir katkı sağlar — diğer optimizasyonların yerini tutmasa da, onları tamamlayan ucuz bir adımdır.

Aracı dene