Birleşik Krallık'taki lider haber sitesi, birkaç ay içinde 75. yüzdelik dilimdeki CLS'sini% 250 oranında (0,25'ten 0,1'e) iyileştirdi.
Görsel kararlılıkla ilgili zorluk
Düzen kaymaları çok can sıkıcı olabilir. Telegraph Media Group (TMG)'da görsel kararlılık özellikle önemlidir. Bunun nedeni, okuyucuların haber okumak için çoğunlukla uygulamalarımızı kullanmasıdır. Bir makale okunurken sayfa düzeni değişirse okuyucu muhtemelen yerini kaybeder. Bu durum can sıkıcı ve dikkat dağıtıcı olabilir.
Mühendislik açısından, sayfaların kaymaması ve okuyucunun dikkatini dağıtmaması özellikle uygulamanızın alanları eşzamansız olarak yüklendiğinde ve sayfaya dinamik olarak eklendiğinde zor olabilir.
TMG'de istemci tarafında kod katkısında bulunan birden fazla ekibimiz var:
- Temel mühendislik. İçerik önerileri ve yorumlar gibi alanları güçlendirmek için üçüncü taraf çözümleri uygulama
- Pazarlama. Okuyucularımızın yeni özellikler veya değişikliklerle nasıl etkileşime girdiğini değerlendirmek için A/B testleri çalıştırıyoruz.
- Reklamcılık. Reklam isteklerini ve reklam ön tekliflerini yönetme.
- Yazım. Tweet'ler veya videolar gibi makalelerin yanı sıra özel widget'lar (ör. Koronavirüs vaka takipçisi) içine kod yerleştirme
Bu ekiplerin her birinin sayfanın düzeninin bozulmasına neden olmamasının sağlanması zor olabilir. Okuyucularımız için bu durumun ne sıklıkta gerçekleştiğini ölçmek amacıyla kümülatif düzen kayması metriğini kullanan ekipler, gerçek kullanıcı deneyimi hakkında daha fazla bilgi edindi ve ulaşmaya çalışacakları net bir hedef belirledi. Bu sayede 75. yüzdelik dilimdeki CLS'miz 0,25'ten 0,1'e yükseldi ve geçen grup% 57'den %72'ye çıktı.
%250
75. yüzdelik dilim CLS iyileştirmesi
%15
İyi CLS puanına sahip daha fazla kullanıcı
Başladığımız yer
CrUX kontrol panellerini kullanarak sayfalarımızın istediğimizden daha fazla kaydığını tespit ettik.
İdeal olarak okuyucularımızın en az% 75'inin "iyi" bir deneyim yaşamasını istediğimizden, düzen kararsızlığının nedenlerini belirlemeye başladık.
Düzen değişikliklerini nasıl ölçtük?
Sayfa düzeninin kaymasına neyin neden olduğunu belirlemek için Chrome Geliştirici Araçları ve WebPageTest'i birlikte kullandık. DevTools'ta, düzenin değiştiği durumları ve bunların genel puana nasıl katkıda bulunduğunu vurgulamak için Performans sekmesinin Deneyim bölümünü kullandık.
WebPageTest, "Düzen Değişikliklerini Vurgulayın" seçeneği belirlendiğinde zaman çizelgesi görünümünde düzen değişikliğinin nerede gerçekleştiğini vurgular.
En çok ziyaret edilen şablonlarımızdaki her değişikliği inceledikten sonra, nasıl iyileştirebileceğimizle ilgili bir fikir listesi oluşturduk.
Düzen kaymalarını azaltma
Düzen değişikliklerini azaltabileceğimiz dört alana odaklandık: - reklamlar - resimler - üstbilgiler - yerleştirilenler
Reklamlar
Reklamlar, ilk boyamadan sonra JavaScript aracılığıyla yüklenir. Yükledikleri kapsayıcılardan bazılarında ayrılmış yükseklik yoktu.
Tam yüksekliği bilmesek de alana yüklenen en yaygın reklam boyutunu kullanarak alan ayırabiliriz.
Bazı durumlarda reklamın ortalama yüksekliğini yanlış değerlendirmiştik. Tablet okuyucularda ise yuva çöküyordu.
Yuvaya tekrar göz attık ve en yaygın boyutu kullanacak şekilde yüksekliği ayarladık.
Resimler
Web sitesindeki resimlerin çoğu gecikmeli olarak yüklenir ve bunlar için ayrılmış bir alan vardır.
Ancak makalelerin üst kısmındaki satır içi resimler, kapsayıcıda ayrılmış bir alana sahip değildi ve etiketlerle ilişkili genişlik ve yükseklik özelliklerine sahip değildi. Bu durum, öğeler yüklenirken düzenin kaymasına neden oluyordu.
Resimlere genişlik ve yükseklik özelliklerini eklemek, düzenin kaymasını önledi.
Başlık
Üstbilgi, işaretlemede içeriğin altındaydı ve CSS kullanılarak en üstte konumlandırıldı. Orijinal fikir, içeriğin yüklenmesine gezinmeden önce öncelik vermekti ancak bu, sayfanın kısa süreliğine kaymasına neden oldu.
Başlığı işaretlemenin üst kısmına taşımak, sayfanın bu kayma olmadan oluşturulmasını sağladı.
Yerleştirmeler
Sık kullanılan bazı yerleşik öğelerin belirli bir en boy oranı vardı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şlarında bahsedilen araçları kullanarak bu değişikliğin özelliğin performansına olan etkisini oldukça kolay bir şekilde ölçebildik. Ancak CLS'yi hem şablon düzeyinde hem de site düzeyinde ölçmek istedik. Hem ön prodüksiyonda hem de üretimde değişiklikleri doğrulamak için sentetik olarak SpeedCurve'ı kullandık.
Ardından, 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 bir etkisi olduğuna dair güven düzeyimizi artırır.
İncelediğimiz nihai sayılar, Google'ın topladığı RUM verilerine aittir. Bu, yakında sayfa sıralamasını etkileyeceği için özellikle şu anda önemlidir. Başlangıç olarak, hem CrUX kontrol paneli üzerinden sunulan aylık kaynak düzeyindeki verilerde hem de geçmiş p75 verilerini almak için BigQuery'yi sorgularak Chrome UX Report'ı kullandık. Bu sayede, CrUX tarafından ölçülen tüm trafik için 75. yüzdelik dilim CLS'mizin 0,25'ten 0,1'e çıkarak% 250 oranında iyileştiğini ve geçen gruplarımızın% 57'den%72'ye yükseldiğini kolayca görebildik.
Ayrıca Chrome kullanıcı deneyimi raporu API'sinden yararlanıp şablonlara bölünmüş bazı dahili kontrol panelleri oluşturduk.
CLS gerilemelerini önleme
Performans iyileştirmeleri yapmanın önemli bir yönü, gerilemelerden 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 Slack kanalına bir mesaj gönderilir. Böylece, nedenini inceleyebiliriz. Ayrıca, şablonlar bütçede kalsa bile olumsuz etkisi olan değişikliklerden haberdar olabilmemiz için haftalık raporlar da oluşturduk.
Ayrıca, hem statik uyarılar hem de olağan dışı değişikliklerden haberdar olmamızı sağlayacak olası anormallik algılama ayarlamak için mPulse'ı kullanarak bütçelerimizi sentetik verilerin yanı sıra RUM verilerini de kullanacak şekilde genişletmeyi planlıyoruz.
Yeni özelliklere CLS'yi göz önünde bulundurarak yaklaşmamız önemlidir. Bahsettiğim değişikliklerin çoğu, okuyucularımıza yayınlandıktan sonra düzeltmek zorunda kaldığımız değişikliklerdir. Baştan itibaren beklenmedik düzen değişikliklerini önleyebilmek için gelecekte tüm yeni özelliklerin çözüm tasarımında düzen kararlılığı dikkate alınacaktır.
Sonuç
Bugüne kadar yaptığımız iyileştirmelerin uygulanması oldukça kolaydı ve önemli bir etki yarattı. Bu makalede özetlediğim birçok değişikliğin uygulanması çok uzun sürmedi ve en sık kullanılan şablonların tümüne uygulandı. Bu da okuyucularımız üzerinde yaygın olarak olumlu bir etki yarattı.
Sitenin iyileştirmemiz gereken alanları var. İstemci tarafı mantığımızın daha fazlasını sunucu tarafında yapabileceğimiz yolları araştırıyoruz. Bu sayede CLS'yi daha da iyileştireceğiz. Metriğimizi sürekli olarak iyileştirmek ve okuyucularımıza mümkün olan en iyi kullanıcı deneyimini sunmak için izlemeye ve takip etmeye devam edeceğiz.