Düzen değişikliği, sayfanızdaki görünür bir öğenin konumunu veya boyutunu değiştirerek etrafındaki içeriğin konumunu etkilediğinde gerçekleşir. Bazen, bir kapsayıcı kullanıcı işlemi sonucunda genişlediğinde olduğu gibi, kaydırma istemli olur. Ancak reklamların dinamik yapısı, kullanıcı deneyimini olumsuz etkileyen ve ciddi kullanılabilirlik sorunlarına yol açabilecek beklenmedik düzen değişikliklerine neden olabilir.
Bu kılavuzda, Google Yayıncı Etiketleri (GPT) ile çalışırken düzen kaymasının nasıl ölçüleceği ve en aza indirileceği açıklanmaktadır.
Reklamlar düzen kaymasına nasıl neden olur?
Reklamlar genellikle eşzamansız olarak istenir ve sayfa yüklenirken veya yüklendikten sonra sayfanıza dinamik olarak içerik ekler. Reklamlar getirilirken sayfanın geri kalanı yüklenmeye devam eder ve reklam dışı içerik kullanıcı tarafından görülebilir hale gelebilir. Yüklenen reklamlar için yeterli alan ayırmazsanız sayfaya eklendiklerinde reklam dışı görünür içeriğin yerini alabilirler.
Google yayıncı etiketleriyle çalışırken reklam yaşam döngüsünde düzen kaymasının gerçekleşebileceği birkaç nokta vardır:
display()çağrıldığında. Yuva, yapılandırmasına bağlı olarak genişleyebilir veya daraltılabilir.- Reklam içeriği oluşturulduğunda. Bir slot, akışkan bir reklam yayınlanırsa veya başka bir şekilde yeterli alan yoksa yeniden boyutlandırılabilir. Bu noktada, nasıl yapılandırıldığına bağlı olarak bir slot da genişleyebilir veya daraltılabilir.
- Reklam içeriği oluşturulduktan sonra. Belirli reklam öğesi türleri, sayfaya göründükten sonra genişletilecek şekilde tasarlanmıştır.
Reklam alanı, görüntü alanında ne kadar yüksek olursa yer değiştirebileceği içerik sayısı da o kadar artar. İlk görüntü alanının üst kısmına (ekranın üst kısmının üstüne) yakın alanlara özellikle dikkat edin. Bu slotlar, reklam içerikleri yüklendiğinde görünür olma olasılıkları daha yüksek olduğundan orantısız miktarda düzen kaymasına neden olabilir.
Düzen kaymasını ölçme
Cumulative Layout Shift (CLS), düzen değişikliklerinin siteniz üzerindeki etkisini hem laboratuvarda hem de sahada ölçmek için kullanabileceğiniz bir Core Web Vitals metriğidir.
Laboratuvarda
Laboratuvar araçları, CLS'yi sentetik olarak ölçer. Bu, gerçek kullanıcı etkileşimine ihtiyaç duymadıkları için sürekli entegrasyon ve yerel geliştirme iş akışlarında kullanılmaya uygun oldukları anlamına gelir. Ancak bu araçlar genellikle yalnızca sayfa yükleme sırasında performansı ölçer ve simüle edebilecekleri koşullarla sınırlıdır. Bu nedenle, raporlanan değerler gerçek bir kullanıcının deneyimleyeceğinden daha düşük olabilir.
Publisher Ads Audits for Lighthouse, özellikle GPT reklamlarıyla ilişkilendirilebilir CLS'yi ölçmek için kullanılabilecek bir araçtır. Ayrıntılar için reklamla ilgili düzen kaymasını azaltma denetim belgelerine bakın.
Chrome Geliştirici Araçları, siz sitenizde gezinirken düzen kaymalarını vurgulayacak şekilde de yapılandırılabilir. Bu, sayfanızdaki reklam alanlarının yakınında gerçekleşen düzen değişikliklerini manuel olarak tanımlamak için kullanılabilir.
Sahada
Alan araçları, gerçek kullanıcıların sitenizle etkileşime geçerken yaşadığı CLS'yi ölçer. Bu işlem genellikle gerçek kullanıcı izleme (RUM) olarak bilinir. RUM, CLS'nin gerçek dünyadaki faktörlerden (ör. cihaz özellikleri, ağ koşulları, kullanıcı etkileşimi ve sayfa kişiselleştirme) nasıl etkilendiğini gözlemlemenize olanak tanır. Bu faktörlerin sentetik testlerle simüle edilmesi genellikle zordur veya imkansızdır.
Düzen kaymasını en aza indirme
Yerleşim kaymasını önlemenin garantili tek yolu, CSS kullanarak belirli bir reklam alanı için yeterli miktarda alan ayırmaktır. Bunu yapmanın en etkili yolu, doğrudan reklam alanında div sabit bir yükseklik ve genişlik ayarlamaktır. Ancak bu yaklaşım, statik ve sabit boyutlu reklam alanları için iyi sonuç verse de daha karmaşık senaryolar için daha ayrıntılı bir yaklaşım gerekebilir. Aşağıdaki bölümlerde bazı sık karşılaşılan senaryolar açıklanmıştır.
Çok boyutlu reklam alanları
Birden fazla boyutu kabul eden reklam alanları için aşağıdaki yaklaşımlardan birini öneririz:
- Yayınlanacak şekilde yapılandırılan en büyük boyut için yer ayırın.
- Sunulmak üzere yapılandırılmış en küçük boyut için yer ayırın.
- Google Ad Manager raporlarındaki geçmiş dolgu verileri incelenerek belirlenir.
Doğru yaklaşımı seçme
Yayınlanacak şekilde yapılandırılmış en büyük boyut için yer ayırmak, düzen kaymalarını ortadan kaldırmanın en etkili yoludur. Ancak bu yöntem, ayrılan boyuttan daha küçük bir reklam öğesinin yayınlanması durumunda reklamın etrafında fazladan boş alan oluşmasına neden olabilir. Reklam alanını, yayınlanan reklam öğesinin boyutuyla eşleşecek şekilde küçültmek ek bir düzen kaymasına neden olacağından bunu yapmaktan kaçınmanız önerilir. Bunun yerine, fazla boş alanın görsel etkisini azaltmak için dikey ve yatay merkezleme kullanılabilir.
Diğer yandan, yayınlanacak şekilde yapılandırılan en küçük boyut için alan ayırmak, reklamınızın etrafında fazladan boşluk olmasını önler. Reklam alanınız genellikle daha küçük reklam öğeleriyle dolduruluyorsa veya alanın desteklediği tüm boyutların benzer olduğu durumlarda bu seçenek iyi bir tercih olabilir. Ancak bu yöntem, ayrılan boyuttan daha büyük bir reklam öğesinin yayınlanması durumunda bir düzen kaymasıyla sonuçlanır (ancak bu tür değişimler, hiç alan ayırmamaya kıyasla genellikle daha küçüktür).
Boş alan ve düzen değişiklikleri arasında denge kurmak için reklam alanlarınıza "ortalama" miktarda alan ayırabilirsiniz. Örneğin, 100px için dikey olarak rezervasyon yapmak, bir 320x50 reklam öğesi yayınlandığında küçük bir boşluk oluşturur ancak hiç alan ayırmamaya kıyasla CLS puanını düşürür. Kendi siteniz için en iyi dengeyi bulmak amacıyla farklı boyutlarla denemeler yapmanız gerekir.
Belirli bir slot için ne kadar alan ayıracağınızı belirlerken Google Ad Manager raporlarındaki geçmiş doluluk verilerini incelemek daha bilinçli bir karar vermenize yardımcı olabilir. Bu durumu en iyi şekilde açıklamak için bazı örnekleri inceleyelim.
1. Örnek
| Reklam boyutu (yayınlanan) | Reklam sunucusu gösterimleri (%) |
|---|---|
300x250 |
%70 |
320x50 |
%30 |
Bu durumda, sunulan reklam öğelerinin çoğu 300x250 olduğundan 250px'ü dikey olarak ayırmak CLS'yi büyük ölçüde azaltabilir.
2. Örnek
| Reklam boyutu (yayınlanan) | Reklam sunucusu gösterimleri (%) |
|---|---|
970x90 |
%60 |
728x90 |
10% |
320x50 |
%20 |
728x250 |
%5 |
300x250 |
%5 |
Bu durumda, reklamların çoğu en fazla 90px yüksekliğindedir. Bu nedenle, dikey olarak 90px ayrılan alanın çoğu zaman düzen kaydırmasını önlemesi gerekir.
Yer ayırtma
Bu sorunu, min-height ve min-width CSS özellikleri aracılığıyla reklam alanınızın boyutunu belirterek çözmenizi öneririz:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
min-height ve min-width özelliklerini kullanmak, reklam alanınız için minimum miktarda alan ayırmanıza olanak tanır. Bu sayede tarayıcı, gerektiğinde kapsayıcının boyutunu artırabilir. Bu sayede, daha büyük bir reklam öğesi yayınlandığında hiçbir içeriğin kesilmediğinden emin olabilirsiniz.
Farklı ekran boyutları için farklı minimum değerleri belirtmek üzere bu tekniği CSS medya sorgularıyla birleştirebilirsiniz:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
JavaScript ile boşluk ayırmak, komut dosyası yüklendiğinde bir düzen kaymasına yol açabileceğinden kaçınılmalıdır. CSS ile alan ayırmak bu riski önler.
Değişken reklam alanları
Değişken reklam alanları, destekledikleri sabit bir boyut grubu belirtmez. Bunun yerine, bu yuvalar kendilerine sunulan reklam öğesi içeriğine sığacak şekilde otomatik olarak yeniden boyutlandırılır. Böylece, belirsiz boyuttaki reklam öğelerini destekleyebilirler. Sonuç olarak, reklam içeriği isteğinde bulunmadan önce bu alanlar için yer ayırmak mümkün değildir ve akışkan boyutlu reklamlar her zaman düzen kaymalarına neden olur.
Akıcı reklam alanları ile çalışırken düzen kaymalarının etkilerini azaltmak için aşağıdakileri öneririz:
fluidboyutunu yalnızca katlantı altındaki slotlar için kullanın.- Kullanıcının, alan yeniden boyutlandırılmadan önce ekranı kaydırarak alanı görüntüleme olasılığını en aza indirmek için akışkan alanları mümkün olduğunca erken getirin.
Reklam alanlarını daraltma ve genişletme
collapseEmptyDivs() yöntemi, gösterilecek reklam içeriği olmadığında reklam alanı div'lerini daraltarak sayfa üzerinde yer kaplamamalarını sağlar. Ancak bu özellik, istenmeyen düzen kaymalarına neden olabileceği için dikkatli kullanılmalıdır. Önceki bölümde belirtildiği gibi, reklam alanlarının daraltılması ve genişletilmesi, reklam yaşam döngüsünün iki farklı noktasında düzen değişikliklerine neden olabilir.
Bu özelliği kullanmanız gerekiyorsa aşağıdaki en iyi uygulamaları uygulamak için Ad Manager raporlarındaki geçmiş dolgu verilerini kullanarak düzen değişikliklerinin etkisini azaltabilirsiniz:
- Doldurulması muhtemel alanlar her zaman genişletilmiş olarak başlamalıdır.
- Doldurulması muhtemel olmayan alanlar her zaman daraltılmış ile başlamalıdır.
Örnek uygulama için Boş reklam alanlarını daraltma örneğine bakın.