CLS optimizasyonları Yahoo! JAPAN Haberler'in oturum başına sayfa görüntüleme sayısı %15 arttı

CLS'nin 0,2 oranında optimize edilmesi, oturum başına sayfa görüntüleme sayısında %15'lik bir artışa, %13 daha uzun oturum sürelerine ve hemen çıkma oranında %1,72'lik bir düşüşe neden oldu.

Tomoki Kiraku

Milica Mihajlija

Shunya Shishido

Yahoo! JAPAN, ayda 79 milyardan fazla sayfa görüntüleme sağlayan Japonya'daki en büyük medya şirketlerinden biridir. Haber platformları Yahoo! JAPAN News ise ayda 22 milyardan fazla sayfa görüntülemeye sahiptir ve kullanıcı deneyimini iyileştirmek için çalışan bir mühendislik ekibi vardır.

Önemli Web Verileri'ni sürekli izleyerek sitenin Cumulative Layout Shift (CLS) puanını oturum başına sayfa görüntülemelerinde %15, oturum süresinde ise% 13 artışla ilişkilendirdiler.

0,2

CLS iyileştirmesi

_%15,1

Oturum başına daha fazla sayfa görüntüleme

_%13,3

Daha uzun oturum süresi

Not: Cumulative Layout Shift, bir web sitesinin görsel olarak ne kadar istikrarlı olduğunu ölçer. Bu metrik, kullanıcıların ne sıklıkta beklenmedik düzen kaymaları yaşadığını ölçmeye yardımcı olur.

Sayfa içeriğinin beklenmedik şekilde değişmesi genellikle yanlışlıkla yapılan tıklamalara, sayfanın yönünün bozulmasına ve sonuç olarak kullanıcıların hayal kırıklığına uğramasına neden olur. Sinirli kullanıcılar genellikle uzun süre oyunda kalmazlar. Kullanıcıların mutluluğunu korumak için sayfa düzeni, kullanıcı yolculuğunun tüm yaşam döngüsü boyunca sabit kalmalıdır. Yahoo! JAPAN Bu iyileştirmenin iş açısından kritik etkileşim metrikleri üzerinde önemli bir olumlu etkisi olduğunu bildirmiştik.

CLS'yi nasıl iyileştirdiklerine dair teknik ayrıntılar için Yahoo! JAPAN Haberler mühendislik ekibinin yayınına bakın.

Sorunu belirleme

CLS dahil olmak üzere Core Web Vitals'ın izlenmesi, sorunların yakalanması ve nereden kaynaklandığının belirlenmesi açısından çok önemlidir. Yahoo! JAPAN News, Search Console, performans sorunları olan sayfa gruplarına harika bir genel bakış sundu ve Lighthouse, sayfa deneyimini iyileştirmek için sayfa başına fırsatları belirlemeye yardımcı oldu. Bu araçları kullanarak makale ayrıntıları sayfasının CLS'nin düşük olduğunu keşfettiler.

Google Search Console Önemli Web Verileri Raporu.

Lighthouse "Büyük düzen kaymalarından kaçının" denetimi, hangi öğelerin CLS puanına ne kadar katkıda bulunduğunu gösterir.

Cumulative Layout Shift'in kümülatif bölümünü göz önünde bulundurmak önemlidir. Puan, sayfa yaşam döngüsünün tamamı boyunca alınır. Gerçek dünyada puan, sayfayı kaydırma veya bir düğmeye dokunma gibi kullanıcı etkileşimlerinin sonucu olarak meydana gelen kaymaları içerebilir. Ekip, alan verilerinden CLS puanlarını toplamak için web-vitals JavaScript kitaplığı raporlamasını entegre etti.

Not: Performans izleme stratejisi kapsamında, şirketteki işletmelerin performansını sürekli olarak denetlemek için Lighthouse CI ile şirket içi bir araç geliştirme üzerinde de çalışıyorlar.

Ekip, sayfada hangi öğelerin düzen değişikliğine neden olduğunu belirlemek için Chrome Geliştirici Araçları'ndan yararlandı. Geliştirici Araçları'ndaki Layout Shift Bölgeleri, CLS'ye katkıda bulunan öğeleri, her düzen değişikliği olduğunda mavi bir dikdörtgenle vurgulayarak görselleştirir.

Görselleştirilmiş düzen kaymaları.

Makalenin üst kısmındaki hero resim ilk görüntüleme için yüklendikten sonra bir düzen kayması olduğunu tespit ettiler.

Makale ayrıntıları sayfasında düzen kayması.

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

Resimler için CLS'yi iyileştirme

Sabit boyutlu resimlerde düzen kaymaları, img öğesinde width ve height özellikleri belirtilerek ve modern tarayıcılarda bulunan CSS aspect-ratio özelliği kullanılarak önlenebilir. Ancak, Yahoo! JAPAN News'in yalnızca modern tarayıcıları değil, aynı zamanda iOS 9 gibi nispeten eski işletim sistemlerinde yüklü tarayıcıları da desteklemesi gerekiyordu.

Resim yüklenmeden önce sayfadaki alanı ayırmak için işaretlemeyi kullanan bir yöntem olan En Boy Oranı Kutuları kullanıldı. Bu yöntem, arka uç API'sinden edinebildikleri resmin en boy oranının önceden bilinmesini gerektirir.

Sol: sayfanın üst kısmındaki resim için ayrılmış boş alan; sağ: Ayrılmış alana düzen kaymaları olmadan yüklenen hero resim.

Sonuçlar

Search Console'da performansı düşük olan URL'lerin sayısı% 98 azaldı ve laboratuvar verilerindeki CLS değeri yaklaşık 0,2'den 0'a düştü. Daha da önemlisi, işletme metriklerinde birbiriyle bağlantılı birkaç iyileştirme yapılmıştır.

İyileştirmelerin ardından Search Console.

Not: Search Console, iyileştirmeleri gerçek zamanlı olarak yansıtmaz.

Yahoo! JAPAN News, CLS optimizasyonundan önceki ve sonraki kullanıcı etkileşimi metriklerini karşılaştırdığında birden fazla iyileşme elde etmiştir:

_%15,1

Oturum başına daha fazla sayfa görüntüleme

_%13,3

Daha uzun oturum süresi

_%*1,72

Daha düşük hemen çıkma oranı (*yüzde puanı)

CLS ve diğer Core Web Vitals metriklerini iyileştirerek Yahoo! JAPAN News, Chrome Android'in içerik menüsünde "Hızlı sayfa" etiketine de sahip oldu.

Android'deki Chrome'daki "Hızlı sayfa" etiketi.

Düzen değişiklikleri, kullanıcıları daha fazla sayfa okumaktan vazgeçirse de uygun araçların kullanılması, sorunların tespit edilmesi ve en iyi uygulamaların kullanılmasıyla bu durum iyileştirilebilir. CLS'yi iyileştirmek işinizi geliştirmeniz için bir fırsattır.

Daha fazla bilgi için Yahoo! JAPAN mühendislik ekibinin yayınına bakın.