Saat gambar atau sematan dimuat tanpa ruang cadangan, semua yang ada di bawahnya akan bergerak. Tetapkan dimensi intrinsik atau rasio aspek sehingga browser dapat menata halaman sebelum mengunduh konten.
<img src="article-photo.webp" width="1200" height="800" alt="A small boat in a harbor">.video-frame {
aspect-ratio: 16 / 9;
background: #eee;
}
Cadangan ruang untuk lebih dari sekadar gambar
- Tetapkan rasio aspek untuk video dan media tersemat.
- Gunakan ketinggian minimum yang stabil untuk wilayah yang akan menerima konten asinkron.
- Hindari menyisipkan banner di atas posisi membaca saat ini tanpa memberi ruang pada tempatnya.
Ukur pergeserannya
Gunakan alat kinerja browser untuk menemukan perubahan tata letak dan mengonfirmasi bahwa perbaikan tersebut mengatasi elemen yang memindahkan halaman. Placeholder yang mengubah ukuran setelah memuat dapat menimbulkan masalah yang sama.
Geometri yang stabil membantu orang mempertahankan posisinya dan mendukung pengalaman halaman yang lebih lancar. Dimensi yang tepat harus mencerminkan konten dan bukan hanya sekedar tebakan untuk mendapatkan skor.