Düzen kaymalarında hata ayıklama

Düzen kaymalarını nasıl tanımlayıp düzelteceğinizi öğrenin.

Katie Hempenius

Bu makalenin ilk bölümünde düzen kaymalarında hata ayıklamaya yönelik araçlar ele alınmıştır. ikinci bölümde ise bir proje yöneticisine ulaşmak için bir düzen kaymasının nedenini tanımlama.

Alet

Layout Instability API'si

Layout Instability API, Düzen kaymalarını ölçmek ve raporlamak için tarayıcı mekanizmasını kullanır. için tüm araçlar Geliştirici Araçları dahil olmak üzere hata ayıklama düzeni kaymaları, Layout Instability API'si. 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 hakkında bilgi sağlar konsola geçer. 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ğıdakilere dikkat edin:

• 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. Bunun sonucunda, PerformanceObserver düzeni raporlayacak ve başlatıldıktan sonra gerçekleşen değişimleri görebilirsiniz. Bunu sakla: dikkat edin. Düzen kaymalarında yaşanan ilk aksama, birden fazla aynı meselenin tekrarlanması yerine, bir raporlama iş listesini olabilir.
• PerformanceObserver, performansın etkilenmesini önlemek için ana makineye ileti dizisi, düzen kaymalarını raporlamak için boşta. Sonuç olarak, projenizin bir iş parçacığının meşgul olduğunu fark ederseniz, bir düzenin kayma gerçekleşir ve konsolda günlüğe kaydedildiğinde gerçekleşir.
• 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.

Düzen kaymalarıyla ilgili bilgiler iki API'nin bir kombinasyonu kullanılarak raporlanır: LayoutShift ve LayoutShiftAttribution kullanır. Bu arayüzlerin her biri bu bölümde bulabilirsiniz.

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 değiştiği bir düzen kaymasını gösterir dokunun. Bu düzen kaymasının düzen kayması puanı 0.175 idi.

Bunlar, LayoutShift örneğinin en alakalı düzen kaymalarında hata ayıklama:

LayoutShiftAttribution

LayoutShiftAttribution arayüzü, tek bir DOM'deki tek değişimi tanımlar öğesine dokunun. Düzen kayması sırasında birden fazla öğe kayırsa sources mülkündeki birden fazla giriş var.

Örneğin, aşağıdaki JSON, tek kaynaklı bir düzen kaymasına karşılık gelir: <div id='banner'> DOM öğesinin y: 76 değerinden aşağı doğru kayması y:246.

// ...
  "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 bunun üzerine gelin ilgili sayfa öğesini vurgular.

previousRect ve currentRect özellikleri, boyutu ve konumunu bildirir düğüm.

• x ve y koordinatları, x koordinatı ve y koordinatını raporlar sırasıyla öğenin sol üst köşesine
• width ve height özellikleri, sırasıyla genişlik ve yüksekliği raporlar. öğesine sahip olursunuz.
• top, right, bottom ve left özellikleri x veya y'yi bildirir koordinat değerlerini belirleyebilirsiniz. Başka kelimeler, top değeri y değerine eşittir; bottom değeri şuna eşittir: y+height.

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 şeylerden biri kaynaklar olarak listelenen öğelerin, oluşturma işlemi sırasında düzen kayması. 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.

1. örnek

Bu düzen kayması tek bir kaynakla raporlanır: B öğesi. Ancak bu düzen kaymasının kök nedeni A öğesinin boyutundaki değişikliktir.

2. Örnek

Bu örnekteki düzen kayması iki kaynakla raporlanır: A öğesi ve B öğesi. Bu düzen kaymasının temel nedeni, A öğesi.

3. Örnek

Bu örnekteki düzen kayması tek bir kaynak: B öğesi ile raporlanır. B öğesinin konumunun değiştirilmesi, bu düzen kaymasına yol açmıştır.

4. Örnek

B öğesi boyutu değişse de bu örnekte bir düzen kayması yoktur.

DOM değişikliklerinin Layout Instability API tarafından nasıl raporlandığını gösteren demoya göz atın.

Geliştirici Araçları

Performans paneli

Geliştirici Araçları Performans panelinin Deneyim bölmesinde, gerçekleşse bile, belirli bir performans izleme sırasında meydana gelen düzen kaymaları kullanıcı etkileşiminden sonraki 500 ms. içinde olmalıdır ve bu nedenle CLS'ye dahil edilmez. Fareyle Deneyim panelinde belirli bir düzen kaymasının üzerine geldiğinizde öğesine dokunun.

Düzen kayması hakkında daha fazla bilgi görüntülemek için düzen kaymasını tıklayın, ardından Özet çekmecesini açın. Öğenin boyutlarındaki değişiklikler listelenir [width, height] biçimi kullanılarak; öğenin konumunda yapılan değişiklikler listelenir [x,y] biçimi kullanılıyor. Son giriş tarihi özelliği, düzen kayması, kullanıcı etkileşiminden sonraki 500 ms. içinde gerçekleşti.

Düzen kaymasının süresi hakkında bilgi için Olay Günlüğü sekmesini açın. Düzen kaymasının süresi, sayfa düzenine bakılarak da 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, ani bir değişiklik elde etme açısından düzen kaymalarının yeri ve zamanlaması hakkında bir bakışta bilgi daha büyük bir şeydir.

Geliştirici Araçları'nda Layout Shift Bölgeleri'ni etkinleştirmek için Ayarlar > Diğer Araçlar > Oluşturma > Düzen Kayması Bölgeleri'ni tıklayın 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 belirlemeye yönelik düşünme süreci

Düzen kaymalarının nedenini belirlemek için aşağıdaki adımları kullanabilirsiniz ne zaman ve nasıl gerçekleştiğinden bağımsız olarak. Bu adımlar yardımcı olabilir. Ancak, Lighthouse'un daha hızlı yalnızca ilk sayfa yükleme sırasında meydana gelen düzen kaymalarını tanımlar. İç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

Düzen kaymalarına aşağıdaki etkinlikler neden olabilir:

• Bir 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 öğenin hemen önündeki DOM öğesi "nedeniyle" aramada yer alma olasılığı en yüksek düzen kayması. Böylece, düzen kaymasının neden oluştuğunu araştırarak şunları göz önünde bulundurabilirsiniz:

• Önceki öğenin konumu veya boyutları değişti mi?
• Kaydırılan öğeden önce bir DOM öğesi eklendi mi veya kaldırıldı mı?
• Kaydırılan öğenin konumu açıkça değiştirildi mi?

Önceki öğe düzen kaymasına neden olmadıysa 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 eklenmesine rağmen, 1 piksel veya 2 piksel düzen kayması genellikle veya çakışan CSS stillerinin uygulanması veya Web yazı tipi.

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ındaki 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 ve height özellikleri olmayan resimler ve iframe'ler kendi "slotları" oluşturuldu.
• width veya height özellikleri içermeyen metin blokları ile yazı tipleri metin oluşturuldu.

DOM öğelerinin eklenmesi veya kaldırılması

Bu genellikle aşağıdaki nedenlerden kaynaklanır:

• Reklam ve diğer üçüncü taraf yerleştirmeleri ekleme.
• Banner'lar, uyarılar ve kalıcı öğeler ekleme.
• Yukarıda ek içerik yükleyen sonsuz kaydırma ve diğer kullanıcı deneyimi kalıpları yardımcı olur.

Düzeni tetikleyen animasyonlar

Bazı animasyon efektleri düzen seçeneğini belirleyin. Yaygın bir Örneğin, DOM öğelerinin "animasyon" olması, bunun bir örneğidir. özelliklerini artırarak CSS'lerin kullanılması yerine top veya left gibi transform Yüksek performanslı CSS animasyonları oluşturma başlıklı makaleyi okuyun. konulu videomuzu izleyin.

Düzen kaymalarını yeniden oluşturma

Yeniden oluşturamadığınız düzen kaymalarını düzeltemezsiniz. Hem en basit hem de Sitenizin düzenini daha iyi anlamak için yapabileceğiniz en etkili şeyler kararlılığınızı artırırsınız. Hedefle sitenizle etkileşim kurmanız 5-10 dakika sürer tetikliyor. 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 yavaş bir bağlantı hızı, düzen kaymalarını tanımlamayı kolaylaştırabilir. Ayrıca, düzende gezinmeyi kolaylaştırmak için 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 oluşturulamayan düzen sorunları için Kullanıcı arabirimi günlük kaydı aracınızla birlikte Layout Instability API'yi kullanma tercih edebilirsiniz. Ödeme yap bir sayfadaki en büyük kayan öğenin nasıl izleneceğine ilişkin kod örneği.