Reklam CLS Sorunu: AdSense Reklamları Sayfayı Kaydırıyorsa

Bir reklam alanı, yüksekliği olmayan boş bir öğe olarak başlar. Bir saniye sonra reklam gelir, 250 ya da 280 piksel yer kaplar ve okuduğun paragrafı ekranın aşağısına iter. Bu zıplama bir düzen kayması; Google bunu Cumulative Layout Shift (CLS, kümülatif düzen kayması) ile ölçüyor. Çözüm sıkıcı ama güvenilir: her reklam alanının yüksekliğini, reklam yüklenmeden önce CSS ile ver.

CLS neyi ölçer, iyi değer kaç?

web.dev'in CLS yazısı CLS'yi, sayfanın tüm ömrü boyunca yaşanan beklenmedik kaymaların en büyük toplu puanı olarak tanımlıyor. Her kayma, ekranın ne kadarının ne kadar uzağa gittiğine göre puanlanıyor; yani telefonun üst kısmında büyük bir bloğun uzun bir mesafe zıplaması kötü puan alıyor.

Eşikler:

CLS (yüzde 75'lik dilim)	Durum
0,1 veya altı	İyi
0,1'in üstü, 0,25'e kadar	İyileştirme gerekli
0,25'in üstü	Kötü

web.dev'in ifadesiyle: "İyi CLS değerleri 0,1 veya daha azdır. Yetersiz değerler 0,25'ten büyüktür." Ölçüm, mobil ve masaüstü ayrı ayrı, sayfa yüklemelerinin yüzde 75'lik diliminde yapılıyor. Search Console'un Core Web Vitals raporu da aynı aralıkları kullanıyor.

Dokunma ya da tıklamadan hemen sonraki kaymalar sayılmıyor: "Kullanıcı girişinden sonraki 500 milisaniye içinde gerçekleşen düzen kaymalarında hadRecentInput işareti ayarlanır. Böylece bu kaymalar hesaplamalardan hariç tutulabilir." Kaydırma bu anlamda bir giriş değil; okur kaydırırken yüklenip büyüyen reklam sayılıyor.

Reklamlar düzeni neden kaydırıyor?

web.dev'in CLS'yi optimize etme rehberi lafı dolandırmıyor: "Reklamlar, web'deki düzen kaymalarına en büyük katkıyı sağlayan unsurlardan biridir." Sebebi de aynı paragrafta: reklam ağları daha çok teklif için dinamik boyutları destekliyor, bedelini de görünür içeriği aşağı iten reklamlar ödetiyor.

Google'ın Publisher Tag düzen kayması rehberi Ad Manager için yazılmış ama mekanizma her reklam kodunda aynı. Kaymanın olduğu anları sayıyor: alan kurulurken genişleyip daraldığında, reklam öğesi gösterilip alan yeniden boyutlandığında ve gösterildikten sonra büyümek için tasarlanmış öğelerde. Bloglar için en önemli noktası şu: reklam alanı görüntü alanında ne kadar yukarıdaysa o kadar çok içeriği yerinden oynatabiliyor; rehber, ilk ekranın üst kısmına yakın alanlara "özellikle dikkat edin" diyor.

Bir AdSense sitesinde olağan şüpheliler:

• Başlıkla ilk paragraf arasına konmuş, yüksekliği ayrılmamış duyarlı bir reklam birimi.
• Okur zaten aşağıyı okurken yüklenen makale içi reklam.
• Ekranın üst kısmında, dolmayan birimleri gizleyen CSS (data-ad-status="unfilled" için display: none). Sayfa gösterildikten sonra alan çöker.
• Yüklemeden sonra sayfanın üstüne eklenen çerez bandı ya da "abone ol" çubuğu. Reklam değiller ama aynı raporlarda çıkıyorlar.

AdSense üçüncüsünde zaten dikkatli. Doldurulmayan reklam birimleri sayfası şöyle diyor: "Reklam birimlerini, yalnızca sayfanın yeniden düzenlenmesine neden olmayacağı durumlarda daraltırız. Yani, yalnızca görüntü alanının dışındaki reklam birimleri daraltılır. Diğer tüm doldurulmayan reklam birimlerinin boyutunu korur ve bunun yerine boş bir alan gösteririz." Dolmayan her birimi gizleyen kendi CSS'ini eklersen bunu bozarsın.

Reklam yüklenmeden önce yer ayır

Publisher Tag rehberi net: "Yerleşim kaymasını önlemenin garantili tek yolu, CSS kullanarak belirli bir reklam alanı için yeterli miktarda alan ayırmaktır."

Yol 1: min-height verilmiş bir kapsayıcı

AdSense kodunu kendi kontrolündeki bir kutunun içine koy ve kutuya ekran boyutuna göre en az yükseklik ver. Reklam koduna dokunmuyorsun.

<div class="ad-slot ad-slot--makale">
  <ins class="adsbygoogle" style="display:block"
       data-ad-client="ca-pub-1234567890123456"
       data-ad-slot="1234567890"
       data-ad-format="auto" data-full-width-responsive="true"></ins>
  <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>

.ad-slot--makale { min-height: 280px; }
@media (min-width: 768px) {
  .ad-slot--makale { min-height: 90px; }
}

Neden height değil de min-height? Google'ın rehberine göre min-height reklam alanı için en az bir alan ayırıyor ama yine de "tarayıcı, gerektiğinde kapsayıcının boyutunu artırabilir"; böylece daha büyük bir reklam geldiğinde hiçbir içerik kesilmiyor.

Aynı rehberden, insanların atladığı iki kural. Bunu JavaScript'le değil CSS ile yap: "JavaScript ile alan ayırmak, komut dosyası yüklenirken düzen kaymasına neden olabileceğinden kaçınılmalıdır." Ve medya sorguları kullan; telefondaki doğru yükseklik dizüstünde nadiren doğrudur.

Yol 2: birimin boyutunu ekran genişliğine göre sabitle

AdSense, duyarlı bir birime medya sorgularıyla tam boyut vermene izin veriyor. Duyarlı reklam kodunu değiştirme sayfası bu örneği veriyor ve bunların "AdSense reklam kodunda yapılması kabul edilebilir değişiklikler" olduğunu söylüyor:

<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
     style="display:block;"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="5678"></ins>

Bedeli şu: sabit boyut sıfır kayma demek ama alana hangi reklam boyutlarının yarışabileceğini de sınırlıyor. Aynı sayfadaki küçük nota dikkat: harici stil sayfalarında CSS ile reklam boyutunu ayarlamak resmi olarak desteklenmiyor. Yani o <style> bloğunu Google'ın örneğindeki gibi sayfanın içinde tut.

Kutu ne kadar yüksek olmalı?

Google duyarlı AdSense birimleri için bir yükseklik yayımlamıyor; kendi siteni ölç. Chrome DevTools'ta telefon boyutunda sayfayı beş altı kez yenile, her seferinde dolmuş <ins> öğesinin yüksekliğine bak. Sonra Publisher Tag rehberinin anlattığı gibi seç:

• Gördüğün en büyük boyut. Hiç kayma yok, ama küçük reklam geldiğinde boşluk kalır.
• En küçüğü. Boşa yer yok, büyük reklam gelince biraz kayma olur.
• En sık geleni. Rehberin örneğinde gösterimlerin %70'i 300x250 olduğunda dikeyde 250 piksel ayırmak CLS'yi büyük ölçüde azaltıyor.

Reklam gelmezse alanı koru. web.dev: "Öğeler için ayrılan alanın kaldırılması, içerik eklenmesi kadar CLS'ye neden olabilir." Nötr bir arka plan ve küçük bir "Reklam" etiketi boş kutuyu bilinçli gösterir.

İlk reklamı biraz aşağı al

"Görüntü alanının üst kısmına daha yakın bir şekilde dinamik olarak yerleştirilen içerik, genellikle görüntü alanının alt kısmına yerleştirilen içerikten daha fazla düzen kaymasına neden olur" (web.dev). İkinci ya da üçüncü paragraftan sonraki reklam çoğu zaman okur oraya kaydırmadan yüklenir; yüklenmezse de ekranın daha az kısmını kaydırır. Zıplayan reklamların sık yol açtığı yanlışlıkla tıklamalar konusunda da işe yarar.

Sabit, vinyet ve otomatik reklamlar

AdSense'in Otomatik reklam ayarları sayfası sabit ve vinyet reklamları "Yer paylaşımlı biçimler" altında topluyor ve şunu söylüyor: "Yer paylaşımlı reklamlar, sayfa düzenini etkilemeden sayfa içeriğinin üzerine yerleştirilir." Sabit reklamlar "kullanıcı ekranının en üst veya en alt kısmına sabitlenen" reklamlar, vinyet reklamlar ise "sayfa yüklemeleri arasında gösterilen tam ekran reklamlar". Bu tarife göre ikisi de içeriğini itmemeli. Sabit reklamları sadece altta istiyorsan AdSense reklam betiğinde data-overlays="bottom" parametresini belgeliyor (sabit reklam kodu).

Sayfa içi otomatik reklamlar farklı. "Sayfa içi reklamlar, sayfa düzenine ve içerik miktarına göre sayfadaki alanlara yerleştirilir"; yani sayfa yüklendikten sonra akışın içine ekleniyorlar ve yerini bilmediğin bir reklam için yer ayıramazsın. Google sayfa içi otomatik reklamların CLS'ye etkisini yayımlamıyor. Saha CLS'n kötüyse ve bunları kullanıyorsan, en fazla sayfa içi reklam sayısını azaltarak (ayarda kaydırma çubuğu var) ya da makalelerin üst kısmını hariç tutulan alan yaparak dene, bir ay sonra saha verisini karşılaştır. Dengeyi otomatik reklam mı manuel mi rehberi anlatıyor.

Önemli olan yerde ölç: gerçek kullanıcılar

Laboratuvar testleri sayfayı bir kez, kaydırmadan yükler. web.dev uyarıyor: laboratuvar araçları "yalnızca sayfa yükleme sırasında gerçekleşen düzen kaymalarını ölçebilir"; bu yüzden raporladıkları CLS, gerçek kullanıcıların sahada yaşadığından düşük çıkabilir. Okur kaydırırken yüklenen reklamlar, laboratuvarın kaçırdığı kaymaların ta kendisi.

Nereye bakmalı:

• PageSpeed Insights. İkisini birden gösteriyor: üstteki gerçek kullanıcı bölümünde sahadaki CLS'yi, alttaki teşhis bölümünde laboratuvarda ölçülen yükleme CLS'sini. Gerçek kullanıcı verisi Chrome UX Report'tan, "önceki 28 günlük toplama dönemi"nden geliyor (PSI belgeleri). Küçük sitelerde sayfa düzeyinde veri çoğu zaman yetmez; PSI o zaman bütün siteye (origin) düşer ya da hiç veri göstermez.
• Search Console > Core Web Vitals. Benzer URL'leri gruplar ve şunu gösterir: "Grup CLS: Sayfa isteklerinin %75'i, son 28 günde Cumulative Layout Shift metriği için bu puana veya daha düşüğüne sahipti." Düzelttikten sonra raporun doğrulamasını kullan: "İzlemeyi Başlat" 28 günlük bir izleme oturumu açıyor.
• Chrome DevTools. Performans panelinde bir yeniden yüklemeyi kaydet. Düzen kaymaları kendi satırında çıkar; birine tıklayınca hangi öğelerin kaydığını görürsün.

Gerçek bir sayfada kaydırırken kaymaları yakalamak için web.dev'in kod parçasını konsola yapıştır:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

Her kaydı aç ve sources alanına bak: kayan öğeleri listeler. Hepsi bir ins.adsbygoogle öğesinin hemen altındaysa sorunlu alanı buldun.

Gecikmeyi hesaba kat. Saha verisi 28 günlük bir pencere; bugün yaptığın düzeltme rakamlara tam olarak dört hafta kadar sonra yansır.

CLS AdSense onayını etkiler mi?

Google AdSense şartları arasında bir CLS eşiği saymıyor. Arama tarafında şunu yazıyor: "Site sahiplerinin Arama'da başarıya ulaşmak ve genel olarak mükemmel bir kullanıcı deneyimi sağlamak için Core Web Vitals durumunun hızlı olmasını önemle tavsiye ederiz." Reklamlı bir site için daha doğrudan bir sebep var: okurun parmağının altında zıplayan içerik yerini kaybettirir, bazen de istemediği bir reklama dokundurur. Diğer mobil kontroller mobil uyumluluk ve hız rehberinde, yükleme tarafı yavaş sunucu yanıtı rehberinde.

Sayfalarını telefonda test et

Ücretsiz Approvalens taraması sayfalarını iki telefon boyutunda açar, yüklenirken düzenin ne kadar kaydığını ölçer ve varsa sitenin Google gerçek kullanıcı Core Web Vitals verisini gösterir: siteni tara.

Sık sorulan sorular

AdSense reklamları her zaman CLS'ye yol açar mı?

Hayır. Zaten doğru yükseklikteki bir kutuya yüklenen reklam kayma yaratmaz. Kayma, sayfanın yüksekliği önceden bilmemesinden doğuyor.

Reklama yükseklik vermek AdSense politikasına aykırı mı?

Google'ın belgelediği yöntemleri izlersen değil. Kodu kendi kutunun içine almak reklam kodunun dışında kalıyor; ekran genişliğine göre tam boyut vermeyi de AdSense'in duyarlı reklam kodu sayfası kabul edilebilir değişiklik olarak sayıyor.

PageSpeed Insights laboratuvar CLS'si 0, Search Console Kötü diyor. Hangisi doğru?

İkisi de, farklı şeyler için. Laboratuvar testi sayfayı bir kez, kaydırmadan yüklüyor. Search Console 28 günlük gerçek ziyaretleri yansıtıyor; kaydırırken yüklenen reklamlar dahil. Saha rakamı için düzelt.

Yer ayırmak çirkin boşluklar bırakmaz mı?

Bazen, uzun bir kutuya küçük bir reklam geldiğinde. Reklamı kutuda ortala ve açık bir arka plan ver. Küçük bir boşluk, zıplayan metinden iyidir.

Ekrana yapışan sabit reklamlar CLS'yi bozar mı?

AdSense sabit reklamları "sayfa düzenini etkilemeden" içeriğin üzerine yerleşen biçimler olarak tanımlıyor. Bir sabit reklam çıktığında kayma görüyorsan DevTools'ta kaydet ve temanın ona yer açmak için dolgu (padding) ekleyip eklemediğine bak.