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 individual dijumlahkan selama masa aktif halaman.
Meskipun semua pergeseran tata letak merupakan pengalaman pengguna yang buruk, perubahan tersebut akan menambah jumlah halaman yang dibuka lebih lama. Karena itulah Tim Metrik Kecepatan Chrome ingin meningkatkan metrik CLS agar lebih netral terhadap waktu yang dihabiskan di halaman.
Penting bahwa metrik berfokus pada pengalaman pengguna sepanjang masa aktif halaman penuh, karena kami menemukan bahwa pengguna sering memiliki pengalaman negatif setelah dimuat, saat men-scroll atau menavigasi halaman. Namun, kami telah mendengar kekhawatiran tentang bagaimana pengaruh hal ini terhadap halaman yang berumur panjang—halaman yang biasanya dibuka pengguna dalam waktu yang lama. Ada beberapa jenis halaman yang cenderung tetap terbuka lebih lama; beberapa yang paling umum adalah aplikasi media sosial dengan aplikasi web satu halaman dan scrolling tanpa batas.
Analisis internal halaman yang aktif dalam waktu lama dengan skor CLS yang 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 milidetik untuk mengupdate UI sebagai respons terhadap interaksi pengguna, tanpa jenis placeholder atau pola kerangka apa pun.
Meskipun kami mendorong developer untuk meningkatkan kualitas pengalaman pengguna tersebut, kami juga berupaya meningkatkan metrik ini dan mencari masukan terkait kemungkinan pendekatan.
Bagaimana kita memutuskan apakah sebuah metrik baru lebih baik?
Sebelum terjun ke desain metrik, kami ingin memastikan bahwa kami telah mengevaluasi ide-ide kami di berbagai halaman web dunia nyata dan kasus penggunaan. Sebagai permulaan, kami merancang sebuah studi pengguna kecil.
Pertama, kami merekam video dan rekaman aktivitas Chrome dari 34 perjalanan pengguna di berbagai situs. Dalam memilih {i>user journey<i}, kami ingin 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.
- Beragam jumlah dan intensitas pergeseran tata letak individual di situs.
- Hanya sedikit pengalaman negatif di situs ini selain pergeseran tata letak.
Kami meminta 41 rekan kerja untuk menonton dua video sekaligus, menilai pasangan mana yang lebih baik dalam hal pergeseran tata letak. Dari peringkat ini, kami membuat urutan peringkat situs yang ideal. Hasil peringkat pengguna mengkonfirmasi kecurigaan kami bahwa kolega kami, seperti kebanyakan pengguna, sangat frustrasi dengan pergeseran tata letak setelah pemuatan, terutama selama scrolling 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 beserta video, kami memiliki semua detail tentang setiap pergeseran tata letak di setiap perjalanan pengguna. Kami menggunakannya untuk menghitung nilai metrik untuk setiap ide untuk setiap perjalanan pengguna. Hal ini memungkinkan kami untuk melihat bagaimana setiap varian metrik memberi peringkat perjalanan pengguna, dan seberapa berbedanya masing-masing dari peringkat ideal.
Ide metrik apa yang kami uji?
Strategi jendela
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 bersama. Untuk mencapainya, kami melihat tiga pendekatan windowing:
- Jendela jatuh
- Jendela geser
- Jendela sesi
Dalam setiap contoh ini, halaman memiliki pergeseran tata letak dengan tingkat keparahan yang berbeda-beda dari waktu ke waktu. Setiap batang biru mewakili satu pergeseran tata letak, dan panjangnya mewakili skor pergeseran tersebut. Gambar mengilustrasikan cara strategi windowing yang berbeda mengelompokkan pergeseran tata letak dari waktu ke waktu.
Jendela jatuh
Pendekatan paling sederhana adalah memecah halaman menjadi jendela-jendela yang berukuran sama. Ini disebut {i>tumbling window<i}. Anda akan melihat di atas bahwa bilah keempat benar-benar terlihat harus dikelompokkan ke dalam jendela yang bergerak kedua, tetapi karena jendela berukuran tetap, bilah ini 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 lain dari batas jendela yang berpindah.
Jendela geser
Pendekatan yang memungkinkan kita melihat lebih banyak kemungkinan pengelompokan dengan panjang yang sama adalah dengan terus memperbarui periode potensial dari waktu ke waktu. Gambar di atas menampilkan satu jendela geser pada satu waktu, tetapi kita dapat melihat semua kemungkinan jendela geser atau subkumpulan jendela tersebut untuk membuat metrik.
Jendela sesi
Jika kita ingin berfokus pada identifikasi area halaman dengan beberapa pergeseran tata letak, kita dapat memulai setiap jendela secara bergantian, dan terus mengembangkannya sampai kita menemukan celah dengan ukuran tertentu di antara pergeseran tata letak. Pendekatan ini mengelompokkan pergeseran tata letak bersama-sama, dan mengabaikan sebagian besar pengalaman pengguna yang tidak berubah. Salah satu potensi masalah adalah jika tidak ada celah dalam pergeseran tata letak, metrik berdasarkan periode sesi dapat bertambah 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 seberapa besar 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 mencoba berbagai cara untuk meringkas jendela yang berbeda.
Persentil
Kami melihat nilai periode maksimum, serta persentil ke-95, persentil ke-75, dan median.
Biasa
Kami melihat nilai jendela rata-rata.
Anggaran
Kami bertanya-tanya apakah mungkin ada skor pergeseran tata letak minimum yang tidak akan diperhatikan pengguna, dan kami hanya dapat menghitung pergeseran tata letak pada "anggaran" tersebut dalam skor. Jadi, untuk berbagai kemungkinan nilai "anggaran", kami melihat persentase perubahan terhadap anggaran, dan skor total pergeseran terhadap anggaran.
Strategi lainnya
Kita juga melihat banyak strategi yang tidak melibatkan jendela, seperti total pergeseran tata letak dibagi dengan waktu di halaman, dan rata-rata dari N masing-masing pergeseran yang terburuk.
Hasil awal
Secara keseluruhan, kami menguji 145 definisi metrik yang berbeda berdasarkan permutasi dari ide di atas. Untuk setiap metrik, kami memberi peringkat pada semua perjalanan pengguna berdasarkan skornya pada metrik, lalu memberi peringkat pada metrik berdasarkan seberapa dekat metrik tersebut dengan peringkat ideal.
Untuk mendapatkan dasar pengukuran, kami juga memberi peringkat semua situs menurut skor CLS-nya saat ini. CLS berada di posisi ke-32, imbang dengan 13 strategi lainnya, jadi lebih baik daripada sebagian besar permutasi strategi di atas. Untuk memastikan hasilnya bermakna, kami juga menambahkan tiga urutan acak. Seperti yang diharapkan, urutan acak bekerja lebih buruk daripada setiap strategi yang diuji.
Untuk memahami apakah ada overfitting untuk set data, setelah analisis, kami mencatat 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 berbeda dalam peringkat.
Strategi terbaik
Saat memberi peringkat strategi, kami menemukan bahwa tiga jenis strategi berada di urutan teratas. Masing-masing memiliki performa yang kurang-lebih sama, jadi kami berencana melanjutkan dengan analisis yang lebih mendalam terhadap ketiganya. Kami juga ingin mendengar masukan developer untuk memahami apakah ada faktor di luar pengalaman pengguna yang harus kami pertimbangkan saat memutuskan di antara faktor-faktor tersebut. (Lihat cara memberikan masukan di bawah ini.)
Persentil tinggi dari jendela panjang
Beberapa strategi windowing berfungsi baik dengan ukuran jendela 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 pada persentil ke-95 dan maksimum.
Tetapi untuk ukuran jendela besar seperti 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 jeda 5 detik di antara periode tersebut berperforma sangat baik. Strategi ini memiliki beberapa karakteristik menarik:
- Jika halaman tidak memiliki celah di antara pergeseran tata letak, halaman tersebut akan menjadi satu periode sesi yang panjang dengan skor yang sama persis dengan CLS saat ini.
- Metrik ini tidak memperhitungkan waktu tidak ada aktivitas secara langsung; metrik ini hanya melihat pergeseran yang terjadi di halaman, dan bukan pada titik waktu saat halaman tidak digeser.
Persentil tinggi dari periode pendek
Jendela geser maksimum 300 md memiliki peringkat sangat tinggi, serta persentil ke-95. Untuk ukuran jendela yang lebih pendek, interpolasi persentil lebih kecil daripada ukuran jendela yang lebih besar, tetapi kami juga mengkhawatirkan jendela geser "berulang"—jika satu set pergeseran tata letak terjadi dalam dua frame, ada beberapa jendela 300 md yang menyertakannya. Mengambil nilai maksimum jauh lebih jelas dan lebih mudah daripada mengambil persentil ke-95. Sekali lagi kami memutuskan untuk melanjutkan dengan 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 tidak berjalan dengan baik. Tidak ada ringkasan median atau persentil ke-75 dari strategi windowing apa pun yang memberi peringkat situs dengan baik. Jumlah tata letak juga tidak bergeser dari waktu ke waktu.
Kami mengevaluasi sejumlah "anggaran" yang berbeda untuk pergeseran tata letak yang dapat diterima:
- Persentase pergeseran tata letak di atas beberapa anggaran. Untuk berbagai anggaran, semua peringkat ini cukup buruk.
- Pergeseran tata letak rata-rata di atas beberapa yang berlebihan. Sebagian besar variasi pada strategi ini bekerja dengan buruk, tetapi kelebihan rata-rata selama sesi panjang dengan celah besar hampir sama dengan rata-rata jendela sesi dengan celah yang panjang. Kami memutuskan untuk menggunakan 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 dunia nyata untuk kumpulan situs yang jauh lebih besar. Kami berencana menggunakan pendekatan yang sama dalam memberi peringkat situs berdasarkan skor metriknya untuk melakukan analisis berskala lebih besar:
- Beri peringkat semua situs menurut CLS dan menurut setiap kandidat metrik baru.
- Situs mana yang diberi peringkat paling berbeda menurut CLS dan setiap kandidat? Apakah kami menemukan sesuatu yang tidak terduga saat melihat situs ini?
- Apa perbedaan terbesar antara kandidat metrik baru? Apakah ada perbedaan yang menonjol sebagai kelebihan atau kekurangan dari kandidat tertentu?
- Ulangi analisis di atas, tetapi pengelompokan berdasarkan waktu yang dihabiskan untuk setiap pemuatan halaman. Apakah kami melihat peningkatan yang diharapkan untuk pemuatan halaman yang berlangsung lama dengan pergeseran tata letak yang dapat diterima? Apakah kami melihat hasil yang tidak diharapkan untuk halaman dengan masa aktif singkat?
Masukan tentang 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 tidak akan berubah dengan pendekatan baru:
- Tidak ada ide metrik kami yang mengubah cara skor pergeseran tata letak untuk setiap frame dihitung, hanya dengan cara kami meringkas beberapa frame. Artinya, JavaScript API untuk pergeseran tata letak akan tetap sama, dan peristiwa pokok di rekaman aktivitas Chrome yang digunakan alat developer juga akan tetap sama, sehingga persegi panjang pergeseran tata letak di alat seperti WebPageTest dan Chrome DevTools akan terus berfungsi dengan cara yang sama.
- Kami akan terus bekerja keras agar metrik mudah diterapkan oleh developer, termasuk di library web-vitals, mendokumentasikannya di web.dev, dan melaporkannya di alat developer kami, seperti Lighthouse.
Kompromi antarmetrik
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, nilai rata-rata kemungkinan akan melaporkan nilai yang lebih representatif, tetapi secara umum developer akan lebih mudah bertindak di satu jendela—mereka dapat mencatat saat hal itu terjadi, elemen yang bergeser, dan seterusnya. Kami mengharapkan 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 atau fork ekstensi Data Web Inti kami.
Kirimkan masukan melalui email ke grup Google web-vitals-feedback kami, dengan "[Layout Shift Metrics]" di baris subjek. Kami sangat menantikan pendapat Anda.