Pelajari rencana kami untuk meningkatkan metrik Pergeseran Tata Letak Kumulatif dan beri kami masukan.
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 sepanjang 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 sepanjang waktu halaman penuh, karena kami menemukan bahwa pengguna sering kali mendapatkan pengalaman negatif setelah pemuatan, saat men-scroll atau menavigasi halaman. Namun, kami telah mendengar kekhawatiran tentang bagaimana hal ini memengaruhi halaman yang bertahan lama, yaitu halaman yang biasanya dibuka oleh pengguna dalam waktu yang 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 halaman berumur panjang dengan skor CLS tinggi menemukan bahwa sebagian besar masalah disebabkan oleh pola berikut:
- Scroller tanpa batas menggeser konten saat pengguna men-scroll.
- Pengendali input memerlukan waktu lebih dari 500 md untuk mengupdate 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 memungkinkan.
Bagaimana kami memutuskan jika sebuah metrik baru lebih baik?
Sebelum terjun ke desain metrik, kami ingin memastikan bahwa kami telah mengevaluasi ide-ide kami pada berbagai halaman web dunia nyata dan kasus penggunaan. Untuk memulainya, kami merancang studi pengguna dalam jumlah kecil.
Pertama, kami merekam video dan pelacakan Chrome dari 34 perjalanan pengguna melalui berbagai situs. Dalam memilih {i>user journey<i}, kami memiliki beberapa hal:
- Keragaman jenis situs, seperti situs berita dan belanja.
- Berbagai perjalanan pengguna, seperti pemuatan halaman awal, scroll, navigasi aplikasi satu halaman, dan interaksi pengguna.
- Keragaman jumlah dan intensitas pergeseran tata letak individual di situs.
- Sedikit pengalaman negatif di situs selain pergeseran tata letak.
Kami meminta 41 rekan kami untuk menonton dua video sekaligus, memberi peringkat mana dari pasangan video tersebut yang lebih baik dalam hal pergeseran 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 dimuat, terutama selama scroll dan navigasi aplikasi satu halaman. Kami melihat bahwa beberapa situs memiliki pengalaman pengguna yang jauh lebih baik selama aktivitas ini dibandingkan yang lain.
Karena kami merekam aktivitas Chrome bersama dengan video, kami memiliki semua detail pergeseran tata letak individual di setiap perjalanan pengguna. Kami menggunakannya untuk menghitung nilai metrik untuk setiap ide dalam setiap perjalanan pengguna. Hal ini memungkinkan kita melihat bagaimana setiap varian metrik memberi peringkat perjalanan pengguna, dan seberapa berbeda masing-masing dari peringkat yang ideal.
Ide metrik apa saja yang diuji?
Strategi windowing
Sering kali halaman memiliki beberapa pergeseran tata letak yang berdekatan, karena elemen dapat bergeser beberapa kali saat konten baru muncul sepotong demi sepotong. Hal ini mendorong kami untuk mencoba teknik untuk mengelompokkan shift. Untuk mencapainya, kita telah melihat tiga pendekatan windowing:
- Jendela jatuh
- Jendela bergeser
- Periode sesi
Dalam setiap contoh ini, halaman mengalami pergeseran tata letak dengan berbagai tingkat keparahan dari waktu ke waktu. Setiap batang biru mewakili satu pergeseran tata letak, dan panjangnya mewakili skor dari pergeseran tersebut. Gambar ini mengilustrasikan bagaimana strategi windowing yang berbeda mengelompokkan pergeseran tata letak dari waktu ke waktu.
Jendela jatuh
Pendekatan paling sederhana adalah dengan memecah halaman menjadi beberapa jendela dengan ukuran yang sama. Ini disebut jendela tumbling. Anda akan melihat di atas bahwa bilah keempat benar-benar terlihat seperti harus dikelompokkan ke dalam jendela tumbling kedua, tetapi karena semua jendela berukuran tetap, batang itu ada 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 bergeser
Pendekatan yang memungkinkan kita melihat lebih banyak kemungkinan pengelompokan dengan panjang yang sama adalah terus memperbarui potensi jendela dari waktu ke waktu. Gambar di atas menampilkan satu jendela geser dalam satu waktu, tetapi kita dapat melihat semua kemungkinan jendela geser atau subset jendela geser untuk membuat metrik.
Periode sesi
Jika ingin berfokus pada identifikasi area halaman dengan burst pergeseran tata letak, kita dapat memulai setiap jendela secara bergeser, dan terus meningkatkannya hingga kita menemukan celah dalam ukuran tertentu di antara pergeseran tata letak. Pendekatan ini mengelompokkan pergeseran tata letak secara bersamaan, dan mengabaikan sebagian besar pengalaman pengguna yang tidak berubah. Salah satu potensi masalah adalah jika tidak ada celah dalam pergeseran tata letak, metrik yang didasarkan pada periode sesi dapat menjadi tidak terbatas seperti metrik CLS saat ini. Jadi kami mencobanya dengan ukuran jendela maksimum.
Ukuran jendela
Metrik ini mungkin memberikan hasil yang sangat berbeda, bergantung pada seberapa besar jendela sebenarnya, jadi kami mencoba beberapa ukuran jendela yang berbeda:
- Setiap shift sebagai jendelanya sendiri (tanpa jendela)
- 100 md
- 300 md
- 1 detik
- 5 detik
Ringkasan
Kami mencoba banyak cara untuk merangkum berbagai jendela.
Persentil
Kami melihat nilai jendela 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 perubahan terhadap anggaran, dan total skor perubahan 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 dari ide di atas. Untuk setiap metrik, kami memberi peringkat semua perjalanan pengguna berdasarkan skornya pada metrik, lalu memberi peringkat metrik berdasarkan seberapa dekat mereka dengan peringkat ideal.
Untuk mendapatkan dasar pengukuran, kami juga memberi peringkat semua situs berdasarkan skor CLS situs saat ini. CLS berada di posisi ke-32, imbang dengan 13 strategi lainnya, sehingga lebih baik daripada sebagian besar permutasi strategi di atas. Untuk memastikan hasilnya bermakna, kami juga menambahkan tiga urutan acak. Seperti yang diharapkan, pengurutan acak 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 metriknya sangat mirip untuk set data baru dan yang asli.
Beberapa strategi berbeda menonjol dalam peringkat ini.
Strategi terbaik
Saat memberi peringkat pada 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 analisis yang lebih mendalam pada ketiganya. Kami juga ingin mendengar masukan dari developer untuk memahami apakah ada faktor di luar pengalaman pengguna yang harus kami pertimbangkan saat memutuskan di antara faktor-faktor tersebut. (Lihat di bawah untuk mengetahui cara memberikan masukan.)
Persentil tinggi dari jendela panjang
Beberapa strategi windowing berfungsi baik dengan ukuran jendela yang panjang:
- Jendela geser 1 detik
- Periode sesi dibatasi pada 5 detik dengan jeda 1 detik
- Periode sesi tidak dibatasi dengan jeda 1 detik
Semua ini memiliki peringkat yang sangat baik di persentil ke-95 dan maksimum.
Tetapi untuk ukuran jendela sebesar itu, kami khawatir tentang menggunakan persentil ke-95 — sering kali kami hanya melihat 4-6 jendela, dan mengambil persentil ke-95 dari itu 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
Rata-rata skor dari semua periode sesi yang tidak dibatasi dengan interval 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 memperhitungkan waktu tidak ada aktivitas secara langsung; metrik ini hanya mengamati pergeseran yang terjadi di halaman, dan bukan pada waktu saat halaman tidak mengalami pergeseran.
Persentil tinggi jendela pendek
Jendela geser 300 md maksimum diberi peringkat yang sangat tinggi, serta persentil ke-95. Untuk ukuran jendela yang lebih pendek, terdapat interpolasi persentil lebih sedikit daripada ukuran jendela yang lebih besar, tetapi kami juga khawatir dengan jendela geser "berulang"—jika serangkaian pergeseran tata letak terjadi pada 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" dari waktu yang dihabiskan tanpa pergeseran tata letak dan dengan pergeseran tata letak tidak berhasil. Tak satu pun dari ringkasan persentil ke-75 atau median dari strategi windowing mana pun yang memberi peringkat situs dengan baik. Jumlah pergeseran tata letak juga tidak terjadi dari waktu ke waktu.
Kami mengevaluasi sejumlah "anggaran" yang berbeda untuk pergeseran tata letak yang dapat diterima:
- Persentase tata letak bergeser di atas anggaran tertentu. Untuk berbagai anggaran, semua ini memiliki peringkat yang cukup buruk.
- Pergeseran tata letak rata-rata di atas batas berlebih. Sebagian besar variasi pada strategi ini berperforma buruk, tetapi kelebihan rata-rata selama sesi panjang dengan kesenjangan yang besar menghasilkan rata-rata periode sesi dengan kesenjangan yang panjang. Kami memutuskan untuk menggunakan opsi yang kedua saja karena lebih sederhana.
Langkah berikutnya
Analisis berskala lebih besar
Kami telah menerapkan strategi terbaik yang tercantum di atas di Chrome, sehingga kami bisa mendapatkan data tentang penggunaan sebenarnya untuk sekumpulan situs yang jauh lebih besar. Kami berencana menggunakan pendekatan serupa untuk memeringkatkan situs berdasarkan skor metriknya untuk melakukan analisis skala lebih besar:
- Memberi peringkat semua situs menurut CLS, dan berdasarkan setiap kandidat metrik baru.
- Situs mana yang diberi peringkat paling berbeda menurut CLS dan setiap kandidat? Apakah kami menemukan sesuatu yang tidak terduga saat kami melihat situs-situs ini?
- Apa perbedaan terbesar di antara kandidat metrik baru tersebut? Apakah ada perbedaan yang menonjol sebagai kelebihan atau kekurangan dari kandidat tertentu?
- Ulangi analisis di atas, tetapi kelompokkan menurut waktu yang dihabiskan untuk setiap pemuatan halaman. Apakah kita melihat peningkatan yang diharapkan untuk pemuatan halaman berdurasi 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 terkait pendekatan ini. Beberapa hal yang perlu diingat saat mempertimbangkan pendekatan baru:
Aspek layanan yang tidak berubah
Kami ingin mengklarifikasi bahwa banyak hal tidak akan berubah dengan pendekatan baru:
- 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 mendasari di rekaman aktivitas Chrome yang digunakan alat developer juga akan tetap sama, sehingga rect 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 merangkum periode pergeseran tata letak sebagai rata-rata, dan strategi lainnya 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 hal yang lebih penting bagi developer.
Apakah menurut Anda jendela geser atau sesi lebih mudah dipahami? Apakah perbedaan itu penting bagi Anda?
Cara memberikan masukan
Anda dapat mencoba metrik pergeseran tata letak baru di situs mana pun menggunakan contoh penerapan JavaScript kami atau fork ekstensi Core Web Vitals kami.
Harap kirim masukan melalui email ke grup Google web-vitals-feedback kami, dengan subjek "[Layout Shift Metrics]" di baris subjek. Kami menantikan pendapat Anda.