CLS optimizasyonları Yahoo!’yu nasıl artırdı? JAPAN News’in oturum başına sayfa görüntüleme sayısı %15 arttı

yahoo! JAPONYA ayda 79 milyardan fazla sayfa görüntüleme sağlayan Japonya’daki en büyük medya şirketlerinden biridir. Onların haber platformu, yahoo! JAPONYA Haberleri ayda 22 milyardan fazla sayfa görünümüne ve kendini kullanıcı deneyimini geliştirmeye adamış bir mühendislik ekibine sahiptir.

Önemli Web Verilerini (CWV) sürekli izleyerek, sitenin gelişmiş Kümülatif Düzen Kayması (CLS) puanını oturum başına sayfa görüntülemelerinde %15 ve oturum süresinde %13 artışla ilişkilendirdiler.

Beklenmedik bir şekilde hareket eden sayfa içeriği, genellikle yanlışlıkla tıklamalara, sayfada yönünün bozulmasına ve nihayetinde kullanıcının hayal kırıklığına uğramasına neden olur. Sinirli kullanıcılar uzun süre ortalıkta dolaşmazlar. Kullanıcıları mutlu etmek için sayfa düzeni, kullanıcı yolculuğunun tüm yaşam döngüsü boyunca sabit kalmalıdır. Yahoo! JAPAN News bu iyileştirmenin iş açısından kritik önem taşıyan etkileşim ölçütleri üzerinde önemli ölçüde olumlu bir etkisi oldu.

CLS’yi nasıl iyileştirdiklerine ilişkin teknik ayrıntılar için şu makaleyi okuyun: yahoo! JAPAN News mühendislik ekibinin gönderisi.

Sorunu belirleme #

CLS de dahil olmak üzere Önemli Web Verilerinin izlenmesi, sorunların yakalanması ve bunların nereden kaynaklandığının belirlenmesi açısından çok önemlidir. Yahoo! JAPONYA Haberleri, Arama Konsolu performans sorunları olan sayfa gruplarına harika bir genel bakış sağladı ve Lighthouse, sayfa deneyimini iyileştirmek için sayfa başına fırsatların belirlenmesine yardımcı oldu. Bu araçları kullanarak, makale ayrıntı sayfasının zayıf CLS’ye sahip olduğunu keşfettiler.

akılda tutulması önemlidir Kümülatif Kümülatif Mizanpaj Değişiminin bir parçası—puan, tüm sayfa yaşam döngüsü boyunca yakalanır. Gerçek dünyada skor, bir sayfayı kaydırmak veya bir düğmeye dokunmak gibi kullanıcı etkileşimlerinin bir sonucu olarak meydana gelen kaymaları içerebilir. Ekip, saha verilerinden CLS puanlarını toplamak için entegre web hayati JavaScript kitaplığı raporlaması.

Ekip, sayfada hangi öğelerin düzen değişikliklerine neden olduğunu belirlemek için Chrome DevTools’u kullandı. Düzen Kaydırma Bölgeleri DevTools’ta, her düzen değişikliği gerçekleştiğinde mavi bir dikdörtgenle vurgulayarak CLS’ye katkıda bulunan öğeleri görselleştirir.

İlk görünüm için makalenin üst kısmındaki ana görsel yüklendikten sonra bir düzen değişikliğinin meydana geldiğini anladılar.

Yukarıdaki örnekte, görüntünün yüklenmesi bittiğinde metin aşağı itilir (konum değişikliği kırmızı çizgi ile gösterilir).

Görüntüler için CLS’yi iyileştirme #

Sabit boyutlu görüntüler için, düzen kaymaları, width Ve height öznitelikler img eleman ve CSS kullanma aspect-ratio modern tarayıcılarda bulunan özellik. Ancak Yahoo! JAPAN News’in yalnızca modern tarayıcıları değil, aynı zamanda iOS 9 gibi nispeten eski işletim sistemlerinde kurulu tarayıcıları da desteklemesi gerekiyordu.

Kullandılar En Boy Oranı Kutuları— resim yüklenmeden önce sayfadaki alanı ayırmak için işaretlemeyi kullanan bir yöntem. Bu yöntem, arka uç API’sinden alabildiği görüntünün en boy oranını önceden bilmeyi gerektirir.

Sonuçlar #

Search Console’da düşük performans gösteren URL’lerin sayısı %98 azaldı ve laboratuvar verilerindeki CLS yaklaşık 0,2’den 0’a düştü. Daha da önemlisi, birkaç URL vardı. iş ölçümlerinde ilişkili iyileştirmeler.

Ne zaman Yahoo! JAPAN News, CLS optimizasyonundan önceki ve sonraki kullanıcı etkileşimi metriklerini karşılaştırdı ve birden çok iyileştirme gördü:

CLS ve diğer Önemli Web Verileri ölçümlerini iyileştirerek, Yahoo! JAPAN News ayrıca “Hızlı sayfa” etiketi Chrome Android’in bağlam menüsünde.

Düzen değişiklikleri sinir bozucudur ve kullanıcıları daha fazla sayfa okumaktan caydırır, ancak bu, uygun araçlar kullanılarak, sorunları belirleyerek ve en iyi uygulamaları uygulayarak iyileştirilebilir. CLS’yi geliştirmek, işinizi geliştirmek için bir şanstır.

Daha fazla bilgi için yahoo! JAPONYA mühendislik ekibinin gönderisi.