Sayfanızdaki görünür bir öğenin konumu veya boyutu değiştiğinde, bu öğenin etrafındaki içeriğin konumu etkilendiğinde bir düzen kayması meydana gelir. Bazen kayma bilinçlidir. Örneğin, bir kullanıcı işlemi sonucunda kapsayıcı genişler. Ancak reklamların dinamik doğası, beklenmedik düzen kaymalarına yol açabilir. Bu da kullanıcı deneyimini olumsuz etkiler ve ciddi kullanılabilirlik sorunlarına yol açabilir.
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ükleme sırasında veya sonrasında dinamik olarak sayfanıza içerik ekler. Reklamlar getirilirken sayfanın geri kalanı yüklenmeye devam eder ve kullanıcı, reklam olmayan içerikleri görebilir. Yüklenen reklamlar için yeterli alan ayırmazsanız, reklamlar sayfaya eklendiklerinde, reklam olmayan görünür içeriği kaybedebilirler.
Google Yayıncı Etiketleri ile ç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. Bir alan, yapılandırılma şekline bağlı olarak genişleyebilir veya daralabilir.- Reklam içeriği oluşturulduğunda. Değişken bir reklam yayınlanırsa veya yeterli alan yoksa alan, yeniden boyutlandırılabilir. Ayrıca, nasıl yapılandırıldığına bağlı olarak bu noktada bir alan genişleyebilir veya daraltılabilir.
- Reklam içeriği oluşturulduktan sonra. Belirli reklam öğesi türleri, sayfada göründükten sonra genişleyecek şekilde tasarlanmıştır.
Bir reklam alanı görüntü alanında ne kadar yüksek olursa yer değiştirme potansiyelinin de o kadar fazla olduğunu unutmayın. İlk görüntü alanının üst kısmına yakın (ekranın üst kısmı) yuvalara özellikle dikkat edin. Bu alanlar, reklam içerikleri yüklendiğinde görünür olma olasılıkları daha yüksek olduğundan orantısız miktarda bir düzen kaymasına neden olabilir.
Düzen kaymasını ölçme
Cumulative Layout Shift (CLS), düzen kaymalarının sitenizdeki ve hem laboratuvarda hem de sahadaki etkisini ölçmek için kullanabileceğiniz bir Önemli Web Verileri metriğidir.
Laboratuvarda
Laboratuvar araçları CLS'yi sentetik olarak ölçer. Bu, gerçek kullanıcı etkileşimine dayalı olmadıkları anlamına gelir. Bu da sürekli entegrasyon ve yerel geliştirme iş akışlarında kullanıma uygundur. Bununla birlikte, 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şkilendirilen CLS'yi ölçmek için kullanılabilecek bir araçtır. Ayrıntılar için reklamla ilgili düzen kaymasını azaltma denetleme belgelerini inceleyin.
Chrome Geliştirici Araçları, sitenizde gezinirken düzen kaymalarını vurgulayacak şekilde de yapılandırılabilir. Bu özellik, sayfanızdaki reklam alanlarının yakınında gerçekleşen düzen kaymalarını manuel olarak tanımlamak için kullanılabilir.
Sahada
Saha araçları, gerçek kullanıcıların sitenizle etkileşim kurarken karşılaştığı CLS'yi ölçer. Bu işlem genellikle gerçek kullanıcı izleme (RUM) olarak bilinir. RUM, CLS'nin cihaz özellikleri, ağ koşulları, kullanıcı etkileşimi ve sayfa kişiselleştirme gibi gerçek dünyadaki faktörlerden nasıl etkilendiğini gözlemlemenizi sağlar. Bunların simüle edilmesi genellikle sentetik testlerle zor veya imkansızdır.
Düzen kaymasını en aza indirme
Düzen kaymasını önlemenin tek garantili yolu, CSS kullanarak belirli bir reklam alanı için yeterli miktarda alan ayırmaktır. Doğrudan div reklam alanında sabit bir yükseklik ve genişlik ayarlamak bunu yapmanın en etkili yoludur. Ancak bu, statik ve sabit boyutlu reklam alanlarında iyi sonuç verirken, daha karmaşık senaryolar için daha incelikli bir yaklaşım gerekebilir. Sık karşılaşılan bazı senaryolar aşağıdaki bölümlerde 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ınlamak üzere yapılandırılan en büyük boyut için alan ayırın.
- Yayınlanacak şekilde yapılandırılan en küçük boyut için alan ayırın.
- Google Ad Manager raporlarındaki geçmiş doluluk verilerinin incelenmesiyle belirlenen, yayınlanma olasılığı en yüksek boyut için alan ayırın.
Doğru yaklaşımı seçme
Yayınlanacak şekilde yapılandırılan en büyük boyut için alan 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şluk oluşmasına neden olabilir. Reklam alanının, yayınlanan reklam öğesinin boyutuyla eşleşmesi için daraltılması ek bir düzen kaymasına neden olur. Bu nedenle, bunu yapmamanız önerilir. Bunun yerine, fazla boş alanın görsel etkisini azaltmak için dikey ve yatay ortalama kullanılabilir.
Diğer yandan, sunum için yapılandırılan en küçük boyut için alan ayırmak, reklamınızın çevresinde fazladan boş alan oluşmasını önler. Reklam alanınız genellikle daha küçük reklam öğeleriyle doluysa veya alanın desteklediği tüm boyutların benzer olduğu durumlarda bu iyi bir seçenek olabilir. Ancak bu yöntem, ayrılan boyuttan daha büyük bir reklam öğesinin sunulması durumunda bir düzen kaymasıyla sonuçlanır (bununla birlikte, bu tür kaymalar hiç alan ayırmamayla karşılaştırıldığında genellikle daha küçüktür).
Boş alan ile düzen kaymaları arasında denge kurmak için reklam alanlarınıza "ortalama" miktarda alan ayırabilirsiniz. Örneğin, 100px dikey olarak ayrılırsa 320x50 reklam öğesi yayınlandığında küçük bir boş alan oluşur, ancak hiç alan ayırmamaya kıyasla CLS puanı düşer. Kendi siteniz için en iyi dengeyi bulmak üzere farklı boyutlarla denemeler yapmanız gerekir.
Belirli bir alan için ne kadar alan ayrılacağını belirlerken, Google Ad Manager raporlarındaki geçmiş dolgu verilerini incelemek daha bilinçli bir karar vermenize yardımcı olabilir. Bunu en iyi şekilde birkaç örnekle açıklayabiliriz.
1. Örnek
| Reklam boyutu (yayınlanan) | Reklam Sunucusu Gösterimleri (%) |
|---|---|
300x250 |
%70 |
320x50 |
30% |
Bu durumda, 250px dikey olarak ayırmak, yayınlanan reklam öğelerinin çoğunluğu 300x250 olduğundan CLS'yi önemli ö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ğunluğunun yüksekliği en fazla 90px olduğundan, 90px için dikey rezervasyon yapılması çoğu zaman düzen kaymasının önüne geçmiş olur.
Yer ayırtma
min-height ve min-width CSS özellikleri aracılığıyla reklam alanınızın boyutunu belirterek bu sorunu gidermenizi öneririz:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
Min-height ve min-width özelliklerini kullanmak, tarayıcının kapsayıcı boyutunu gerektiği şekilde artırmasına izin verirken reklam alanınız için minimum miktarda alan ayırmanıza olanak tanır. Bu, daha büyük bir reklam öğesinin yayınlanması durumunda hiçbir içeriğin kesilmemesini sağlar.
Farklı ekran boyutları için farklı minimum değerler belirtmek amacıyla bu tekniği CSS medya sorguları ile birleştirebilirsiniz:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
Komut dosyası yüklenirken bir düzen kaymasına neden olabileceğinden JavaScript ile alan ayırmaktan 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 grubunu belirtmez. Bunun yerine bu alanlar, kendilerine sunulan reklam öğesi içeriğine sığacak şekilde otomatik olarak yeniden boyutlandırılır ve belirsiz boyutlu reklam öğelerini desteklemelerini sağlar. Sonuç olarak, reklam içeriği isteğinde bulunmadan önce bu alanlar için alan ayırmak mümkün değildir ve değişken boyutlu reklamlar her zaman düzen kaymalarına neden olur.
Değişken reklam alanlarıyla çalışırken düzen kaymalarının etkilerini azaltmak için aşağıdakileri öneririz:
- Ekranın alt kısmındaki alanlar için yalnızca
fluidboyutunu kullanın. - Değişken slotları, alan yeniden boyutlandırılmadan önce kullanıcının sayfayı kaydırma ihtimalini en aza indirmek için mümkün olduğunca erken getirin.
Daraltılabilen ve genişleyen reklam alanları
collapseEmptyDivs() yöntemi, gösterilecek reklam içeriği olmadığında reklam alanı div'lerini sayfada yer kaplamamaları için daraltmanızı sağlar. Ancak bu özellik, istenmeyen düzen kaymalarına neden olabileceğinden 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ünde iki farklı noktada düzen kaymasına neden olabilir.
Bu özellikten yararlanmanız gerekirse aşağıdaki en iyi uygulamaları uygulamak için Ad Manager raporlarındaki geçmiş dolgu verilerini kullanarak düzen kaymalarının etkisini azaltabilirsiniz:
- Doldurulma olasılığı yüksek alanlar her zaman genişletilmiş ile başlamalıdır.
- Doldurulma olasılığı düşük alanlar her zaman daraltılmış olarak başlamalıdır.
Örnek uygulama için Boş reklam alanlarını daraltma örneğine bakın.