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.
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
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.
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.
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.
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.
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.
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.
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.
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.