Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS), kararlı bir Core Web Vital metriğidir. Görsel kararlılığı ölçmek için önemli ve kullanıcı merkezli bir metriktir. Çünkü kullanıcıların ne sıklıkta beklenmedik düzen kaymaları yaşadığını ölçmeye yardımcı olur. CLS'nin düşük olması sayfanın neşeli olmasına yardımcı olur.

Beklenmedik düzen kaymaları, kullanıcı deneyimini birçok şekilde kesintiye uğratabilir. Metin aniden hareket ederse kullanıcıların okuma sırasında yer kaybetmelerine veya yanlış bağlantıyı veya düğmeyi tıklamalarına neden olabilir. Bu, bazı durumlarda ciddi zararlara yol açabilir.

Sayfa içeriği genellikle kaynaklar eşzamansız şekilde yüklendiğinde veya DOM öğeleri sayfaya dinamik olarak mevcut içerikten önce eklendiğinde ortaya çıkar. Hareketin nedeni, bilinmeyen boyutlara sahip bir resim veya video, yedekten daha büyük veya daha küçük oluşturulan bir yazı tipi ya da kendini dinamik olarak yeniden boyutlandıran bir üçüncü taraf reklamı veya widget olabilir.

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

• Kişiselleştirilmiş veya üçüncü taraf içerik, geliştirme ve üretim aşamalarında genellikle farklı davranır.
• Test resimleri genellikle geliştiricinin tarayıcı önbelleğinde bulunur, ancak son kullanıcı için yüklenmesi daha uzun sürer.
• Yerel olarak çalışan API çağrıları genellikle o kadar hızlıdır ki geliştirme sırasında fark edilemeyen gecikmeler üretimde önemli ölçüde artış gösterebilir.

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

CLS nedir?

CLS, bir sayfanın kullanım süresi boyunca gerçekleşen her beklenmeyen düzen kayması için düzen değişikliği puanlarındaki en büyük artışın ölçümüdür.

Görünür bir öğe, oluşturulan bir kareden diğerine konumunu her değiştirdiğinde düzen kayması gerçekleşir. Bu kaymaların nasıl ölçüldüğüyle ilgili ayrıntılar için Düzen kayması puanı bölümüne bakın.

Oturum aralığı olarak bilinen art arda düzen kaymaları, en fazla 5 saniyelik bir süre boyunca her vardiya arasında 1 saniyeden az olacak şekilde, bir veya daha fazla bağımsız düzen kaymasının hızlı bir şekilde art arda gerçekleşmesidir.

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

İyi bir CLS puanı nasıl olur?

İyi bir kullanıcı deneyimi sunmak için sitelerin CLS puanı 0, 1 veya daha düşük olmalıdır. Kullanıcılarınızın çoğu için bu hedefe ulaştığınızdan emin olmak amacıyla, mobil ve masaüstü cihazlar genelinde segmentlere ayrılmış sayfa yüklemelerinin 75. yüzdelik dilimini ölçmenizi öneririz.

Bu önerinin ardındaki araştırma ve metodoloji hakkında daha fazla bilgi edinmek için Önemli Web Verileri metrik eşiklerini tanımlama bölümüne bakın.

Ayrıntılı düzen kaymaları

Düzen kaymaları, Layout Instability API tarafından tanımlanır. Bu API, görüntü alanında görünen bir öğe, iki kare arasında başlangıç konumunu her değiştirdiğinde (örneğin, varsayılan yazı modunda üst ve sol konumu her değiştiğinde) layout-shift girişi raporlar. Başlangıç konumu değişen öğeler, kararsız öğeler olarak kabul edilir.

Düzen kaymaları yalnızca mevcut öğelerin başlangıç konumlarını değiştirdiğinde meydana gelir. DOM'ye yeni bir öğe eklenir veya mevcut bir öğenin boyutu değişirse, yalnızca değişikliğin diğer görünür öğelerin başlangıç konumlarını değiştirmesine neden olması durumunda bu durum düzen kayması olarak sayılır.

Düzen kayması puanı

Tarayıcı, düzen kayma puanını hesaplamak için görüntü alanı boyutunu ve görüntü alanındaki kararsız öğelerin oluşturulan iki kare arasındaki hareketini dikkate alır. Düzen kayması puanı, bu hareketin iki ölçüsünün çarpımıdır: etki oranı ve mesafe oranı.

layout shift score = impact fraction * distance fraction

Etki oranı

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

Belirli bir çerçevenin etki oranı, o çerçevedeki tüm kararsız öğelerin ve önceki karenin görünür alanlarının kombinasyonudur. Bu, görüntü alanının toplam alanının bir bölümüdür.

Bu resimde, bir karede görüntü alanının yarısını kaplayan bir öğe gösterilmektedir. Sonraki karede, öğe görüntü alanı yüksekliğinin% 25'i kadar aşağı kayar. Kesikli çizgili dikdörtgen, öğenin her iki karede de görünür alanını gösterir. Bu durumda, bu alan toplam görüntü alanının% 75'idir. Bu nedenle, 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 oranı, herhangi bir kararsız öğenin çerçeve içinde hareket ettirdiği en büyük yatay veya dikey mesafe, görüntü alanının en büyük boyutuna (hangisi daha büyükse) bölünür.

Bu ö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 hareket ettirilmiştir. Bu da mesafe oranını 0.25 yapar.

0.75 etki oranı ve 0.25 mesafe oranı, 0.75 * 0.25 = 0.1875 düzen kayma puanı verir.

Örnekler

Sonraki örnekte, mevcut bir öğeye içerik eklemenin düzen kayma puanını nasıl etkilediği gösterilmektedir:

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ıklayın!" düğmesi daha önce DOM'da yoktu, bu nedenle başlangıç konumu da değişmedi.

Yeşil kutunun başlangıç konumu değişir, ancak kısmen görüntü alanının dışına taşınmıştır ve etki oranı hesaplanırken görünmez alan dikkate alınmaz. Her iki çerçevedeki yeşil kutu için görünür alanların birleşimi (kesik kırmızı dikdörtgen), ilk karedeki yeşil kutu alanıyla (görüntü alanının% 50'si) aynıdır. Etki oranı: 0.5.

Mesafe oranı, mavi okla gösterilir. Yeşil kutu, görüntü alanının yaklaşık% 14'ü 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 sayfanın düzen kayma puanını nasıl etkilediği gösterilmektedir:

Listedeki ilk öğe ("Kedi"), kareler arasında başlangıç konumunu değiştirmez. Bu nedenle, sabittir. Listeye eklenen yeni öğeler daha önce DOM'de yer almadığından, başlangıç konumları da değişmez. Ancak "Köpek", "At" ve "Zebra" etiketli öğelerin tümü başlangıç konumlarını değiştirdiğinden bu öğeler kararsız öğelerdir.

Kesikli kırmızı dikdörtgen, bu üç kararsız öğenin kaymadan önceki ve sonraki alanını temsil eder. Bu örnekte, görüntü alanı alanının yaklaşık% 60'ıdır (0.60 etki oranı).

Oklar, kararsız öğelerin başlangıç konumlarından uzaklaştırdığı mesafeleri gösterir. Mavi okla gösterilen "Zebra" öğesi, görüntü alanı yüksekliğinin yaklaşık% 30'u ile en çok hareket etti. Bu da bu örnekteki mesafe oranını 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ı, sık sık sayfadaki öğelerin başlangıç konumunu değiştirir. Düzen kayması ancak kullanıcı beklemiyorsa kötü olur.

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

Kullanıcı etkileşimlerine (bağlantıyı tıklama veya dokunma, bir düğmeye basma veya arama kutusuna yazma gibi) tepki olarak meydana gelen düzen kaymaları, etkileşimin kullanıcı açısından açıkça anlaşılacağı kadar yakın bir yerde gerçekleştiği sürece genellikle sorun yaratmaz.

Örneğin, bir kullanıcı etkileşimi tamamlanması zaman alabilecek bir ağ isteğini tetiklerse en iyi yöntem hemen bir miktar alan oluşturmak ve istek tamamlandığında istenmeyen düzen kaymasını önlemek için bir yükleme göstergesi göstermektir. Kullanıcı bir şeyin yüklendiğini fark etmez veya kaynağın ne zaman hazır olacağını bilmezse, beklerken başka bir öğeyi tıklamayı deneyebilir ve ilk öğenin yüklenmesi bittiğinde diğer öğe alt kısmından çıkabilir.

Kullanıcı girişinden itibaren 500 milisaniye içinde gerçekleşen düzen kaymalarında, hadRecentInput işareti ayarlanır. Böylece, bunları hesaplamalardan hariç tutabilirsiniz.

Animasyonlar ve geçişler

Animasyonlar ve geçişler, iyi yapıldığında kullanıcıyı şaşırtmadan sayfadaki içeriği güncellemek için harika bir yoldur. Sayfada aniden ve beklenmedik bir şekilde değişen içerik neredeyse her zaman kötü bir kullanıcı deneyimine neden olur. Bununla birlikte, kademeli ve doğal bir şekilde bir konumdan diğerine ilerleyen 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ı olabilir.

Animasyon bazı site ziyaretçileri için sağlık veya dikkat sorunlarına neden olabileceğinden prefers-reduced-motion tarayıcı ayarlarına uyduğunuzdan emin olun.

CSS transform özelliği, düzen kaymalarını tetiklemeden öğeleri canlandırabilmenizi 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ştirmek yerine transform: translate() özelliğini kullanın.

CLS'yi ölçme

CLS değeri laboratuvarda veya sahada ölçülebilir ve aşağıdaki araçlarda kullanılabilir.

Saha araçları

• Chrome Kullanıcı Deneyimi Raporu
• PageSpeed Insights
• Search Console (Önemli Web Verileri raporu)
• web-vitals JavaScript kitaplığı

Laboratuvar araçları

• Chrome Geliştirici Araçları
• Lighthouse
• PageSpeed Insights
• WebPageTest

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

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

Aşağıdaki örnekte, layout-shift girişlerini konsolda günlüğe kaydetmek için PerformanceObserver oluşturma işlemi 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 oturumlarda oturum açtığınız beklenmedik layout-shift girişlerini gruplayın ve maksimum oturum değerini hesaplayın. Referans uygulama için web vitals JavaScript kitaplığı kaynak koduna bakın.

Çoğu durumda, sayfanın yüklendiği andaki CLS değeri söz konusu sayfanın nihai CLS değeridir ancak sonraki bölümde listelenen birkaç önemli istisna vardır. web vitals JavaScript kitaplığı, bunları Web API'lerinin sınırlamaları dahilinde mümkün olduğunca fazla hesaba katar.

Metrik ve API arasındaki farklar

• Bir sayfa arka planda yükleniyorsa veya tarayıcı herhangi bir içeriği boyamadan önce arka plana alındıysa herhangi bir CLS değeri rapor etmemelidir.
• Bir sayfa geri veya ileri önbellekten geri yüklenirse kullanıcılar bunu farklı bir sayfa ziyareti olarak deneyimleyeceğinden CLS değeri sıfıra sıfırlanmalıdır.
• API, iframe'ler içinde gerçekleşen kaymalar için layout-shift girişlerini bildirmez, ancak sayfanın kullanıcı deneyiminin bir parçası oldukları için metrik rapor eder. Bu durum, CrUX ve RUM arasındaki bir fark olarak gösterilebilir. CLS'yi doğru şekilde ölçmek için iframe'leri eklemeniz gerekir. Alt çerçeveler, layout-shift girişlerini toplama için üst çerçeveye bildirmek amacıyla API'yi kullanabilir.

Bu istisnalara ek olarak CLS, bir sayfanın tüm kullanım ömrünü ölçtüğü için daha da karmaşıktır:

• Kullanıcılar bir sekmeyi günler, haftalar, hatta aylar boyunca çok uzun süre açık tutabilir. Aslında, bir kullanıcı sekmeyi hiçbir zaman kapatmayabilir.
• Mobil işletim sistemlerinde, tarayıcılar genellikle arka plan sekmeleri için sayfa kaldırma geri çağırmalarını çalıştırmaz. Bu da "nihai" değerin raporlanmasını zorlaştırır.

Bu tür durumların üstesinden gelmek için, sisteminizin CLS'yi bir sayfanın boşaltıldığı her durumda ve arka planda olduğu her durumda raporlamasını öneririz. visibilitychange etkinliği bu senaryoların ikisini de kapsar. Bu verileri alan analiz sistemlerinin ardından arka uçta nihai CLS değerini hesaplaması gerekir.

Geliştiriciler, tüm bu durumları ezberleyip bunlarla uğraşmak yerine CLS'yi ölçmek için web-vitals JavaScript kitaplığını kullanabilir. Bu kitaplık iframe durumu hariç burada belirtilen her şeyi hesaba katar:

import {onCLS} from 'web-vitals';

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

CLS'yi iyileştirme

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

Ek kaynaklar

• Google Yayıncı Etiketi'nin düzen kaymasını en aza indirme ile ilgili yönergeleri
• Annie Sullivan ve Steve Kobes tarafından #PerfMatters'da yayınlanan Cumulative Layout Shift'i anlama (2020)

Değişiklik günlüğü

Bazı durumlarda, metrikleri ölçmek için kullanılan API'lerde veya bazen metriklerin tanımlarında hatalar keşfedilir. Bu nedenle, değişikliklerin bazen yapılması gerekir ve bu değişiklikler dahili raporlarınızda ve kontrol panellerinizde iyileştirme veya regresyon olarak gösterilebilir.

Bu durumu yönetmenize yardımcı olmak için, 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österilmiştir.

Bu metriklerle ilgili geri bildiriminiz varsa web-önemli geri bildirim Google grubunda geri bildiriminizi paylaşın.