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 "diputar otomatis" atau dinavigasi secara manual oleh pengguna. Meskipun korsel dapat digunakan di tempat lain, korsel paling sering digunakan untuk menampilkan gambar, produk, dan promosi di halaman beranda.

Artikel ini membahas praktik terbaik performa dan UX untuk carousel.

Performa

Carousel yang diimplementasikan dengan baik, pada dasarnya, seharusnya memiliki dampak yang sangat minimal atau tidak mempengaruhi performa. Namun, carousel sering kali berisi aset media yang besar. Aset besar dapat memengaruhi performa, terlepas dari apakah aset tersebut ditampilkan di carousel atau di tempat lain.

• LCP (Largest Contentful Paint)

  Carousel besar di atas lipatan sering kali berisi elemen LCP halaman, sehingga dapat memberikan dampak signifikan pada LCP. Dalam skenario ini, mengoptimalkan carousel dapat meningkatkan LCP secara signifikan. Untuk penjelasan mendalam tentang cara kerja pengukuran LCP di halaman yang berisi carousel, lihat bagian Pengukuran LCP untuk carousel.

• INP (Interaksi ke Next Paint)

  Carousel memiliki persyaratan JavaScript minimal sehingga tidak akan memengaruhi responsivitas halaman. Jika Anda menemukan bahwa carousel situs Anda memiliki skrip yang berjalan lama, sebaiknya ganti alat carousel Anda.

• CLS (Pergeseran Tata Letak Kumulatif)

  Sejumlah besar carousel menggunakan animasi yang tidak digabungkan dan tersendat yang dapat berkontribusi pada CLS. Di halaman dengan carousel yang diputar otomatis, hal ini berpotensi menyebabkan CLS yang tidak terbatas. Jenis CLS ini biasanya tidak terlihat di mata manusia, sehingga masalah mudah diabaikan. Untuk menghindari masalah 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 performa terbesar yang harus dihindari saat menggunakan carousel. Hal ini menunda pemuatan gambar dan dapat berdampak negatif pada LCP.

Anjuran

<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>

Larangan

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, lalu secara bertahap meningkatkannya untuk menyertakan kontrol navigasi dan konten tambahan. Teknik ini paling berlaku untuk lingkungan tempat Anda memiliki perhatian pengguna yang berkepanjangan—hal ini memberi konten tambahan waktu untuk dimuat. Di lingkungan seperti halaman beranda, tempat pengguna mungkin hanya bertahan selama satu atau dua detik, hanya memuat satu gambar mungkin sama efektifnya.

Menghindari pergeseran tata letak

Catatan: Chrome 88-90 mengirimkan berbagai perbaikan bug terkait cara penghitungan pergeseran tata letak. Banyak dari perbaikan bug ini relevan dengan carousel. Sebagai hasil dari perbaikan ini, situs akan melihat skor pergeseran tata letak terkait carousel yang lebih rendah di Chrome versi terbaru.

Transisi slide dan kontrol navigasi adalah dua sumber pergeseran tata letak yang paling umum di carousel:

• Transisi slide: Pergeseran tata letak yang terjadi selama transisi slide biasanya disebabkan oleh pembaruan properti yang menyebabkan tata letak elemen DOM. Contoh beberapa properti ini meliputi: left, top, width, dan marginTop. Untuk menghindari pergeseran tata letak, gunakan properti CSS transform untuk mentransisikan elemen ini. Demo ini menunjukkan cara menggunakan transform untuk mem-build carousel dasar.

• Kontrol navigasi: Memindahkan atau menambahkan/menghapus kontrol navigasi carousel dari DOM dapat menyebabkan pergeseran tata letak, bergantung pada cara perubahan ini diterapkan. Carousel yang menunjukkan perilaku ini biasanya melakukannya sebagai respons terhadap pengarahan kursor pengguna.

Berikut adalah beberapa poin umum yang membingungkan terkait pengukuran CLS untuk carousel:

• Carousel putar otomatis: Transisi slide adalah sumber paling umum dari pergeseran tata letak terkait carousel. Dalam carousel non-putar otomatis, pergeseran tata letak ini biasanya terjadi dalam waktu 500 md setelah interaksi pengguna dan karenanya tidak diperhitungkan dalam Cumulative Layout Shift (CLS). Namun, untuk carousel putar otomatis, pergeseran tata letak ini tidak hanya berpotensi dihitung dalam CLS, tetapi juga dapat diulang tanpa batas. Oleh karena itu, sangat penting untuk memverifikasi bahwa carousel putar otomatis bukan sumber pergeseran tata letak.

• Scroll: Beberapa carousel memungkinkan pengguna menggunakan scroll untuk menavigasi slide carousel. Jika posisi awal elemen berubah, tetapi offset scroll-nya (yaitu, scrollLeft atau scrollTop) berubah dengan jumlah yang sama (tetapi dalam arah yang berlawanan), hal ini tidak dianggap sebagai pergeseran tata letak asalkan terjadi di frame yang sama.

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

Menggunakan teknologi modern

Banyak situs menggunakan library JavaScript pihak ketiga untuk mengimplementasikan carousel. Jika saat ini Anda menggunakan alat carousel lama, Anda mungkin dapat meningkatkan performa dengan beralih ke alat yang lebih baru. Alat yang lebih baru cenderung menggunakan API yang lebih efisien dan cenderung tidak memerlukan dependensi tambahan seperti jQuery.

Namun, bergantung pada jenis carousel yang Anda buat, Anda mungkin tidak memerlukan JavaScript sama sekali. Scroll Snap API baru memungkinkan penerapan transisi seperti carousel hanya menggunakan HTML dan 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 (CSS Tricks)
• Cara Membuat Carousel Khusus CSS (Trik CSS)

Mengoptimalkan konten carousel

Korsel sering berisi beberapa gambar terbesar di situs, sehingga akan sangat bermanfaat untuk memastikan bahwa gambar-gambar tersebut dioptimalkan sepenuhnya. Memilih format gambar dan level kompresi yang tepat, menggunakan CDN gambar, dan menggunakan srcset untuk menayangkan beberapa versi gambar adalah semua teknik yang dapat mengurangi ukuran transfer gambar.

Pengukuran performa

Bagian ini membahas pengukuran LCP sehubungan dengan carousel. Meskipun carousel diperlakukan tidak berbeda dengan elemen UX lainnya selama penghitungan LCP, mekanisme penghitungan LCP untuk carousel yang diputar otomatis adalah sumber kebingungan yang umum.

Pengukuran LCP untuk carousel

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

• LCP mempertimbangkan elemen halaman saat digambar ke frame. Kandidat baru untuk elemen LCP tidak lagi dipertimbangkan setelah pengguna berinteraksi (mengetuk, men-scroll, atau menekan tombol) dengan halaman. Dengan demikian, setiap slide dalam carousel yang diputar otomatis berpotensi menjadi elemen LCP akhir—sedangkan dalam carousel statis, hanya slide pertama yang akan menjadi kandidat LCP potensial.
• Jika dua gambar berukuran sama dirender, gambar pertama akan dianggap sebagai elemen LCP. Elemen LCP hanya diperbarui jika kandidat LCP lebih besar dari elemen LCP saat ini. Jadi, jika semua elemen carousel memiliki ukuran 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". Jadi, jika carousel pemutaran otomatis menampilkan gambar dengan ukuran yang konsisten, tetapi berisi gambar dengan ukuran intrinsik yang bervariasi dan lebih kecil dari ukuran tampilan, elemen LCP dapat berubah saat slide baru ditampilkan. Dalam hal ini, jika semua gambar ditampilkan dengan ukuran yang sama, gambar dengan ukuran intrinsik terbesar akan dianggap sebagai elemen LCP. Agar LCP tetap rendah, Anda harus memastikan bahwa semua item dalam carousel yang diputar otomatis memiliki ukuran intrinsik yang sama.

Perubahan pada penghitungan LCP untuk carousel di Chrome 88

Mulai Chrome 88, gambar yang kemudian dihapus dari DOM dianggap sebagai potensi terbesar contentful paint. Sebelum Chrome 88, gambar ini dikecualikan dari pertimbangan. Untuk situs yang menggunakan carousel yang diputar otomatis, perubahan definisi ini akan memiliki dampak netral atau positif pada skor LCP.

Perubahan ini dibuat sebagai respons terhadap pengamatan bahwa banyak situs mengimplementasikan transisi carousel dengan menghapus gambar yang sebelumnya ditampilkan dari hierarki DOM. Sebelum Chrome 88, setiap kali slide baru ditampilkan, penghapusan elemen sebelumnya akan memicu update LCP. Perubahan ini hanya memengaruhi carousel yang diputar otomatis. Secara definisi, potensi proses rendering konten terbesar hanya dapat terjadi sebelum pengguna pertama kali berinteraksi dengan halaman.

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. Artinya, untuk kasus penggunaan carousel, gambar akan dimuat sebelum terlihat di area pandang. Artinya, pemuatan gambar cenderung tidak akan terlihat oleh pengguna, tetapi dengan mengorbankan lebih banyak download. Gunakan demo Pemuatan Lambat Horizontal untuk membandingkan perilaku di Chrome dibandingkan Safari dan Firefox.

Pertimbangan lainnya

Bagian ini membahas praktik terbaik UX dan produk yang harus Anda ingat saat menerapkan carousel. Carousel harus mendorong sasaran bisnis Anda dan menyajikan konten dengan cara yang mudah dijelajahi dan dibaca.

Praktik terbaik navigasi

Menyediakan kontrol navigasi yang jelas

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

Menunjukkan progres navigasi

Kontrol navigasi carousel harus memberikan konteks tentang jumlah total slide dan progres pengguna di dalamnya. Informasi ini memudahkan pengguna untuk membuka slide tertentu dan memahami konten mana yang telah dilihat. Dalam beberapa situasi, memberikan pratinjau konten mendatang—baik itu cuplikan slide berikutnya atau daftar thumbnail—juga dapat membantu dan meningkatkan engagement.

Mendukung gestur seluler

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

Memberikan jalur navigasi alternatif

Karena sebagian besar pengguna tidak mungkin berinteraksi dengan semua konten carousel, konten yang ditautkan oleh slide carousel harus dapat diakses dari jalur navigasi lainnya.

Praktik terbaik keterbacaan

Jangan gunakan pemutaran otomatis

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

Jadi, jarang sekali putar otomatis menjadi pilihan yang baik. Jika konten penting, tidak menggunakan pemutaran otomatis akan memaksimalkan eksposurnya; jika konten carousel tidak penting, penggunaan pemutaran otomatis akan mengurangi konten yang lebih penting. Selain itu, carousel yang diputar otomatis mungkin sulit dibaca (dan juga mengganggu). Orang membaca dengan kecepatan yang berbeda, sehingga jarang sekali carousel bertransisi secara konsisten pada waktu yang "tepat" 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 slide harus mempertimbangkan konten slide-semakin banyak teks dalam suatu slide, semakin lama konten tersebut harus ditampilkan di layar.

Pisahkan teks dan gambar

Konten teks carousel sering kali "dimasukkan" ke dalam file gambar yang sesuai, bukan ditampilkan secara terpisah menggunakan markup HTML. Pendekatan ini buruk untuk aksesibilitas, pelokalan, dan kecepatan kompresi. Hal ini juga mendorong pendekatan sapujagad untuk pembuatan aset. Namun, pemformatan gambar dan teks yang sama jarang dapat dibaca secara sama di format desktop dan seluler.

Membuat perintah yang ringkas

Anda hanya memiliki waktu beberapa detik untuk menarik perhatian pengguna. Teks yang singkat dan langsung ke intinya akan meningkatkan peluang pesan Anda tersampaikan.

Praktik terbaik produk

Carousel berfungsi dengan baik dalam situasi saat menggunakan ruang vertikal tambahan untuk menampilkan konten tambahan bukanlah sebuah opsi. Korsel di halaman produk sering kali menjadi contoh yang baik untuk kasus penggunaan ini.

Namun, carousel tidak selalu digunakan secara efektif.

• Carousel, terutama jika berisi promosi atau maju secara otomatis, mudah disalahartikan sebagai iklan oleh pengguna. Pengguna cenderung mengabaikan iklan—sebuah fenomena yang dikenal sebagai kebutaan banner.
• Korsel sering digunakan untuk menenangkan beberapa departemen dan menghindari pengambilan keputusan tentang prioritas bisnis. Akibatnya, carousel dapat dengan mudah berubah menjadi tempat pembuangan konten yang tidak efektif.

Menguji asumsi

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

Relevan

Carousel berfungsi paling baik jika berisi konten yang menarik dan relevan yang ditampilkan dengan konteks yang jelas. Jika konten tidak menarik pengguna di luar carousel, menempatkannya di carousel tidak akan meningkatkan performanya. Jika Anda harus menggunakan carousel, prioritaskan konten dan pastikan setiap slide cukup relevan sehingga pengguna ingin mengklik ke slide berikutnya.