Pergeseran tata letak terjadi ketika konten yang terlihat berubah posisi tanpa pengunjung memindahkannya. Pelacakan kinerja dapat menghubungkan pergerakan ke elemen yang berubah dan sumber daya atau skrip yang menyebabkannya.
Tangkap gerakannya
- Rekam navigasi baru dengan panel kinerja browser.
- Buka acara pergeseran tata letak dan periksa node yang terpengaruh serta garis waktu di sekitarnya.
- Ulangi dengan pembatasan jaringan untuk mengekspos gambar, font, sematan, atau data yang datang terlambat.
Cadangan ruang sebelum konten tiba
Berikan dimensi yang stabil pada gambar dan video, sediakan slot untuk penyematan dan iklan, dan hindari menyisipkan spanduk di atas teks setelah halaman sudah terlihat. Untuk font, bandingkan metrik fallback dan final daripada menyembunyikan teks saat file dimuat.
Jangan perlakukan setiap shift sebagai bug CSS. Label yang berubah, pesan validasi, atau hasil asinkron mungkin memerlukan tata letak yang stabil atau interaksi yang lebih jelas. Verifikasi perubahan pada area pandang seluler yang representatif dan pada pemuatan halaman sebenarnya.