Düzen kaymalarını nasıl tespit edip düzelteceğinizi öğrenin.
Bu makalenin ilk bölümünde, düzen değişikliklerinde hata ayıklamayla ilgili araçlar ele alınırken ikinci bölümünde, düzen değişikliğinin nedenini belirlerken kullanılacak düşünce süreci ele alınmaktadır.
Araç
Layout Instability API
Layout Instability API, Düzen kaymalarını ölçmek ve raporlamak için tarayıcı mekanizmasını kullanır. DevTools dahil olmak üzere düzen kaymalarında hata ayıklamayla ilgili tüm araçlar temel olarak Layout Instability API'sine dayanır. Ancak Layout Instability API'yi doğrudan kullanmak güçlü bir hata ayıklama aracıdır.
Kullanım
Etiketleme için kullandığınız aynı kod snippet'i Cumulative Layout Shift (CLS) ölçümü de sunum kaymalarını ayıklamak için kullanılır. Aşağıdaki snippet, düzen değişiklikleriyle ilgili bilgileri konsola kaydeder. Bu günlüğü inceleyerek bilgi edinebilirsiniz konusunda da sizi bilgilendirmek istedik.
let cls = 0;
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
if (!entry.hadRecentInput) {
cls += entry.value;
console.log('Current CLS value:', cls, entry);
}
}
}).observe({type: 'layout-shift', buffered: true});
Bu komut dosyasını çalıştırırken aşağıdakileri göz önünde bulundurun:
buffered: true
seçeneği,PerformanceObserver
tarayıcının performans girişini kontrol etmeli tampon gözlemcinin girişinden önce oluşturulan performans girişleri için başlatma. Sonuç olarakPerformanceObserver
, hem başlatılmadan önce hem de başlatıldıktan sonra gerçekleşen düzen değişikliklerini raporlar. Konsol günlüklerini incelerken bunu göz önünde bulundurun. Düzen kaymalarında yaşanan ilk aksama, birden fazla aynı meselenin tekrarlanması yerine, bir raporlama iş listesini olabilir.- Performansı etkilememek için
PerformanceObserver
, ana iş parçacığı boş olana kadar bekleyip düzen değişikliklerini raporlar. Sonuç olarak, ana iş parçacığının ne kadar meşgul olduğuna bağlı olarak, bir düzen değişikliğinin gerçekleşmesi ile konsola kaydedilmesi arasında küçük bir gecikme olabilir. - Bu komut dosyası, kullanıcı girişinden sonraki 500 ms. içinde gerçekleşen düzen kaymalarını yoksayar ve dolayısıyla CLS'ye dahil edilmez.
Sayfa düzeni değişiklikleri hakkındaki bilgiler, LayoutShift
ve LayoutShiftAttribution
arayüzlerinin bir kombinasyonu kullanılarak raporlanır. Bu arayüzlerin her biri aşağıdaki bölümlerde daha ayrıntılı olarak açıklanmıştır.
LayoutShift
Her düzen kayması, LayoutShift
arayüzü kullanılarak raporlanır. İçeriği
bir giriş aşağıdaki gibi görünür:
duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798
Yukarıdaki giriş, üç DOM öğesinin konumunu değiştirdiği bir düzen değişikliğini gösterir. Bu düzen kaymasının düzen kayması puanı 0.175
idi.
LayoutShift
örneğinin, düzen kaymalarında hata ayıklamayla en alakalı özellikleri şunlardır:
Mülk | Açıklama |
---|---|
sources |
sources mülkü, düzen kayması sırasında taşınan DOM öğelerini listeler. Bu dizi en fazla beş kaynak içerebilir. Düzen kaymasından etkilenen beşten fazla öğe olması durumunda, düzen kaymasının en büyük beş kaynağı (düzen kararlılığı üzerindeki etkisiyle ölçüldüğü üzere) raporlanır. Bu bilgi, LayoutShiftAttribution arayüzü kullanılarak raporlanır (aşağıda daha ayrıntılı olarak açıklanmıştır). |
value |
value mülkü, belirli bir düzen kayması için düzen kayması puanını raporlar. |
hadRecentInput |
hadRecentInput özelliği, kullanıcı girişinden 500 milisaniye sonra bir düzen kaymasının gerçekleşip gerçekleşmediğini gösterir. |
startTime |
startTime mülkü, ne zaman bir düzen değişikliğinin gerçekleştiğini gösterir. startTime milisaniye cinsinden gösterilir ve sayfa yüklemesinin başlatıldığı zamana göre ölçülür. |
duration |
duration özelliği her zaman 0 olarak ayarlanır. Bu özellik, PerformanceEntry arayüzünden devralınır (LayoutShift arayüzü, PerformanceEntry arayüzünü genişletir). Ancak süre kavramı, düzen kayması etkinlikleri için geçerli olmadığından 0 olarak ayarlanır. PerformanceEntry arayüzü hakkında bilgi için spesifikasyona bakın. |
LayoutShiftAttribution
LayoutShiftAttribution
arayüzü, tek bir DOM öğesinin tek bir kaymasını tanımlar. Bir düzen kayması sırasında birden fazla öğe kayıyorsa sources
özelliği birden fazla giriş içerir.
Örneğin, aşağıdaki JSON, tek bir kaynağı olan bir düzen kaymasına karşılık gelir: <div id='banner'>
DOM öğesinin y: 76
'dan y:246
'ye doğru aşağı kayması.
// ...
"sources": [
{
"node": "div#banner",
"previousRect": {
"x": 311,
"y": 76,
"width": 4,
"height": 18,
"top": 76,
"right": 315,
"bottom": 94,
"left": 311
},
"currentRect": {
"x": 311,
"y": 246,
"width": 4,
"height": 18,
"top": 246,
"right": 315,
"bottom": 264,
"left": 311
}
}
]
node
özelliği, kayan HTML öğesini tanımlar. Fareyle DevTools'ta bu mülkün üzerine geldiğinizde ilgili sayfa öğesi vurgulanır.
previousRect
ve currentRect
özellikleri, boyutu ve konumunu bildirir
düğüm.
x
vey
koordinatları, öğenin sol üst köşesinin sırasıyla x ve y koordinatlarını bildirir.width
veheight
özellikleri, öğenin sırasıyla genişliğini ve yüksekliğini bildirir.top
,right
,bottom
veleft
özellikleri, öğenin belirli kenarına karşılık gelen x veya y koordinatı değerlerini bildirir. Diğer bir deyişle,top
değeriy
'a,bottom
değeri isey+height
'a eşittir.
previousRect
işlevinin tüm özellikleri 0'a ayarlanırsa bu, öğenin
görünüme geçiyorum. currentRect
işlevinin tüm özellikleri 0 olarak ayarlanırsa bu,
olduğunu fark edebilirsiniz.
Bu çıkışları yorumlarken anlaşılması gereken en önemli noktalardan biri, kaynaklar olarak listelenen öğelerin, düzen kayması sırasında kaydırılan öğeler olmasıdır. Ancak bu öğelerin yalnızca dolaylı olarak "kök neden" ile alakalı olmalıdır. sorunundan bahsedeceğiz. Aşağıda birkaç örnek verilmiştir.
Örnek 1
Bu sayfa düzeni değişikliği, tek bir kaynakla (B öğesi) raporlanır. Ancak bu düzen kaymasının kök nedeni A öğesinin boyutundaki değişikliktir.
Örnek 2
Bu örnekteki düzen değişikliği, A öğesi ve B öğesi olmak üzere iki kaynakla raporlanır. Bu düzen kaymasının temel nedeni, A öğesi.
3. Örnek
Bu örnekteki düzen değişikliği, tek bir kaynakla (B öğesi) raporlanır. B öğesinin konumunun değiştirilmesi bu düzen kaymasına neden oldu.
4. Örnek
B öğesinin boyutu değişse de bu örnekte düzen kayması yoktur.
DOM değişikliklerinin Layout Instability API tarafından nasıl raporlandığını gösteren bir demoya göz atın.
Geliştirici Araçları
Performans paneli
DevTools Performans panelinin Deneyim bölmesi, belirli bir performans izleme sırasında gerçekleşen tüm yerleşim kaymalarını gösterir. Bu kaymalar, kullanıcı etkileşiminin 500 ms. içinde gerçekleşmesi ve dolayısıyla CLS'ye dahil edilmemesi durumunda bile gösterilir. Deneyim panelinde fareyle belirli bir düzen kaymasının üzerine geldiğinizde etkilenen DOM öğesi vurgulanır.
Düzen değişikliği hakkında daha fazla bilgi görüntülemek için düzen değişikliğini tıklayın ve ardından Özet çekmecesini açın. Öğenin boyutlarındaki değişiklikler [width, height]
biçiminde, öğenin konumundaki değişiklikler ise [x,y]
biçiminde listelenir. Son giriş tarihi özelliği,
düzen kayması, kullanıcı etkileşiminden sonraki 500 ms. içinde gerçekleşti.
Bir düzen değişikliğinin süresi hakkında bilgi edinmek için Olay Günlüğü sekmesini açın. Düzen kaymasının süresi, sayfa düzenine bakılarak Kırmızı düzen kayması dikdörtgeninin uzunluğu için Deneyim bölmesi.
Performans panelini kullanma hakkında daha fazla bilgi için Performans Analiz Referans.
Düzen kayması bölgelerini vurgula
Düzen kayması bölgelerini vurgulamak, bir sayfada gerçekleşen düzen kaymalarının konumu ve zamanlaması hakkında hızlı ve bir bakışta bilgi edinmek için yararlı bir teknik olabilir.
Geliştirici Araçları'nda Layout Shift Bölgeleri'ni etkinleştirmek için Ayarlar > Diğer Araçlar > Oluşturma > Layout Shift Regions'a dokunun ve ardından hata ayıklamak istediğiniz sayfayı yenileyin. Düzen kayması alanları, kısa süreliğine mor renkle vurgulanır.
Düzen kaymalarının nedenini belirleme süreci
Döşeme kaymasının ne zaman veya nasıl gerçekleştiğine bakılmaksızın, döşeme kaymasının nedenini belirlemek için aşağıdaki adımları uygulayabilirsiniz. Bu adımlara Lighthouse'u çalıştırarak destek verilebilir. Ancak Lighthouse'un yalnızca ilk sayfa yükleme sırasında gerçekleşen düzen değişikliklerini tanımlayabileceğini unutmayın. İçinde Ayrıca, Lighthouse, düzenin yalnızca bazı nedenleri için öneriler de sağlayabilir. kaymalar (örneğin, genişliği ve yüksekliği açıkça belli olmayan resim öğeleri).
Düzen kaymasının nedenini belirleme
Sayfa düzeninde kaymalar aşağıdaki etkinliklerden kaynaklanabilir:
- DOM öğesinin konumunda yapılan değişiklikler
- Bir DOM öğesinin boyutlarında yapılan değişiklikler
- DOM öğesi ekleme veya kaldırma
- Düzeni tetikleyen animasyonlar
Özellikle, kaydırılan öğeden hemen önceki DOM öğesi, düzen kaymasına "neden olan" öğe olma olasılığı en yüksek öğedir. Bu nedenle, düzen kaymasının nedenini araştırırken aşağıdakileri göz önünde bulundurun:
- Önceki öğenin konumu veya boyutları değişti mi?
- Kaydırılan öğeden önce bir DOM öğesi eklenmiş veya kaldırılmış mı?
- Kaydırılan öğenin konumu açıkça değiştirildi mi?
Önceki öğe düzen kaymasına neden olmadıysa aramaya şu şekilde devam edin: daha önceki ve yakındaki unsurları da göz önünde bulundurmalısınız.
Buna ek olarak, bir düzen kaymasının yönü ve mesafesi bir neden sunmalısınız. Örneğin, büyük bir aşağı kayma genellikle bir DOM öğesinin eklendiğini gösterirken 1 piksel veya 2 piksellik bir düzen kayması genellikle çakışan CSS stillerinin uygulandığını ya da bir web yazı tipinin yüklenip uygulandığını gösterir.
Bunlar, düzen kaymasına en sık neden olan belirli davranışlardan bazılarıdır etkinlikler:
Bir öğenin konumunda yapılan değişiklikler (başka bir öğenin hareketinden kaynaklanmayan)
Bu tür değişiklikler genellikle aşağıdakilerden kaynaklanır:
- Geç yüklenen veya daha önce bildirilen stillerin üzerine yazan stil sayfaları.
- Animasyon ve geçiş efektleri.
Bir öğenin boyutlarında yapılan değişiklikler
Bu tür değişiklikler genellikle aşağıdakilerden kaynaklanır:
- Geç yüklenen veya daha önce bildirilen stillerin üzerine yazan stil sayfaları.
- Sonra yüklenen
width
veheight
özellikleri olmayan resimler ve iframe'ler kendi "slotları" oluşturuldu. - Metin oluşturulduktan sonra yazı tiplerini değiştiren
width
veyaheight
özellikleri olmayan metin blokları.
DOM öğelerinin eklenmesi veya kaldırılması
Bu durum genellikle aşağıdakilerden kaynaklanır:
- Reklam ve diğer üçüncü taraf yerleştirmeleri ekleme.
- Banner, uyarı ve modal ekleme.
- Sonsuz kaydırma ve mevcut içeriğin üzerine ek içerik yükleyen diğer kullanıcı deneyimi kalıpları
Düzeni tetikleyen animasyonlar
Bazı animasyon efektleri düzenlemeyi tetikleyebilir. Bunun yaygın bir örneği, DOM öğelerinin CSS'nin transform
özelliğini kullanmak yerine top
veya left
gibi özelliklerin artırılmasıyla "animasyonlu" hale getirilmesidir. Daha fazla bilgi için Yüksek performanslı CSS animasyonları oluşturma başlıklı makaleyi okuyun.
Düzen kaymalarını yeniden oluşturma
Tekrar oluşturamadığınız düzen kaymalarını düzeltemezsiniz. Sitenizin düzen istikrarını daha iyi anlamak için yapabileceğiniz en basit ancak en etkili şeylerden biri, düzen değişikliklerini tetikleme amacıyla sitenizle 5-10 dakika boyunca etkileşim kurmaktır. Bu işlemi yaparken konsolu açık tutun ve Düzen kaymalarını raporlamak için Layout Instability API'si.
Zor bulunan düzen kaymalarını bulmak için bu alıştırmayı
farklı cihazlarda ve bağlantı hızlarında kullanılabilir. Özellikle daha düşük bir bağlantı hızı kullanmak, sayfa düzeni değişikliklerini tespit etmeyi kolaylaştırabilir. Ayrıca,
düzende gezinmeyi kolaylaştırmak için bir debugger
ifadesi kullanabilirsiniz
olur.
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
if (!entry.hadRecentInput) {
cls += entry.value;
debugger;
console.log('Current CLS value:', cls, entry);
}
}
}).observe({type: 'layout-shift', buffered: true});
Son olarak, geliştirme aşamasında yeniden üretilemeyen düzen sorunları için bu sorunlar hakkında daha fazla bilgi toplamak amacıyla Layout Instability API'yi tercih ettiğiniz ön uç günlük kaydı aracıyla birlikte kullanabilirsiniz. Ödeme yap bir sayfadaki en büyük kayan öğenin nasıl izleneceğine ilişkin kod örneği.