HTML Boyut Analizi

Görünür metin

Nedir? Ziyaretçinin ekranda okuduğu yazıların tamamı: başlıklar, paragraflar, menü öğeleri, buton ve link metinleri, sayfa başlığı (title).

Neden önemli? Sayfanın asıl değeri buradadır; arama motorları içeriği bu metinden anlar. Bu grubun büyük olması genellikle sorun değildir.

Ne yapmalı?

• Bu alan sayfanızın asıl içeriğidir; küçültmeye çalışmayın. Ziyaretçiye ve Google’a değer katan kısım burası.
• Aynı menü ya da metin mobil ve masaüstü için iki kez yazılıp biri gizleniyorsa tek kopyaya indirin.
• Sayfada hiç gösterilmeyen (gizlenmiş) uzun metinleri kaldırın; arama motorları gizli metne değer vermez.

Boşluk ve girinti

Nedir? Etiketler arasındaki boşluk, sekme ve satır sonu karakterleri. Kodu insanlar için okunaklı yapar; tarayıcı bunları ekranda göstermez.

Neden önemli? Gereksiz bayttır ama sıkıştırma (gzip/Brotli) tekrar eden boşlukları çok iyi küçülttüğü için ağ üzerindeki etkisi genelde küçüktür.

Ne yapmalı?

• Yayına çıkan HTML’i küçültün (minify): boşluklar ve satır sonları otomatik silinir. WordPress’te önbellek eklentilerinin “HTML küçült” ayarı, diğer altyapılarda derleme aracının minify seçeneği bu işi yapar.
• Sunucuda sıkıştırmanın (gzip ya da daha iyisi Brotli) açık olduğunu kontrol edin; boşluklar ağda zaten büyük ölçüde küçülür.
• Geliştirirken okunaklı kod yazmaya devam edin; küçültme yalnızca yayına çıkan kopyaya uygulanır.

HTML etiketleri

Nedir? Sayfanın yapısını oluşturan etiket adları ve köşeli parantezler: <div>, <section>, <a>, </p> gibi. Belge türü bildirimi (<!DOCTYPE>) de buradadır.

Neden önemli? Çok yüksekse sayfada gereksiz iç içe katmanlar (“div çorbası”) olabilir. Her etiket tarayıcıda bir öğeye dönüşür; öğe sayısı arttıkça sayfa yavaşlar.

Ne yapmalı?

• Tema ya da sayfa oluşturucu her öğeyi birkaç kat <div> ile sarıyorsa daha sade bir tema veya bileşen yapısı seçin.
• Uzun listeleri (ürün, yorum, haber) tek seferde değil, sayfalayarak ya da “daha fazla göster” ile yükleyin.
• Sayfadaki öğe sayısını (DOM boyutu) 1.500’ün altında tutmaya çalışın. Öğe arttıkça sayfa hem geç çizilir hem de tıklamalara geç tepki verir (INP).

class öznitelikleri

Nedir? Etiketlere eklenen class="…" değerleri. CSS’in hangi öğeyi nasıl biçimlendireceğini bu adlar belirler.

Neden önemli? Utility-first CSS (ör. Tailwind) kullanan sitelerde çok yer kaplayabilir. Aynı adlar çok tekrar ettiği için sıkıştırmayla büyük ölçüde küçülür.

Ne yapmalı?

• Tailwind gibi araçlar kullanıyorsanız tekrar eden uzun sınıf listelerini ortak bileşen sınıflarında toplayın.
• Derleme aracınızın kullanılmayan CSS sınıflarını temizlediğinden (purge) emin olun.
• Sıkıştırma bu alanı çok küçültür: “Sıkıştırılmış” görünümde payı küçükse önceliği düşüktür.

Link ve kaynak adresleri

Nedir? Linklerin (href) ve görsel, script gibi kaynakların (src, srcset) adresleri.

Neden önemli? Uzun, parametreli adresler ve çok sayıda link bu grubu büyütür. srcset’teki her görsel boyutu ayrı bir adres olarak yazılır.

Ne yapmalı?

• Site içi linklerde tam adres yerine kısa (göreli) adres kullanın: https://www.siteniz.com/kategori/ yerine /kategori/.
• İç linklerden takip parametrelerini (?utm_source=… gibi) çıkarın. Hem boyutu büyütürler hem de aynı sayfanın birden çok adresle görünmesine yol açarlar.
• Görsellerin srcset listesinde kullanılmayan boyutları çıkarın; çoğu sayfa için 3–4 boyut yeterlidir.
• Bir kartta aynı hedefe giden birden fazla link varsa (görsel, başlık, “devamı” gibi) tek linke indirin.

Diğer öznitelikler

Nedir? Etiketlere ek bilgi veren diğer alanlar: id, alt, title, aria-*, data-*, width/height ve meta etiketlerinin content değerleri.

Neden önemli? alt ve aria-* erişilebilirlik için gereklidir. Ancak çerçevelerin eklediği uzun data-* değerleri ve tekrar eden öznitelikler şişkinlik yaratabilir.

Ne yapmalı?

• Eklentilerin ve çatıların bıraktığı, kullanılmayan data-* özniteliklerini temizleyin.
• alt ve aria-* özniteliklerine dokunmayın; erişilebilirlik ve görsel arama için gereklidir.
• Görsellerdeki width ve height değerlerini koruyun; sayfa yüklenirken kaymayı (CLS) önlerler.

Satır içi CSS

Nedir? HTML içine doğrudan yazılmış stil kodu: <style> etiketleri ve öğelere tek tek yazılan style="…" öznitelikleri.

Neden önemli? Ekranın ilk görünen kısmı için gereken (kritik) CSS’in satır içi olması sayfanın hızlı çizilmesini sağlar. Ama sitenin tüm CSS’i HTML’e gömülürse her sayfada yeniden indirilir ve önbelleğe alınamaz.

Ne yapmalı?

• HTML içinde yalnızca ekranın ilk görünen kısmı için gereken CSS’i (kritik CSS) bırakın.
• Geri kalan stilleri harici bir .css dosyasına taşıyın; tarayıcı onu önbelleğe alır ve sonraki sayfalarda yeniden indirmez.
• Öğelere tek tek yazılmış style="…" değerlerini ortak sınıflara çevirin.

Satır içi JavaScript

Nedir? HTML içine doğrudan yazılmış JavaScript: src’siz <script> etiketleri ve onclick gibi olay öznitelikleri.

Neden önemli? Harici .js dosyaları önbelleğe alınırken satır içi kod her sayfa görüntülemede yeniden iner. Büyük satır içi scriptler sayfa açılırken tarayıcıyı meşgul eder.

Ne yapmalı?

• Büyük kodları harici .js dosyasına taşıyıp defer ile yükleyin; önbelleğe alınır ve sayfanın açılışını bekletmez.
• Analitik, reklam ve canlı destek kodlarını gözden geçirip kullanılmayanları kaldırın. Google Tag Manager’da birikmiş eski etiketler sık görülen bir şişkinlik nedenidir.
• Aynı ayar kodunun sayfada birkaç kez tekrarlanıp tekrarlanmadığına bakın.

JSON / sayfa durumu (hydration)

Nedir? Modern JavaScript çatılarının sayfayı tarayıcıda “canlandırmak” (hydration) için HTML’e gömdüğü veri: __NEXT_DATA__, window.__INITIAL_STATE__ gibi.

Neden önemli? Çoğu zaman sayfada zaten görünen içeriğin ikinci bir kopyasıdır; büyükse sayfa iki kez taşınıyor demektir. HTML ile aynı yüksek öncelikte indiği için diğer kaynakları geciktirir.

Ne yapmalı?

• Sayfaya yalnızca gerçekten kullanılan verileri gönderin: listede 5 alan gösteriliyorsa 50 alanı göndermeyin.
• Uzun listeleri sayfalayın ya da gerektiğinde yükleyin.
• Next.js ve Nuxt’ta sunucu bileşenleri, Astro gibi çatılarda kısmi hydration bu veriyi büyük ölçüde azaltır.

Yapısal veri (JSON-LD)

Nedir? Sayfanın ve markanın ne olduğunu arama motorlarına makine diliyle anlatan <script type="application/ld+json"> blokları.

Neden önemli? SEO için değerlidir ve genelde küçüktür. Çok büyükse aynı veri birden fazla kez tekrarlanıyor veya sayfada görünmeyen içerik işaretleniyor olabilir.

Ne yapmalı?

• Yapısal veriyi kaldırmayın; zengin sonuçlar ve yapay zekâ aramaları için değerlidir. Sadeleştirin.
• Ayrı blokları tek bir @graph bloğunda toplayın; Organization ve WebSite gibi tanımları bir kez yazıp @id ile bağlayın. Schema Oluşturucu bu yapıda kod üretir.
• Sayfada görünmeyen içeriği (ör. tüm ürün kataloğunu) işaretlemeyin.

Satır içi SVG

Nedir? HTML içine doğrudan yazılmış vektör çizimler: ikonlar, logolar, illüstrasyonlar.

Neden önemli? Küçük ikonlar için idealdir (ek istek gerekmez). Ancak aynı ikon onlarca kez tekrar ediyorsa veya karmaşık illüstrasyonlar gömülüyse HTML hızla büyür.

Ne yapmalı?

• Aynı ikon sayfada çok kez kullanılıyorsa bir kez <symbol> olarak tanımlayıp her yerde <use> ile çağırın.
• Büyük çizim ve illüstrasyonları .svg dosyası olarak <img> ile yükleyin; tarayıcı önbelleğe alır.
• SVG’leri SVGO gibi bir araçla optimize edin; tasarım programlarının bıraktığı gereksiz kodlar temizlenir.

Gömülü dosyalar (base64)

Nedir? Görsel veya fontların metne çevrilip (base64) doğrudan HTML’e yazılmış hali: data:image/png;base64,… gibi.

Neden önemli? Dosya boyutu yaklaşık üçte bir büyür, önbelleğe alınamaz, sıkıştırmayla da pek küçülmez ve HTML ile aynı yüksek öncelikte indiği için asıl içeriği geciktirir.

Ne yapmalı?

• 1–2 KB’tan büyük gömülü görsel ve fontları ayrı dosya olarak yükleyin; önbelleğe alınırlar ve sayfanın ilk açılışını geciktirmezler.
• Fontları base64 yerine .woff2 dosyası olarak yükleyin.
• Tembel yükleme (lazy-load) için kullanılan yer tutucu görselleri çok küçük tutun ya da yerine düz bir arka plan rengi kullanın.

HTML yorumları

Nedir? <!-- ile --> arasına yazılan, tarayıcının tamamen görmezden geldiği notlar.

Neden önemli? Ziyaretçiye hiçbir faydası yoktur; bazen iç sistem bilgilerini (sunucu adı, sürüm, ekip notları) herkese açık hale getirir.

Ne yapmalı?

• Yayında HTML yorumlarını otomatik silen küçültme (minify) ayarını açın.
• Yorumlarda sunucu adı, sürüm ya da ekip notu varsa hemen kaldırın; herkes görebilir.

Diğer

Nedir? Yukarıdaki gruplara girmeyen içerik: <noscript> blokları, script şablonları (text/template), CDATA bölümleri.

Neden önemli? Genelde küçüktür. <noscript> içindeki takip pikselleri ve büyük şablonlar dikkat gerektirebilir.

Ne yapmalı?

• Kullanılmayan <noscript> bloklarını ve eski takip piksellerini kaldırın.
• Sayfada kullanılmayan şablonları (text/template) temizleyin.

Ham boyut (sıkıştırılmamış)

Kaynak kodun gerçek uzunluğu. Tarayıcının işlemesi gereken metin miktarını ve Googlebot’un 2 MB sınırını bu değer belirler.

Sıkıştırılmış boyut

Sunucunun gzip veya Brotli ile küçültüp gönderdiği boyut; indirme süresini bu belirler. Tekrar eden metin çok iyi sıkışır, base64 gibi rastgele görünen veri ise neredeyse hiç sıkışmaz.

gzip ve Brotli

Web’in iki yaygın sıkıştırma yöntemi. Brotli daha yenidir ve HTML’de genellikle %15–20 daha küçük sonuç verir. Güncel tarayıcıların hepsi ikisini de destekler.

DOM

Tarayıcının HTML’den kurduğu öğe ağacı. Her etiket bir öğe olur; öğe sayısı arttıkça stil hesaplama, bellek kullanımı ve tıklamalara tepki süresi büyür.

Hydration

Sunucuda hazırlanmış sayfanın tarayıcıda JavaScript ile etkileşimli hale getirilmesi. Bunun için gereken veri çoğu zaman HTML’e JSON olarak gömülür.

base64

Görsel veya font gibi dosyaları metne çeviren kodlama. Dosyayı yaklaşık üçte bir büyütür.

#text (teknik döküm)

Bir etiketin doğrudan içindeki metin ile etiketin kendisi (<p> ve </p>). Öznitelikler kendi satırlarında ayrıca sayılır.