CLS nasıl sıfırlanır.
CLS, sayfa yüklenirken ya da kullanılırken içeriğin beklenmedik biçimde kayma miktarını ölçer ve Google 0,1'in altını iyi sayar.
Üç Core Web Vitals metriği arasında en somut deneyime karşılık geleni budur: okumaya başladığınız bir metin altınızdan kayar, tıklamak üzere olduğunuz düğme yer değiştirir ve yanlış yere basarsınız. Herkesin yaşadığı ama adı konmamış bir sinir kaynağıdır.
Hesap iki çarpandan oluşur: kayan alanın ekranın ne kadarını kapladığı ve ne kadar uzağa kaydığı. Bu yüzden ekranın üst kısmındaki büyük bir öğenin küçük bir kayması, alttaki küçük bir öğenin büyük kaymasından daha çok cezalandırılır — kullanıcının gerçekten rahatsız olduğu şey de odur.
Beklenmedik olmak şart
Metrik yalnız BEKLENMEDİK kaymaları sayar. Kullanıcı bir düğmeye basıp bir menü açtığında oluşan kayma sayılmaz, çünkü kullanıcı onu bekliyordu. Tarayıcı bunu, kaymadan önceki yarım saniye içinde bir kullanıcı etkileşimi olup olmadığına bakarak ayırt eder.
Bu istisna, akordeon ve açılır menü gibi bileşenlerin serbest olduğu anlamına geliyor — ama yalnız etkileşimden hemen sonra gelen kaymalar için. Yarım saniyeden sonra oluşan bir kayma yine sayılır, ve bu, gecikmeli animasyonlarda bir tuzaktır.
Dört yaygın kaynak
Gerçek sitelerde kaymanın kaynağı neredeyse her zaman aynı dört yerden birinden geliyor ve dördünün de bilinen bir çözümü var.
- Boyutsuz görseller — genişlik ve yükseklik bildirilmemişse tarayıcı yer ayıramaz; görsel geldiğinde altındaki her şey aşağı iter.
- Yazı tipi takası — yedek yazı tipiyle boyanan metin, gerçek yazı tipi gelince farklı yer kaplar.
- Sonradan eklenen içerik — reklam, bildirim çubuğu, çerez bandı. Mevcut içeriğin ÜSTÜNE eklenirse her şeyi iter.
- Boyutsuz gömülü içerik — video oynatıcı, harita, sosyal medya kutusu. Kendi boyutunu geç bildirir.
İlk madde en yaygını ve en ucuz çözüleni: görsele genişlik ve yükseklik yazmak. Modern tarayıcılar bu iki değerden en-boy oranını hesaplar ve duyarlı düzende bile doğru yeri ayırır. Tek satırlık bir düzeltme, CLS kaynaklarının büyük kısmını kapatır.
Üçüncü madde için kural şudur: sonradan gelen içerik mevcut içeriğin üstüne değil, ya kendi ayrılmış yerine ya da içeriğin akışını etkilemeyen bir katmana yerleştirilmelidir. Sayfanın en üstüne sonradan eklenen bir bildirim çubuğu, en yıkıcı kayma kaynaklarından biridir.
Bu sitede ölçülen değer
Bu sitenin ve yönettiği üç canlı projenin ölçülen düzen kayması 0,001 — Google'ın iyi eşiği olan 0,1'in yüzde biri. Bu bir şans değil, bir disiplinin sonucu: her görsel boyutlu geliyor, yedek yazı tipi metrik olarak eşleşiyor, ve sonradan eklenen hiçbir katman içerik akışına girmiyor.
Doğrulama süiti eşiği 0,05'e — Google'ın izin verdiğinin yarısına — bağlıyor ve her koşumda ölçüyor. Bütçenin resmî eşiğin altında tutulması bilinçli: bir gün bir gerileme olduğunda, eşiğe çarpmadan önce görünsün.
Bütçe resmî eşiğin altında tutulur ki gerileme, eşiğe çarpmadan önce görünsün.
Klasik ölçümün göremediği
En önemli uyarı sona kaldı. Klasik düzen kayması ölçümü sayfa yükleme penceresine bakar. Kullanıcı kaydırmaya başladıktan sonra oluşan kaymalar, o pencerede görünmez — ama kullanıcı tam olarak onları yaşar.
Bu sitede tam olarak öyle bir kör nokta bulundu: sayfa yüklenirken ölçülen kayma sıfıra yakındı, ama kaydırma sırasında sabitlenmiş bir bölüm bırakılırken bir kayma oluşuyordu. Klasik ölçüm bunu hiç görmüyordu.
Düzeltme sonrası ayrı bir nöbetçi eklendi: kaydırma sırasındaki kayma, Google'ın oturum penceresi mantığıyla ölçülüyor ve en kötü pencere 0,08'in altında kalmalı. Bu, hiçbir genel aracın sormadığı bir sorudur ve yalnız o soruyu soran bir test tarafından yakalanabilir.
Animasyon ve geçişler
Bir öğeyi hareket ettirmenin iki yolu var ve ikisi CLS açısından tamamen farklı davranıyor. Öğenin konumunu ya da boyutunu düzen özellikleriyle değiştirmek, tarayıcıyı düzeni yeniden hesaplamaya zorlar ve etraftaki her şeyi kaydırır — bu, doğrudan CLS üretir.
Buna karşılık dönüşüm ve opaklık özellikleri düzeni hiç etkilemez; öğe kendi katmanında hareket eder ve komşuları yerinde kalır. Bu yüzden performanslı animasyonun kuralı tek cümledir: yalnız dönüşüm ve opaklık kullan.
Kural aynı zamanda bir hız kazancıdır: bu iki özellik tarayıcının ekran kartı katmanında işlenebilir ve ana iş parçacığını meşgul etmez. Yani doğru animasyon tekniği hem CLS'i hem INP'yi birden korur.
Bu sitede tüm hareket katmanı bu kısıtla kurulu ve doğrulama süiti kare bütçesini ayrıca ölçüyor: medyan kare süresi 12 milisaniyenin, 95. yüzdelik 24 milisaniyenin altında kalmalı. İki eşik de saniyede altmış kare hedefinden türetilmiş.
Ölçüm penceresi
Metriğin hesabında bilinmesi gereken bir incelik var: toplam kayma tüm sayfa ömrü boyunca toplanmıyor. Google, kaymaları oturum pencerelerine bölüyor — birbirine yakın kaymalar bir pencerede toplanıyor ve raporlanan değer EN KÖTÜ pencerenin değeri oluyor.
Bu, uzun sayfalarda önemli bir fark yaratıyor. Yüzlerce kayma üreten bir sayfa, kaymaların hepsi küçük ve dağınıksa iyi çıkabilir; tek bir yerde toplanan üç büyük kayma ise sayfayı kırmızıya düşürür. Yani sorun toplam değil, yoğunluk.
Bu sitede kaydırma sırasındaki kayma tam olarak bu mantıkla ölçülüyor: pencereler hesaplanıyor ve en kötü pencere 0,08'in altında kalmalı. Ölçümün Google'ın kendi hesabıyla aynı mantığı kullanması, testin gerçekten aynı şeyi ölçtüğünü garanti ediyor.
Son bir pratik not: düzen kaymasını ölçmenin en dürüst yolu, yavaş bir ağ ve düşük güçlü bir cihaz simülasyonuyla test etmektir. Hızlı bir makinede her şey neredeyse aynı anda geldiği için kaymalar hiç görünmez; yavaşlatılmış bir ortamda ise sıralı olarak ortaya çıkarlar ve kaynağı tek tek işaretlenebilir. Tarayıcı geliştirici araçları her iki simülasyonu da sunuyor ve düzen kayması avında en çok işe yarayan ayar ikisinin birlikte açılmasıdır.