Düzen kaymalarında hata ayıklama

Düzen kaymalarını nasıl tespit edip düzelteceğinizi öğrenin.

Katie Hempenius

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.

Not: Layout Instability API'si yalnızca Chromium tarayıcıları tarafından desteklenir. Şu anda Chromium olmayan tarayıcılarda düzen değişikliklerini ölçmenin veya bunlarda hata ayıklamanın bir yolu yoktur.

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ç olarak PerformanceObserver, 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 ve y koordinatları, öğenin sol üst köşesinin sırasıyla x ve y koordinatlarını bildirir.
• width ve height özellikleri, öğenin sırasıyla genişliğini ve yüksekliğini bildirir.
• top, right, bottom ve left özellikleri, öğenin belirli kenarına karşılık gelen x veya y koordinatı değerlerini bildirir. Diğer bir deyişle, top değeri y'a, bottom değeri ise y+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.

Dikkat: Layout Instability API, şu anda değişen ancak önlerine yerleştirilmiş başka bir öğe nedeniyle görünmeyen öğeleri yoksaymaz. Bazı öğeleri kullanıcıya görünür hale getirmeden önce düzeni çalıştırmanız gerektiğinde düzen kaymalarını önlemek için display: none, visibility: hidden veya opacity: 0 kullanın.

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.

Not: Düzen kayması süresinin, düzen kayması puanı üzerinde herhangi bir etkisi yoktur.

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.

Bu örnekte, yazı tipi değişimi sayfa öğelerinin beş piksel yukarı kaymasına neden olmuştur.

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 ve height özellikleri olmayan resimler ve iframe'ler kendi "slotları" oluşturuldu.
• Metin oluşturulduktan sonra yazı tiplerini değiştiren width veya height ö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.