Pelajari rencana kami untuk meningkatkan metrik Pergeseran Tata Letak Kumulatif dan berikan masukan kepada kami.
Pergeseran Tata Letak Kumulatif (CLS) adalah metrik yang mengukur stabilitas visual halaman web. Metrik ini disebut pergeseran tata letak kumulatif karena skor setiap pergeseran dijumlahkan selama masa aktif halaman.
Meskipun semua pergeseran tata letak memberikan pengalaman pengguna yang buruk, pergeseran tata letak akan bertambah pada halaman yang dibuka lebih lama. Itulah sebabnya Tim Metrik Kecepatan Chrome berupaya meningkatkan metrik CLS agar lebih netral terhadap waktu yang dihabiskan di halaman.
Metrik ini harus berfokus pada pengalaman pengguna selama masa aktif halaman penuh, karena kami mendapati bahwa pengguna sering kali mengalami pengalaman negatif setelah pemuatan, saat men-scroll atau membuka halaman. Namun, kami telah mendengar kekhawatiran tentang pengaruhnya terhadap halaman yang berumur panjang—halaman yang biasanya dibuka pengguna dalam waktu lama. Ada beberapa jenis halaman yang cenderung tetap terbuka lebih lama; beberapa yang paling umum adalah aplikasi media sosial dengan scrolling tanpa batas dan aplikasi satu halaman.
Analisis internal terhadap halaman yang memiliki waktu aktif lama dengan skor CLS tinggi menemukan bahwa sebagian besar masalah disebabkan oleh pola berikut:
- Scroller tanpa batas yang menggeser konten saat pengguna men-scroll.
- Pengendali input memerlukan waktu lebih dari 500 md untuk memperbarui UI sebagai respons terhadap interaksi pengguna, tanpa jenis placeholder atau pola kerangka apa pun.
Selain mendorong developer untuk meningkatkan pengalaman pengguna tersebut, kami juga berupaya meningkatkan kualitas metrik dan mencari masukan terkait pendekatan yang mungkin digunakan.
Bagaimana cara menentukan apakah metrik baru lebih baik?
Sebelum mempelajari desain metrik, kami ingin memastikan bahwa kami mengevaluasi ide-ide kami di berbagai halaman web dan kasus penggunaan di dunia nyata. Untuk memulai, kami mendesain studi pengguna kecil.
Pertama, kami merekam video dan rekaman aktivitas Chrome dari 34 perjalanan pengguna melalui berbagai situs. Dalam memilih perjalanan pengguna, kami menargetkan beberapa hal:
- Berbagai jenis situs, seperti situs berita dan belanja.
- Berbagai perjalanan pengguna, seperti pemuatan halaman awal, scroll, navigasi aplikasi satu halaman, dan interaksi pengguna.
- Variasi jumlah dan intensitas setiap pergeseran tata letak di situs.
- Sedikit pengalaman negatif di situs selain pergeseran tata letak.
Kami meminta 41 rekan kerja untuk menonton dua video sekaligus, lalu menilai mana dari kedua video tersebut yang lebih baik dalam hal perubahan tata letak. Dari rating ini, kami membuat urutan peringkat situs yang ideal. Hasil peringkat pengguna mengonfirmasi kecurigaan kami bahwa rekan kerja kami, seperti sebagian besar pengguna, benar-benar frustrasi dengan pergeseran tata letak setelah pemuatan, terutama selama navigasi aplikasi satu halaman dan scroll. Kami melihat bahwa beberapa situs memiliki pengalaman pengguna yang jauh lebih baik selama aktivitas ini dibandingkan situs lainnya.
Karena kami merekam rekaman aktivitas Chrome bersama dengan video, kami memiliki semua detail setiap perubahan tata letak di setiap perjalanan pengguna. Kami menggunakannya untuk menghitung nilai metrik untuk setiap ide untuk setiap perjalanan pengguna. Hal ini memungkinkan kami melihat bagaimana setiap varian metrik memberi peringkat pada perjalanan pengguna, dan seberapa berbeda setiap varian dari peringkat ideal.
Ide metrik apa saja yang diuji?
Strategi periode
Sering kali halaman memiliki beberapa pergeseran tata letak yang berdekatan, karena elemen dapat bergeser beberapa kali saat konten baru muncul satu per satu. Hal ini mendorong kami untuk mencoba teknik pengelompokan shift. Untuk melakukannya, kami melihat tiga pendekatan jendela:
- Periode tumbling
- Jendela geser
- Periode sesi
Dalam setiap contoh ini, halaman memiliki pergeseran tata letak dengan tingkat keparahan yang bervariasi dari waktu ke waktu. Setiap batang biru mewakili satu pergeseran tata letak, dan panjangnya mewakili skor pergeseran tersebut. Gambar mengilustrasikan cara berbagai strategi jendela mengelompokkan pergeseran tata letak dari waktu ke waktu.
Periode tumbling
Pendekatan paling sederhana adalah dengan membagi halaman menjadi jendela dengan bagian berukuran sama. Ini disebut jendela tumbling. Anda akan melihat di atas bahwa batang keempat benar-benar terlihat seperti harus dikelompokkan ke dalam jendela tumbling kedua, tetapi karena jendela semuanya berukuran tetap, batang tersebut berada di jendela pertama. Jika ada sedikit perbedaan dalam waktu pemuatan atau interaksi pengguna di halaman, pergeseran tata letak yang sama mungkin terjadi di sisi yang berbeda dari batas jendela tumbling.
Jendela geser
Pendekatan yang memungkinkan kita melihat lebih banyak kemungkinan pengelompokan dengan durasi yang sama adalah dengan terus memperbarui periode potensial dari waktu ke waktu. Gambar di atas menunjukkan satu periode geser pada satu waktu, tetapi kita dapat melihat semua kemungkinan periode geser atau sebagian dari periode geser tersebut untuk membuat metrik.
Periode sesi
Jika ingin berfokus mengidentifikasi area halaman dengan lonjakan pergeseran tata letak, kita dapat memulai setiap jendela pada pergeseran, dan terus mengembangkannya hingga menemukan celah dengan ukuran tertentu di antara pergeseran tata letak. Pendekatan ini mengelompokkan perubahan tata letak secara bersamaan, dan mengabaikan sebagian besar pengalaman pengguna yang tidak berubah. Salah satu potensi masalahnya adalah jika tidak ada jeda dalam pergeseran tata letak, metrik berdasarkan periode sesi dapat tumbuh tanpa batas seperti metrik CLS saat ini. Jadi, kami juga mencobanya dengan ukuran jendela maksimum.
Ukuran jendela
Metrik ini mungkin memberikan hasil yang sangat berbeda bergantung pada ukuran jendela yang sebenarnya, jadi kami mencoba beberapa ukuran jendela yang berbeda:
- Setiap shift sebagai jendelanya sendiri (tanpa jendela)
- 100 md
- 300 md
- 1 detik
- 5 detik
Perangkuman
Kami telah mencoba berbagai cara untuk meringkas berbagai periode.
Persentil
Kami melihat nilai periode maksimum, serta persentil ke-95, persentil ke-75, dan median.
Biasa
Kami telah mempelajari nilai periode rata-rata.
Anggaran
Kami bertanya-tanya apakah mungkin ada beberapa skor pergeseran tata letak minimum yang tidak akan diperhatikan pengguna, dan kita bisa menghitung pergeseran tata letak di atas "anggaran" tersebut dalam skor. Jadi, untuk berbagai potensi nilai "anggaran", kami melihat persentase pergeseran di atas anggaran, dan total skor pergeseran di atas anggaran.
Strategi lainnya
Kita juga melihat banyak strategi yang tidak melibatkan jendela, seperti total pergeseran tata letak dibagi waktu di halaman, dan rata-rata N shift terburuk.
Hasil awal
Secara keseluruhan, kami menguji 145 definisi metrik yang berbeda berdasarkan permutasi ide di atas. Untuk setiap metrik, kami memberi peringkat pada semua perjalanan pengguna berdasarkan skor mereka pada metrik, lalu memberi peringkat pada metrik berdasarkan seberapa dekat metrik tersebut dengan peringkat ideal.
Untuk mendapatkan dasar pengukuran, kami juga memberi peringkat pada semua situs berdasarkan skor CLS saat ini. CLS berada di posisi ke-32, sama dengan 13 strategi lainnya, sehingga lebih baik daripada sebagian besar permutasi strategi di atas. Untuk memastikan hasilnya bermakna, kami juga menambahkan tiga pengurutan acak. Seperti yang diharapkan, pengurutan acak memiliki performa yang lebih buruk daripada setiap strategi yang diuji.
Untuk memahami apakah kita mungkin terlalu cocok untuk set data, setelah analisis, kita merekam beberapa video dan trace pergeseran tata letak baru, memberi peringkat secara manual, dan melihat bahwa peringkat metrik sangat mirip untuk set data baru dan yang asli.
Beberapa strategi yang berbeda menonjol dalam peringkat.
Strategi terbaik
Saat mengurutkan strategi, kami mendapati bahwa ada tiga jenis strategi yang menduduki posisi teratas. Masing-masing memiliki performa yang kurang lebih sama, jadi kami berencana untuk melanjutkan dengan analisis yang lebih mendalam pada ketiganya. Kami juga ingin mendengar masukan developer untuk memahami apakah ada faktor di luar pengalaman pengguna yang harus kami pertimbangkan saat memutuskan di antara keduanya. (Lihat di bawah untuk mengetahui cara memberikan masukan.)
Persentil tinggi jendela panjang
Beberapa strategi jendela berfungsi dengan baik dengan ukuran jendela yang panjang:
- Jendela geser 1 detik
- Periode sesi dibatasi hingga 5 detik dengan jeda 1 detik
- Interval sesi tidak dibatasi dengan jeda 1 detik
Semua ini memiliki peringkat yang sangat baik di persentil ke-95 dan maksimum.
Namun, untuk ukuran jendela yang begitu besar, kami khawatir menggunakan persentil ke-95—sering kali kami hanya melihat 4-6 jendela, dan mengambil persentil ke-95 dari jendela tersebut adalah banyak interpolasi. Tidak jelas apa yang dilakukan interpolasi dalam hal nilai metrik. Nilai maksimum jauh lebih jelas, jadi kami memutuskan untuk melanjutkan dengan memeriksa nilai maksimum.
Rata-rata periode sesi dengan jeda panjang
Menghitung rata-rata skor semua periode sesi tanpa batas dengan jeda 5 detik di antaranya berperforma sangat baik. Strategi ini memiliki beberapa karakteristik menarik:
- Jika tidak ada celah di antara pergeseran tata letak, halaman akan menjadi satu periode sesi panjang dengan skor yang sama persis dengan CLS saat ini.
- Metrik ini tidak mempertimbangkan waktu tidak ada aktivitas secara langsung; metrik ini hanya melihat pergeseran yang terjadi di halaman, dan bukan pada titik waktu saat halaman tidak bergeser.
Persentil tinggi periode singkat
Jendela geser 300 md maksimum diberi peringkat yang sangat tinggi, serta persentil ke-95. Untuk ukuran jendela yang lebih pendek, terdapat lebih sedikit interpolasi persentil daripada ukuran jendela yang lebih besar, tetapi kami juga khawatir dengan jendela geser "ulang"—jika serangkaian pergeseran tata letak terjadi selama dua frame, ada beberapa jendela 300 md yang menyertakannya. Mengambil maksimum jauh lebih jelas dan lebih sederhana daripada mengambil persentil ke-95. Sekali lagi, kami memutuskan untuk memeriksa nilai maksimum.
Strategi yang tidak berhasil
Strategi yang mencoba melihat pengalaman "rata-rata" waktu yang dihabiskan tanpa pergeseran tata letak dan dengan pergeseran tata letak sangat buruk. Tidak ada ringkasan median atau persentil ke-75 dari strategi periode yang memberi peringkat situs dengan baik. Begitu juga dengan jumlah pergeseran tata letak dari waktu ke waktu.
Kami mengevaluasi sejumlah "anggaran" yang berbeda untuk pergeseran tata letak yang dapat diterima:
- Persentase pergeseran tata letak di atas anggaran tertentu. Untuk berbagai anggaran, semua ini memiliki peringkat yang cukup buruk.
- Pergeseran tata letak rata-rata di atas beberapa kelebihan. Sebagian besar variasi pada strategi ini berperforma buruk, tetapi kelebihan rata-rata selama sesi panjang dengan jeda besar hampir sama baiknya dengan rata-rata periode sesi dengan jeda panjang. Kami memutuskan untuk melanjutkan dengan yang terakhir karena lebih sederhana.
Langkah berikutnya
Analisis berskala lebih besar
Kami telah menerapkan strategi teratas yang tercantum di atas di Chrome, sehingga kami bisa mendapatkan data tentang penggunaan di dunia nyata untuk kumpulan situs yang jauh lebih besar. Kami berencana menggunakan pendekatan serupa untuk menentukan peringkat situs berdasarkan skor metriknya guna melakukan analisis skala yang lebih besar:
- Beri peringkat semua situs berdasarkan CLS, dan berdasarkan setiap kandidat metrik baru.
- Situs mana yang peringkatnya paling berbeda oleh CLS dan setiap kandidat? Apakah kita menemukan sesuatu yang tidak terduga saat melihat situs ini?
- Apa perbedaan terbesar di antara kandidat metrik baru tersebut? Apakah ada perbedaan yang menonjol sebagai kelebihan atau kekurangan kandidat tertentu?
- Ulangi analisis di atas, tetapi buat bucket berdasarkan waktu yang dihabiskan di setiap pemuatan halaman. Apakah kita melihat peningkatan yang diharapkan untuk pemuatan halaman yang lama dengan pergeseran tata letak yang dapat diterima? Apakah kami melihat hasil yang tidak terduga untuk halaman berumur pendek?
Masukan terkait pendekatan kami
Kami ingin mendapatkan masukan dari developer web tentang pendekatan ini. Beberapa hal yang perlu diingat saat mempertimbangkan pendekatan baru:
Aspek layanan yang tidak berubah
Kami ingin mengklarifikasi bahwa banyak hal yang tidak akan berubah dengan pendekatan baru ini:
- Tidak ada ide metrik kami yang mengubah cara skor pergeseran tata letak untuk setiap frame dihitung, hanya cara kami meringkas beberapa frame. Artinya, JavaScript API untuk pergeseran tata letak akan tetap sama, dan peristiwa yang mendasarinya di pelacakan Chrome yang digunakan alat developer juga akan tetap sama, sehingga persegi pergeseran tata letak di alat seperti WebPageTest dan Chrome DevTools akan terus berfungsi dengan cara yang sama.
- Kami akan terus berupaya keras untuk membuat metrik ini mudah diterapkan oleh developer, termasuk metrik tersebut di library web-vitals, mendokumentasikan web.dev, dan melaporkannya di alat developer kami seperti Lighthouse.
Kompromi antara metrik
Salah satu strategi teratas meringkas periode pergeseran tata letak sebagai rata-rata, dan sisanya melaporkan periode maksimum. Untuk halaman yang dibuka dalam waktu yang sangat lama, rata-ratanya kemungkinan akan melaporkan nilai yang lebih representatif, tetapi secara umum akan lebih mudah bagi developer untuk bertindak pada satu jendela—mereka dapat mencatat kapan error tersebut terjadi, elemen yang bergeser, dan seterusnya. Kami ingin mendapatkan masukan tentang mana yang lebih penting bagi developer.
Apakah Anda merasa jendela geser atau sesi lebih mudah dipahami? Apakah perbedaan tersebut penting bagi Anda?
Cara memberikan masukan
Anda dapat mencoba metrik pergeseran tata letak baru di situs mana pun menggunakan contoh penerapan JavaScript atau fork ekstensi Core Web Vitals kami.
Kirim masukan melalui email ke grup Google web-vitals-feedback kami, dengan "[Layout Shift Metrics]" di baris subjek. Kami sangat menantikan pendapat Anda.