Birleşik Krallık'ın önde gelen haber web sitesi birkaç ay içinde 75. yüzdelik dilim CLS'sini% 250 oranında 0,25'ten 0,1'e yükseltmeyi başardı.
Görsel kararlılık sorunu
Düzen kaymaları, çalışmayı kesintiye uğratabilir. Telegraph Media Group'ta (TMG) görsel istikrar özellikle önemli, çünkü okuyucular haberleri izlemek için ağırlıklı olarak uygulamalarımızı kullanıyor. Bir makaleyi okurken düzen değişirse okuyucu yerini büyük olasılıkla kaybeder. Bu, can sıkıcı ve dikkat dağıtıcı bir deneyim olabilir.
Mühendislik açısından bakıldığında, sayfaların değişmemesini ve okuyucuyu kesintiye uğratmamasını sağlamak zor olabilir. Bu durum, özellikle uygulamanızın bölümleri eşzamansız olarak yüklendiğinde ve sayfaya dinamik olarak eklendiğinde zor olabilir.
TMG'de, istemci tarafında kodla katkıda bulunan birden fazla ekip vardır:
- Temel mühendislik. İçerik önerileri ve yorum yapma gibi alanları desteklemek için üçüncü taraf çözümleri uygulamak.
- Pazarlama. Okuyucularımızın yeni özellikler veya değişikliklerle nasıl etkileşime girdiğini değerlendirmek için A/B testleri yapma.
- Reklam. Reklam isteklerini yönetme ve teklif öncesi reklamlar verme.
- Editoryal. Tweet veya video gibi makalelere ve özel widget'lara (örneğin, Koronavirüs vaka izleyicisi) kod yerleştirme.
Bu ekiplerden her birinin sayfa düzeninin kaymasına neden olmadığından emin olmak zor olabilir. Ekipler, sorunun okuyucularımız için ne sıklıkta gerçekleştiğini ölçmek için Cumulative Layout Shift metriğini kullanarak gerçek kullanıcı deneyimi hakkında daha fazla bilgi sahibi oldu ve ulaşılmak istenen hedefe net bir şekilde karar verdi. Bu sayede 75. yüzdelik CLS değerimiz 0,25'ten 0,1'e yükseldi ve geçme grubumuz% 57'den %72'ye çıktı.
%250
CLS'de 75. yüzdelik iyileşme
%15
CLS puanı iyi olan diğer kullanıcılar
Nereden başladık
CrUX kontrol panellerini kullanarak sayfalarımızın istediğimizden daha fazla değiştiğini gösterebildik.
İdeal olarak okuyucularımızın en az% 75'inin "iyi" bir deneyim yaşamasını istediğimiz için düzen kararsızlığının nedenlerini belirlemeye başladık.
Düzen kaymalarını nasıl ölçtük?
Düzenin kaymasının nedenini belirlemek için Chrome Geliştirici Araçları ve WebPageTest'i birlikte kullandık. DevTools'da Performans sekmesinin Deneyim bölümünü kullanarak yerleşim değişiminin her bir örneğini ve bunların toplam puana nasıl katkıda bulunduğunu vurguladık.
WebPageTest, "Düzen Kaymalarını Vurgula" seçildiğinde zaman çizelgesi görünümünde düzen değişikliğinin nerede gerçekleştiğini faydalı bir şekilde vurgular.
En çok ziyaret edilen şablonlarımızdaki her değişikliği inceledikten sonra, bunları nasıl geliştirebileceğimize dair fikirlerin bir listesini oluşturduk.
Düzen kaymalarını azaltma
Düzen kaymalarını azaltabileceğimiz dört alana odaklandık: - reklamlar - resimler - başlıklar - yerleştirmeler
Reklamlar
Reklamlar, ilk boyama işleminden sonra JavaScript aracılığıyla yüklenir. Yükledikleri bazı container'ların üzerinde ayrılmış yükseklik yoktu.
Yüksekliği tam olarak bilmesek de alana yüklenen en yaygın reklam boyutunu kullanarak yer ayırabiliriz.
Bazı durumlarda reklamın ortalama yüksekliğini yanlış değerlendirmiştik. Tablet okuyucularda yuva daraltılıyordu.
Alana tekrar göz attık ve yüksekliği en yaygın boyutu kullanacak şekilde ayarladık.
Resimler
Web sitesindeki çoğu resim geç yüklenir ve alan bu resimler için ayrılır.
Ancak, makalelerin üst kısmındaki satır içi resimlerde kapsayıcı üzerinde herhangi bir alan ayrılmamış ve etiketlerle ilişkili genişlik ve yükseklik özellikleri de bulunmuyordu. Bu durum, sayfa yüklenirken düzenin kaymasına neden oldu.
Resimlere genişlik ve yükseklik özelliklerinin eklenmesi bile düzenin kaymamasını sağladı.
Başlık
Başlık, işaretlemedeki içeriğin altında ve CSS kullanılarak üst kısma yerleştirildi. Asıl amaç, içeriğin gezinmeden önce yüklenmesine öncelik vermekti ancak bu, sayfanın bir anda kaymasına neden oldu.
Başlığın işaretlemenin üst kısmına taşınması, sayfanın bu kayma olmadan oluşturulmasına olanak tanıdı.
Yerleştirmeler
Sık kullanılan yerleştirmelerden bazılarının en boy oranı tanımlanmıştır. Örneğin, YouTube videoları. Oynatıcı yüklenirken YouTube'dan küçük resmi alır ve video yüklenirken yer tutucu olarak kullanırız.
Etkiyi ölçme
Makalenin başında bahsedilen araçları kullanarak etkiyi özellik düzeyinde kolayca ölçebildik. Ancak, CLS'yi hem şablon düzeyinde hem de site düzeyinde ölçmek istedik. Sentetik olarak, hem üretim öncesi hem de üretim aşamasındaki değişiklikleri doğrulamak için SpeedCurve işlevini kullandık.
Daha sonra kod üretime ulaştığında RUM verilerimizdeki (mPulse tarafından sağlanır) sonuçları doğrulayabiliriz.
RUM verilerini kontrol etmek, yaptığımız değişikliklerin okuyucularımız üzerinde olumlu etkisi olduğu konusunda bize güven veriyor.
İncelediğimiz son rakamlar Google'ın topladığı RUM verilerine aittir. Bu durum, yakında sayfa sıralamasını etkileyeceği için özellikle şu anda önem taşımaktadır. Başlangıç olarak Chrome Kullanıcı Deneyimi Raporu'nu hem CrUX kontrol paneli aracılığıyla sunulan aylık kaynak düzeyinde verilerle hem de geçmiş p75 verilerini almak için BigQuery'yi sorgulayarak kullandık. Bu şekilde, CrUX tarafından ölçülen tüm trafiğin 75. yüzdelik dilim CLS değerimizin 0,25'ten 0,1'e% 250 arttığını ve geçen paketimizin% 57'den%72'ye yükseldiğini kolayca görebildik.
Ayrıca, Chrome Kullanıcı Deneyimi Raporu API'sinden yararlanmayı ve şablonlara bölünmüş bazı dahili kontrol panelleri oluşturmayı da başardık.
CLS regresyonlarını önleme
Performans iyileştirmeleri yapmanın önemli bir yönü, regresyonlardan kaçınmaktır. Temel metriklerimiz için bazı temel performans bütçeleri oluşturduk ve bunlara CLS'yi dahil ettik.
Test bütçeyi aşarsa nedenini araştırabilmemiz için Slack kanalına bir mesaj gönderir. Ayrıca haftalık raporlar da oluşturduk. Böylece, şablonlar bütçede kalsa bile, olumsuz etkisi olan değişikliklerden haberdarız.
Ayrıca, bütçelerimizi hem RUM verileri hem de sentetik veriler kullanacak şekilde genişletmeyi planlıyoruz. mPulse'ı kullanarak hem statik uyarılar hem de olası anormallik algılama özelliği sayesinde olağan dışı değişikliklerden haberdar olmayı planlıyoruz.
Yeni özelliklere CLS'yi göz önünde bulundurarak yaklaşmak bizim için önemli. Bahsettiğim değişikliklerin birçoğu, okuyucularımıza yayınlandıktan sonra düzeltmemiz gereken değişikliklerdir. Düzen kararlılığı, başlangıçtan itibaren beklenmedik düzen kaymalarını önleyebilmemiz için gelecekte herhangi bir yeni özelliğin çözüm tasarımında dikkate alınacaktır.
Sonuç
Şimdiye kadar yaptığımız iyileştirmelerin uygulanması oldukça kolaydı ve önemli bir etkisi oldu. Bu makalede ana hatlarıyla anlattığım birçok değişikliğin uygulanması fazla zaman almadı ve en sık kullanılan şablonlara uygulandı. Bu da okuyucularımız üzerinde geniş çapta olumlu etki yarattıkları anlamına geliyor.
Sitenin hâlâ iyileştirmemiz gereken alanları var. İstemci taraflı mantığın sunucu tarafında daha fazla işlem yapabileceğimiz ve CLS'yi daha da iyileştirebileceğimiz yolları araştırıyoruz. Sürekli iyileştirmek ve okuyucularımıza mümkün olan en iyi kullanıcı deneyimini sunmak amacıyla metriklerimizi takip etmeye ve izlemeye devam edeceğiz.