Cumulative Layout Shift (CLS)

Milica Mihajlija
Milica Mihajlija
X GitHub Ana sayfa
Philip Walton

Tarayıcı Desteği

  • Chrome: 77..
  • Kenar: 79..
  • Firefox: Desteklenmez..
  • Safari: desteklenmez..

Kaynak

Beklenmedik düzen kaymaları, metin aniden hareket ettiğinde kullanıcının yerini kaybetmesine neden olmaktan yanlış bağlantıyı veya düğmeyi tıklamasına kadar pek çok şekilde kullanıcı deneyimini sekteye uğratabilir. Bazı durumlarda bu, ciddi hasarlara neden olabilir.

Düzende ani bir değişiklik olması, kullanıcının düzenlemek istediği büyük sırayı onaylamasına neden olur tuşuna basın.

Sayfa içeriğinin beklenmedik bir şekilde taşınması genellikle kaynaklar eşzamansız olarak yüklendiğinde veya DOM öğeleri, sayfaya mevcut içerikten önce dinamik bir şekilde eklendiğinde ortaya çıkar. Düzen kaymalarının nedeni bilinmeyen boyutlara sahip resim veya videolar, ilk yedekten daha büyük veya daha küçük oluşturulan yazı tipleri ya da kendilerini dinamik olarak yeniden boyutlandıran üçüncü taraf reklamları veya widget'ları olabilir.

Bir sitenin geliştirme aşamasındaki işlevi ile kullanıcılarının deneyimi arasındaki farklılıklar, bu sorunu daha da kötüleştirir. Örneğin:

  • Kişiselleştirilmiş veya üçüncü taraf içerik, genellikle geliştirme ve üretim aşamasında farklı davranır.
  • Test görüntüleri genellikle geliştiricinin tarayıcı önbelleğinde bulunur ancak bu resimlerin son kullanıcı tarafından yüklenmesi daha uzun sürer.
  • Yerel olarak çalıştırılan API çağrıları genellikle o kadar hızlıdır ki, geliştirme sırasında fark edilemeyen gecikmeler, üretimde önemli hale gelebilir.

Cumulative Layout Shift (CLS) metriği, sorunun gerçek kullanıcılar için ne sıklıkta gerçekleştiğini ölçerek bu sorunu çözmenize yardımcı olur.

CLS nedir?

CLS, bir sayfanın tüm yaşam döngüsü boyunca gerçekleşen her beklenmedik düzen değişikliği için düzen kayması puanlarının en büyük artışının ölçümüdür.

Görünür bir öğe, oluşturulan bir kareden diğerine her değişiklik yaptığında düzen kayması gerçekleşir. (Düzen kayması puanlarının nasıl hesaplandığıyla ilgili ayrıntılar bu kılavuzun ilerleyen bölümlerinde ele alınmıştır.)

Oturum aralığı olarak bilinen düzen kaymaları, bir veya daha fazla düzen değişikliğinin, her vardiya arasında 1 saniyeden az ve toplam pencere süresi boyunca en fazla 5 saniye olacak şekilde art arda gerçekleşmesidir.

En büyük patlama, söz konusu aralık içindeki tüm düzen geçişlerinin maksimum kümülatif puanına sahip oturum aralığıdır.

Oturum aralıkları örneği. Mavi çubuklar, her bir düzen kaymasının puanlarını gösterir.
ziyaret edin.
'nı inceleyin.

İyi bir CLS puanı nedir?

İyi bir kullanıcı deneyimi sağlamak için sitelerin CLS puanı 0, 1 veya daha düşük olmalıdır. Kullanıcılarınızın çoğunda bu hedefe ulaştığınızdan emin olmak için iyi bir ölçüm eşiği, mobil ve masaüstü cihazlara göre segmentlere ayrılmış sayfa yüklemelerinin 75. yüzdelik dilimidir.

İyi CLS değerleri 0,1 veya daha düşük, zayıf değerler 0,25'ten büyük ve iyileştirme ihtiyaçları arasında kalan tüm değerlerdir
İyi CLS değerleri 0,1 veya daha düşüktür. Yetersiz değerler 0,25'ten büyüktür.

Bu önerinin temelindeki araştırma ve metodoloji hakkında daha fazla bilgi edinmek için Core Web Vitals metrik eşiklerini tanımlama başlıklı makaleyi inceleyin.

Düzende ayrıntılı kaymalar

Düzen kaymaları, Layout Instability API'si tarafından tanımlanır. Bu API, görüntü alanında görünür olan bir öğenin başlangıç konumunu (örneğin, varsayılan yazma modunda üst ve sol konumu) iki kare arasında değiştirmesi durumunda layout-shift girişi bildirir. Bu tür öğeler kararsız öğeler olarak kabul edilir.

Düzen kaymalarının yalnızca mevcut öğeler başlangıç konumları değiştiğinde meydana geldiğini unutmayın. DOM'ye yeni bir öğe eklenir veya mevcut bir öğenin boyutu değişirse, diğer görünür öğelerin başlangıç konumlarını değiştirmesine neden olmadığı sürece bu değişiklik, düzen kayması olarak sayılmaz.

Düzen kayması puanı

Tarayıcı, düzen kayma puanını hesaplamak için görüntü alanı boyutuna ve oluşturulan iki kare arasındaki görüntü alanındaki kararsız öğelerin hareketine bakar. Düzen kayması puanı, söz konusu hareketin iki ölçümünün sonucudur: etki oranı ve mesafe kesiri (ikisi de aşağıda tanımlanmıştır).

layout shift score = impact fraction * distance fraction

Etki oranı

Etki oranı, kararsız öğelerin iki kare arasındaki görüntü alanı alanını nasıl etkilediğini ölçer.

Belirli bir karenin etki oranı, o kare ve önceki kare için kararsız tüm öğelerin görünür alanlarının kombinasyonudur. Bu, görüntü alanının toplam alanının oranıdır.

Bir kararsız öğe içeren etki oranı örneği
Bir öğenin konumu değişirse hem önceki hem de mevcut konumu, etki oranına katkıda bulunur.

Önceki resimde, bir karede görüntü alanının yarısını kaplayan bir öğe vardır. Ardından, sonraki karede öğe, görüntü alanı yüksekliğinin% 25'i kadar aşağı kaydırılır. Kırmızı, noktalı dikdörtgen, öğenin her iki çerçevedeki görünür alanının birleşimini gösterir. Bu örnekte, toplam görüntü alanının% 75'i olduğu için etki oranı 0.75 olur.

Mesafe oranı

Düzen kayması puanı denkleminin diğer bölümü, kararsız öğelerin görüntü alanına göre hareket ettiği mesafeyi ölçer. Mesafe kesiri, herhangi bir kararsız öğenin çerçeve içinde taşıdığı en büyük yatay veya dikey mesafenin, görüntü alanının en büyük boyutuna (genişlik veya yükseklik (hangisi daha büyükse)) bölünmesiyle elde edilir.

Kararsız bir öğe içeren mesafe oranı örneği
Mesafe oranı, bir öğenin görüntü alanında ne kadar uzağa taşındığını ölçer.

Önceki örnekte, en büyük görüntü alanı boyutu yüksekliktir ve kararsız öğe, görüntü alanı yüksekliğinin% 25'i kadar taşınmıştır.Bu sayede mesafe kesiri 0, 25 olur.

Dolayısıyla, bu örnekte etki oranı 0.75 ve mesafe oranı 0.25. Bu nedenle düzen değiştirme puanı 0.75 * 0.25 = 0.1875.

Örnekler

Sonraki örnek, mevcut bir öğeye içerik eklemenin düzen kayması puanını nasıl etkilediğini gösterir:

Birden çok sabit ve _kararsız öğe_ içeren düzen kayması örneği
Gri kutunun alt kısmına bir düğme eklediğinizde yeşil kutu aşağı ve kısmen görüntü alanının dışına itilir.

Bu örnekte, gri kutunun boyutu değişir ancak başlangıç konumu değişmez. Bu nedenle, kararsız bir öğe değildir.

"Beni Tıkla!" düğmesi daha önce DOM'de olmadığı için başlangıç konumu da değişmez.

Bununla birlikte, yeşil kutunun başlangıç konumu değişir ancak görünüm alanının kısmen dışına taşındığı için etki oranı hesaplanırken görünmez alan dikkate alınmaz. Her iki çerçevedeki yeşil kutunun görünür alanlarının birleşimi (kırmızı, noktalı dikdörtgenle gösterilmiştir), ilk karedeki yeşil kutunun alanıyla aynıdır (görüntü alanının% 50'si). Etki oranı 0.5.

Mesafe kesiri mor okla gösterilir. Yeşil kutu, görüntü alanının yaklaşık% 14'ü kadar aşağı hareket ettiği için mesafe oranı 0.14.

Düzen kayması puanı 0.5 x 0.14 = 0.07.

Aşağıdaki örnekte birden fazla kararsız öğenin bir sayfanın düzen kayması puanını nasıl etkilediği gösterilmektedir:

Sabit ve _kararlı olmayan öğeler_ ve görüntü alanı kırpmalı düzen kayması örneği
Bu sıralanmış listede daha fazla ad göründükçe, mevcut adlar alfabetik sıralamayı koruyacak şekilde taşınır.

Önceki görüntüdeki ilk karede, hayvanlara yönelik bir API isteğinin alfabetik sıraya göre sıralanmış dört sonucu vardır. İkinci karede, sıralanmış listeye daha fazla sonuç eklenir.

Listedeki ilk öğe ("Kedi"), kareler arasındaki başlangıç konumunu değiştirmez, bu nedenle sabittir. Benzer şekilde, listeye eklenen yeni öğeler daha önce DOM'de yer almadığından bunların başlangıç konumları da değişmez. Ancak "Köpek", "At" ve "Zebra" etiketli öğeler Bunların tümü başlangıç konumlarını değiştirir ve bu da onları kararsız öğeler haline getirir.

Yine noktalı kırmızı, noktalı dikdörtgenler bu üç kararsız öğenin birleşimini gösterir Bu örnekte, görüntü alanının alanının yaklaşık% 60'ıdır (0.60'nın etki oranı).

Oklar, kararsız öğelerin başlangıç konumlarından uzaklaştırdığı mesafeyi gösterir. "Zebra" öğesi, görüntü alanının yüksekliğinin yaklaşık% 30'u kadar en fazla yer değiştirmiştir. Bu da bu örnekte mesafe kesrini 0.3 yapar.

Düzen kayması puanı 0.60 x 0.3 = 0.18.

Beklenen ve beklenmeyen düzen kaymaları

Düzen kaymalarının hepsi kötü değildir. Aslında, birçok dinamik web uygulaması sayfadaki öğelerin başlangıç konumunu sık sık değiştirir. Düzen kayması yalnızca kullanıcı bunu beklemiyorsa kötü olur.

Kullanıcı tarafından başlatılan düzen kaymaları

Kullanıcı etkileşimlerinde (bir bağlantıyı tıklama veya bağlantıya dokunma, bir düğmeye basma ya da bir arama kutusunu yazma gibi) sonucunda meydana gelen düzen kaymaları genellikle, kayma, ilişkinin kullanıcı açısından net olduğu etkileşime yakın olduğu sürece normaldir.

Örneğin, bir kullanıcı etkileşiminin tamamlanması biraz zaman alabilecek bir ağ isteğini tetiklerse istek tamamlandığında hemen bir alan oluşturmak ve bir yükleme göstergesi göstermek en iyisidir. Böylece, istek tamamlandığında rahatsız edici bir düzen değişikliği yaşanmaması sağlanır. Kullanıcı bir şeyin yüklendiğini fark etmezse veya kaynağın ne zaman hazır olacağını bilmiyorsa beklerken başka bir şeyi tıklamayı deneyebilir. Bu, öğelerin altından çıkabilecek bir şeydir.

Kullanıcı girişinden sonraki 500 milisaniye içinde gerçekleşen düzen kaymalarında hadRecentInput işareti ayarlanır. Böylece bu değişiklikler hesaplamalara dahil edilmez.

Animasyonlar ve geçişler

Animasyonlar ve geçişler doğru uygulandığında, kullanıcıyı şaşırtmadan sayfadaki içeriği güncellemenin mükemmel bir yoludur. Sayfada ani ve beklenmedik bir şekilde değişen içerik, neredeyse her zaman kötü bir kullanıcı deneyimine neden olur. Ancak kademeli ve doğal bir şekilde bir konumdan diğerine geçiş yapan içerik, genellikle kullanıcının neler olup bittiğini daha iyi anlamasına ve durum değişiklikleri arasında yol göstermesine yardımcı olur.

Bazı site ziyaretçileri animasyondan dolayı kötü etkiler veya dikkat sorunları yaşayabileceği için prefers-reduced-motion tarayıcı ayarlarına uyduğunuzdan emin olun.

CSS transform özelliği, düzen kaymalarını tetiklemeden öğeleri canlandırmanızı sağlar:

  • height ve width özelliklerini değiştirmek yerine transform: scale() özelliğini kullanın.
  • Öğeleri taşımak için top, right, bottom veya left özelliklerini değiştirmekten kaçının ve bunun yerine transform: translate() özelliğini kullanın.

CLS nasıl ölçülür?

CLS, laboratuvarda veya sahada ölçülebilir ve aşağıdaki araçlarda kullanılabilir:

Alan araçları

Laboratuvar araçları

JavaScript'te düzen kaymalarını ölçme

JavaScript'te düzen kaymalarını ölçmek için Layout Instability API'sini kullanırsınız.

Aşağıdaki örnekte, layout-shift girişlerini konsola kaydetmek için PerformanceObserver özelliğinin nasıl oluşturulacağı gösterilmektedir:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

JavaScript'te CLS'yi ölçme

JavaScript'te CLS'yi ölçmek için bu beklenmedik layout-shift girişlerini oturumlar halinde gruplandırmanız ve maksimum oturum değerini hesaplamanız gerekir. CLS'nin nasıl hesaplandığıyla ilgili bir referans uygulamayı içeren web vitals JavaScript kitaplığı kaynak koduna bakabilirsiniz.

Çoğu durumda, sayfanın kaldırılması sırasındaki geçerli CLS değeri söz konusu sayfanın son CLS değeridir ancak sonraki bölümde belirtildiği gibi birkaç önemli istisna vardır. web vitals JavaScript kitaplığı, Web API'lerinin sınırlamaları dahilinde, bunları mümkün olduğunca dikkate alır.

Metrik ile API arasındaki farklar

  • Bir sayfa arka planda yüklenirse veya tarayıcı herhangi bir içeriği boyamadan önce arka plana alınırsa, herhangi bir CLS değeri bildirmemelidir.
  • Bir sayfa geri-ileri önbellekten geri yüklenirse kullanıcılar bunu ayrı bir sayfa ziyareti olarak deneyimlediği için CLS değeri sıfır olarak sıfırlanmalıdır.
  • API, iframe'lerde meydana gelen kaymalar için layout-shift girişlerini raporlamaz ancak metrik, sayfanın kullanıcı deneyiminin bir parçası olduğu için raporlanır. Bu, CrUX ve RUM arasında bir fark olarak gösterilebilir. CLS'yi doğru ölçmek için bunları göz önünde bulundurmalısınız. Alt çerçeveler API'yi kullanarak layout-shift girişlerini toplama için üst çerçeveye bildirebilir.

Bu istisnalara ek olarak, CLS bir sayfanın tüm kullanım ömrünü ölçmesi nedeniyle biraz daha karmaşıktır:

  • Kullanıcılar bir sekmeyi çok uzun süre (gün, hafta, ay) açık tutabilir. Aslında, kullanıcı hiçbir zaman bir sekmeyi kapatmayabilir.
  • Mobil işletim sistemlerinde, tarayıcılar arka plan sekmeleri için sayfa kaldırma geri çağırma işlemlerini genellikle çalıştırmadığından, "nihai" sayfanın raporlanmasını zorlaştırır. değer.

Bu tür durumların ele alınması için CLS, bir sayfa arka planda olduğunda ve sayfa kaldırıldığında (visibilitychange etkinliği bu senaryoların ikisini de kapsar) her seferinde bildirilmelidir. Ardından, bu verileri alan analiz sistemlerinin arka uçtaki son CLS değerini hesaplaması gerekir.

Geliştiriciler tüm bu örnekleri ezberleyip bunlarla uğraşmak yerine, iframe durumu hariç yukarıda belirtilen her şeyi hesaba katan CLS'yi ölçmek için web-vitals JavaScript kitaplığını kullanabilirler:

import {onCLS} from 'web-vitals';

// Measure and log CLS in all situations
// where it needs to be reported.
onCLS(console.log);

CLS nasıl iyileştirilir?

Sahadaki düzen kaymalarını tanımlama ve bunları optimize etmek için laboratuvar verilerini kullanma hakkında daha fazla yardım için CLS'yi optimize etme kılavuzumuzu inceleyin.

Ek kaynaklar

Değişiklik günlüğü

Hatalar bazen metrikleri ölçmek için kullanılan API'lerde ve bazen metriklerin tanımlarında keşfedilir. Sonuç olarak, bazen değişikliklerin yapılması gerekir. Bu değişiklikler, dahili raporlarınızda ve kontrol panellerinizde iyileştirmeler veya regresyonlar olarak görünebilir.

Bu metrikleri yönetmenize yardımcı olmak amacıyla, söz konusu metriklerin uygulanmasında veya tanımında yapılan tüm değişiklikler bu Değişiklik Günlüğü'nde gösterilecektir.

Bu metriklerle ilgili geri bildirimlerinizi web-vitals-feedback Google grubunda paylaşabilirsiniz.