Praktik terbaik untuk carousel

Optimalkan carousel untuk performa dan kegunaan.

Katie Hempenius

{i>Carousel<i} adalah komponen UX yang menampilkan konten dalam cara seperti {i>slideshow<i}. Carousel dapat "putar otomatis" atau dinavigasi secara manual oleh pengguna. Meskipun korsel dapat digunakan di tempat lain, mereka paling sering digunakan untuk menampilkan gambar, produk, dan promosi di beranda.

Artikel ini membahas kinerja dan praktik terbaik UX untuk korsel.

Performa

{i>Carousel<i} yang diterapkan dengan baik, dengan sendirinya, harus memiliki sedikit atau tidak ada dampak pada performa. Namun, carousel sering kali berisi aset media berukuran besar. Aset besar dapat memengaruhi performa, terlepas dari apakah aset tersebut ditampilkan di korsel atau di tempat lain.

• LCP (Largest Contentful Paint)

  Carousel besar di paruh atas sering berisi elemen LCP halaman, dan sehingga dapat berdampak signifikan pada LCP. Dalam skenario ini, mengoptimalkan carousel dapat meningkatkan LCP secara signifikan. Untuk pembahasan mendalam penjelasan tentang cara kerja pengukuran LCP pada halaman yang berisi carousel, lihat pengukuran LCP untuk carousel bagian.

• INP (Interaksi ke Next Paint)

  Korsel memiliki persyaratan JavaScript minimal dan karenanya tidak boleh memengaruhi responsivitas halaman. Jika Anda menemukan bahwa {i>carousel<i} situs Anda memiliki skrip yang berjalan lama, sebaiknya Anda mempertimbangkan untuk mengganti alat carousel.

• CLS (Pergeseran Tata Letak Kumulatif)

  Jumlah korsel yang mengejutkan menggunakan animasi non-komposit dan tersendat yang dapat berkontribusi pada CLS. Pada halaman dengan korsel yang berputar otomatis, korsel ini memiliki berpotensi menyebabkan CLS tak terbatas. Jenis CLS ini biasanya tidak terlihat jelas mata manusia, yang membuat masalah menjadi mudah diabaikan. Untuk menghindari hal ini hindari penggunaan animasi non-gabungan di carousel Anda (misalnya, selama transisi slide).

Praktik terbaik performa

Memuat konten carousel menggunakan HTML

Konten carousel harus dimuat melalui markup HTML halaman sehingga dapat ditemukan oleh browser di awal proses pemuatan halaman. Menggunakan JavaScript untuk memulai pemuatan konten carousel mungkin merupakan satu-satunya kesalahan kinerja yang harus dihindari saat menggunakan korsel. Hal ini akan menunda pemuatan gambar dan dapat berdampak negatif terhadap LCP.

<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>

const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

Untuk pengoptimalan carousel lanjutan, pertimbangkan untuk memuat slide pertama secara statis, kemudian meningkatkannya secara bertahap untuk menyertakan kontrol navigasi dan saat ini. Teknik ini paling sesuai dengan lingkungan di mana Anda memiliki perhatian pengguna yang lama—ini memberi waktu tambahan untuk memuat konten. Di beberapa lingkungan seperti laman beranda, di mana pengguna mungkin hanya menunggu sebentar atau dua, hanya memuat satu gambar mungkin sama efektifnya.

Menghindari pergeseran tata letak

Transisi slide dan kontrol navigasi adalah dua sumber paling umum dari pergeseran tata letak dalam {i>carousel<i}:

• Transisi slide: Pergeseran tata letak yang terjadi selama transisi slide adalah biasanya disebabkan oleh pembaruan properti yang memicu tata letak elemen DOM. Contoh beberapa properti ini mencakup: left, top, width, dan marginTop. Untuk menghindari pergeseran tata letak, gunakan CSS. transform untuk mentransisikan elemen-elemen ini. Ini demo menunjukkan cara menggunakan transform untuk membuat {i>carousel<i} dasar.

• Kontrol navigasi: Memindahkan atau menambahkan/menghapus navigasi carousel dari DOM dapat menyebabkan pergeseran tata letak bergantung pada bagaimana perubahan ini diimplementasikan. Korsel yang menunjukkan perilaku ini biasanya melakukannya dalam respons terhadap pengarahan kursor pengguna.

Berikut adalah beberapa titik kebingungan umum terkait pengukuran CLS untuk korsel:

• Carousel putar otomatis: Transisi slide adalah sumber paling umum pergeseran tata letak terkait carousel. Dalam carousel non-putar otomatis, tata letak ini akan bergeser biasanya terjadi dalam 500 md setelah interaksi pengguna, dan oleh karena itu, menuju Pergeseran Tata Letak Kumulatif (CLS). Namun, untuk carousel putar otomatis, pergeseran tata letak ini berpotensi tidak hanya dihitung terhadap CLS - tetapi juga bisa berulang tanpa batas. Dengan demikian, sangat penting untuk memverifikasi bahwa carousel putar otomatis bukan sumber tata letak {i>shift<i}.

• Men-scroll: Beberapa carousel memungkinkan pengguna menggunakan scroll untuk menjelajahi {i>carousel<i}. Jika posisi awal elemen berubah tetapi offset scroll-nya (yakni, scrollLeft atau scrollTop) perubahan dengan jumlah yang sama (tetapi dalam arah yang berlawanan). Hal ini tidak dianggap sebagai pergeseran tata letak asalkan mereka terjadi di {i>frame<i} yang sama.

Untuk informasi selengkapnya tentang pergeseran tata letak, lihat Men-debug tata letak shift.

Menggunakan teknologi modern

Banyak situs menggunakan library JavaScript pihak ketiga untuk menerapkan korsel. Jika saat ini Anda menggunakan alat {i>carousel<i} yang lebih lama, Anda mungkin meningkatkan performa dengan beralih ke alat yang lebih baru. {i>Tool<i} yang lebih baru cenderung menggunakan API yang lebih efisien dan cenderung tidak memerlukan dependensi tambahan seperti jQuery.

Namun, tergantung pada jenis {i>carousel<i} yang Anda bangun, Anda mungkin tidak perlu menggunakan JavaScript. Tombol Scroll baru API Snap memungkinkan implementasi transisi seperti korsel hanya menggunakan HTML dan di CSS.

Berikut beberapa referensi tentang penggunaan scroll-snap yang mungkin berguna bagi Anda:

• Membuat komponen Stories (web.dev)
• Gaya web generasi berikutnya: snap scroll (web.dev)
• Carousel Khusus CSS (Trik CSS)
• Cara Membuat Carousel Khusus CSS (Trik CSS)

Optimalkan konten carousel

Korsel sering berisi beberapa gambar terbesar di situs, sehingga sepadan dengan waktu untuk memastikan gambar-gambar tersebut dioptimalkan sepenuhnya. Memilih tindakan yang tepat format gambar dan tingkat kompresi, menggunakan CDN gambar, dan menggunakan srcset untuk menayangkan beberapa gambar versi adalah semua teknik yang dapat mengurangi ukuran transfer gambar.

Pengukuran performa

Bagian ini membahas pengukuran LCP yang berkaitan dengan carousel. Meskipun carousel diperlakukan tidak berbeda dengan elemen UX lainnya selama LCP otomatis, mekanisme penghitungan LCP untuk carousel pemutaran otomatis adalah hal-hal yang menimbulkan kebingungan.

Pengukuran LCP untuk carousel

Berikut adalah poin-poin penting untuk memahami cara kerja penghitungan LCP untuk carousel:

• LCP mempertimbangkan elemen halaman saat digambar ke bingkai. Kandidat baru untuk elemen LCP tidak lagi dipertimbangkan setelah pengguna berinteraksi (mengetuk, menggulir, atau menekan tombol) dengan laman. Oleh karena itu, slide apa pun dalam mode putar otomatis carousel berpotensi menjadi elemen LCP akhir—sedangkan dalam model hanya carousel pertama yang akan menjadi kandidat LCP potensial.
• Jika dua gambar yang berukuran sama dirender, gambar pertama akan dianggap elemen LCP. Elemen LCP hanya diperbarui saat kandidat LCP sudah lebih besar dari elemen LCP saat ini. Sehingga, jika semua elemen {i>carousel<i} yang sama, elemen LCP harus menjadi gambar pertama yang ditampilkan.
• Saat mengevaluasi kandidat LCP, LCP mempertimbangkan "ukuran yang terlihat atau ukuran intrinsik, mana saja yang lebih kecil". Oleh karena itu, jika pemutaran otomatis korsel menampilkan gambar dengan ukuran yang konsisten, tetapi berisi gambar beragam intrinsik ukuran yang lebih kecil dari ukuran layar, elemen LCP dapat berubah sebagai slide ditampilkan. Dalam hal ini, jika semua gambar ditampilkan secara bersamaan gambar dengan ukuran intrinsik terbesar akan dianggap sebagai LCP . Untuk menjaga LCP tetap rendah, Anda harus memastikan bahwa semua item dalam {i>carousel<i} memiliki ukuran intrinsik yang sama.

Perubahan pada penghitungan LCP untuk carousel di Chrome 88

Mulai Chrome 88, gambar yang nantinya dihapus dari DOM dianggap sebagai potensi gambar Contentful Paint. Sebelum Chrome 88, gambar ini dikecualikan dari pertimbangan. Untuk situs yang menggunakan carousel putar otomatis, perubahan definisi ini akan memiliki dampak netral atau positif terhadap skor LCP.

Perubahan ini dilakukan sebagai respons terhadap pengamatan banyak situs menerapkan transisi {i> carousel <i}dengan menghapus gambar yang ditampilkan dari hierarki DOM. Sebelum Chrome 88, setiap kali slide disajikan, penghapusan elemen sebelumnya akan memicu LCP memperbarui. Perubahan ini hanya memengaruhi pemutaran otomatis carousel berdasarkan definisi, potensi {i>large contentful paint<i} hanya dapat terjadi sebelum pengguna pertama kali berinteraksi dengan kami.

Perubahan pada nilai minimum di Chrome 121

Chrome 121 mengubah perilaku untuk gambar scroll horizontal seperti carousel. Platform ini sekarang menggunakan nilai minimum yang sama seperti scroll vertikal. Ini berarti untuk kasus penggunaan carousel, gambar akan dimuat sebelum terlihat di area pandang. Ini berarti pemuatan gambar cenderung tidak terlihat oleh pengguna, tetapi mengakibatkan lebih banyak download. Gunakan demo Pemuatan Lambat Horizontal untuk membandingkan perilaku di Chrome dengan Safari dan Firefox.

Pertimbangan lainnya

Bagian ini membahas praktik terbaik UX dan produk yang harus Anda ikuti saat menerapkan carousel. {i>Carousel<i} harus memajukan tujuan bisnis Anda dan menyajikan konten dengan cara yang mudah dinavigasi dan dibaca.

Praktik terbaik navigasi

Memberikan kontrol navigasi yang jelas

Kontrol navigasi carousel harus mudah diklik dan sangat terlihat. Ini adalah sesuatu yang jarang dilakukan, kebanyakan korsel memiliki kontrol navigasi yang kecil dan halus. Perlu diingat bahwa satu warna atau gaya kontrol navigasi akan jarang berfungsi di semua situasi. Misalnya, tanda panah yang terlihat jelas pada latar belakang gelap mungkin sulit dilihat dengan latar belakang terang.

Menunjukkan progres navigasi

Kontrol navigasi {i>carousel<i} harus memberikan konteks tentang jumlah total {i>slide<i} dan tentang kemajuan pengguna melaluinya. Informasi ini memudahkan mengarahkan pengguna ke {i>slide<i} tertentu dan memahami konten mana yang dilihat sebelumnya. Dalam beberapa situasi, memberikan pratinjau baik berupa kutipan slide berikutnya atau daftar thumbnail juga membantu dan meningkatkan keterlibatan.

Mendukung gestur seluler

Di perangkat seluler, gestur geser harus didukung selain yang biasa kontrol navigasi (seperti tombol layar).

Menyediakan jalur navigasi alternatif

Karena tidak mungkin sebagian besar pengguna akan terlibat dengan semua konten korsel, konten yang ditautkan ke slide carousel harus dapat diakses dari navigasi lain .

Praktik terbaik keterbacaan

Jangan gunakan putar otomatis

Penggunaan putar otomatis menimbulkan dua masalah yang hampir paradoks: di layar animasi cenderung mengalihkan perhatian pengguna dan mengalihkan mata dari yang lebih penting content; secara bersamaan, karena pengguna sering mengaitkan animasi dengan iklan, mereka akan mengabaikan carousel yang diputar otomatis.

Oleh karena itu, putar otomatis jarang menjadi pilihan yang baik. Jika konten itu penting, bukan menggunakan putar otomatis akan memaksimalkan eksposur; jika konten korsel tidak penting, maka penggunaan putar otomatis akan mengurangi konten yang lebih penting. Selain itu, korsel yang diputar otomatis mungkin sulit dibaca (dan juga mengganggu). Orang yang membaca dengan kecepatan yang berbeda-beda, sehingga jarang ada korsel yang secara konsisten bertransisi dengan "kanan" untuk pengguna yang berbeda.

Idealnya, navigasi slide harus diarahkan oleh pengguna melalui kontrol navigasi. Jika Anda harus menggunakan putar otomatis, putar otomatis harus dinonaktifkan saat pengguna mengarahkan kursor. Selain itu, tingkat transisi {i>slide<i} harus mempertimbangkan konten {i>slide<i}-semakin banyak yang ada di dalam {i>slide<i}, semakin lama konten itu akan ditampilkan di layar.

Memisahkan teks dan gambar

Konten teks carousel sering kali "dimasukkan ke dalam" file gambar yang sesuai, bukan daripada ditampilkan secara terpisah menggunakan markup HTML. Pendekatan ini buruk bagi aksesibilitas, pelokalan, dan tingkat kompresi. Hal ini juga mendorong satu ukuran untuk semua untuk pembuatan aset. Namun, gambar dan teks yang sama formatnya jarang sama mudah dibaca di seluruh format desktop dan seluler.

Ringkas

Anda hanya memiliki waktu sepersekian detik untuk menarik perhatian pengguna. Video Shorts, teks yang tidak bertele-tele akan meningkatkan kemungkinan pesan Anda tersampaikan.

Praktik terbaik produk

Korsel bekerja dengan baik dalam situasi di mana menggunakan ruang vertikal tambahan untuk menampilkan konten tambahan bukanlah pilihan. Korsel di laman produk adalah contoh yang baik dari kasus penggunaan ini.

Namun, korsel tidak selalu digunakan secara efektif.

• Korsel, terutama jika mereka berisi promosi atau maju secara otomatis, mudah salah untuk iklan oleh pengguna. Pengguna cenderung mengabaikan iklan. Sebuah fenomena yang dikenal sebagai banner kebutaan.
• Korsel sering digunakan untuk menempatkan beberapa departemen dan menghindari keputusan tentang prioritas bisnis. Akibatnya, korsel dapat dengan mudah mengubah menjadi tempat pembuangan konten yang tidak efektif.

Uji asumsi Anda

Dampak bisnis korsel, terutama yang ada di beranda, harus dievaluasi dan diuji. Rasio klik-tayang carousel dapat membantu Anda menentukan apakah korsel dan isinya efektif.

Relevan

Korsel bekerja paling baik jika berisi konten menarik dan relevan yang disajikan dengan konteks yang jelas. Jika konten tidak melibatkan pengguna di luar korsel—menempatkannya di korsel tidak akan membuatnya berperforma lebih baik. Jika Anda harus menggunakan korsel, memprioritaskan konten, dan memastikan bahwa setiap {i>slide<i} memadai relevan yang ingin diklik pengguna ke {i>slide<i} berikutnya.