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.
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 site üzerindeki 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.
İ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.
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.
Ö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.
Ö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 örnekte, mevcut bir öğeye içerik eklemenin düzen kayması 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ı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:
Ö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:
heightvewidthözelliklerini değiştirmek yerinetransform: scale()özelliğini kullanın.- Öğeleri taşımak için
top,right,bottomveyaleftözelliklerini değiştirmekten kaçının ve bunun yerinetransform: 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ı
- Chrome Kullanıcı Deneyimi Bildir
- PageSpeed Insights
- Search Console (Core Web Vitals) raporu)
web-vitalsJavaScript 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 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-shiftgiriş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 kullanaraklayout-shiftgiriş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
- Google Yayıncı Etiketi'nin düzen kaymasının en aza indirilmesi ile ilgili kılavuzu
- Understanding Cumulative Layout Shift, Annie Sullivan ve Steve Kobes, #PerfMatters (2020)
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.