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
vewidth
özelliklerini değiştirmek yerinetransform: scale()
kullanın.- Öğeleri taşımak için
top
,right
,bottom
veyaleft
özelliklerini değiştirmekten kaçının ve bunun yerinetransform: 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ı
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.