HTML belgesi çok büyükse: şişkin HTML'in hız ve taramaya etkisi

Bir ürün listesi sayfasının HTML'i 3 MB. İçinde yüzlerce satır içi SVG ikon, base64 ile gömülmüş görseller ve sayfanın tüm verisinin JSON kopyası var. Kullanıcı ilk içeriği görmeden önce tarayıcı bu dosyanın tamamını indirip ayrıştırmak zorunda.

KTYAPTECH SEO Analyzer bu sorunu TECH-DELIVERY-OVERSIZED-HTML-001 koduyla, “HTML belgesi çok büyük” başlığı altında ve orta önem derecesiyle raporlar (Teknik SEO). Bu rehber, bulgunun ne anlama geldiğini, neden önemli olduğunu ve adım adım nasıl düzeltileceğini anlatıyor.

Çok büyük HTML belgesi nedir?

Bu bulgu, sayfanın HTML belgesinin belirlenen eşiği aştığını gösterir. Google, Googlebot'un bir HTML dosyasının belirli bir boyuta kadar olan kısmını işlediğini belgeler; bu sınırın ötesindeki içerik dikkate alınmayabilir.

HTML'i genellikle satır içi SVG ve stiller, base64 data URI görseller, framework'lerin sayfaya gömdüğü durum verisi (hydration data), tekrar eden büyük menüler ve gizli içerikler şişirir.

Neden önemli? SEO ve kullanıcı deneyimine etkisi

Büyük HTML daha uzun indirme ve ayrıştırma süresi demektir; bu da ilk içeriğin görünmesini (FCP, LCP) geciktirir, özellikle mobilde.

Sınırın ötesinde kalan içerik ve bağlantılar Google tarafından işlenmeyebilir. Sayfanın alt kısmındaki ürünler veya iç bağlantılar keşfedilmeyebilir.

Sorun nasıl tespit edilir?

• SEO Analyzer raporundaki “HTML belgesi çok büyük” bulgusunda belge boyutunu görün.
• curl -s adres | wc -c ile sıkıştırılmamış boyutu ölçün.
• Tarayıcının ağ sekmesinde belgenin aktarılan ve gerçek boyutuna bakın.
• HTML'i açıp en büyük bölümleri bulun: <script id="__NEXT_DATA__">, data:image, <svg> blokları.

Adım adım çözüm

1. HTML'in hangi bölümlerinin boyutu oluşturduğunu ölçün.
2. Tekrarlayan satır içi SVG'leri harici bir sprite dosyasına veya <img> ile yüklenen dosyalara taşıyın.
3. base64 ile gömülü büyük görselleri ayrı dosyalara çıkarın.
4. Framework'ün sayfaya gömdüğü veriyi yalnızca bileşenlerin gerçekten kullandığı alanlarla sınırlayın.
5. Uzun listeleri sayfalayın; tek sayfada yüzlerce ürün göstermeyin.
6. Metin sıkıştırmasının (gzip/brotli) açık olduğundan emin olun; bu aktarım boyutunu küçültür ama ayrıştırma boyutunu değiştirmez.

Framework durum verisi

Next.js (Pages Router) ve benzeri framework'ler, sayfanın sunucuda aldığı veriyi istemcide yeniden kullanmak için HTML'e gömer. Bir API'den gelen tüm nesneyi olduğu gibi aktarmak bu bloğu megabaytlara çıkarabilir; yalnızca gereken alanları seçin.

Sık yapılan hatalar

• Yalnızca sıkıştırılmış aktarım boyutuna bakıp ayrıştırma yükünü görmezden gelmek.
• API yanıtının tamamını sayfaya gömmek.
• Her ikonu satır içi SVG olarak tekrar etmek.

Düzeltmeyi nasıl doğrularsınız?

• HTML boyutunu yeniden ölçün.
• LCP ve FCP değerlerindeki iyileşmeyi PageSpeed Insights ile kontrol edin.
• SEO Analyzer'ı yeniden çalıştırın.

Sık sorulan sorular

HTML boyutu için bir hedef değer var mı?

Kesin bir kural yoktur; çoğu sayfa için birkaç yüz kilobaytın altı sağlıklıdır. Megabayt seviyesindeki HTML neredeyse her zaman gereksiz bir şişkinliğe işaret eder.

Sıkıştırma bu sorunu çözmez mi?

Aktarım süresini azaltır ama tarayıcı yine de açılmış tam HTML'i ayrıştırmak zorundadır.

Özet

Şişkin HTML hem hızı hem taramayı olumsuz etkiler. Satır içi SVG ve base64 görselleri dışarı taşıyın, gömülü durum verisini küçültün, uzun listeleri sayfalayın ve belge boyutunu düzenli ölçün.

Sitenizde bu ve benzeri sorunların olup olmadığını görmek için KTYAPTECH Ücretsiz SEO Analizi aracını kullanabilirsiniz: rapordaki her bulgunun yanında, sorunu anlatan çözüm rehberine giden bir bağlantı bulunur.