Pembaca sedang mengikuti sebuah paragraf ketika banner muncul di atasnya. Teks melompat, posisi baca hilang, dan tombol yang hendak ditekan berpindah. Website seperti ini bisa terlihat stabil pada screenshot awal tetapi mengganggu saat digunakan.
Untuk memperbaiki CLS, jangan berhenti pada proses memuat halaman. Kita perlu melihat apa yang terjadi selama pembaca menggulir, menunggu konten tambahan, dan membuka komponen halaman.
Periksa cakupan pengukuran terlebih dahulu
Pengujian lab yang hanya merekam pemuatan awal dapat melewatkan pergeseran berikutnya. Data CrUX mencakup pengalaman sepanjang umur halaman. Perbedaan hasil juga dapat muncul ketika yang dibandingkan adalah satu URL dengan agregat origin. Panduan diagnosis CLS.
Catat sumber angka, cakupan URL atau origin, jenis perangkat, serta periode data. Kalau data origin buruk tetapi hanya satu artikel yang kamu uji, perluas sampel ke template lain sebelum menyimpulkan artikel itu penyebab utamanya.
Tidak setiap perubahan tata letak dihitung dengan cara sama. Fokuskan diagnosis pada pergeseran tak terduga yang teramati, lalu gunakan trace untuk melihat kontribusinya. Hindari menyimpulkan dari gerakan visual saja tanpa membaca hasil pengukuran.
Bedakan korban pergeseran dan penyebabnya
Alat performa dapat menyorot paragraf yang berpindah. Namun penyebabnya mungkin slot gambar di atas paragraf yang sebelumnya tidak memiliki tinggi. Mengubah margin paragraf hanya menutupi gejala.
Gunakan urutan penyelidikan ini:
- Temukan waktu pergeseran pada rekaman.
- Lihat elemen yang berpindah.
- Periksa perubahan ukuran atau penyisipan elemen di dekatnya.
- Hubungkan kejadian dengan gambar, font, script, atau data yang selesai dimuat.
- Ulangi kondisi yang sama untuk memastikan dugaan.
Simpan screenshot sebelum dan sesudah kejadian, bukan hanya tampilan halaman yang sudah tenang. Dua keadaan itu sering lebih membantu developer dibanding daftar elemen terdampak tanpa konteks.
Contoh: embed ulasan mendorong petunjuk produk
Bayangkan halaman alat seduh kopi. Di bawah foto produk terdapat ringkasan spesifikasi dan embed ulasan. Saat awal terbuka, ruang ulasan hampir kosong. Beberapa detik kemudian embed mendapat data dan menambah tinggi, sehingga petunjuk penggunaan bergeser.
Ini contoh diagnosis ilustratif. Kita belum tahu apakah script ulasan sendiri lambat atau ruangnya memang tidak dirancang. Tabel berikut menjaga kedua dugaan tetap terpisah:
| Keadaan | Yang terlihat | Dugaan yang diuji |
|---|---|---|
| Data ulasan cepat | Pergeseran kecil tetap ada | Ruang awal tidak cukup |
| Data ulasan lambat | Pergeseran terjadi setelah pembaca menggulir | Komponen muncul terlambat |
| Tidak ada ulasan | Slot runtuh lalu konten naik | Penanganan keadaan kosong |
| Permintaan gagal | Pesan error memiliki tinggi berbeda | Keadaan gagal belum dirancang |
Perbaikannya bisa berupa ruang awal dengan ukuran yang masuk akal dan tampilan kosong yang stabil. Jangan menyelesaikannya dengan tinggi tetap sembarangan yang memotong teks pada mobile.
Audit komponen yang sering berubah ukuran
Untuk gambar, pastikan dimensinya diketahui sebelum file selesai dimuat. Atribut dimensi dan rasio aspek perlu sesuai dengan hasil gambar, termasuk jika crop berubah pada layar kecil.
Untuk iklan, embed, dan rekomendasi, rancang ruang beserta keadaan loading, kosong, dan gagal. Konten pihak ketiga mungkin memiliki tinggi yang berubah, sehingga pengujian perlu memakai variasi isi yang realistis.
Untuk font, perhatikan apakah pergantian font mengubah panjang baris dan tinggi blok. Uji judul panjang, bahasa berbeda, serta kondisi font gagal. Pilihan font pengganti yang memiliki ukuran sangat berbeda dapat memengaruhi banyak elemen sekaligus.
Untuk banner pemberitahuan, pikirkan posisi dan waktu tampilnya. Menyisipkan elemen baru di atas isi yang sedang dibaca memerlukan pemeriksaan khusus, terutama ketika muncul setelah jeda.
Gunakan daftar uji berbasis keadaan
Satu komponen perlu diperiksa dalam lebih dari satu keadaan:
| Dimensi uji | Contoh variasi |
|---|---|
| Ukuran layar | Ponsel sempit, tablet, desktop |
| Isi | Judul pendek dan panjang, gambar tersedia dan gagal |
| Waktu | Pemuatan awal, setelah menggulir, setelah menunggu |
| Data | Ada hasil, kosong, lambat, error |
| Cache | Resource sudah tersimpan atau baru dimuat |
Catat pergeseran mana yang dapat direproduksi, sumber pemicunya, dan perubahan yang diuji. Jika hanya terjadi pada iframe tertentu, pengukuran JavaScript milik halaman bisa memiliki keterbatasan; jangan menganggap ketiadaan catatan berarti pengguna tidak mengalami masalah.
Verifikasi kestabilan tanpa merusak isi
Setelah perubahan, rekam ulang alur yang memunculkan masalah. Periksa apakah ruang tetap stabil ketika isi panjang, serta apakah teks, tombol, dan gambar tetap terlihat penuh. Area kosong yang sangat besar juga bukan pengalaman yang baik hanya karena angka pergeseran menurun.
Simpan hasil sebelum dan sesudah pada template yang sama. Lalu pantau pengalaman lapangan bila datanya tersedia. Hasil yang dicari adalah halaman yang menjaga posisi baca dan tindakan pengguna, dengan bukti teknis yang menjelaskan penyebab perbaikannya.
