Men-debug pergeseran tata letak

Pelajari cara mengidentifikasi dan memperbaiki pergeseran tata letak.

Katie Hempenius

Bagian pertama artikel ini membahas alat untuk men-debug pergeseran tata letak, sedangkan bagian kedua membahas proses berpikir yang harus digunakan ketika mengidentifikasi penyebab pergeseran tata letak.

Alat

API Layout Instability

Layout Instability API adalah mekanisme browser untuk mengukur dan melaporkan pergeseran tata letak. Semua alat untuk men-debug pergeseran tata letak, termasuk DevTools, pada akhirnya dibangun berdasarkan Layout Instability API. Namun, menggunakan Layout Instability API secara langsung adalah alat {i>debugging<i} yang ampuh karena fleksibilitasnya.

Penggunaan

Cuplikan kode yang sama dengan mengukur Pergeseran Tata Letak Kumulatif (CLS) juga dapat berfungsi untuk men-debug pergeseran tata letak. Cuplikan di bawah ini mencatat informasi tentang tata letak ke dalam log bergeser ke konsol. Memeriksa log ini akan memberikan informasi Anda tentang kapan, di mana, dan bagaimana pergeseran tata letak terjadi.

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});

Saat menjalankan skrip ini, perhatikan bahwa:

• Opsi buffered: true menunjukkan bahwa PerformanceObserver harus memeriksa entri performa browser buffer untuk entri performa yang dibuat sebelum inisialisasi. Akibatnya, PerformanceObserver akan melaporkan tata letak pergeseran yang terjadi sebelum dan setelah diinisialisasi. Simpan ini saat memeriksa log konsol. Kelebihan awal pergeseran tata letak bisa mencerminkan backlog pelaporan, dan bukan terjadi secara mendadak pergeseran tata letak.
• Agar tidak memengaruhi performa, PerformanceObserver menunggu hingga thread tidak ada aktivitas untuk melaporkan pergeseran tata letak. Akibatnya, tergantung pada sedang sibuk, mungkin ada sedikit penundaan antara saat tata letak {i>shift<i} terjadi dan kapan ia dicatat di konsol.
• Skrip ini mengabaikan pergeseran tata letak yang terjadi dalam 500 milidetik dari input pengguna sehingga tidak diperhitungkan dalam CLS.

Informasi tentang pergeseran tata letak dilaporkan menggunakan kombinasi dua API: LayoutShift dan LayoutShiftAttribution antarmuka. Masing-masing antarmuka ini dijelaskan secara lebih rinci dalam bagian berikut ini.

LayoutShift

Setiap pergeseran tata letak dilaporkan menggunakan antarmuka LayoutShift. Isi dari entri akan terlihat seperti ini:

duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798

Entri di atas menunjukkan pergeseran tata letak saat tiga elemen DOM berubah posisi Anda. Skor pergeseran tata letak untuk pergeseran tata letak tertentu ini adalah 0.175.

Berikut adalah properti instance LayoutShift yang paling relevan dengan proses debug pergeseran tata letak:

LayoutShiftAttribution

Antarmuka LayoutShiftAttribution menjelaskan satu pergeseran pada satu DOM . Jika beberapa elemen bergeser selama pergeseran tata letak, sources berisi beberapa entri.

Misalnya, JSON di bawah ini sesuai dengan pergeseran tata letak dengan satu sumber: pergeseran ke bawah elemen DOM <div id='banner'> dari y: 76 ke 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
      }
    }
  ]

Properti node mengidentifikasi elemen HTML yang bergeser. Mengarahkan kursor ke sini di DevTools menandai elemen halaman yang sesuai.

Properti previousRect dan currentRect melaporkan ukuran dan posisi {i>node<i}.

• Koordinat x dan y melaporkan koordinat x dan koordinat y masing-masing sudut kiri atas elemen
• Properti width dan height masing-masing melaporkan lebar dan tinggi dari elemen.
• Properti top, right, bottom, dan left melaporkan x atau y nilai koordinat yang sesuai dengan tepi elemen yang diberikan. Di kata, nilai top sama dengan y; nilai bottom sama dengan y+height.

Jika semua properti previousRect disetel ke 0, ini berarti elemen memiliki beralih ke tampilan. Jika semua properti currentRect ditetapkan ke 0, ini berarti bahwa elemen telah bergeser keluar dari tampilan.

Salah satu hal yang paling penting untuk dipahami saat menafsirkan {i>output<i} ini adalah bahwa elemen yang tercantum sebagai sumber adalah elemen yang bergeser selama pergeseran tata letak. Namun, mungkin saja elemen-elemen ini hanya secara tidak langsung yang terkait dengan "akar penyebab" ketidakstabilan tata letak. Berikut beberapa contohnya.

Contoh #1

Pergeseran tata letak ini akan dilaporkan dengan satu sumber: elemen B. Namun, akar penyebab pergeseran tata letak ini adalah perubahan ukuran elemen A.

Contoh #2

Pergeseran tata letak dalam contoh ini akan dilaporkan dengan dua sumber: elemen A dan elemen B. Akar masalah dari pergeseran tata letak ini adalah perubahan posisi elemen A.

Contoh #3

Pergeseran tata letak dalam contoh ini akan dilaporkan dengan satu sumber: elemen B. Perubahan posisi elemen B menyebabkan pergeseran tata letak ini.

Contoh #4

Meskipun elemen B mengubah ukuran, tidak ada pergeseran tata letak dalam contoh ini.

Lihat demo cara perubahan DOM dilaporkan oleh Layout Instability API.

DevTools

Panel performa

Panel Experience di panel Performance DevTools menampilkan semua pergeseran tata letak yang terjadi selama trace performa tertentu—meskipun terjadi dalam waktu 500 md dari interaksi pengguna sehingga tidak diperhitungkan dalam CLS. Mengarahkan kursor ke pergeseran tata letak tertentu di panel Pengalaman akan menandai elemen DOM yang terpengaruh.

Untuk melihat informasi selengkapnya tentang pergeseran tata letak, klik {i>layout shift<i}, lalu buka panel samping Ringkasan. Perubahan pada dimensi elemen dicantumkan menggunakan format [width, height]; perubahan pada posisi elemen dicantumkan menggunakan format [x,y]. Properti Had recent input menunjukkan apakah pergeseran tata letak terjadi dalam 500 md setelah interaksi pengguna.

Untuk informasi tentang durasi pergeseran tata letak, buka tab Log Peristiwa. Durasi pergeseran tata letak juga dapat diperkirakan dengan melihat Panel Experience untuk panjang persegi panjang pergeseran tata letak merah.

Untuk informasi selengkapnya tentang cara menggunakan panel Performa, lihat Performa Analisis Referensi.

Menyoroti area pergeseran tata letak

Menyoroti area pergeseran tata letak bisa menjadi teknik yang bermanfaat untuk mendapatkan nuansa sekilas dan cepat untuk lokasi dan waktu pergeseran tata letak yang muncul di suatu halaman.

Untuk mengaktifkan Region Pergeseran Tata Letak di DevTools, buka Settings > Alat Lainnya > Rendering > Region Pergeseran Tata Letak, lalu muat ulang halaman yang ingin Anda debug. Area pergeseran tata letak akan disoroti sebentar dengan warna ungu.

Proses pemikiran untuk mengidentifikasi penyebab pergeseran tata letak

Anda dapat menggunakan langkah-langkah di bawah untuk mengidentifikasi penyebab pergeseran tata letak terlepas dari kapan atau bagaimana pergeseran tata letak terjadi. Langkah-langkah ini dapat berupa ditambah dengan menjalankan Lighthouse—namun, perlu diingat bahwa Lighthouse dapat hanya mengidentifikasi pergeseran tata letak yang terjadi selama pemuatan halaman awal. Di beberapa Selain itu, Lighthouse juga hanya dapat memberikan saran untuk beberapa penyebab tata letak pergeseran—misalnya, elemen gambar yang tidak memiliki lebar dan tinggi yang jelas.

Mengidentifikasi penyebab pergeseran tata letak

Pergeseran tata letak dapat disebabkan oleh peristiwa berikut:

• Perubahan pada posisi elemen DOM
• Perubahan pada dimensi elemen DOM
• Penyisipan atau penghapusan elemen DOM
• Animasi yang memicu tata letak

Secara khusus, elemen DOM tepat sebelum elemen yang digeser adalah elemen yang paling mungkin terlibat dalam "penyebab" pergeseran tata letak. Sehingga, ketika menyelidiki mengapa pergeseran tata letak terjadi, pertimbangkan:

• Apakah posisi atau dimensi elemen sebelumnya berubah?
• Apakah elemen DOM disisipkan atau dihapus sebelum elemen yang digeser?
• Apakah posisi elemen yang digeser berubah secara eksplisit?

Jika elemen sebelumnya tidak menyebabkan pergeseran tata letak, lanjutkan pencarian Anda dengan mempertimbangkan elemen lain sebelumnya dan elemen terdekat.

Selain itu, arah dan jarak pergeseran tata letak dapat memberikan petunjuk tentang akar penyebab. Misalnya, pergeseran ke bawah yang besar sering kali mengindikasikan penyisipan elemen DOM, sedangkan pergeseran tata letak 1 px atau 2 px sering menunjukkan penerapan gaya CSS yang bertentangan atau pemuatan dan penerapan suatu font web.

Berikut adalah beberapa perilaku spesifik yang paling sering menyebabkan pergeseran tata letak acara:

Perubahan pada posisi elemen (yang bukan disebabkan oleh perpindahan elemen lain)

Jenis perubahan ini sering kali disebabkan oleh:

• Stylesheet yang dimuat lebih lambat atau menimpa gaya yang dideklarasikan sebelumnya.
• Efek animasi dan transisi.

Perubahan pada dimensi elemen

Jenis perubahan ini sering kali disebabkan oleh:

• Stylesheet yang dimuat lebih lambat atau menimpa gaya yang dideklarasikan sebelumnya.
• Gambar dan iframe tanpa atribut width dan height yang dimuat setelahnya "slot" mereka telah dirender.
• Blok teks tanpa atribut width atau height yang menukar font setelah teks telah dirender.

Penyisipan atau penghapusan elemen DOM

Hal ini sering kali disebabkan oleh:

• Penyisipan iklan dan sematan pihak ketiga lainnya.
• Penyisipan banner, pemberitahuan, dan modal.
• Scrolling tanpa batas dan pola UX lainnya yang memuat konten tambahan di atas konten yang sudah ada.

Animasi yang memicu tata letak

Beberapa efek animasi dapat dipicu tata letak. Tanda umum contohnya adalah saat elemen DOM 'dianimasikan' dengan menambahkan properti seperti top atau left, daripada menggunakan elemen transform saat ini. Baca Cara membuat animasi CSS berperforma tinggi untuk informasi selengkapnya.

Mereproduksi pergeseran tata letak

Anda tidak dapat memperbaiki pergeseran tata letak yang tidak dapat direproduksi. Salah satu cara paling sederhana, namun hal paling efektif yang dapat Anda lakukan untuk lebih memahami tata letak situs Anda. stabilitas adalah 5-10 menit untuk berinteraksi dengan situs Anda dengan sasaran yang memicu pergeseran tata letak. Biarkan konsol tetap terbuka saat melakukan ini dan gunakan Layout Instability API untuk melaporkan pergeseran tata letak.

Agar pergeseran tata letak sulit ditemukan, pertimbangkan untuk mengulangi latihan ini dengan perangkat dan kecepatan koneksi yang berbeda. Secara khusus, menggunakan model kecepatan koneksi bisa memudahkan identifikasi pergeseran tata letak. Selain itu, Anda dapat menggunakan pernyataan debugger untuk mempermudah proses tata letak {i>shift<i}.

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});

Terakhir, untuk masalah tata letak yang tidak dapat direproduksi dalam pengembangan, pertimbangkan menggunakan Layout Instability API bersama alat logging front-end Anda pilihan untuk mengumpulkan informasi selengkapnya tentang masalah ini. Periksa contoh kode untuk mengetahui cara melacak elemen yang digeser terbesar di halaman.