Görsel kararlılık sorunu #
Düzen değişiklikleri çok rahatsız edici olabilir. Telegraph Media Group’ta (TMG) görsel kararlılık özellikle önemlidir çünkü okuyucular ağırlıklı olarak haberleri okumak için uygulamalarımızı kullanır. Bir makaleyi okurken düzen değişirse, okuyucu muhtemelen yerini kaybedecektir. Bu sinir bozucu ve dikkat dağıtıcı bir deneyim olabilir.
Mühendislik açısından bakıldığında, özellikle uygulamanızın alanları eşzamansız olarak yüklendiğinde ve sayfaya dinamik olarak eklendiğinde, sayfaların kaymamasını ve okuyucunun kesintiye uğramamasını sağlamak zor olabilir.
TMG’de, istemci tarafında koda katkıda bulunan birden fazla ekibimiz var:
- Çekirdek mühendislik. İçerik önerileri ve yorum yapma gibi alanlarda güç sağlamak 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 yapmak.
- reklam. Reklam isteklerini ve reklam ön teklifini yönetme.
- editoryal. Tweet’ler veya videolar gibi makalelerin yanı sıra özel widget’ların (örneğin, Coronavirüs vaka izleyicisi) içine kod yerleştirme.
Bu ekiplerin her birinin sayfa düzeninin sarsılmasına neden olmamasını sağlamak zor olabilir. Ekipler, bunun okuyucularımız için ne sıklıkta meydana geldiğini ölçmek için Kümülatif Düzen Kayması metriğini kullanarak, gerçek kullanıcı deneyimi hakkında daha fazla fikir edindi ve ulaşılması gereken net bir hedef elde etti. Bu, 75. yüzdelik CLS’mizin 0,25’ten 0,1’e yükselmesine ve geçme kovamızın %57’den %72’ye büyümesine neden oldu.
250%
75. yüzdelik CLS iyileştirmesi
15%
İyi CLS puanına sahip daha fazla kullanıcı
nereden başladık #
kullanma CRUX panoları sayfalarımızın istediğimizden daha fazla değiştiğini tespit edebildik.
İdeal olarak, okuyucularımızın en az %75’inin “iyi” bir deneyim yaşamasını istedik, bu nedenle düzen istikrarsızlığının nedenlerini belirlemeye başladık.
Düzen kaymalarını nasıl ölçtük? #
bir kombinasyonunu kullandık Chrome Geliştirme Araçları Ve Web Sayfası Testi mizanpajın değişmesine neyin sebep olduğunu anlamanıza yardımcı olmak için. DevTools’ta, Deneyim bölümü arasında Verim Tek tek değişen düzen örneklerini ve bunların genel puana nasıl katkıda bulunduğunu vurgulamak için sekme.
Web Sayfası Testi “Düzen Kaymalarını Vurgula” seçildiğinde, zaman çizelgesi görünümünde düzen kaymasının gerçekleştiği yeri faydalı bir şekilde vurgular.
En çok ziyaret edilen şablonlarımızdaki her vardiyayı inceledikten sonra, nasıl geliştirebileceğimize dair bir fikir listesi bulduk.
Düzen kaymalarını azaltma #
Düzen değişikliklerini azaltabileceğimiz dört alana odaklandık:
- reklamlar
- Görüntüler
- başlıklar
- yerleştirmeler
reklamlar #
Reklamlar, JavaScript aracılığıyla yapılan ilk boyamadan sonra yüklenir. Yükledikleri bazı konteynerlerin üzerinde herhangi bir rezerve yükseklik yoktu.
Tam yüksekliği bilmesek de, alana yüklenen en yaygın reklam boyutunu kullanarak yer ayırabiliyoruz.
Bazı durumlarda reklamın ortalama yüksekliğini yanlış değerlendirdik. Tablet okuyucular için yuva çöküyordu.
Yuvayı tekrar ziyaret ettik ve en yaygın boyutu kullanmak için yüksekliği ayarladık.
Görüntüler #
Web sitesindeki resimlerin çoğu geç yüklenmiştir ve yerleri onlar için ayrılmıştır.
Bununla birlikte, makalelerin üst kısmındaki satır içi görüntülerin kapsayıcıda ayrılmış herhangi bir yeri yoktu ve etiketlerle ilişkili genişlik ve yükseklik nitelikleri yoktu. Bu, düzenin yüklendikçe kaymasına neden oldu.
Genişlik ve yükseklik niteliklerini görüntülere eklemek, düzenin değişmemesini sağladı.
Başlık #
Başlık, işaretlemedeki içeriğin altındaydı ve CSS kullanılarak en üste yerleştirildi. Orijinal fikir, gezinmeden önce içerik yüklemeye öncelik vermekti, ancak bu, sayfanın anlık olarak kaymasına neden oldu.
Başlığın işaretlemenin en üstüne taşınması, sayfanın bu kayma olmadan oluşturulmasını sağladı.
Yerleştirmeler #
Sık kullanılan yerleştirmelerden bazıları tanımlanmış bir en boy oranına sahiptir. Örneğin YouTube videoları. Oynatıcı yüklenirken küçük resmi YouTube’dan çekip video yüklenirken yer tutucu olarak kullanıyoruz.
etkinin ölçülmesi #
Makalenin başında bahsedilen araçları kullanarak etkiyi özellik düzeyinde oldukça kolay bir şekilde ölçebildik. Ancak CLS’yi hem şablon düzeyinde hem de site düzeyinde ölçmek istedik. Sentetik olarak kullandık Hız Eğrisi hem üretim öncesi hem de üretimdeki değişiklikleri doğrulamak için.
Daha sonra RUM verilerimizdeki (tarafından sağlanan) sonuçları doğrulayabiliriz. mPulse) kod üretime ulaştığında.
RUM verilerini kontrol etmek, yaptığımız değişikliklerin okuyucularımız için olumlu bir etkisi olduğuna dair bize iyi bir güven sağlıyor.
Baktığımız son rakamlar, Google’ın topladığı RUM verileri içindir. Bu, yakında olacağı için özellikle şimdi alakalı sayfa sıralamasında etkisi var. Yeni başlayanlar için, Chrome UX Raporunu kullandık. CRUX kontrol panelitarafından olduğu gibi BigQuery’yi sorgulama geçmiş p75 verilerini almak için. Bu şekilde, CrUX tarafından ölçülen tüm trafik için şunu kolayca görebildik: 75. yüzdelik CLS’miz %250 artarak 0,25’ten 0,1’e yükseldi ve geçme grubumuz %57’den %72’ye çıktı.
Ayrıca şu olanaklardan faydalanabildik: Chrome UX Raporu API’sı ve şablonlara bölünmüş bazı dahili panolar oluşturun.
CLS regresyonlarından kaçınma #
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, nedenini araştırabilmemiz için bir Slack kanalına bir mesaj gönderir. Ayrıca haftalık raporlar oluşturduk, böylece şablonlar bütçede kalsa bile olumsuz etkisi olan tüm değişikliklerden haberdar oluruz.
Ayrıca bütçelerimizi hem RUM verilerini hem de sentetik verileri kullanacak şekilde genişletmeyi planlıyoruz. statik uyarılar ve potansiyel olarak anomali tespiti bu da bizi olağan dışı herhangi bir değişiklikten haberdar eder.
Yeni özelliklere CLS’yi göz önünde bulundurarak yaklaşmak bizim için önemlidir. Bahsettiğim değişikliklerin çoğu, okuyucularımıza yayınlandıktan sonra düzeltmemiz gereken değişiklikler. Düzen kararlılığı, ileriye dönük herhangi bir yeni özelliğin çözüm tasarımında göz önünde bulundurulacaktır, böylece beklenmedik düzen değişikliklerini baştan önleyebiliriz.
Çözüm #
Şimdiye kadar yaptığımız iyileştirmelerin uygulanması oldukça kolaydı ve önemli bir etkisi oldu. Bu makalede özetlediğim pek çok değişikliğin hayata geçirilmesi fazla zaman almadı ve en sık kullanılan şablonların hepsine uygulandı, bu da okuyucularımız için geniş çapta olumlu bir etkiye sahip oldukları anlamına geliyor.
Sitede hala iyileştirmemiz gereken alanlar var. CLS’yi daha da iyileştirecek olan istemci tarafı mantığımızı sunucu tarafında daha fazla yapabilmenin yollarını araştırıyoruz. Metriklerimizi sürekli iyileştirmek ve okuyucularımıza mümkün olan en iyi kullanıcı deneyimini sunmak amacıyla takip etmeye ve izlemeye devam edeceğiz.