Memecahkan Masalah CLS Di Situs Web E-Commerce Bertenaga Next.js (Studi Kasus)

Fairprice adalah salah satu toko grosir online terbesar di Singapura. Kami terus mencari peluang untuk meningkatkan pengalaman belanja online pengguna. Kinerja adalah salah satu aspek inti untuk memastikan pengguna kami mendapatkan pengalaman pengguna yang menyenangkan terlepas dari perangkat atau koneksi jaringan mereka.

Ada banyak indikator kinerja utama (KPI) yang mengukur berbagai titik selama siklus hidup halaman web (seperti TTFB, domInteractive , dan onload ), tetapi metrik ini tidak mencerminkan bagaimana pengalaman pengguna akhir halaman.

Kami ingin menggunakan beberapa KPI yang sesuai dengan pengalaman aktual pengguna akhir sehingga kami tahu bahwa jika salah satu dari KPI tersebut tidak berkinerja baik, maka itu akan berdampak langsung pada pengalaman pengguna akhir. Kami menemukan bahwa metrik kinerja yang berpusat pada pengguna sangat cocok untuk tujuan ini.

Ada banyak metrik kinerja yang berpusat pada pengguna untuk mengukur berbagai titik dalam siklus hidup halaman seperti FCP, LCP, FID, CLS, dan sebagainya. Untuk studi kasus ini, kami terutama akan fokus pada CLS.

CLS mengukur skor total dari semua perubahan tata letak yang tidak terduga yang terjadi antara saat halaman mulai dimuat dan sampai dibongkar.

“

Oleh karena itu, memiliki nilai CLS yang rendah untuk sebuah halaman memastikan tidak ada perubahan tata letak acak yang menyebabkan frustrasi pengguna. Barry Pollard telah menulis artikel mendalam yang sangat bagus tentang CLS.

Bagaimana Kami Menemukan Masalah CLS Di Halaman Produk Kami

Kami menggunakan Lighthouse dan WebPagetest sebagai alat pengujian sintetis kami untuk kinerja untuk mengukur CLS. Kami juga menggunakan perpustakaan web-vitals untuk mengukur CLS bagi pengguna nyata. Selain itu, kami memeriksa bagian Laporan Vital Web Inti Google Search Console untuk mendapatkan gambaran tentang potensi masalah CLS di halaman mana pun kami. Saat menjelajahi bagian laporan, kami menemukan banyak URL dari halaman detail produk memiliki nilai CLS lebih dari 0,1 yang mengisyaratkan ada beberapa peristiwa perubahan tata letak utama yang terjadi di sana.

Men-debug Masalah CLS Menggunakan Alat Berbeda

Sekarang kita tahu bahwa ada masalah CLS pada halaman detail produk, langkah selanjutnya adalah mengidentifikasi elemen mana yang menyebabkannya. Pada awalnya, kami memutuskan untuk menjalankan beberapa pengujian menggunakan alat pengujian sintetis.

Jadi kami menjalankan mercusuar untuk memeriksa apakah mercusuar dapat menemukan elemen apa pun yang dapat memicu perubahan tata letak besar, ia melaporkan CLS ke 0,004 yang cukup rendah.

Halaman laporan Lighthouse memiliki bagian diagnostik. Itu juga tidak menunjukkan elemen apa pun yang menyebabkan nilai CLS tinggi.

Kemudian kami menjalankan WebpageTest dan memutuskan untuk memeriksa tampilan strip film:

Kami menemukan fitur ini sangat membantu karena kami dapat mengetahui elemen mana pada titik waktu mana yang menyebabkan tata letak bergeser. Tetapi ketika kami menjalankan pengujian untuk melihat apakah ada perubahan tata letak yang disorot, tidak ada yang berkontribusi pada LCS besar:

Keunikan dengan CLS adalah bahwa ia mencatat skor pergeseran tata letak individu selama seluruh umur halaman dan menambahkannya.

“

Catatan : Cara pengukuran CLS telah diubah sejak Juni 2021.

Karena Lighthouse dan WebpageTest tidak dapat mendeteksi elemen apa pun yang memicu perubahan tata letak utama yang berarti hal itu terjadi setelah pemuatan halaman awal mungkin karena beberapa tindakan pengguna. Jadi kami memutuskan untuk menggunakan ekstensi Google Chrome Web Vitals karena dapat merekam CLS pada halaman saat pengguna berinteraksi dengannya. Setelah melakukan tindakan yang berbeda, kami menemukan skor pergeseran tata letak semakin meningkat ketika pengguna menggunakan fitur pembesaran gambar.

Untuk memverifikasi silang jika pergeseran tata letak terjadi saat gerakan mouse pada gambar, kami menggunakan cuplikan kode di bawah ini dari https://web.dev/cls/ yang menambahkan console.log saat terjadi pergeseran tata letak:

 let cls = 0; new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { if (!entry.hadRecentInput) { cls += entry.value; console.log('Current CLS value:', cls, entry); } }}).observe({type: 'layout-shift', buffered: true});

Pada penyelidikan lebih lanjut, kami menemukan bahwa ASDA menghadapi masalah serupa dan mengangkatnya untuk chrome.

Akar masalah

Pada halaman detail produk, pengguna dapat menggerakkan mouse di atas gambar produk untuk melihat bagian gambar yang diperbesar berdampingan dengan gambar produk yang sebenarnya karena video ini menunjukkan dengan tepat apa yang sedang kita bicarakan.

Fitur pembesaran gambar membantu pengguna kami untuk mendapatkan tampilan dan nuansa produk serta memastikan bahwa itu adalah varian yang tepat dari produk yang ingin mereka beli.

Kami telah menggunakan perpustakaan react-image zoom untuk membangun fungsionalitas pembesaran gambar ini.

Pustaka Image Magnify biasanya memiliki lensa (kotak yang bergerak saat mouse bergerak di dalam gambar). Karena lensa ini mengubah posisi atas dan kirinya dengan gerakan mouse, lensa ini terdeteksi sebagai pergeseran tata letak yang memicu CLS. Kami memeriksa halaman perpustakaan serta perpustakaan reaksi serupa lainnya ( react-image-magnify , react-image-zoom , react-image-magnifiers ) dan menemukan bahwa semuanya menderita masalah CLS yang sama.

Bagaimana Kami Memperbaikinya

Kami memperhatikan bahwa react-image-zoom menggunakan perpustakaan js-image-zoom . Jadi kami harus memodifikasi perpustakaan js-image zoom untuk memperbaiki masalah ini.

Solusinya cukup mudah. Saat mouse bergerak pada gambar produk, elemen lensa gambar bergerak dengan mengubah posisi kiri dan atas. Untuk mengatasi masalah ini, kami menggunakan transform translate yang memindahkan elemen ke lapisan baru, yaitu setiap gerakan yang terjadi pada lapisan baru ini tidak menyebabkan pergeseran tata letak lagi:

Saya juga telah membuat PR ke repo asli sehingga pengembang lain yang menggunakan perpustakaan ini dapat menyingkirkan masalah CLS.

Dampak Perubahan

Setelah kode diterapkan ke produksi, CLS diperbaiki di halaman detail produk dan jumlah halaman yang terpengaruh dengan CLS berkurang 98%:

Karena kami menggunakan transform , ini juga membantu membuat gambar memperbesar pengalaman yang lebih mulus bagi pengguna.

Catatan : Paul Irish telah menulis artikel yang sangat bagus tentang topik ini.

Perubahan Kunci Lainnya yang Kami Buat Untuk CLS

Ada juga beberapa masalah lain yang kami hadapi melalui banyak halaman di situs web kami yang berkontribusi pada CLS. Mari kita lihat elemen dan komponen tersebut dan lihat bagaimana kami mencoba mengurangi pergeseran tata letak yang timbul darinya.

• Web-font:
  Kami telah memperhatikan bahwa pemuatan font yang terlambat menyebabkan frustrasi pengguna karena konten berkedip dan juga menyebabkan sejumlah perubahan tata letak. Untuk meminimalkan ini, kami telah melakukan beberapa perubahan:

  • Kami telah menghosting sendiri font tersebut alih-alih memuat dari CDN pihak ke-3.
  • Kami memuat font terlebih dahulu.
  • Kami menggunakan tampilan font opsional.

• Gambar-gambar:
  Nilai tinggi atau lebar yang hilang pada gambar menyebabkan elemen setelah gambar bergeser setelah gambar dimuat. Ini akhirnya menjadi kontributor utama CLS. Karena kami menggunakan Next.js, kami memanfaatkan komponen gambar bawaan yang disebut next/images . Komponen ini menggabungkan beberapa praktik terbaik terkait gambar. Itu dibangun di atas tag HTML <img> dan dapat membantu meningkatkan LCP dan CLS. Saya sangat merekomendasikan membaca RFC ini untuk mengetahui fitur utama dan keuntungan menggunakannya.

• Gulir Tak Terbatas:
  Di situs web kami, halaman daftar produk memiliki pengguliran tak terbatas. Jadi awalnya, ketika pengguna menggulir ke bagian bawah halaman, mereka melihat footer selama sepersekian detik sebelum kumpulan data berikutnya dimuat, ini menyebabkan perubahan tata letak. Untuk mengatasi ini kami mengambil beberapa langkah:

  • Kami memanggil API untuk memuat data bahkan sebelum pengguna mencapai bagian paling bawah dari daftar.
  • Kami telah memesan ruang yang cukup untuk status pemuatan dan kami menunjukkan kerangka produk selama status pemuatan. Jadi sekarang ketika pengguna menggulir, mereka tidak melihat footer selama sepersekian detik saat produk sedang dimuat.
    

Addy Osmani telah menulis artikel terperinci tentang pendekatan ini yang sangat saya sarankan untuk diperiksa.

Takeaways Kunci

• Sementara Lighthouse dan WebpageTest membantu menemukan masalah kinerja yang terjadi hingga pemuatan halaman, mereka tidak dapat mendeteksi masalah kinerja setelah pemuatan halaman.
• Ekstensi Web Vitals dapat mendeteksi perubahan CLS yang dipicu oleh interaksi pengguna, jadi jika halaman memiliki nilai CLS tinggi tetapi Lighthouse atau WebpageTest melaporkan CLS rendah, ekstensi Web Vitals dapat membantu menunjukkan masalah dengan tepat.
• Data Google Search Console didasarkan pada data pengguna nyata sehingga juga dapat menunjukkan potensi masalah kinerja yang terjadi kapan saja dalam siklus hidup halaman. Setelah masalah terdeteksi dan diperbaiki, memeriksa kembali bagian laporan dapat membantu memverifikasi keefektifan perbaikan kinerja. Perubahan tersebut tercermin dalam beberapa hari di bagian laporan vitals web.

Pikiran Akhir

Meskipun masalah CLS relatif lebih sulit untuk di-debug, menggunakan kombinasi alat yang berbeda hingga pemuatan halaman (Lighthouse, WebPageTest) dan ekstensi Web Vitals (setelah pemuatan halaman) dapat membantu kami menentukan masalahnya. Ini juga merupakan salah satu metrik yang sedang melalui banyak pengembangan aktif untuk mencakup berbagai skenario dan ini berarti bahwa cara pengukurannya akan diubah di masa mendatang. Kami mengikuti https://web.dev/evolving-cls/ untuk mengetahui tentang perubahan yang akan datang.

Adapun kami, kami terus bekerja untuk meningkatkan Vital Web Inti lainnya juga. Baru-baru ini, kami telah menerapkan pramuat gambar responsif dan mulai menyajikan gambar dalam format WebP yang membantu kami mengurangi 75% muatan gambar, mengurangi LCP sebesar 62%, dan Indeks Kecepatan sebesar 24%. Anda dapat membaca lebih detail tentang pengoptimalan untuk meningkatkan LCP dan Indeks Kecepatan atau mengikuti blog teknik kami untuk mengetahui tentang pekerjaan menarik lainnya yang sedang kami lakukan.

Kami ingin mengucapkan terima kasih kepada Alex Castle karena telah membantu kami men-debug masalah CLS di halaman produk dan menyelesaikan keanehan dalam implementasi next/images .