Yeniden başlatılan web sitesinde reklam görüntülenebilirliği %75'in üzerinde, hemen çıkma oranları %50 oranında azaldı ve sayfa görüntüleme sayısı %27 arttı.
Google, Core Web Vitals girişimini duyurduktan sonra Alman yayıncı Netzwelt, bu yeni metriklerin mükemmel bir sayfa deneyimi ve reklam tabanlı para kazanmada daha iyi bir performans sunma potansiyelini hemen fark etti. Web sitelerini yeniden kullanıma sunma yolculuğuna çıktılar. Bu süreçte, reklam etiketlerini ve yerleşimleri paralel olarak optimize ederken yaygın performansla ilgili en iyi uygulamaları uyguladılar. Mükemmel kullanıcı deneyimi ve hızlı sayfalar sunmaya odaklanmak, etkileşimi ve reklam gelirlerini birlikte optimize etmenin bir yolu oldu. Sayfa görüntüleme sayısı %27, reklam görüntülenebilirliği %75'in üzerinde ve reklamcılık gelirleri %18 arttı.
27%
Sayfa görüntüleme sayısında artış
18%
Reklam gelirinde artış
%75
Reklam görüntülenebilirliği
Yarışma
Diğer birçok haber yayıncısı gibi Netzwelt de yüksek reklam gelirlerini korurken kullanıcı deneyimini ve sayfa hızını optimize etme arasında doğru dengeyi bulma konusunda zorlandı. Karşılaştıkları başlıca zorluklar şunlardı:
- Özellikle çok boyutlu alanlardan ve üst banner'lardan gelen reklamlar tarafından tetiklenen düzen değişiklikleri nedeniyle yüksek Cumulative Layout Shift (CLS).
- Reklamların en büyük boyama olması veya hero resim yükleme işleminden bant genişliği alması nedeniyle Largest Contentful Paint'in (LCP) geç gelmesi.
- Reklamcılık, başlıktan teklif alma ve diğer amaçlar için gereken üçüncü taraf JavaScript'in neden olduğu yüksek ilk giriş gecikmesi (FID).
- Üçüncü taraf tedarikçiler tarafından kontrol edilen kullanıcı rızası iletişim kutularından kaynaklanan ve düzen kaymalarına da neden olan, Core Web Vitals'ta görülen yan etkiler. Bu yan etkiler, geç en büyük boyamalar olarak algılanabilir.
Bir haber web sitesini Core Web Vitals için optimize etme
Netzwelt, Önemli Web Verileri üzerinde çalışmaya başladığında, Önemli Web Verileri'ni optimize etmenin reklamları olumsuz etkilemesi gerekmediğini, aksine reklam görüntülenebilirliğini iyileştirmek için bir fırsat olarak kullanılabileceğini hemen fark etti. Bu nedenle Netzwelt ekibi, daha yüksek değerli reklamcılık çekmek için reklam görüntülenebilirliğini% 75'in üzerine çıkarmak amacıyla Core Web Vitals'ı optimize etti (görüntülü reklamlar için küresel ortalama %50'nin altındadır).
CLS'yi optimize etme
Reklamlar genellikle geç yüklenir (bazen bilinçli olarak, gecikmeli yükleme yoluyla) ve çok boyutlu ve değişken reklam yerleşimleri nedeniyle gerçek boyutları genellikle önceden bilinmez.
Sorun, ekranın üst kısmındaki ve alt kısmındaki reklamlar olarak ikiye ayrılabilir.
Sayfanın üst kısmındaki reklamlar, bilinmeyen boyutlarda geç yüklenmesi nedeniyle büyük düzen sıçramalarına neden olabilir. İhtiyaç duyabilecekleri en büyük alanı engellemek kötü kullanıcı deneyimine yol açabilir. Reklamverenlere sabit boyutlar istemek ise reklam gelirini azaltabilir. Netzwelt, üstteki reklamı yapışkan hale getirerek ve izin verilen daha büyük banner boyutlarından bazılarını kaldırarak bu sorunu çözdü. Yer paylaşımlı reklam, farklı boyutlardaki reklamlar için düzen sıçramalarının tetiklenmesini önler. Uygun boyutların azalması reklam satışlarını etkilese de daha iyi görüntülenebilirlik bu durumu kolayca telafi eder.
Geçmiş veriler ve A/B testleri, Netzwelt'in farklı cihazlar ve ekran boyutları için doğru boyutu ve konumlandırmayı, ayrıca alan ayırmak için kullanılan CSS medya kurallarını bulmasına yardımcı oldu.
Ekranın alt kısmındaki reklamlar önemli iyileştirmeler yapmanıza olanak tanır:
- Görünmeyen ancak yüklenen bir banner, reklam görüntülenebilirliğini düşürür ve sayfa deneyimini kötüleştirir.
- Kullanıcı ekranı kaydırırken yüklenen bir banner, ek içerik sıçramalarına neden olabilir.
Netzwelt, iyi bir sayfa deneyimi ve yüksek reklam görüntülenebilirliği sağlamak için yavaş yükleme özelliğini uyguladı ve en küçük ortak payda boyutu için ayrılmış alan kullandı. Çok boyutlu bir bölgede, 300x250 ila 300x600 boyutlarında istenen banner'lar için 250 piksel yükseklik ayrılır. Bu sayede, küçük boyutlarda düzen kaymaları ortadan kaldırıldı ve büyük banner'larda büyük ölçüde azaltıldı. Bu yaklaşım ideal olmasa da başlangıç için iyi bir uzlaşmadır.
Daha fazla optimizasyon yapmak için Netzwelt, reklam yerleşimlerini kontrol etmek ve düzen kaymalarını azaltmak amacıyla Intersection Observer'ı ve Network Information API'yi kullandı. Kaydırma konumuna ve ağ bağlantısı kalitesine bağlı olarak farklı reklam konumları ve yavaş yükleme stratejileri kullanılır. Ayrıca reklamlar birden çok boyutta sabit boyuta değiştirilebilir. Algoritmanın amacı, düzen değişikliklerini en aza indirirken reklam görüntülenebilirliğini her zaman en üst düzeye çıkarmaktır. NetworkInfo API'yi desteklemeyen tarayıcılar, cihaz ve IP'den türetilen ağ türünün bir kombinasyonuna dayalı bir proxy değeri kullanır. Bu uyarlanabilir yükleme stratejisi, özellikle yavaş internet bağlantısına sahip kullanıcılar için CLS'yi azaltır.
FID'yi optimize etme
Reklamlar genellikle birçok ek JavaScript kitaplığıyla birlikte geldiğinden, ilk giriş gecikmesi haber yayıncıları için sorun gibi görünebilir. Lighthouse gibi laboratuvar verilerine bakıldığında olumsuz bir etki olduğu görülüyor. Ancak 2020 Web Almanağı'ndaki alan verilerine bakıldığında birçok web sitesinin yanıt süresinin yeterince hızlı olduğu görülüyor. Bunun bir kısmı, reklam JavaScript'inin geç yüklenmesinden (ilk girişten sonra), iyi önbelleğe alınmasından (ör. v8 kodu önbelleğe alma işleminin uygulanması) veya reklam tedarikçi firmaları tarafından iyi optimize edilmesinden kaynaklanır. Tedarikçi firma görüntülenebilirlik izleyicileri, uzun görevlerden kaçındığından çalışma süresinin toplamı uzun olsa bile Toplam Engelleme Süresi (TBT) ve FID etkilenmez. FID, Netzwelt için büyük bir sorun olmasa da yapılması gereken bazı optimizasyonlar vardı:
- Mümkünse tek bir yığına odaklanarak reklam komut dosyalarını ve sağlayıcıları azaltın.
- Tüm komut dosyalarını defer veya async ile yükleme.
- Ağ azaltma ve paketi açma için webpack veya benzer teknolojileri kullanma
- Basit BEM benzeri CSS kuralları kullanma
- Uzun süre çalışan görevlerden kaçının ve acil olana kadar bekleme modelini kullanın.
- Düzenin etkilendiği her yerde RequestAnimationFrame ile çalışma
LCP'yi optimize etme
En büyük zengin içerikli boyama, reklamlardan iki şekilde etkilenebilir: Bir reklamın en büyük boyama olarak açıkça tanınması ve dolaylı olarak ağ bant genişliğini tıkaması veya kritik yolu etkilemesi (böylece gerçek en büyük boyama (ör. hero resim) yeterince hızlı yüklenemez).
Netzwelt, CLS için optimizasyon yaparken orta dikdörtgen reklamları en üst reklam alanlarından zaten kaldırmıştı. Bu sayede reklamlar en büyük öğe haline gelmedi.
Netzwelt, içeriklere reklamlardan daha fazla öncelik veren katı bir politika izler. Netzwelt, sayfanın üst kısmında kullanılan hero resimlere ve yazı tiplerine öncelik verdi ve kritik yolu, reklam komut dosyalarına ve reklamlara göre öncelik verecek şekilde optimize etti. Bu önceliklendirme, LCP'nin reklamlardan etkilenmemesine yardımcı oldu.
Netzwelt, bu optimizasyonların yanı sıra diğer en iyi uygulamaları da uyguladı:
- Kritik oluşturma yolu için CSS'yi ayırın ve üstbilgiye koyun.
- En önemli yazı tipleri, komut dosyaları ve resimler önceden yüklenir.
- Sayfanın üst kısmındaki resimlerin geç yüklenmesi engellendi.
font-display="swap"kullanılıyor.
GDPR İzni ve Core Web Vitals
İzin iletişim kutuları genellikle Önemli Web Verileri'ni olumsuz yönde etkiler. Reklamlarda olduğu gibi, izin iletişim kutularının Önemli Web Verileri'ni etkilemesinin iki yolu vardır:
- En büyük boyama olarak algılanırsa veya düzen kaymalarına neden olursa açıkça.
- Gerçek en büyük boyamadan bant genişliği çalarak, en büyük boyaya giden kritik yolu engelleyerek veya reklamları izin verilene kadar geciktirerek (bu da düzen değişikliklerini tetikleyebilir).
Netzwelt, optimizasyonları da uygulayan bir üçüncü taraf izin sağlayıcıyla çalışır. İlk olarak Netzwelt, basit tuzaklardan kaçınmaya çalıştı:
- İzin komut dosyaları, kritik kaynakları engellememek için ayarsız olarak yüklenir.
- İzin, büyük öğelerin LCP'deki en büyük öğe olarak uygun olmaması için biçimlendirilir.
- İzin yer paylaşımı, kaymaları önlemek için
position: fixedkullanır. - Reklamlar yalnızca izin verildikten sonra gösterilse de reklamlar yüklenirken düzen kaymalarını önlemek için önceden yeterli boşluk bırakılır.
- İzin iletişim kutusunun görüntülenmesi ve konumlandırılmasının düzen değişikliklerini tetiklemediğinden emin olun. Burada tespit edilip düzeltilen sorunlardan biri, hizmet sağlayıcının kaydırma kilidi seçeneğiydi. Bu seçenek, kullanıcının izni gösterilirken makalenin ana içeriğini kaydırarak kaydırma işlevini devre dışı bırakıyor ve sayfa düzeninin kaymasına neden oluyordu.
Bu çalışmadan sonra, saha ve laboratuvar CLS'si arasında hâlâ büyük tutarsızlıklar vardı. Laboratuvar CLS'si sıfıra yakınken alan değerleri eşiklerin önemli ölçüde üzerindeydi. İnceleme sonucunda, sorunun kaynağının izin iFrame'sinde yaşanan düzen kaymaları olduğu tespit edildi. Bu kaymalar şu anda yalnızca alan verilerinde doğru şekilde yakalanıyor. Netzwelt, bu sorunu iyileştirmek için üçüncü taraf izin sağlayıcıyla çalışmaya devam ediyor.
Haber Aboneliği Modelleri ve Core Web Vitals
Haber yayıncıları, gazeteciliği finanse etmek için abonelik modellerine geçiyor. Kullanıcılar kötü kullanıcı deneyimi sunan web sitelerine abone olmayacağından bu model, Core Web Vitals ile ilgilidir. Ayrıca, aboneler ücretli içerikte reklam görmeyi beklemez ancak reklamları gizlemek, düzen değişikliklerine neden olabilir. Web sitesinin, kullanıcıların içeriği görüntüleme hakkına sahip olup olmadığını ve reklam gösterilip gösterilmeyeceğini kontrol etmesi gerekir. Bu kontroller, ek gecikmeler oluşturarak içerik kaymalarına veya kötü bir kullanıcı deneyimine neden olabilir.
Netzwelt, içeriğin her zaman ücretsiz olduğu ancak abonelerin reklam görmediği bir model kullanıyor. Gecikmeleri ve düzen değişikliklerini azaltmak için ayrıcalıkları sorgulamak ve depolamak için farklı yöntemler araştırdılar.
İlk hak talebi sorgusu her zaman gecikmeye neden olduğundan, hak taleplerini sorgulamak çok uzun sürerse site son önbelleğe alınmış durumu gösterir. Yeni aboneler için bu, ücretli bir kullanıcının reklamları bir kez görme riskinin düşük olduğu anlamına gelir. Aboneliğini yeni sonlandıran kullanıcılar, yerel olarak depolanan ayrıcalıklar güncellenmeden önce reklamsız bir yükleme görebilir. Hak talepleri belirlendikten sonra, gelecekte gezinme sırasında ek gecikmeler ve düzen değişiklikleri yaşanmaması için LocalStorage API kullanılarak yerel olarak depolanır.
Optimizasyon Sonuçları
Netzwelt'in optimizasyonlarının sonuçları ortada. PageSpeed Insights puanı, dünya genelindeki haber yayıncıları arasında benzersizdir:
Optimizasyonlar sayfa deneyimini iyileştirdi ancak işletmeyi göz önünde bulundurarak yapıldı ve reklam deneyimini, reklam görüntülenebilirliğini ve geliri artırdı. Optimize edilen sayfayı yeniden başlattıktan sonra Netzwelt, reklam görüntülenebilirliği %75'in üzerindeyken BGBM'de %20-30 artış elde etti. Ancak Netzwelt, toplam gelir artışını daha da yüksek olarak tahmin ediyor. Yeniden lansmandan bu yana trafik arttı. Bu artış, muhtemelen daha iyi kullanıcı deneyimi sayesinde daha yüksek kullanıcı etkileşimi ve daha düşük hemen çıkma oranlarından kaynaklanıyor. Trafik doğal olarak dalgalanmalar gösterdiğinden ve küresel pandeminin de etkileri olduğundan bu etkilerin yeniden lansmanla nedensel ilişkisini belirlemek ve ölçmek zordur. Bu dolaylı etkiler, Netzwelt'in siteyi incelerken yalnızca yanıltıcı olabilecek BGBM'ye değil, her zaman tüm sayılara bakmasının nedenlerinden biridir. Core Web Vitals ve kullanıcı deneyimi metrikleri, reklamlarla ilgili tüm metriklerle birlikte gerçek tabloyu sunar.
Geleceğe bakma
Netzwelt, üçüncü taraf çerezlerinin olmadığı bir gelecekte, içerik aracılığıyla bağlama dayalı hedeflemenin, iyi kullanıcı deneyimi ve sayfa deneyimiyle (reklam görüntülenebilirliği dahil) birlikte bir haber yayıncısı olarak başarının anahtarı olduğuna inanıyor.
Bu nedenle Netzwelt, Core Web Vitals'ı uygulamakla yetinmeyip yeni Digital Goods API'yi kullanarak Progressive Web Apps (PWA), çevrimdışı içerik, karanlık mod, Web Share API ve Güvenilir Web Etkinlikleri (TWA) gibi birçok modern web özelliğini de uygulayarak daha da ileri gitti.