Önemli Web Verileri'ni kullanmak, Netzwelt'in reklamcılık gelirlerini nasıl %18 artırdı?

Ayrıca, yeniden etkinleştirilen web sitesinde reklam görüntülenebilirliği %75'in üzerinde, hemen çıkma oranı %50 azaldı ve sayfa görüntüleme sayısı %27 arttı.

Martin Schierle

Google, Core Web Vitals girişimini duyurduğunda, Alman yayıncı Netzwelt bu yeni metriklerin, mükemmel bir sayfa deneyimi ve daha iyi reklam temelli para kazanma yolundaki potansiyelini hızla fark etti. Reklam etiketlerini ve yerleşimleri buna paralel olarak optimize ederken yaygın performans en iyi uygulamalarını izleyerek web sitesini yeniden yayına soktular. Mükemmel kullanıcı deneyimi ve hızlı sayfalar sunmak, sayfa görüntülemelerinin %27, reklam görüntülenebilirliğinin %75'in üzerinde ve reklam gelirlerinin %18 oranında artmasıyla, etkileşimi ve reklam gelirlerini optimize etmek için önemli bir yol olduğunu kanıtladı.

Yarışma

Diğer birçok haber yayıncısı gibi Netzwelt de yüksek reklam gelirlerini korurken kullanıcı deneyimini optimize etme ile sayfa hızını optimize etme arasında doğru dengeyi bulmakta zorlandı. Karşılaştıkları başlıca zorluklar şunlardı:

• Özellikle çok boyutlu alanlar ve üst banner'lar olmak üzere reklamlar tarafından tetiklenen düzen kaymaları nedeniyle yüksek Cumulative Layout Shift (CLS) değeri.
• Largest Contentful Paint (LCP) reklamı, reklamların en büyük boyama olması veya hero resim yüklemesinden bant genişliğinin kullanılması nedeniyle gecikiyor.
• Reklamcılık, başlıktan teklif alma ve diğer amaçlar için gerekli olan üçüncü taraf JavaScript'in neden olduğu yüksek İlk Giriş Gecikmesi (FID).
• Üçüncü taraf tedarikçi firmalar tarafından kontrol edilen izin iletişimlerinin Önemli Web Verileri üzerindeki yan etkileri. Bunlara ek olarak düzen kaymalarına da neden olur ve geç en yüksek boyama olarak tespit edilebilir.

Haber web sitelerini 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 şekilde etkilemesine gerek olmadığını, ancak reklam görüntülenebilirliğini iyileştirmek için bir fırsat olarak kullanılabileceğini hızlı bir şekilde fark ettiler. Bu nedenle Netzwelt ekibi, daha yüksek değerli reklamcılık için dünya genelindeki ortalama % 50'nin altında reklam görüntülenebilirliğini%75'in üzerine çıkaracak şekilde Core Web Vitals'ı optimize etti.

CLS'yi optimize etme

Reklamlar genellikle geç yüklenir (bazen geç yükleme yoluyla bilinçli olarak) ve çok boyutlu ve değişken reklam yerleşimleri nedeniyle gerçek boyutları genellikle önceden bilinmez.

Sorun ikiye ayrılabilir: ekranın üst ve alt kısmındaki reklamlar.

Ekranın üst kısmındaki reklamlar, bilinmeyen boyutlarla geç yüklenmesi nedeniyle düzende büyük atlamalara neden olabilir. İhtiyaç duyabilecekleri en büyük alanı engellemek kötü bir kullanıcı deneyimine yol açabilir. Öte yandan, reklamverenlerden sabit boyutlar istemek 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 atlamalarını tetiklemeyi önler. Uygun boyutların küçültülmesi reklam satışlarını etkilese de görüntülenebilirliğin daha iyi olması bunu 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 yer ayırmak için kullanılan CSS medya kurallarını bulmasına yardımcı oldu.

Ekranın alt kısmındaki reklamlar, önemli ölçüde iyileştirme yapılabilir:

• Görülmeyen ancak yüklenen bir banner, reklam görüntülenebilirliğini kötüleştirir ve sayfa deneyimini kötüleştirir.
• Kullanıcı sayfayı kaydırdığı sırada yüklenen bir banner, ek içerik atlamalarına yol açabilir.

Netzwelt, iyi bir sayfa deneyimi ve yüksek reklam görüntülenebilirliği sağlamak için geç yükleme ve en düşük ortak payda boyutu için ayrılmış alan uyguladı. Çok boyutlu bir bölgede banner'lar 300x250 ila 300x600 boyutlarında, 250 piksel yüksekliğinde ayrılır. Bu, daha küçük boyutlar için düzen kaymalarını ortadan kaldırdı ve daha büyük banner'lar için boyutları büyük ölçüde azalttı. Bu yaklaşım optimum değildir, ama bir başlangıç ve iyi bir uzlaşma sağlar.

Netzwelt, daha da fazla optimizasyon sağlamak amacıyla reklam yerleşimlerini kontrol etmek ve düzen kaymalarını azaltmak için Intersection Observer ve Network Information API'yi kullandı. Kaydırma konumuna ve ağ bağlantısı kalitesine bağlı olarak farklı reklam konumları ve geç yükleme stratejileri kullanılır. Ayrıca, reklamlar birden fazla boyuttan sabit boyuta değiştirilebilir. Algoritmanın amacı, her zaman düzen kaymalarını en aza indirirken reklam görüntülenebilirliğini en üst düzeye çıkarmaktır. NetworkInfo API'yi desteklemeyen tarayıcılar, cihaz ve IP'den türetilmiş ağ türünün kombinasyonuna dayalı bir proxy değeri kullanır. Bu uyarlanabilir yükleme stratejisi özellikle internet bağlantısı yavaş olan kullanıcılar için CLS'yi azaltır.

FID'yi optimize etme

Reklamlarda genellikle çok sayıda ek JavaScript kitaplığı bulunduğundan, İlk Giriş Gecikmesi haber yayıncıları için bir sorun olarak görülebilir. Bu durumun Lighthouse gibi laboratuvar verilerine bakmanın olumsuz bir etkisi olduğu görülüyor. Ancak 2020 Web Almanağı'ndaki alan verilerine baktığımızda birçok web sitesinin yeterince hızlı yanıt verdiğini görüyoruz. Bunun bir kısmı, reklam JavaScript'inin geç yüklenmesi (ilk girişten sonra), önbelleğe alınması (örneğin, v8 kod önbelleğe almanın işlenmesinin alınması) veya reklam tedarikçileri tarafından iyi bir şekilde optimize edilmesinden kaynaklanır. Tedarikçi firma görüntülenebilirlik izleyicileri, uzun görevlerden kaçındıklarından emin olur. Böylece, çalışma zamanı toplamı uzun olduğunda bile Toplam Engelleme Süresi (TBT) ve FID etkilenmez. FID, Netzwelt için büyük bir sorun değildi, ancak yapılması gereken bazı optimizasyonlar vardı:

• Reklam komut dosyalarını ve sağlayıcıları azaltıp mümkünse tek bir yığına odaklanma.
• Erteleme veya eşzamansız tüm komut dosyaları yükleniyor.
• Ağaç sallama ve ayrıştırma için web paketi veya benzer teknolojileri kullanma
• Basit BEM benzeri CSS kuralları kullanma.
• Uzun süren görevlerden kaçınmak ve boşta-acil modelini kullanmak.
• Düzenin etkilendiği her yerde RequestAnimationFrame ile çalışma.

LCP'yi optimize etme

Largest Contentful Paint, reklamlardan iki şekilde etkilenebilir. Örneğin, reklamın en büyük boya olarak tanınması açık bir şekilde ve dolaylı olarak ağ bant genişliğini tıkayarak veya kritik yolu etkileyerek gerçek en büyük boyanın (örneğin bir hero resim) yeterince hızlı yüklenmemesini sağlayabilir.

Netzwelt, CLS için optimizasyon yaparken orta boy dikdörtgen reklamları zaten üstteki reklam alanlarından kaldırmıştı. Bunun sağladığı ek avantaj, reklamların en büyük öğe haline gelmemesiydi.

Netzwelt, içeriğe reklamlar üzerinde öncelik vermek için katı bir politika izlemektedir. Netzwelt, ekranın üst kısmında kullanılan hero resimlere ve yazı tiplerine öncelik verip kritik yolu, reklamcılık komut dosyaları ve reklamlara göre öncelikli olacak şekilde optimize etti. Bu önceliklendirme, LCP'nin reklamlardan etkilenmemesini sağladı.

Netzwelt, bu optimizasyonların yanı sıra diğer en iyi uygulamaları da takip etti:

• Kritik oluşturma yolu için CSS'yi ayırın ve başlığa yerleştirin.
• En önemli yazı tipleri, komut dosyaları ve resimler önceden yüklendi.
• Ekranın üst kısmına resimler geç yüklenmesinden kaçınıldı.
• font-display="swap" kullanıldı.

GDPR İzni ve Önemli Web Verileri

İzin diyalogları genellikle Core Web Vitals'ı olumsuz etkiler. Reklamlarda olduğu gibi, rıza mesajı da Core Web Vitals'ı iki şekilde etkileyebilir:

• En büyük boya olduğu veya düzen kaymalarına neden olduğu tespit edilirse açık bir şekilde.
• Bu yöntem, en büyük boyadan bant genişliğini çalarak, en büyük boyaya giden kritik yolu engelleyerek veya reklamları izin gelene kadar geciktirerek düzen kaymalarını tetikleyebilir.

Netzwelt, optimizasyonları da uygulayan bir üçüncü taraf izin sağlayıcısı ile çalışmaktadır. İlk olarak Netzwelt, önemli tuzakları atlatmaya özen gösterdi:

• İzin komut dosyaları, kritik kaynakların engellenmemesi için eşzamansız olarak yüklenir.
• İzin, büyük öğeler LCP içindeki en büyük öğe olarak uygun olmayacak şekilde biçimlendirilir.
• İzin yer paylaşımı, kaymaları önlemek için position: fixed değerini kullanır.
• Reklamlar yalnızca izin verildikten sonra gösterilir ancak reklamlar yüklendiğinde düzen kaymalarını önlemek için önceden yeterli boşluk korunur.
• İzin iletişim kutusunun gösterilmesinin ve konumlandırmasının düzen kaymalarını tetiklemediğinden emin olun. Burada tespit edilen ve düzeltilen bir sorun, servis sağlayıcının kaydırma kilidi seçeneğiydi. Bu seçenek, izin gösterilirken makalenin ana içeriğini kaydırma sırasında hareket ettirerek düzen kaymalarına neden olarak kaydırmanın devre dışı bırakılmasıdır.

Bu çalışmadan sonra, alan ile laboratuvar CLS'si arasında büyük farklılıklar bulunuyordu. Laboratuvar CLS'si sıfıra yakın olsa da alan değerleri eşiklerin önemli ölçüde üzerindeydi. Araştırmanın ardından, izin iframe'indeki düzen kaymaları, şu anda yalnızca alan verilerinde doğru şekilde yakalanmaktaydı. Netzwelt, bu sorunu iyileştirmek için üçüncü taraf izin sağlayıcıyla çalışmaya devam etmektedir.

Haber Aboneliği Modelleri ve Önemli Web Verileri

Haber yayıncıları, gazeteciliğe fon sağlamak için abonelik modellerine geçiş yapıyor. Kullanıcılar kötü bir kullanıcı deneyimi sunan web sitelerine abone olmadıklarından, bu model Core Web Vitals ile ilgilidir. Ayrıca aboneler ücretli içeriklerde reklam görmeyi beklemezler, ancak reklamların gizlenmesi düzen kaymalarına neden olabilir. Web sitesinin, kullanıcıların içeriği görüntüleme hakkına sahip olup olmadığını ve reklam gösterip göstermeyeceğini kontrol etmesi gerekir. Bu kontroller ek gecikmelere, dolayısıyla içerik değişikliklerine veya kötü bir kullanıcı deneyimine yol açabilir.

Netzwelt, içeriğin her zaman ücretsiz olduğu, ancak abonelerin reklam görmediği bir model kullanıyor. Gecikmeleri ve düzen kaymalarını azaltmak için yararlanma haklarını sorgulamanın ve depolamanın farklı yollarını araştırdılar.

Yararlanma hakkı için yapılan ilk sorgu her zaman gecikmelere neden oluyordu. Bu nedenle, hakların sorgulanması çok uzun sürerse site, önbelleğe alınmış son durumu gösterir. Yeni aboneler için bu, ödeme yapan bir kullanıcının reklamları bir kez görme riskinin küçük olduğu anlamına gelir. Bir aboneliği yalnızca sona erdiren kullanıcılar, yerel olarak depolanan yararlanma hakları güncellemesinden önce reklamsız bir yükleme görebilir. Yararlanma hakları öğrenildikten sonra ileride gezinme sırasında ek gecikmeleri ve düzen kaymalarını önlemek için LocalStorage API kullanılarak yerel olarak depolanır.

Optimizasyon Sonuçları

Netzwelt'in optimizasyonlarının sonuçları ortada. PageSpeed Insights puanının dünya genelindeki haber yayıncıları açısından benzersiz bir puanı var:

Optimizasyonlar sayfa deneyimini iyileştirdi ancak işletme göz önünde bulundurularak yapıldı. Bu optimizasyonlar reklam deneyimini, reklam görüntülenebilirliğini ve geliri artırdı. Optimize edilmiş sayfayı tekrar kullanıma sunduktan sonra Netzwelt, BGBM'de %20-30 oranında artış ve %75'in üzerinde bir reklam görüntülenebilirliği elde etti. Ancak Netzwelt, toplam gelir artışının daha da yüksek olacağını varsayıyor. Muhtemelen daha yüksek kullanıcı etkileşimi ve iyileştirilmiş kullanıcı deneyimi nedeniyle daha düşük hemen çıkma oranları nedeniyle yeniden lansmandan bu yana trafik arttı. Trafik doğal olarak dalgalandığı ve küresel pandeminin etkileri olduğu için bu etkileri ölçmek ve yeniden lansmanla nedensel ilişki içinde belirlemek zordur. Bu dolaylı etkiler, Netzwelt'in sitesini incelerken her zaman tüm sayılara bakmasının nedenlerinden biri. Sadece BGBM'ye değil, bu da yanıltıcı olabilir. Önemli Web Verileri ve kullanıcı deneyimi metrikleri, reklamla ilgili tüm metriklerle birlikte gerçek resmi sağlar.

Geleceğe bakış

Netzwelt, üçüncü taraf çerezlerinin olmadığı bir gelecekte, içerik aracılığıyla içeriğe dayalı hedeflemenin iyi kullanıcı deneyimi ve sayfa deneyimiyle (reklam görüntülenebilirliği dahil) bir araya geldiğinde bir haber yayıncısı olarak başarının anahtarı olduğuna inanıyor.

Bu nedenle Netzwelt, Core Web Vitals ile yetinmekle kalmayıp yeni Digital Goods API'yi kullanarak Progresif Web Uygulamaları (PWA), çevrimdışı içerik, koyu mod, Web Paylaşımı API'si ve Güvenilir Web Etkinlikleri (TWA) gibi birçok modern web özelliğini uygulayarak daha da fazlasını yapıyor.