Site İçerik/Kod Oranı

Hayır, içerik/kod oranı Google'ın sıralama faktörlerinden biri değildir. Google temsilcileri, metin ile HTML arasındaki oranın sıralamada doğrudan kullanılmadığını farklı vesilelerle belirtmiştir. Google sayfanın kodunu değil, kullanıcının gördüğü içeriği ve sayfanın sunduğu deneyimi değerlendirir.

Buna rağmen oranı izlemek dolaylı olarak faydalıdır:

• Sayfa hızı: Gereksiz satır içi CSS ve JavaScript HTML'i büyütür; büyük HTML'in indirilmesi ve işlenmesi daha uzun sürer. Bu durum LCP ve FCP değerlerini etkileyebilir.
• Tarama verimliliği: Çok büyük HTML dosyaları Googlebot'un sayfayı işlemesini yavaşlatır.
• İnce içerik tespiti: Aynı şablondaki sayfalardan oranı çok düşük olanlar genellikle içeriği zayıf sayfalardır; bunları güçlendirmek faydalıdır.
• Kod kalitesi: Ani düşüşler, yeni bir eklentinin veya tema değişikliğinin beklenmedik kod eklediğini gösterir.

Bu nedenle oranı yüksek tutmak için içerik doldurmak yerine, oranın düşük çıkmasına neden olan teknik şişkinliği gidermeye odaklanın. Sayfanın hız üzerindeki gerçek etkisini Site Hız Testi ile, sayfanın genel SEO durumunu SEO Analiz ile görebilirsiniz.

Satır içi (inline) CSS ve JavaScript, stil ve betik kodlarının ayrı dosyalar yerine doğrudan HTML belgesinin içine yazılmasıdır. Bu kodlar <style> ve <script> etiketleri arasında veya öğelerin style="..." ve onclick="..." gibi nitelikleri içinde yer alır.

Küçük ve yalnızca ilk ekranın çizilmesi için gerekli kritik CSS'in satır içinde kalması performans açısından avantajlıdır. Ancak tüm stil sayfasının veya büyük betiklerin her sayfaya gömülmesi, sayfanın her ziyarette aynı kodu yeniden indirmesine yol açar. İçerik/Kod Oranı raporundaki satır içi script ve style bloğu boyutları, taşınması gereken kodun miktarını gösterir.

Kritik CSS, sayfanın ilk ekranda görünen bölümünü (ekranın kaydırılmadan görünen kısmı) çizmek için gereken en küçük stil kümesidir. Bu küçük CSS doğrudan HTML'e satır içi olarak eklenir; geri kalan stiller ise sayfa çizildikten sonra yüklenir. Böylece tarayıcı büyük bir CSS dosyasını beklemeden içeriği hemen göstermeye başlar.

1. Kritik stilleri belirleyin: Üst menü, başlık, ana görsel alanı ve ilk paragraf gibi ilk ekran öğelerinin stillerini ayırın.
2. Satır içine alın: Bu stilleri head bölümünde küçük bir style bloğuna yerleştirin.
3. Geri kalanını erteleyin: Tam stil dosyasını oluşturmayı engellemeyecek şekilde yükleyin.
4. Boyutu küçük tutun: Kritik CSS genellikle birkaç kilobaytla sınırlı kalmalıdır; büyüdükçe faydası azalır ve HTML şişer.
5. Otomatikleştirin: Birçok önbellek ve performans eklentisi kritik CSS'i otomatik üretebilir.

Kritik CSS doğru uygulandığında FCP ve LCP süreleri iyileşir ve Lighthouse'taki "oluşturmayı engelleyen kaynakları kaldırın" uyarısı azalır. Yanlış uygulandığında ise sayfa tam stil yüklenene kadar biçimsiz görünebilir veya yükleme sırasında kayma (CLS) oluşabilir. İçerik/Kod Oranı raporunda çok büyük style blokları görüyorsanız kritik CSS yerine tüm stil dosyasının satır içine alınmış olması muhtemeldir.

Sürükle bırak sayfa oluşturucular (page builder), teknik bilgi gerektirmeden tasarım yapmayı kolaylaştırır; ancak bu kolaylık genellikle fazladan kodla gelir. Her görsel ayarı esnek tutmak için çok sayıda iç içe kapsayıcı ve öğe bazlı stil üretilir.

• İç içe div yapıları: Bölüm, satır, sütun ve modül katmanları her öğe için birkaç ek kapsayıcı oluşturur; DOM boyutu büyür.
• Öğe bazlı style nitelikleri: Her kutuya ayrı ayrı yazılan renk, boşluk ve yazı tipi ayarları style niteliği sayısını artırır.
• Sayfaya gömülü CSS: Sayfaya özel stiller HTML içine style bloğu olarak eklenir.
• Kullanılmayan modül kodları: Sayfada kullanılmasa bile tüm modüllerin stil ve betikleri yüklenebilir.
• Animasyon ve efekt betikleri: Görsel efektler ek JavaScript gerektirir.

Kod şişkinliğini azaltmak için oluşturucunun performans ayarlarında CSS'i harici dosya olarak yazdırma, kullanılmayan varlıkları yüklememe ve gereksiz efektleri kapatma seçeneklerini kullanın. Benzer biçimdeki öğeler için ayrı ayrı stil vermek yerine genel stil ayarlarını tercih edin. İçerik/Kod Oranı raporundaki "style niteliği kullanan etiket" sayısı yüksekse sorun büyük olasılıkla sayfa oluşturucudan kaynaklanıyordur.

HTML yorumları, kaynak kodda <!-- ... --> arasına yazılan ve sayfada görünmeyen notlardır. Ziyaretçiler görmez, ancak sayfa kaynağını açan herkes okuyabilir. Bu yüzden yorumlara yazılan bilgiler gizli değildir.

Yorumlar ayrıca HTML boyutunu da artırır. Yayın öncesinde yorumları temizlemek veya HTML küçültme özelliği olan bir önbellek eklentisi kullanmak iki sorunu birlikte çözer. İçerik/Kod Oranı raporundaki HTML yorumu sayısı, sayfanızda kaç yorum bulunduğunu gösterir; içeriklerini görmek için Site Kaynak Çıktısı aracını kullanabilirsiniz.

Google, JavaScript'i işleyebilen bir oluşturma (rendering) altyapısına sahiptir ve çoğu durumda JavaScript ile yüklenen içeriği görebilir. Ancak bu süreç, doğrudan HTML'de bulunan içeriğe göre daha karmaşıktır ve bazı riskler taşır.

CSR sayfalarında Google önce HTML'i tarar, ardından sayfayı oluşturmak için ayrı bir aşamada JavaScript'i çalıştırır. Betiklerin hata vermesi, robots.txt ile engellenmesi veya çok yavaş çalışması içeriğin görülmemesine yol açabilir. Ayrıca sosyal medya platformlarının çoğu ve bazı arama motorları JavaScript çalıştırmaz. İçerik/Kod Oranı aracı sunucunun gönderdiği ilk HTML'i okuduğu için CSR sayfalarda çok düşük oran ve az kelime gösterir; bu sonuç, içeriğin ilk HTML'de bulunmadığının işaretidir.

HTML belgesi için resmî bir boyut sınırı yoktur; ancak daha küçük HTML her zaman daha hızlı indirilir ve işlenir. Görseller, CSS ve JavaScript dosyaları ayrı indirildiği için burada söz konusu olan yalnızca sayfanın HTML belgesidir.

Sıkıştırma etkinse ağ üzerinden aktarılan boyut ham boyutun genellikle beşte biri ile üçte biri arasında olur. Ancak tarayıcı sıkıştırılmış dosyayı açtıktan sonra yine tam boyutu işlemek zorundadır; bu yüzden ham boyut da önemlidir. HTML'i büyüten başlıca unsurlar satır içi CSS ve JavaScript, gömülü SVG ve base64 görseller, sayfaya yazılmış büyük JSON verileri ve tek sayfada gösterilen çok uzun listelerdir. Uzun listeleri sayfalamak ve gömülü kodları harici dosyalara taşımak boyutu hızla düşürür. İçerik/Kod Oranı raporundaki HTML boyutu ve kod dağılımı, sayfanızın nerede şiştiğini gösterir.

DOM (Document Object Model), tarayıcının HTML'den oluşturduğu ve sayfadaki her etiketi bir düğüm olarak tuttuğu ağaç yapısıdır. DOM boyutu ise bu ağaçtaki toplam öğe sayısını, ağacın derinliğini ve bir öğenin altındaki en fazla alt öğe sayısını ifade eder.

• Neden önemli? Tarayıcı stil hesaplarken, sayfayı çizerken ve kullanıcı etkileşimine yanıt verirken DOM üzerinde çalışır. Öğe sayısı arttıkça bu işlemler uzar.
• Etkilediği metrikler: Büyük DOM, özellikle INP ve TBT değerlerini bozar; bellek kullanımını artırır.
• Lighthouse uyarısı: Lighthouse, aşırı büyük DOM boyutunu bir performans uyarısı olarak raporlar; yaklaşık 1.400 öğenin üzeri yüksek kabul edilir.
• Sık nedenler: Sayfa oluşturucuların iç içe kapsayıcıları, tek sayfada gösterilen yüzlerce ürün veya yorum, gizli menüler ve mega menüler, gömülü SVG simgeleri.

DOM boyutunu küçültmek için uzun listeleri sayfalayın veya kaydırdıkça yükleyin, gereksiz kapsayıcıları kaldırın, kullanılmayan gizli bölümleri sayfadan çıkarın ve tekrar eden simgeleri tek bir SVG dosyasından kullanın. İçerik/Kod Oranı raporu HTML'in boyutunu ve bileşimini, Site Hız Testi ise DOM boyutunun performansa etkisini gösterir.

SVG simgeleri ve base64 ile kodlanmış görseller doğrudan HTML'in içine yerleştirilebilir. Bu yöntem ek bir dosya isteğini önler; ancak yanlış kullanıldığında HTML'i hızla şişirir ve içerik/kod oranını düşürür.

Küçük ve sayfada bir kez kullanılan simgeler için satır içi SVG makul bir tercihtir. Aynı simge menüde, kartlarda ve alt bilgide onlarca kez tekrarlanıyorsa bunları tek bir sprite dosyasında toplamak HTML'i belirgin şekilde küçültür. Base64 görseller ise yalnızca birkaç yüz baytlık çok küçük görseller için düşünülmelidir. Fotoğrafları base64 olarak gömmek HTML'i megabaytlarca büyütebilir ve ilk içeriğin görünmesini geciktirir.

WordPress sitelerde kod şişkinliği genellikle tema, sayfa oluşturucu ve eklentilerin her sayfaya kendi stil ve betiklerini eklemesinden kaynaklanır. Aşağıdaki adımlar, içerik/kod oranını yükseltirken sayfa hızını da iyileştirir:

1. Eklentileri ayıklayın: Kullanmadığınız eklentileri silin; her eklentinin sayfaya ne eklediğini kontrol edin.
2. Varlıkları koşullu yükleyin: İletişim formu eklentisinin betiklerini yalnızca form bulunan sayfada yükleyen ayarları veya eklentileri kullanın.
3. CSS'i harici dosyaya yazdırın: Sayfa oluşturucunun performans ayarında satır içi yerine harici CSS seçeneğini açın.
4. Önbellek eklentisinin optimizasyonlarını kullanın: HTML, CSS ve JavaScript küçültme, kullanılmayan CSS'i kaldırma ve betikleri erteleme özelliklerini deneyin.
5. Emoji ve gömme betiklerini kapatın: Kullanmıyorsanız WordPress'in varsayılan emoji ve gömme (embed) betiklerini devre dışı bırakın.
6. Hafif bir temaya geçin: Ağır temalar, kullanmadığınız özellikler için bile kod yükler.
7. Blok düzenleyiciyi verimli kullanın: Blok stillerini her öğeye ayrı ayrı vermek yerine tema genel stillerini tercih edin.

Her değişiklikten sonra İçerik/Kod Oranı aracıyla HTML boyutunu ve kod dağılımını, Site Hız Testi ile performansı yeniden ölçün; optimizasyon eklentilerinin sayfa görünümünü bozmadığını da kontrol edin.