Bir makale okurken sayfada aniden bir şeylerin değişmesi sizi rahatsız eder değil mi? Ya da okuduğunuz bir metin uyarı vermeden hareket eder ve odak noktanızı kaybedersiniz.
Daha da kötüsü: bir bağlantıya veya linke dokunmak üzeresiniz, ancak parmağınız değmeden hemen önce -BOOM- bağlantı hareket ediyor ve sonunda başka bir şeye tıklıyorsunuz!
Çok sinir bozucu bir durum! ve çoğu zaman bu tür deneyimler sadece can sıkıcıdır.
Düzen kararsızlığının kullanıcıları nasıl olumsuz etkileyebileceğini gösteren bir ekran görüntüsü.
Sayfa içeriğinin beklenmeyen hareketi, genellikle kaynakların eşzamansız olarak yüklenmesi veya DOM öğelerinin sayfaya dinamik olarak mevcut içeriğin üzerine eklenmesi nedeniyle olur. Suçlu, boyutları bilinmeyen bir resim veya video, yedeğinden daha büyük veya daha küçük görünen bir yazı tipi veya kendisini dinamik olarak yeniden boyutlandıran bir üçüncü taraf reklamı veya pencere öğesi olabilir.
Bu sorunu daha da sorunlu hale getiren şey, bir sitenin geliştirme aşamasındaki işlevlerinin, kullanıcıların siteyi deneyimleme biçiminden genellikle oldukça farklı olmasıdır. Kişiselleştirilmiş veya üçüncü taraf içeriği, geliştirme sırasında genellikle üretimdeki gibi davranmaz, test görüntüleri genellikle zaten geliştiricinin tarayıcı önbelleğindedir ve yerel olarak çalışan API çağrıları genellikle o kadar hızlıdır ki gecikme fark edilmez.
Kümülatif Düzen Kayması (CLS) metriği, gerçek kullanıcılar için ne sıklıkla meydana geldiğini ölçerek bu sorunu çözmenize yardımcı olur.
CLS nedir?
CLS, bir sayfanın ömrü boyunca meydana gelen her beklenmedik düzen kayması için en büyük düzen kayması puanlarının bir ölçüsüdür .
Görünür bir öğe, işlenmiş bir çerçeveden diğerine konumunu değiştirdiğinde bir düzen kayması gerçekleşir. (Ayrı yerleşim kaydırma puanlarının nasıl hesaplandığıyla ilgili ayrıntılar için aşağıya bakın .)
Oturum penceresi olarak bilinen bir dizi düzen kayması, bir veya daha fazla ayrı düzen kaymasının, her vardiya arasında 1 saniyeden daha kısa bir sürede ve toplam pencere süresi boyunca maksimum 5 saniye olacak şekilde art arda meydana gelmesidir.
En büyük patlama, o penceredeki tüm düzen kaymalarının maksimum kümülatif puanına sahip oturum penceresidir.
Oturum pencereleri örneği. Mavi çubuklar, her bir düzen değişikliğinin puanlarını temsil eder.
İyi bir CLS puanı nedir?
İyi bir kullanıcı deneyimi sağlamak için siteler, 0,1 veya daha düşük bir CLS puanına sahip olmaya çalışmalıdır . Kullanıcılarınızın çoğu için bu hedefi tutturduğunuzdan emin olmak için iyi bir ölçüm eşiği, mobil ve masaüstü cihazlar arasında bölümlere ayrılmış sayfa yüklemelerinin 75. yüzdelik dilimidir .
Ayrıntılı olarak düzen değişiklikleri
Düzen kaymaları , görünüm alanında görünen bir öğe başlangıç konumunu (örneğin, varsayılan yazma modunda üst ve sol konumu ) iki çerçeve arasında değiştirdiğinde girişleri bildiren Düzen Dengesizliği API'si tarafından tanımlanır . Bu tür elemanlar kararsız elemanlar olarak kabul edilir .layout-shift
Düzen kaymalarının yalnızca mevcut öğeler başlangıç konumlarını değiştirdiğinde meydana geldiğini unutmayın. DOM'a yeni bir öğe eklenirse veya mevcut bir öğenin boyutu değişirse, değişiklik diğer görünür öğelerin başlangıç konumlarını değiştirmesine neden olmadığı sürece, bu bir düzen kayması olarak sayılmaz.
Düzen kaydırma puanı
Düzen kaydırma puanını hesaplamak için tarayıcı, görüntü alanı boyutuna ve görüntü alanındaki kararsız öğelerin iki işlenmiş çerçeve arasındaki hareketine bakar . Düzen kaydırma puanı, bu hareketin iki ölçüsünün bir ürünüdür: etki oranı ve mesafe oranı (her ikisi de aşağıda tanımlanmıştır).
layout shift score = impact fraction * distance fractionDarbe fraksiyonu
Etki oranı , kararsız öğelerin iki çerçeve arasındaki görüntü alanı alanını nasıl etkilediğini ölçer .
Önceki çerçeve ve geçerli çerçeve için tüm kararsız öğelerin görünür alanlarının birleşimi - görünümün toplam alanının bir bölümü olarak - geçerli çerçevenin etki kesridir .
Yukarıdaki resimde, tek bir çerçevede görünümün yarısını kaplayan bir öğe var. Ardından, bir sonraki karede öğe, görüntü alanı yüksekliğinin %25'i kadar aşağı kayar. Kırmızı, noktalı dikdörtgen, öğenin görünür alanının her iki çerçevedeki birleşimini gösterir; bu durumda bu, toplam görünümün %75'idir, yani etki oranı 0.75.
Mesafe kesri #
Düzen kaydırma puanı denkleminin diğer kısmı, görüntü alanına göre kararsız öğelerin hareket ettiği mesafeyi ölçer. Mesafe fraksiyonu , herhangi bir dengesiz öğenin çerçevede (yatay veya dikey olarak) hareket ettirdiği en büyük mesafenin görünümün en büyük boyutuna (genişlik veya yükseklik, hangisi daha büyükse) bölünmesiyle elde edilir.
Yukarıdaki örnekte, en büyük görüntü alanı boyutu yüksekliktir ve dengesiz öğe, görüntü alanı yüksekliğinin %25'i kadar hareket etmiştir, bu da uzaklık kesirini 0,25 yapar.
Dolayısıyla, bu örnekte etki oranı ve 0.75mesafe oranı , 0.25dolayısıyla düzen kaydırma puanı0.75 * 0.25 = 0.1875 .
Sonraki örnek, mevcut bir öğeye içerik eklemenin düzen kaydırma puanını nasıl etkilediğini gösterir:
"Bana Tıkla!" düğmesi, beyaz metinli yeşil kutuyu aşağı (ve kısmen görünümün dışına) iten siyah metinli gri kutunun altına eklenir.
Bu örnekte, gri kutunun boyutu değişir, ancak başlangıç konumu değişmez, dolayısıyla kararsız bir öğe değildir .
"Bana Tıkla!" düğmesi daha önce DOM'da olmadığı için başlangıç konumu da değişmez.
Bununla birlikte, yeşil kutunun başlangıç konumu değişir, ancak kısmen görünümün dışına taşındığından, etki kesri hesaplanırken görünmez alan dikkate alınmaz . Her iki çerçevedeki (kırmızı, noktalı dikdörtgenle gösterilen) yeşil kutu için görünür alanların birleşimi, ilk çerçevedeki yeşil kutunun alanıyla aynıdır—görüntü alanının %50'si. Etki oranıdır0.5 . _
Mesafe fraksiyonu mor okla gösterilmiştir. Yeşil kutu, görünümün yaklaşık %14'ü kadar aşağı hareket etti, bu nedenle mesafe kesri0.14 .
Düzen kaydırma puanı 0.5 x 0.14 = 0.07.
Bu son örnek, birden çok kararsız öğeyi göstermektedir :
Yukarıdaki ilk çerçevede, hayvanlar için bir API isteğinin alfabetik sıraya göre sıralanmış dört sonucu vardır. İkinci çerçevede, sıralanan listeye daha fazla sonuç eklenir.
Listedeki ilk öğe ("Kedi") başlangıç konumunu çerçeveler arasında değiştirmez, dolayısıyla kararlıdır. Benzer şekilde, listeye eklenen yeni öğeler daha önce DOM'da olmadığı için başlangıç konumları da değişmez. Ancak "Köpek", "At" ve "Zebra" etiketli öğelerin tümü başlangıç konumlarını değiştirerek onları kararsız öğeler haline getirir .
Yine, kırmızı, noktalı dikdörtgenler, bu üç dengesiz öğenin önceki ve sonraki alanlarındaki birleşimini temsil eder; bu durumda bu, görüntü alanı alanının yaklaşık %38'ini oluşturur ( etki kesri0.38 ).
Oklar, kararsız elemanların başlangıç konumlarından hareket ettikleri mesafeleri temsil eder . Mavi okla temsil edilen "Zebra" öğesi, görüntü alanı yüksekliğinin yaklaşık %30'u kadar en çok hareket eden öğedir. Bu, bu örnekteki uzaklık kesirini0.3 oluşturur .
Düzen kaydırma puanı 0.38 x 0.3 = 0.1172.
Beklenen ve beklenmeyen düzen kaymaları #
Tüm düzen değişiklikleri kötü değildir. Aslında, birçok dinamik web uygulaması, sayfadaki öğelerin başlangıç konumunu sık sık değiştirir.
Kullanıcı tarafından başlatılan düzen değişiklikleri #
Bir düzen değişikliği, yalnızca kullanıcı bunu beklemiyorsa kötüdür. Öte yandan, kullanıcı etkileşimlerine (bir bağlantıya tıklamak, bir düğmeye basmak, bir arama kutusuna yazmak vb.) yanıt olarak ortaya çıkan düzen değişiklikleri, ilişkinin olduğu etkileşime yeterince yakın olduğu sürece genellikle iyidir. kullanıcıya açıktır.
Örneğin, bir kullanıcı etkileşimi, tamamlanması biraz zaman alabilen bir ağ isteğini tetiklerse, istek tamamlandığında hoş olmayan bir düzen değişikliğini önlemek için hemen biraz alan oluşturmak ve bir yükleme göstergesi göstermek en iyisidir. Kullanıcı bir şeyin yüklendiğini fark etmezse veya kaynağın ne zaman hazır olacağına dair bir fikre sahip değilse, beklerken başka bir şeye tıklamayı deneyebilir—altlarından çıkabilecek bir şeye.
Kullanıcı girişinin ardından 500 milisaniye içinde gerçekleşen düzen kaymaları, hadRecentInputhesaplamaların dışında kalabilmeleri için işaret ayarına sahip olacaktır.
Animasyonlar ve geçişler #
Animasyonlar ve geçişler, iyi yapıldığında, kullanıcıyı şaşırtmadan sayfadaki içeriği güncellemenin harika bir yoludur. Sayfada aniden ve beklenmedik bir şekilde değişen içerik, neredeyse her zaman kötü bir kullanıcı deneyimi yaratır. Ancak kademeli ve doğal bir şekilde bir konumdan diğerine geçen içerik, genellikle kullanıcının neler olup bittiğini daha iyi anlamasına yardımcı olur ve durum değişiklikleri arasında ona yol gösterir.
prefers-reduced-motionBazı site ziyaretçileri animasyon nedeniyle kötü etkiler veya dikkat sorunları yaşayabileceğinden, tarayıcı ayarlarına saygı gösterdiğinizden emin olun .
CSS transformözelliği, düzen kaydırmalarını tetiklemeden öğeleri canlandırmanıza olanak tanır:
heightvewidthözelliklerini değiştirmek yerinetransform: scale().- Öğeleri taşımak için , , veya özelliklerini değiştirmekten kaçının
topverightbununbottomyerineleftkullanıntransform: translate().
CLS # nasıl ölçülür
CLS laboratuvarda veya sahada ölçülebilir ve aşağıdaki araçlarda bulunur: