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 kaymalarında hata ayıklamaya yönelik araçlar ele alınır, ikinci bölümde ise düzen kaymasının nedenini belirlerken kullanılacak düşünce süreci ele alınmaktadır.

Alet

Layout Instability API'si

Layout Instability API, düzen kaymalarını ölçmek ve raporlamak için kullanılan tarayıcı mekanizmasıdı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, esnekliği nedeniyle güçlü bir hata ayıklama aracıdır.

Kullanım

Cumulative Layout Shift (CLS)'i ölçen aynı kod snippet'i, düzen kaymalarında da hata ayıklama amacıyla kullanılabilir. Aşağıdaki snippet, düzen değişiklikleriyle ilgili bilgileri konsola kaydeder. Bu günlüğü inceleyerek düzen kaymasının ne zaman, nerede ve nasıl gerçekleştiği hakkında bilgi edinebilirsiniz.

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 aracının, gözlemcinin başlatılmasından önce oluşturulan performans girişleri için tarayıcının performans girişi arabelleğini kontrol etmesi gerektiğini belirtir. Sonuç olarak PerformanceObserver, başlatılmadan önce ve sonra gerçekleşen düzen kaymalarını raporlar. Konsol günlüklerini incelerken bunu göz önünde bulundurun. Düzen kaymalarının ilk başta yaşanan aniden ortaya çıkması, aniden çok sayıda düzen değişikliğinin yaşanması yerine bir raporlama iş listesini yansıtabilir.
• 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 bu nedenle CLS'ye dahil edilmez.

Düzen değişiklikleri hakkındaki bilgiler, iki API'nin bir kombinasyonu kullanılarak raporlanır: LayoutShift ve LayoutShiftAttribution arayüzleri. 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. Bir girişin içeriği şöyle 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 kaymasını 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:

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 kaynaklı bir düzen kaymasına karşılık gelir: <div id='banner'> DOM öğesinin y: 76 değerinden y:246 değerine 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, düğümün boyutunu ve konumunu bildirir.

• x ve y koordinatları, x koordinatı ve y koordinatını sırasıyla öğenin sol üst köşesine göre raporlar
• width ve height özellikleri, öğenin sırasıyla genişliğini ve yüksekliğini bildirir.
• top, right, bottom ve left özellikleri, öğenin belirtilen kenarına karşılık gelen x veya y koordinatı değerlerini bildirir. Başka bir deyişle, top değeri y değerine, bottom değeri ise y+height değerine eşittir.

previousRect öğesinin tüm özellikleri 0 olarak ayarlanırsa öğe görünüme girmiştir. currentRect öğesinin tüm özellikleri 0 olarak ayarlanmışsa öğenin görünümden kaybolduğu anlamına gelir.

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 olduğudur. Ancak bu öğelerin, düzen istikrarsızlığının "temel nedeni" ile yalnızca dolaylı olarak ilişkili olması mümkündür. 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 temel 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 öğesinin konumundaki değişikliktir.

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 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 bir demoya göz atın.

Geliştirici Araçları

Performans paneli

Geliştirici Araçları Performans panelindeki Deneyim bölmesinde, kullanıcı etkileşiminden sonraki 500 ms. içinde meydana gelen ve bu nedenle CLS'ye dahil edilmeyen belirli bir performans izleme sırasında gerçekleşen tüm düzen kaymaları görüntülenir. Deneyim panelinde fareyle belirli bir düzen kaymasının üzerine gelindiğinde etkilenen DOM öğesi vurgulanır.

Düzen kayması hakkında daha fazla bilgi görüntülemek için düzen kaymasını tıklayın ve Özet çekmecesini açın. Öğenin boyutlarında yapılan değişiklikler, [width, height] biçimi kullanılarak listelenir; öğenin konumunda yapılan değişiklikler ise [x,y] biçimi kullanılarak listelenir. Son giriş yapıldı özelliği, kullanıcı etkileşiminin üzerinden 500 ms geçmeden bir düzen değişikliğinin gerçekleşip gerçekleşmediğini belirtir.

Bir düzen değişikliğinin süresi hakkında bilgi edinmek için Olay Günlüğü sekmesini açın. Düzen değişikliğinin süresi, Deneyim bölmesinde kırmızı düzen değişikliği dikdörtgeninin uzunluğuna bakılarak da yaklaşık olarak bulunabilir.

Performans panelini kullanma hakkında daha fazla bilgi için Performans Analizi Referansı'na bakın.

Düzen kayması bölgelerini vurgula

Düzen kayması bölgelerini vurgulamak, sayfadaki düzen kaymalarının yeri ve zamanlaması hakkında bir bakışta hızlı bir fikir 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 > Düzen Kayması Bölgeleri'ne gidin ve 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öşeme kaymasının ne zaman veya nasıl gerçekleştiğinden bağımsız olarak, döşeme kaymasının nedenini belirlemek için aşağıdaki adımları uygulayabilirsiniz. Bu adımlar Lighthouse'un çalışmasıyla desteklenebilir. Ancak, Lighthouse'un yalnızca ilk sayfa yükleme sırasında gerçekleşen düzen kaymalarını tanımlayabileceğini unutmayın. Buna ek olarak Lighthouse, düzen kaymalarının yalnızca bazı nedenleri (ör. genişliği ve yüksekliği açıkça belli olmayan resim öğeleri) için öneriler sunabilir.

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, düzen kaymasına "neden" 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 önceki ve yakındaki diğer öğeleri göz önünde bulundurarak aramanıza devam edin.

Ayrıca, düzen kaymasının yönü ve mesafesi, temel neden hakkında ipuçları sağlayabilir. Örneğin, büyük bir aşağı kayma genellikle bir DOM öğesinin eklendiğini gösterirken 1 piksel veya 2 piksel düzen kayması genellikle çakışan CSS stillerinin uygulandığını veya bir web yazı tipinin yüklenmesini ve uygulanmasını gösterir.

Düzen kayması etkinliklerine en sık neden olan belirli davranışlardan bazıları şunlardır:

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 beyan edilen stillerin üzerine yazan stil sayfaları.
• "Yerleşimi" oluşturulduktan sonra yüklenen width ve height özellikleri olmayan resimler ve iFrame'ler.
• 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şik öğelerin eklenmesi.
• Banner'ların, uyarıların ve kalıcı öğelerin eklenmesi.
• Mevcut içeriğin üzerinde ek içerik yükleyen sonsuz kaydırma ve diğer kullanıcı deneyimi kalıpları.

Düzeni tetikleyen animasyonlar

Bazı animasyon efektleri düzenlemeyi tetikleyebilir. Buna örnek olarak, DOM öğelerinin CSS'nin transform özelliğini kullanmak yerine top veya left gibi özelliklerin artırılmasıyla "animasyonlu" hale getirilmesi verilebilir. Daha fazla bilgi için Yüksek performanslı CSS animasyonları nasıl oluşturulur? bölümünü okuyun.

Düzen kaymalarını yeniden üretme

Yeniden oluşturamadığınız düzen kaymalarını düzeltemezsiniz. Sitenizin düzen kararlılığını daha iyi anlamak için yapabileceğiniz en basit ama en etkili şeylerden biri, düzen kaymalarını tetikleyecek hedef sayesinde sitenizle etkileşim kurmak için 5-10 dakika ayırmaktır. Bunu yaparken konsolu açık tutun ve düzen değişikliklerini bildirmek için Layout Instability API'yi kullanın.

Bulması zor düzen değişiklikleri için bu egzersizi farklı cihazlar ve bağlantı hızlarıyla tekrarlayabilirsiniz. Özellikle, daha yavaş bir bağlantı hızı kullanmak, düzen kaymalarını tanımlamayı kolaylaştırabilir. Ayrıca, düzen kaymalarında adım atmayı kolaylaştırmak için debugger ifadesi kullanabilirsiniz.

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 Layout Instability API'yi tercih ettiğiniz kullanıcı arabirimi günlük kaydı aracıyla birlikte kullanarak bu sorunlar hakkında daha fazla bilgi toplayabilir. Sayfada en fazla kaydırılan öğenin nasıl izleneceğini gösteren örnek koda göz atın.