Cumulative Layout Shift (CLS)

Görsellerin/reklamların yavaş yüklenmesi, eşzamansız işlemler, dinamik DOM değişiklikleri vb. nedenlerle

bir web sayfasının düzeninin ne kadar değiştiğini ölçerek

kullanıcıların yanlış tıklama yapmasına yol açabilen görsel kararsızlığı kontrol eden, kullanıcı odaklı bir performans metriği

"İyi bir CLS puanı 0.1 veya altıdır"

Layout Instability API, Layout Shift Score adlı bir ölçüm değeri sağlar

- Layout Shift Score = impact fraction ( ne büyüklükte bir nesne hareket ediyor ) * distance fraction ( ne kadar hareket ediyor )

- Kullanıcı davranışı nedeniyle düzenin değişmesi kabul edilebilir - kullanıcı girdisi 500 ms içinde gerçekleştiyse `hadRecentInput` ayarlanır, bu yüzden hesaplamadan çıkarılabilir

- `height`/`width` değiştirmek yerine `transform:scale()` kullanın

- `top`,`right`,`bottom`,`left` değiştirmek yerine `transform: translate()` kullanın

CLS'yi iyileştirme yöntemleri

- Görsellere/videolara her zaman boyut belirtin ya da CSS Aspect Ratio Boxes gibi yöntemlerle yerlerini önceden ayırın

- Kullanıcı etkileşimi dışında, mevcut içeriğin üstüne yeni içerik eklemeyin

- Durumlar arasındaki geçişleri CSS Transform vb. ile animasyonlu hale getirin

[kunggom]

Tam basmak üzereyken düzenin aniden hafifçe kayıp yanlış yere dokunmaya sebep olması sık sık insanı sinirlendiriyor; bunu nicel olarak ölçmenin bir yolu nihayet çıkmış demek. Bana kalırsa bunu haber sitelerinin ana sayfalarında ölçsek oldukça içler acısı sonuçlar çıkabilir.

[xguru]

Yerli medya kuruluşlarında reklamlar hem çok fazla hem de reklamların kendisi de yavaş ve titrek olduğu için, bunu ölçmenin kendisi muhtemelen anlamsızdır...

Başka bir konu olarak, ben https://github.com/disjukr/just-news ve Tampermonkey kullanarak yerli medya kuruluşlarında sadece ana metni okuyorum. Web siteleri fazla dağınık.

[kunggom]

Ben de eskiden Python’la, [bir haber kuruluşunun makale bağlantısını girince bunu otomatik olarak portal haber makalesi bağlantısına dönüştüren bir program] yazmayı denemiştim. Biraz saçma şekilde kaynak kodunu kaybedince (yanlışlıkla RAM diske kaydedip ardından yeniden başlatınca) aydınlanma anı(?) geldi ve vazgeçtim.

[xguru]

Kullanıcı odaklı performans metrikleri

https://web.dev/user-centric-performance-metrics

https://developers.google.com/web/fundamentals/…

Mevcut load ve DOMContentLoaded iyi metrikler değildir.

First Contentful Paint (FCP): Ekranda ilk içeriğin görünmeye başladığı an

Largest Contentful Paint (LCP): Sayfadaki en büyük metin bloğunun veya görselin görüntülendiği an

First Input Delay (FID): Kullanıcı girdisi mümkün olduktan sonra tarayıcının buna gerçekten tepki vermesinin ne kadar sürdüğü

Time to Interactive (TTI): Yüklemenin başlamasından kullanıcı etkileşiminin mümkün hale gelmesine kadar geçen süre

Total Blocking Time (TBT): FCP ile TTI arasındaki toplam süre

Cumulative Layout Shift (CLS): Düzen kayması metriği