bencede
New member
Performans: Web Vitals için Toplu Düzen Kaydırma (CLS) optimizasyonu
Daha sessiz sayfa yükleme: Bizde olduğu gibi sıcak çevrimiçi CLS değerimizi optimize ettik ve bu sayede kalıcı bir UX iyileştirmesi gerçekleştirdik.
Sözde (Temel) Web Verileri, Google’ın bir web sitesinin genel performansını veya kullanıcı deneyimini değerlendirmek için özellikle önemli olduğunu düşündüğü üç performans göstergesidir. Bu üç değer, En Büyük İçerikli Boyama (LCP), İlk Giriş Gecikmesi (FID) ve Kümülatif Düzen Kayması (CLS). içinde sıcak çevrimiçi özellikle CLS’de bir açık fark ettik ve bu nedenle onu iyileştirmeye karar verdik.
Ölçmek
Web Verilerini ortak performans araçlarında zaten görebiliyoruz. Bunlar, PageSpeed Insights, Lighthouse ve CrUX kontrol paneli gibi Google araçlarında ve ayrıca WebPagetest açık kaynak aracında görünür. Ek olarak Addy Osmani, o anda görüntülenen sayfa için Web Verileri ölçümlerini görüntüleyen bir Chrome uzantısı yayınladı.
Analitik araçlarınızda kullanıcılarınızın sayfa görüntülemeleri (yani Gerçek Kullanıcı İzleme – kısaca RUM-Data) için değerleri kaydetmek istiyorsanız, Google’dan küçük bir JavaScript kitaplığı kullanabilirsiniz.
CRUX uzantısı
Bu kısaltma şu anlama gelir: posta koduRoma senSör ExTecrübe etmek. Google’ın Chrome tarayıcısını kullanan ve istatistiklerin toplanmasına itiraz etmeyen herkes, CrUX raporu için verileri otomatik olarak sağlar. Bu veriler, PageSpeed Insights veya CrUX panosu gibi araçlarda bulunabilir. Veriler herkese açıktır ve API aracılığıyla da kullanılabilir.
Google’ın CrUX verileriyle (kutuya bakın), geçmiş verilere de bakabilir ve böylece performansımızın gelişimini görebiliriz. Bu, daha sonra sayfada hangi değişikliğin bazı önemli rakamların bozulmasına yol açtığını belirlemeye veya yapılan bir iyileştirmenin tekrar kademeli olarak kaybolmadığını izlemeye yardımcı olur.
Kümülatif Düzen Kayması (CLS)
Sayfa öğeleri yükleme sırasında veya sonrasında sürekli hareket ediyorsa CLS değeri negatiftir. Değerin hesaplanması, elemanın boyutunu ve yer değiştirmenin kendisini hesaba katar. Bir düzen değişikliği için bir klasik, reklamcılıktır, aynı zamanda yazı tipini yeniden yüklemedir. Yavaş yüklenen kaynaklar ve sayfaya geç eklenen CSS (örneğin, önce JavaScript aracılığıyla eklenir) burada da sorun olabilir.
durumunda sıcak çevrimiçi çoğunlukla reklamlar ve resimlerdi. Ana sayfa için, son dört haftaya ait CrUX verileri (“saha verileri”) yalnızca %44’ünün iyi bir deneyime sahip olduğunu ortaya çıkardı (puan 0.25).
analizler
Düzen değişikliğinin nedenini bulmak için Chrome’un geliştirici araçlarını kullanarak yavaş bir bağlantıda (“Hızlı 3G”) bir performans testi gerçekleştirdik. Sadece sayfa yüklemesini izlemek bile büyük yer değiştirmeleri çok net bir şekilde gösteriyor. Performans sekmesinde “Ekran Görüntüsü” seçeneği seçilirse, sonuçlar sayfasında bir film görüntülenir. Yardımıyla, elemanların aynı anda birkaç kez hareket ettiğini anlamak mümkündür.
Chrome Geliştirici Araçları’nda “Düzen Değiştirme Bölgeleri”ni etkinleştirin.
Ayrıca, kaydırma öğelerini açıkça işaretlemenin bir yolu var, özellikle gözle pek bariz olmayan küçük kaydırmalar için kullanışlı ve DOM’un ne kadarının gerçekten etkilendiğini görmek için. Geliştirici araçlarında ona basarsınız ESC, açılan menüde sol üstteki üç noktaya tıklayın ve “Rendering” seçeneğini seçin. İşleme sekmesinde, artık kutucuğu işaretleyerek “Düzen Kaydırma Bölgeleri”ni etkinleştirebilirsiniz. Bir sonraki yeniden yüklemede, sayfada taşınan alanların bulunduğu renkli kareler görünecektir.
Tek tek öğeleri anladıktan sonra, taşımanın nedenlerini bulmak ve onlardan kurtulmak için her zamanki geliştirici araçlarınızı kullanabilirsiniz. Bazen sorun yalnızca iyileştirilebilir ve tamamen ortadan kaldırılamaz.
Haberler çevrimiçi ana sayfasındaki afiş ve ana teaser alanları.
Hata şeytanını kovmak
İki ana sorunumuz, ana sayfa içeriğinin üstündeki reklamlar ve ana sayfanın en üstteki teaser’ındaki resimlerdi. Teorik olarak, herhangi bir büyük afiş reklam konumu yayınlanmamışsa, web sitesi gezinme çubuğunun hemen altından başlar, ancak çoğu zaman bir reklam bu konumda sunulur. Bu noktada, farklı reklam boyutları için 0 piksel yüksekliğe sahip birkaç boş HTML etiketimiz var.
Gerçekte, yalnızca bir reklamı içeren etiket doğru boyuta sürüklenmelidir. Ancak, analiz yoluyla sayfanın üç kez atladığını gördük. Bir kez yaklaşık 90 veya 300 piksel yüksekliğinde, ardından tekrar yaklaşık 180 veya 390 pikselde ve tekrar 90/300 pikselde. Kodumuzun daha uzun bir analizi, ikinci bir kaba bir yükseklik verildiği ve kısa bir süre sonra, tüm doldurulmamış reklam konumları gibi, SUN’dan kaldırıldığı küçük bir aksaklığı ortaya çıkardı. Bu nedenle, yalnızca bir reklam konumu sergilenmiş olmasına rağmen çift atlama. Bunu yaptıktan sonra işler kolaylaştı. Online reklamcılıkla uğraşan meslektaşlarımıza sorduğumuz bir soru bize en çok hangi reklam formatının oynatıldığı hakkında bilgi verdi: 90 piksel yüksekliğindeki formattı. Bu nedenle, tüm reklam konumlarını kapsayan bir konteyner için bir tane getirdik. min-height: 90px ve sitenin çoğu çok daha sessizdi.
Kökenlere geri dön
Ama bu savaşın sadece yarısıydı. Sayfadaki büyük kapsayıcı, yalnızca 300 piksel yüksekliğinde bir reklam oynatıldığında hareket etti, ancak sayfa içeriği henüz optimize edilmedi.
ana sayfası sıcak çevrimiçi bazen daha fazla, bazen daha az satırlık makale teaser’larıyla başlar, bu alana en iyi teaser’lar diyoruz. Ana tanıtımlar, ardışık tanıtımların sayısına bağlı olarak farklı boyutlarda resimler içerir. Diğer birçok görselde olduğu gibi sıcak çevrimiçi bunun için özel öğemizi kullanıyoruz <a-img> açıkken bu, kullanılabilir alana göre doğru görüntü boyutunu hesaplamak için JavaScript’i kullanır ve kullanıcının tek görüntüleme cihazında daha yüksek DPI’da daha büyük görüntülerle ilgilenir. Ayrıca geç yükleme yapar, böylece kullanıcının asla kaydırmadığı görüntüler yüklenmez. (Önceki bir blog yazımızda <a-img> ayrıntılı olarak sunulmuştur: Resimleri Özel Öğelerle Yavaş Yükleme.)
Resimler sayfaya ilk olarak JavaScript tarafından eklendiğinden, tarayıcı onları yalnızca “görür” ve daha erken yüklemeye başlayamaz. Bu, yükleme sırasına neden olur: HTML belgesi, JavaScript, resimler. Ayrıca, yalnızca JavaScript doğru görüntü alanının ayrılmasına neden olur, bu nedenle tarayıcı JavaScript’i işlerken bir düzen atlama gerçekleşir. İlk görüntüleme dışında görüntülerde sorun yok. Prensip olarak, buradaki çözüm çok basitti, onu en iyi tanıtımlar için yeniden yapılandırdık. <img>-Basit etiketler srcsetöznitelik (bkz. MDN) ve kullanılan padding-top: 56.25%-Görüntü için yer ayırma hilesi. (Bu arada, eğer CSS Özelliği kullanılırsa bu gelecekte daha kolay olacaktır. aspect-ratio yaygınlaşacaktır.)
saçmalık
Dosyaya özenle seçilmiş bazı kritik CSS’ler de ekledik. <head> a. En iyi mobil tanıtımlarda yalnızca bir reklam konumu vardır, bu nedenle JavaScript’in aynı sonuçla tanınmasını beklemeden masaüstü çözünürlükleri için bunu en baştan gizleriz. Özel bir navbar öğesiyle benzer bir etkimiz oldu, burada bir JavaScript tanımını engellemek için CSS kullandık.
Elbette bu tür müdahalelere karşı dikkatli olmalısınız! Prensip olarak, özel öğeler, dış müdahaleden etkilenmeyen kapsüllenmiş bileşenler olmalıdır. Ancak burada, daha sessiz sayfa yapısından yana bir değerlendirme yapılmıştır.
(Sadece) benim makinemde çalışıyor mu?
Bu önlemlerden sonra, CLS değerimiz önemli ölçüde iyileşti ve en azından bizim için kalıcı olarak 0,0’ın altındaki aralıkta kaldı. Piyasaya sunulduğundan beri, CrUX verilerini izliyoruz ve bu veriler kullanıcılarımız için gelişmeye devam ediyor. Şu anda (masaüstü kullanıcıları için) %85 iyi (önceden %44), %12’sinin iyileştirilmesi gerekiyor (önceden %25) ve yalnızca %3’ü kötü (önceden %31).
olasılık
Bu optimizasyon ile web vitals’ın daha sonra Google’da arama sonuçları sayfasında sıralamada bir alt faktör olabilecek CLS değerini iyileştirdik ama her şeyden önce kullanıcı deneyimini iyileştirdik. Bu, özellikle sitemizi bir reklam engelleyici istisnasıyla ziyaret etmeye devam eden ve bu nedenle bizi destekleyen kullanıcılar için geçerli olmalıdır (bu noktada çok teşekkürler).
Çalışmalarımızı burada rapor ettiğimizde sıklıkla olduğu gibi, bu metin belirli bir geliştirme alanının sonunu temsil etmez. PageSpeed Insights sonuçlarımıza bakan herkes, terimler açısından iyileştirmeler yaptığımızı fark edecektir. performans (ve dolayısıyla kullanıcı deneyimi açısından Google’ın Web -Vitals-Sense’inde) hala yolda, ancak CLS’nin optimizasyonu en azından iyi bir ilk adımdı.
(hehe)
Haberin Sonu