Cumulative Layout Shift (CLS)

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ıklamaya neden olabilirler. Bu durum bazı durumlarda ciddi zararlara yol açabilir.

Sayfa içeriği genellikle kaynaklar eşzamansız olarak yüklendiğinde veya DOM öğeleri sayfaya dinamik olarak mevcut içerikten önce eklendiğinde ortaya çıkar. Düzen kaymalarının nedeni, bilinmeyen boyutlara sahip resimler 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 siteyle yaşadığı deneyim arasındaki farklar bu sorunu daha da kötüleştirir. Örneğin:

• Kişiselleştirilmiş veya üçüncü taraf içerikler, geliştirme ve üretim aşamalarında genellikle farklı davranışlar sergiler.
• Test resimleri genellikle geliştiricinin tarayıcı önbelleğinde bulunur, ancak son kullanıcı için bu resimlerin yüklenmesi daha uzun sürer.
• Yerel olarak çalışan API çağrıları genellikle o kadar hızlıdır ki geliştirmede 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 gidermenize yardımcı olur.

CLS nedir?

CLS, bir sayfanın tüm yaşam döngüsü boyunca gerçekleşen her beklenmeyen düzen değişikliği 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. (Bağımsız düzen değiştirme puanlarının nasıl hesaplandığıyla ilgili ayrıntılar bu kılavuzun sonraki bölümlerinde ele alınmıştır.)

Oturum aralığı olarak da bilinen art arda düzen kaymaları, bir veya daha fazla düzen kaymasının hızlı bir şekilde arka arkaya gerçekleştiği, her kaydırma arasında 1 saniyeden kısa süren ve toplam aralık süresi boyunca en fazla 5 saniyelik düzen kaymalarıdır.

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

İyi bir CLS puanı nasıl olur?

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

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 başlıklı makaleyi inceleyin.

Ayrıntılı düzen kaymaları

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

Düzen kaymalarının yalnızca mevcut öğeler başlangıç konumlarını değiştirdiğinde meydana geldiğini unutmayın. DOM'ye yeni bir öğe eklenir veya mevcut bir öğenin boyutu değişirse bu değişiklik, diğer görünür öğelerin başlangıç konumlarını değiştirmesine neden olmadığı sürece 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ı içindeki kararsız öğelerin hareketine bakar. Düzen kayması puanı, bu hareketin iki ölçüsünün çarpımıdır: etki oranı ve mesafe oranı (her ikisi de aşağıda tanımlanı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 çerçeveye ait kararsız tüm öğelerin görünür alanlarının ve önceki karenin (görüntü alanı) toplam alanının bir bölümü olarak birleşimidir.

Önceki resimde, bir karede görüntü alanının yarısını kaplayan bir öğe vardır. Ardından, bir sonraki karede öğe görüntü alanı yüksekliğinin% 25'i kadar aşağı kayar. Kırmızı renkli noktalı dikdörtgen, öğenin her iki karedeki görünür alanının birleşimini gösterir. Bu durumda bu, toplam görüntü alanının% 75'idir. Dolayısıyla, öğenin etki oranı 0.75'dir.

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ünerek hesaplanır.

Ö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 hareket ettirilmiştir.Bu da mesafe bölümünü 0, 25 yapar.

Dolayısıyla, bu örnekte etki oranı 0.75 ve mesafe oranı 0.25 olduğundan düzen kayma puanı 0.75 * 0.25 = 0.1875'dir.

Ö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'de yer almadığı için başlangıç konumu da değişmiyor.

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

Mesafe oranı mor okla gösterilir. Yeşil kutu, görüntü alanının yaklaşık% 14'ü aşağı taşındığından mesafe oranı 0.14 olur.

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

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

Önceki resmin ilk karesinde, hayvanlara yönelik bir API isteğinin alfabetik sırada sıralanmış dört sonucu bulunmaktadır. İkinci karede, sıralanan listeye daha fazla sonuç eklenir.

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

Yine, kırmızı ve noktalı dikdörtgenler, bu üç kararsız öğenin alanların önceki ve sonraki birleşimini temsil eder. Bu durumda, bu alan görüntü alanı alanının yaklaşık% 60'ıdır (0.60 değerinin etki oranı).

Oklar, kararsız öğelerin başlangıç konumlarından uzaklaştırdıkları mesafeyi 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, bu örnekteki mesafe bölümü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şimleri (bir bağlantıyı tıklama veya bağlantıya dokunma, bir düğmeye basma ya da arama kutusuna yazma gibi) tepki olarak ortaya çıkan düzen kaymaları, ilişkinin kullanıcı açısından net bir şekilde açıklanmasına yeterince yakın bir geçiş olduğu sürece genellikle sorun teşkil etmez.

Örneğin, bir kullanıcı etkileşimi, tamamlanması zaman sürebilecek bir ağ isteğini tetiklerse en iyi yöntem hemen bir miktar alan oluşturmak ve istek tamamlandığında düzenin istenmeyen kaymasını önlemek için bir yükleme göstergesi göstermektir. Kullanıcı bir şeyin yüklendiğini fark etmiyorsa veya kaynağın ne zaman hazır olacağına dair bir fikri yoksa beklerken başka bir şeyi, altlarından dışarı taşıyabilecek bir şeyi tıklamayı deneyebilir.

Kullanıcı girişinden itibaren 500 milisaniye içinde gerçekleşen düzen kaymaları, hesaplamalardan hariç tutulabilmesi için hadRecentInput işareti ayarlanır.

Animasyonlar ve geçişler

Animasyonlar ve geçişler, iyi yapıldığında kullanıcıları şaşırtmadan sayfadaki içeriği güncellemek için harika bir yoldur. Sayfada aniden ve beklenmedik bir şekilde kayan içerik, neredeyse her zaman kötü bir kullanıcı deneyimine neden olur. Ancak yavaş yavaş ve doğal bir şekilde bir konumdan diğerine hareket eden içerik, genellikle kullanıcının neler olup bittiğini daha iyi anlamasına ve durum değişiklikleri arasında rehberlik etmesine yardımcı olabilir.

Bazı site ziyaretçileri animasyondan dolayı kötü efektler veya dikkat sorunları yaşayabileceğ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() kullanın.
• Öğeleri taşımak için top, right, bottom veya left özelliklerini değiştirmekten kaçının ve bunun yerine transform: translate() kullanın.

CLS'yi ölçme

CLS, 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'sini kullanırsınız.

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 bu beklenmedik layout-shift girişlerini oturum olarak gruplandırmanız ve maksimum oturum değerini hesaplamanız gerekir. CLS'nin hesaplanma şekliyle ilgili bir referans uygulaması içeren web vitals JavaScript kitaplığı kaynak koduna bakabilirsiniz.

Çoğu durumda, sayfanın yüklendiği andaki geçerli CLS değeri söz konusu sayfanın nihai 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 çok 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 bildirmemelidir.
• Bir sayfa geri-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 raporlamaz ancak metrik, sayfanın kullanıcı deneyiminin bir parçası olduğundan bunu yapar. Bu durum, CrUX ve RUM arasındaki bir fark olarak gösterilebilir. CLS'yi doğru şekilde ölçebilmek için bunları dikkate almanız gerekir. Alt çerçeveler, layout-shift girişlerini toplama için üst çerçeveye bildirmek üzere API'yi kullanabilir.

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 günler, haftalar, aylar gibi ç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 ve bu da "nihai" değerin raporlanmasını zorlaştırır.

Bu tür durumların üstesinden gelmek için CLS, bir sayfanın arka planda olduğu ve kaldırıldığı her zaman raporlanmalıdır (visibilitychange etkinliği bu iki senaryonun ikisini de kapsar). Ardından bu verileri alan analiz sistemlerinin arka uçta son 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. iframe durumu hariç yukarıda bahsedilen 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ı belirleme 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
• Cumulative Layout Shift'i, Annie Sullivan ve Steve Kobes tarafından #PerfMatters'da (2020) anlaşıldı.

Değişiklik günlüğü

Zaman zaman metrikleri ölçmek için kullanılan API'lerde, bazen de 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ştirmeler veya regresyonlar olarak gösterilebilir.

Bu durumu yönetmenize yardımcı olmak amacıyla, metriklerin uygulanmasında veya tanımında yapılan tüm değişiklikler bu Değişiklik günlüğünde gösterilir.

Bu metriklerle ilgili geri bildirimlerinizi web-önemli geri bildirim Google grubunda paylaşabilirsiniz.