Google, Core Web Vitals girişimini duyurduğunda, Alman yayıncı Netzwelt bu yeni metriklerin harika bir sayfa deneyimine ve iyileştirilmiş reklam tabanlı para kazanmaya yönelik potansiyelini hızla fark etti. Reklam etiketlerini ve yerleşimleri paralel olarak optimize ederken ortak performans en iyi uygulamalarını uygulayarak web sitelerini yeniden başlatmak için bir yolculuğa çıktılar. Mükemmel kullanıcı deneyimine ve hızlı sayfalara bağlı kalmanın, etkileşimi ve reklam gelirlerini birlikte optimize etmenin bir yolu olduğu kanıtlandı; sayfa görüntülemeleri %27 arttı, reklam görüntülenebilirliği %75’in üzerinde ve reklam gelirleri %18 arttı.
27%
Sayfa görüntülemelerinde artış
18%
Reklam gelirinde artış
Meydan okuma #
Diğer birçok haber yayıncısı gibi Netzwelt de yüksek reklam gelirlerini korurken kullanıcı deneyimini optimize etmek ile sayfa hızı arasında doğru dengeyi bulmakta 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 kaymaları nedeniyle Yüksek Kümülatif Düzen Kayması (CLS).
- En Büyük İçerikli Boyama (LCP), reklamların en büyük boyama olması veya ana resim yüklemesinden bant genişliği alması nedeniyle geç geliyor.
- Üçüncü taraf JavaScript’in neden olduğu Yüksek İlk Giriş Gecikmesi (FID), reklamcılık, başlık teklifi verme ve diğer amaçlar için gereklidir.
- Üçüncü taraf satıcılar tarafından kontrol edilen onay iletişim kutularından Önemli Web Verileri üzerindeki yan etkiler, bu da düzen değişikliklerine eklendi ve geç büyük boyamalar olarak algılanabilir.
Bir haber sitesini Önemli Web Verileri için optimize etme #
Netzwelt, temel web hayati değerleri üzerinde çalışmaya başladığında, Önemli Web Verilerini optimize etmenin reklamları olumsuz etkilemesi gerekmediğini, ancak reklam görüntülenebilirliğini iyileştirmek için bir fırsat olarak kullanılabileceğini hemen fark ettiler. Bu nedenle Netzwelt ekibi, daha yüksek değerli reklamları (görüntülü reklamlar için küresel ortalama) çekmek üzere reklam görüntülenebilirliğini %75’in üzerine çıkarmak için Önemli Web Verilerini optimize etti. %50’den az).
CLS’yi optimize etme #
Reklamlar genellikle geç yüklenir (bazen bilinçli olarak yavaş yükleme yoluyla) ve çok boyutlu ve akıcı reklam yerleşimleri nedeniyle gerçek boyutları genellikle önceden bilinmez.
Sorun, ekranın üst kısmındaki ve altındaki reklamlar olarak ikiye ayrılabilir.
Ekranın üst kısmındaki reklamlar Bilinmeyen boyutlarda geç yükleme nedeniyle çok büyük düzen atlamalarına neden olabilir. İhtiyaç duyabilecekleri en büyük alanı engellemek, kötü kullanıcı deneyimine yol açabilirken, 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ın tetiklenmesini önler. Azaltılmış uygun boyutlar reklam satışlarını etkilese de, daha iyi görüntülenebilirlik bunu kolayca dengeler.
Geçmiş verileri ve A/B testleri, Netzwelt’in farklı cihazlar ve ekran boyutları için doğru boyutu ve konumu ve yer ayırmak için kullanılan CSS medya kurallarını bulmasına yardımcı oldu.
Ekranın altındaki reklamlar önemli iyileştirme için alan sunar:
- Görülmeyen ancak yüklenen bir banner, zayıf reklam görüntülenebilirliği oluşturur ve sayfa deneyimini kötüleştirir.
- Kullanıcı sayfayı kaydırdığında yüklenen bir banner, ek içerik atlamalarına neden olabilir.
Netzwelt, iyi bir sayfa deneyimi ve yüksek reklam görüntülenebilirliğini sürdürmek için yavaş yükleme uyguladı ve en küçük ortak paydanın boyutu için yer ayırdı. Çok boyutlu bir alanda, 300×250 ila 300×600 boyutlarında istenen banner’lar, 250px yüksekliğinde ayrılmıştır. Bu, daha küçük boyutlar için düzen değişikliklerini ortadan kaldırdı; ve daha büyük afişler için bunları büyük ölçüde azalttı. Bu yaklaşım optimal değildir, ancak bir başlangıç ve iyi bir uzlaşmadır.
Daha fazla optimize etmek için Netzwelt şunları kullandı: Kavşak Gözlemcisi ve Ağ Bilgileri API’sı reklam yerleşimlerini kontrol etmek ve düzen kaymalarını azaltmak için. Kaydırma konumu ve ağ bağlantı kalitesine bağlı olarak farklı reklam konumları ve yavaş yükleme stratejileri kullanılır ve reklamlar birden çok boyuttan sabit boyutlara 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’sini desteklemeyen tarayıcılar, cihaz ve IP’den türetilmiş ağ türünün birleşimine dayalı bir proxy değeri kullanır. Bu uyarlanabilir yükleme stratejisi, özellikle yavaş internet bağlantısı olan kullanıcılar için CLS’yi azaltır.
FID’yi optimize etme #
Reklamlar genellikle birçok ek JavaScript kitaplığıyla birlikte geldiğinden, İlk Giriş Gecikmesi haber yayıncıları için bir sorun gibi görünebilir. Ve Lighthouse gibi laboratuvar verilerine bakıldığında olumsuz bir etki var gibi görünüyor. Ancak, saha verilerine bakıldığında 2020 Web Almanak, birçok web sitesi yeterince hızlı yanıt veriyor. Bunun bir kısmı reklam JavaScript’inin geç yüklenmesi (ilk girişten sonra), iyi önbelleğe alınması (örneğin, v8 kodu önbelleğe alma) veya reklam satıcıları tarafından iyi bir şekilde optimize ediliyor. Satıcı görüntülenebilirlik izleyicileri, uzun görevlerden kaçınılmasını sağlar; böylece çalışma süresinin toplamı uzun olsa bile Toplam Engelleme Süresi (TBT) ve FID etkilenmez. FID, Netzwelt için çok büyük bir sorun olmasa da yapılması gereken bazı optimizasyonlar vardı:
- Reklam komut dosyalarını ve sağlayıcıları azaltmak, mümkünse tek bir yığına odaklanmak.
- Tüm komut dosyaları erteleme veya zaman uyumsuz olarak yükleniyor.
- Ağaç sallama ve ayrıştırma için webpack veya benzeri teknolojilerin kullanılması.
- Basit BEM benzeri CSS kuralları kullanma.
- Uzun süren görevlerden kaçınmak ve acil olana kadar boşta model.
- İle çalışan İstekAnimasyon Çerçevesi düzenin etkilendiği her yerde.
LCP’yi optimize etme #
En Büyük İçerikli Boyama, reklamlardan iki şekilde etkilenebilir – bir reklamı en büyük boyama olarak açıkça tanıyarak ve dolaylı olarak ağ bant genişliğini tıkayarak veya gerçek en büyük boyamanın (örneğin bir ana resim) yüklenememesi için kritik yolu etkileyerek. yeterince hızlı.
Netzwelt, CLS için optimizasyon yaparken orta boy dikdörtgen reklamları üstteki reklam alanlarından kaldırmıştı. Bu, reklamların en büyük unsur haline gelmemesi gibi ek bir fayda sağladı.
Netzwelt, içeriğe reklamlardan daha fazla öncelik vermek için katı bir politika izler. Netzwelt, ekranın üst kısmında kullanılan ana görsellere ve yazı tiplerine öncelik verdi ve kritik yolu, reklam komut dosyalarına ve reklamlara göre öncelik kazanacak şekilde optimize etti. Bu önceliklendirme, LCP’nin reklamlardan etkilenmemesine yardımcı oldu.
Bu optimizasyonların yanı sıra Netzwelt diğer en iyi uygulamaları takip etti:
- Kritik oluşturma yolu için ayrılmış CSS ve başlığa yerleştirin.
- En önemli yazı tipleri, komut dosyaları ve resimler önceden yüklenmiştir.
- Resimlerin ekranın üst kısmına geç yüklenmesi önlendi.
- Kullanılmış
font-display="swap".
GDPR İzni ve Önemli Web Verileri #
Onay iletişim kutuları genellikle Önemli Web Verilerini olumsuz etkiler. Reklamlarda olduğu gibi, bir izin iletişim kutusunun CWV’yi etkilemesinin iki yolu vardır:
- Açıkça en büyük boya olarak algılanırsa veya düzen kaymalarına neden olursa.
- Dolaylı olarak, gerçek en büyük boyamadan bant genişliğini çalarak, en büyük boyamaya giden kritik yolu bloke ederek veya reklamları izin alınana kadar geciktirerek, bu da düzen kaymalarını tetikleyebilir.
Netzwelt, optimizasyonlar da uygulayan üçüncü taraf bir izin sağlayıcıyla çalışır. Öncelikle Netzwelt, basit tuzaklardan kaçındığından emin oldu:
- Onay komut dosyaları, kritik kaynakları engellememek için zaman uyumsuz olarak yüklenir.
- Onay, büyük öğeler LCP’deki en büyük öğe olarak uygun olmayacak şekilde biçimlendirilmiştir.
- İzin yerleşimi kullanımları
position: fixedvardiya önlemek için. - Reklamlar yalnızca izin verildikten sonra gösterilirken, reklamlar yüklendiğinde düzen kaymalarını önlemek için önceden yeterli boşluk korunur.
- Onay iletişim kutusunun görüntülenmesi ve konumlandırılmasının düzen değişikliklerini tetiklememesini sağlamak. Burada bulunan ve düzeltilen sorunlardan biri, servis sağlayıcının, izin gösterilirken kaydırmayı devre dışı bırakan, makalenin ana içeriğini kaydırarak hareket ettirerek düzen kaymalarına neden olan kaydırma kilidi seçeneğiydi.
Bu çalışmadan sonra, saha ve laboratuvar CLS’si arasında hala büyük farklılıklar vardı. Laboratuvar CLS’si sıfıra yakınken, saha değerleri eşik değerlerin önemli ölçüde üzerindeydi. Soruşturmanın ardından suçlu, şu anda yalnızca saha verilerinde doğru bir şekilde yakalanan izin iframe’i içindeki düzen kaymalarıydı. Netzwelt, bu sorunu iyileştirmek için üçüncü taraf izin sağlayıcıyla çalışmaya devam ediyor.
Haber Aboneliği Modelleri ve Önemli Web Verileri #
Haber yayıncıları, gazeteciliği finanse etmek için abonelik modellerine geçiyor. İnsanlar, zayıf kullanıcı deneyimine sahip web sitelerine abone olmayacaklarından, bu model Önemli Web Verileri ile ilgilidir. Ayrıca aboneler ücretli içeriklerde reklam görmeyi beklemezler ancak reklamları gizlemek düzen kaymalarına neden olabilir. Web sitesinin, kullanıcıların içeriği görüntülemeye yetkili olup olmadığını ve reklam gösterip göstermediğini kontrol etmesi gerekir. Bu kontroller, ek gecikmelere neden olarak içerik kaymalarına veya kötü bir kullanıcı deneyimine yol açabilir.
Netzwelt, içeriğin her zaman ücretsiz olduğu ancak abonelerin reklam görmeyeceği bir model kullanıyor. Gecikmeleri ve düzen kaymalarını azaltmak için yetkilendirmeleri sorgulamanın ve depolamanın farklı yollarını araştırdılar.
Yetkilendirmenin ilk sorgusu her zaman gecikmelere neden olur ve bu nedenle, yetkilendirmelerin sorgulanması çok uzun sürerse site önbelleğe alınan son durumu görüntüler. 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 yeni sonlandıran kullanıcılar, yerel olarak depolanan yetkilendirme güncellemesinden önce reklamsız bir yükleme görebilir. Yetkilendirmeler bilindikten sonra, gelecekteki gezinme sırasında ek gecikmeleri ve düzen değişikliklerini önlemek için LocalStorage API kullanılarak yerel olarak depolanırlar.
Optimizasyon Sonuçları #
Netzwelt’in optimizasyonlarının sonuçları kendileri için konuşuyor. PageSpeed Insights puanları, dünya çapındaki haber yayıncıları arasında rakipsizdir:
Optimizasyonlar sayfa deneyimini iyileştirdi, ancak iş düşünülerek yapıldı ve reklam deneyimi, reklam görüntülenebilirliği ve gelir geliştirildi. Optimize edilmiş sayfayı yeniden başlattıktan sonra Netzwelt, %75’in üzerinde bir reklam görüntülenebilirliği ile BGBM’de %20-30’luk artışlar gördü. Ancak Netzwelt, toplam gelir artışının daha da yüksek olduğunu varsayar. Muhtemelen daha yüksek kullanıcı etkileşimi ve iyileştirilmiş UX nedeniyle daha düşük hemen çıkma oranları nedeniyle yeniden lansmandan bu yana trafik arttı. Trafik doğal olarak dalgalandığından ve küresel salgının etkileri de olduğundan, bu etkileri ölçmek ve yeniden lansmanla nedensel bir ilişki kurmak zordur. Bu dolaylı etkiler, Netzwelt’in sitelerini incelerken yanıltıcı olabilecek sadece BGBM’ye değil, her zaman tüm sayılara bakmasının nedenlerinden biridir. Önemli Web Verileri ve UX ölçümleri, reklamla ilgili tüm ölçümlerle birlikte gerçek resmi sağlar.
geleceğe bakmak #
Netzwelt, üçüncü taraf tanımlama bilgilerinin olmadığı bir gelecekte, iyi bir kullanıcı deneyimi ve sayfa deneyimi (reklam görüntülenebilirliği dahil) ile birlikte içerik aracılığıyla içeriğe dayalı hedeflemenin bir haber yayıncısı olarak başarının anahtarı olduğuna inanıyor.
Bu nedenle Netzwelt, Önemli Web Verileri ile yetinmez, Progresif Web Uygulamaları (PWA), çevrimdışı içerik, karanlık mod, Web Paylaşımı API’si ve Güvenilir Web Etkinlikleri (TWA) gibi birçok modern web özelliğini uygulayarak daha da ileri gider. yeni Dijital Ürünler API’sı.