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
Tomoki Kiraku
Milica Mihajlija
Milica Mihajlija

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.

Makale ayrıntıları sayfası için yüksek CLS değeri gösteren Google Search Console Önemli Web Verileri Raporu.
Google Search Console Önemli Web Verileri Raporu.
Lighthouse Sayfadaki CLS'ye en çok katkıda bulunan DOm öğelerini gösteren büyük düzen kaymaları denetiminden kaçının.
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.

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.

Lokomotif resim ve metnin üzerine yerleştirilmiş mavi dikdörtgenler içeren makale ayrıntıları sayfası.
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.

Düzen kaymasından önceki ve sonraki karşılaştırmayı yan yana gösteren makale ayrıntıları sayfasının ekran görüntüleri.
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.

CLS optimizasyonundan önceki ve sonraki karşılaştırmayı yan yana gösteren makale ayrıntıları sayfasının ekran görüntüleri.
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.

Performans sorunları bulunan sayfalarda önemli ölçüde düşüş olduğunu gösteren Search Console raporu.
İyileştirmelerin ardından Search Console.

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'da hızlı sayfa etiketi.
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.