Praktik terbaik untuk carousel

Optimalkan carousel untuk performa dan kegunaan.

Katie Hempenius

Korsel adalah komponen UX yang menampilkan konten seperti {i>slideshow<i}. Korsel dapat "diputar otomatis" atau dinavigasi secara manual oleh pengguna. Meskipun dapat digunakan di tempat lain, carousel paling sering digunakan untuk menampilkan gambar, produk, dan promosi di halaman beranda.

Artikel ini membahas performa dan praktik terbaik UX untuk korsel.

Performa

Carousel yang diterapkan dengan baik pada dasarnya harus memiliki dampak yang sangat minimal atau tidak berdampak sama sekali terhadap 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 paruh atas sering kali berisi elemen LCP halaman, dan oleh karena itu, dapat memiliki dampak yang 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 dengan Next Paint)

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

• CLS (Pergeseran Tata Letak Kumulatif)

  Sejumlah carousel mengejutkan menggunakan animasi non-komposisi yang tersendat yang dapat berkontribusi pada CLS. Di halaman dengan carousel yang diputar otomatis, hal ini berpotensi menyebabkan CLS tak terbatas. Jenis CLS ini biasanya tidak terlihat oleh mata manusia, sehingga masalah ini mudah diabaikan. Untuk menghindari masalah ini, hindari penggunaan animasi non-komposisi di carousel Anda (misalnya, selama transisi slide).

Praktik terbaik performa

Memuat konten carousel menggunakan HTML

Konten carousel harus dimuat melalui markup HTML halaman agar 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 akan 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, sebaiknya muat slide pertama secara statis, lalu tingkatkan secara bertahap agar dapat menyertakan kontrol navigasi dan konten tambahan. Teknik ini paling sesuai untuk lingkungan tempat Anda memiliki perhatian yang lama dari pengguna—hal ini memberikan waktu bagi konten tambahan untuk dimuat. Di lingkungan seperti halaman beranda, tempat pengguna hanya dapat bertahan selama satu atau dua detik, hanya memuat satu gambar mungkin sama efektifnya.

Menghindari pergeseran tata letak

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

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

• Transisi slide: Pergeseran tata letak yang terjadi selama transisi slide biasanya disebabkan oleh mengupdate properti yang menyebabkan tata letak elemen DOM. Contoh beberapa properti ini mencakup: left, top, width, dan marginTop. Untuk menghindari pergeseran tata letak, gunakan properti transform CSS untuk mentransisikan elemen ini. Demo ini menunjukkan cara menggunakan transform untuk membuat 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 kebingungan umum terkait pengukuran CLS untuk carousel:

• Carousel putar otomatis: Transisi slide adalah sumber paling umum perubahan tata letak terkait carousel. Di carousel non-putar otomatis, pergeseran tata letak ini biasanya terjadi dalam 500 md interaksi pengguna, oleh karena itu tidak diperhitungkan dalam Pergeseran Tata Letak Kumulatif (CLS). Namun, untuk carousel putar otomatis, pergeseran tata letak ini tidak hanya berpotensi mengurangi CLS, tetapi juga dapat berulang tanpa batas. Dengan demikian, sangat penting untuk memverifikasi bahwa carousel putar otomatis bukan sumber pergeseran tata letak.

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

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

Menggunakan teknologi modern

Banyak situs menggunakan library JavaScript pihak ketiga untuk menerapkan 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 sedang Anda buat, Anda mungkin tidak memerlukan JavaScript sama sekali. Scroll Snap API baru memungkinkan penerapan transisi seperti carousel hanya dengan menggunakan HTML dan CSS.

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

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

Mengoptimalkan konten carousel

Korsel sering berisi beberapa gambar terbesar situs, jadi ada baiknya Anda meluangkan waktu untuk memastikan gambar tersebut dioptimalkan sepenuhnya. Memilih format dan tingkat kompresi gambar yang tepat, menggunakan CDN gambar, dan menggunakan srcset untuk menyajikan beberapa versi gambar 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 penghitungan LCP, mekanisme penghitungan LCP untuk carousel yang diputar otomatis adalah hal yang membingungkan.

Pengukuran LCP untuk carousel

Berikut ini 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 diupdate jika kandidat LCP lebih besar dari elemen LCP saat ini. Dengan demikian, jika semua elemen carousel berukuran 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 carousel yang diputar otomatis menampilkan gambar dalam ukuran yang konsisten, tetapi berisi gambar dengan berbagai ukuran intrinsik yang 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, image yang nantinya dihapus dari DOM dianggap sebagai format kontenful terbesar potensial. Sebelum Chrome 88, gambar ini dikecualikan dari pertimbangan. Untuk situs yang menggunakan carousel pemutaran otomatis, perubahan definisi ini akan berdampak netral atau positif pada skor LCP.

Perubahan ini dilakukan sebagai respons terhadap pengamatan bahwa banyak situs menerapkan transisi carousel dengan menghapus gambar yang ditampilkan sebelumnya dari hierarki DOM. Sebelum Chrome 88, setiap kali slide baru ditampilkan, penghapusan elemen sebelumnya akan memicu update LCP. Perubahan ini hanya memengaruhi pemutaran otomatis carousel berdasarkan definisi. Potensi largest contentful paint hanya dapat terjadi sebelum pengguna pertama kali berinteraksi dengan halaman.

Perubahan pada nilai minimum di Chrome 121

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

Pertimbangan lainnya

Bagian ini membahas praktik terbaik produk dan UX yang harus Anda perhatikan saat menerapkan carousel. Korsel harus meningkatkan tujuan bisnis dan menyajikan konten dengan cara yang mudah dinavigasi dan dibaca.

Praktik terbaik navigasi

Menyediakan kontrol navigasi yang menonjol

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

Menunjukkan progres navigasi

Kontrol navigasi carousel harus memberikan konteks tentang jumlah total slide dan progres pengguna melaluinya. Informasi ini memudahkan pengguna untuk membuka slide tertentu dan memahami konten mana yang telah dilihat. Dalam beberapa situasi, memberikan pratinjau konten yang akan datang, baik itu cuplikan slide berikutnya maupun daftar thumbnail, juga dapat membantu dan meningkatkan interaksi.

Mendukung gestur seluler

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

Menyediakan jalur navigasi alternatif

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

Praktik terbaik keterbacaan

Jangan gunakan putar otomatis

Penggunaan putar otomatis menciptakan 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.

Oleh karena itu, putar otomatis merupakan pilihan yang bagus. Jika konten bersifat penting, tidak menggunakan putar otomatis akan memaksimalkan eksposurnya; jika konten carousel tidak penting, penggunaan putar otomatis akan mengurangi konten yang lebih penting. Selain itu, carousel yang diputar otomatis mungkin sulit dibaca (dan juga mengganggu). Orang membaca pada kecepatan yang berbeda, sehingga jarang terjadi jika carousel bertransisi secara konsisten pada waktu yang "tepat" untuk pengguna yang berbeda.

Idealnya, navigasi {i>slide<i} 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. Makin banyak teks yang ada di slide, makin lama slide itu harus ditampilkan di layar.

Pisahkan teks dan gambar

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

Ringkas

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

Praktik terbaik produk

Carousel berfungsi dengan baik dalam situasi ketika penggunaan ruang vertikal tambahan untuk menampilkan konten tambahan tidak memungkinkan. Korsel pada laman produk sering kali merupakan contoh yang baik dari kasus penggunaan ini.

Namun, {i>carousel<i} tidak selalu digunakan secara efektif.

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

Uji asumsi Anda

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

Harus relevan

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