Sprawdzone metody dotyczące karuzeli

Optymalizuj karuzele pod kątem skuteczności i użyteczności.

Katie Hempenius

Karuzela to komponent UX, który wyświetla treści w sposób przypominający pokaz slajdów. Karuzele mogą być odtwarzane automatycznie lub użytkownicy mogą przechodzić między nimi ręcznie. Chociaż karuzele można stosować w innych miejscach, najczęściej służą do wyświetlania obrazów, produktów i promocji na stronach głównych.

W tym artykule omawiamy sprawdzone metody dotyczące skuteczności i wygody użytkownika w przypadku karuzel.

Wyniki

Dobrze zaimplementowana karuzela sama w sobie powinna mieć minimalny wpływ na skuteczność lub nie mieć na nią żadnego wpływu. Jednak karuzele często zawierają duże zasoby multimedialne. Duże komponenty mogą mieć wpływ na skuteczność niezależnie od tego, czy są wyświetlane w karuzeli, czy gdzie indziej.

• LCP (największe wyrenderowanie treści)

  Duże karuzele na stronie często zawierają element LCP strony, a zatem mogą mieć znaczący wpływ na LCP. W takich sytuacjach optymalizacja karuzeli może znacznie poprawić LCP. Szczegółowe informacje o tym, jak działa pomiar LCP na stronach zawierających karuzele, znajdziesz w sekcji Pomiar LCP w przypadku karuzeli.

• INP (interakcja z następnym wyrenderowaniem)

  Karuzele mają minimalne wymagania dotyczące JavaScriptu, więc nie powinny wpływać na responsywność strony. Jeśli zauważysz, że karuzela na Twojej stronie zawiera długo działające skrypty, rozważ zastąpienie narzędzia do tworzenia karuzeli.

• CLS (skumulowane przesunięcie układu)

  Zaskakująca liczba karuzel korzysta z nieskomponowanych animacji, które mogą zwiększać CLS. Na stronach z autoodtwarzanymi karuzelami może to spowodować nieskończoną wartość CLS. Ten typ CLS zwykle nie jest widoczny dla ludzkiego oka, co sprawia, że problem jest łatwy do przeoczenia. Aby uniknąć tego problemu, nie używaj nieskomponowanych animacji w karuzeli (np. podczas przejść między slajdami).

Sprawdzone metody dotyczące wydajności

Wczytywanie zawartości karuzeli za pomocą kodu HTML

Zawartość karuzeli powinna być ładowana za pomocą znaczników HTML strony, aby przeglądarka mogła je wykryć na wczesnym etapie wczytywania strony. Używanie JavaScriptu do inicjowania wczytywania treści karuzeli jest prawdopodobnie największym błędem wpływającym na wydajność, którego należy unikać podczas korzystania z karuzeli. To opóźnia wczytywanie obrazów i może negatywnie wpłynąć na 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);

Aby zoptymalizować karuzel zaawansowany, zastanów się nad załadowaniem pierwszego slajdu w postaci statycznej, a potem stopniowo dodawaj elementy sterujące nawigacją i dodatkowe treści. Ta technika sprawdza się najlepiej w środowiskach, w których użytkownik poświęca dużo czasu – wydłuża to czas wczytywania treści. W środowiskach takich jak strony główne, na których użytkownicy mogą spędzić tylko sekundę lub dwie, załadowanie tylko jednego obrazu może być równie skuteczne.

Unikanie przesunięć układu

Przejścia między slajdami i elementy sterujące nawigacją to 2 najczęstsze przyczyny przesunięć układu w karuzeli:

• Przejścia między slajdami: przesunięcia układu, które występują podczas przejść między slajdami, są zwykle spowodowane zmianą właściwości elementów DOM wpływających na układ. Przykłady takich właściwości to left, top, width i marginTop. Aby uniknąć przesunięć układu, użyj właściwości CSS transform, aby przejść do tych elementów. To demo pokazuje, jak za pomocą transform utworzyć podstawowy autorskie.

• Elementy sterujące nawigacją: przenoszenie lub dodawanie/usuwanie elementów sterujących nawigacją w karuzeli z DOM może powodować zmiany układu w zależności od sposobu implementacji tych zmian. Karuzele, które wykazują takie zachowanie, zwykle reagują na to, gdy użytkownik najedzie na nie kursorem.

Oto kilka kwestii, które często powodują nieporozumienia w związku z mierzeniem CLS w przypadku karuzeli:

• Automatycznie odtwarzane karuzele: przejścia między slajdami są najczęstszym źródłem przesunięć układu związanych z karuzelą. W przypadku karuzeli bez automatycznego odtwarzania te zmiany układu występują zazwyczaj w ciągu 500 ms od interakcji użytkownika, więc nie są wliczane do skumulowanego przesunięcia układu (CLS). Jednak w przypadku autoodtwarzających się karuzel nie tylko te zmiany układu mogą potencjalnie wpływać na CLS, ale mogą się też powtarzać w nieskończoność. Dlatego szczególnie ważne jest sprawdzenie, czy autoodtwarzający się karuzelki nie powodują zmian układu.

• Przewijanie: niektóre karuzele umożliwiają użytkownikom poruszanie się po slajdach za pomocą przewijania. Jeśli pozycja początkowa elementu ulega zmianie, ale przesunięcie osi przesunięcia (czyli scrollLeft lub scrollTop) zmienia się o tę samą wartość (ale w przeciwnym kierunku), nie jest to uważane za zmianę układu, o ile występuje w tym samym kadrze.

Więcej informacji o przesunięciach układu znajdziesz w artykule Debugowanie przesunięć układu.

Korzystaj z nowoczesnej technologii

Do implementacji karuzeli wiele witryn korzysta z bibliotek JavaScript innych firm. Jeśli obecnie używasz starszych narzędzi do tworzenia karuzeli, możesz poprawić skuteczność, przechodząc na nowsze narzędzia. Nowsze narzędzia zwykle korzystają z bardziej wydajnych interfejsów API i rzadziej wymagają dodatkowych zależności, takich jak jQuery.

W zależności od typu karuzeli, którą tworzysz, JavaScript może jednak nie być potrzebny. Nowy interfejs API ScrollSnap umożliwia wdrażanie przejść podobnych do tych w karuzeli, korzystając tylko z HTML i CSS.

Oto materiały na temat korzystania z usługi scroll-snap, które mogą Ci się przydać:

• Tworzenie komponentu Relacji (web.dev)
• Nowa generacja stylu stron internetowych: przyciąganie przewijania (web.dev)
• Karuzela obsługująca tylko CSS (triki CSS)
• Jak utworzyć karuzelę tylko z użyciem CSS (CSS Tricks)

Optymalizowanie zawartości karuzeli

Karuzele często zawierają największe zdjęcia w witrynie, więc warto poświęcić trochę czasu na ich optymalizację. Wybór odpowiedniego formatu obrazu i poziomu kompresji, użycie CDN z obrazami oraz użycie atrybutu srcset do wyświetlania wielu wersji obrazu to wszystkie techniki, które mogą zmniejszyć rozmiar przesyłanych obrazów.

Pomiar skuteczności

W tej sekcji omawiamy sposób pomiaru LCP w przypadku karuzel. Chociaż podczas obliczania LCP karuzele są traktowane tak samo jak jakikolwiek inny element UX, mechanizm obliczania LCP dla autoodtwarzanych karuzel w przypadku karuzel jest często niejasny.

Pomiar LCP w przypadku karuzeli

Oto najważniejsze informacje o tym, jak działa obliczanie LCP w przypadku karuzeli:

• LCP uwzględnia elementy strony w miarę ich wyświetlania na ekranie. Nowi kandydaci do elementu LCP nie są już brane pod uwagę, gdy użytkownik wejdzie w interakcję ze stroną (naciśnie ją, przewinie lub naciśnie). Dlatego każdy slajd w autoodtwarzanej karuzeli może być ostatecznym elementem LCP, podczas gdy w statycznej karuzeli tylko pierwszy slajd byłby kandydatem LCP.
• W przypadku wyrenderowania 2 obrazów o równym rozmiarze za elementem LCP uznaje się pierwszy z nich. Element LCP jest aktualizowany tylko wtedy, gdy kandydat na element LCP jest większy niż obecny element LCP. Jeśli więc wszystkie elementy karuzeli mają ten sam rozmiar, jako pierwszy wyświetlany obraz powinien być element LCP.
• Podczas oceny kandydatów do LCP LCP bierze pod uwagę „widoczny rozmiar lub rozmiar wewnętrzny, zależnie od tego, który z nich jest mniejszy”. Jeśli więc automatycznie odtwarzana karuzela wyświetla obrazy o stałym rozmiarze, ale zawierające obrazy o różnych właściwych rozmiarach, które są mniejsze niż rozmiar wyświetlania, element LCP może się zmieniać wraz z wyświetlaniem kolejnych slajdów. W takim przypadku, jeśli wszystkie obrazy są wyświetlane w tym samym rozmiarze, elementem LCP będzie obraz o największym rozmiarze. Aby utrzymać niski LCP, wszystkie elementy w autoodtwarzanej karuzeli muszą mieć ten sam rozmiar wewnętrzny.

Zmiany w sposobie obliczania LCP w przypadku karuzel w Chrome 88

Od wersji Chrome 88 obrazy, które są później usuwane z DOM, są uznawane za potencjalne największe wyrenderowania treści. Przed wersją Chrome 88 te obrazy były wykluczane z rozważania. W przypadku witryn, które korzystają z karuzel automatycznie odtwarzających się treści, ta zmiana definicji będzie miała neutralny lub pozytywny wpływ na wyniki LCP.

Ta zmiana została wprowadzona w odpowiedzi na obserwację, że wiele witryn implementuje przejścia w karuzeli przez usunięcie z drzewa DOM wcześniej wyświetlanego obrazu. Przed wersją 88 Chrome za każdym razem, gdy wyświetlano nową stronę, usunięcie poprzedniego elementu powodowało aktualizację LCP. Ta zmiana dotyczy tylko automatycznie odtwarzanych karuzel. Zgodnie z definicją potencjalne największe wyświetlenia treści mogą wystąpić tylko przed pierwszą interakcją użytkownika ze stroną.

Zmiany progów w Chrome 121

W wersji 121 Chrome zmienił się sposób działania obrazów przewijanych w poziomie, np. karuzel. Teraz używają tych samych wartości progowych co przewijanie w pionie. W przypadku karuzeli oznacza to, że obrazy będą wczytywane, zanim pojawią się w widocznym obszarze. Oznacza to, że ładowanie obrazu będzie mniej zauważalne dla użytkownika, ale kosztem większej liczby pobrań. Aby porównać działanie tej funkcji w Chrome, Safari i Firefox, skorzystaj z demonstracji poziomego ładowania opóźnionego.

Inne uwagi

W tej sekcji omawiamy sprawdzone metody dotyczące wrażeń użytkowników i produktów, które warto wziąć pod uwagę podczas wdrażania karuzeli. Karuzele powinny pomagać w realizacji celów biznesowych i prezentować treści w sposób ułatwiający nawigację i czytanie.

Sprawdzone metody dotyczące nawigacji

Zadbaj o dobrze widoczne elementy nawigacyjne

Elementy sterujące karuzelą powinny być łatwe do kliknięcia i bardzo dobrze widoczne. To coś, co rzadko się robi. W przypadku większości karuzel są to elementy sterujące, które są odpowiednio małe i subtelne. Pamiętaj, że jeden kolor lub styl elementów sterujących rzadko sprawdza się we wszystkich sytuacjach. Na przykład strzałka, która jest wyraźnie widoczna na ciemnym tle, może być niedostrzegalna na jasnym tle.

Wskazanie postępu nawigacji

Elementy sterujące nawigacją w karuzeli powinny przekazywać kontekst dotyczący łącznej liczby slajdów i postępu użytkownika w ich oglądaniu. Dzięki tym informacjom użytkownik łatwiej przechodzi do konkretnego slajdu i wie, które treści zostały już wyświetlone. W niektórych sytuacjach udostępnienie podglądu nadchodzących treści – np. fragment następnego slajdu lub lista miniatur – może być pomocne i zwiększyć zaangażowanie.

Obsługa gestów mobilnych

Na urządzeniach mobilnych oprócz tradycyjnych elementów sterujących nawigacją (takich jak przyciski na ekranie) powinny być obsługiwane gesty przesuwania.

Podawanie alternatywnych ścieżek nawigacji

W związku z tym, że jest mało prawdopodobne, aby większość użytkowników zainteresowała się całą zawartością karuzeli, treści, do których prowadzą linki w prezentacjach karuzeli, powinny być dostępne z innych ścieżek nawigacyjnych.

Sprawdzone metody dotyczące czytelności

Nie używaj autoodtwarzania.

Automatyczne odtwarzanie powoduje 2 prawie paradoksalne problemy: animacje na ekranie często rozpraszają użytkowników i odwracają ich uwagę od ważniejszych treści. Jednocześnie użytkownicy często kojarzą animacje z reklamami, więc ignorują automatycznie odtwarzane karuzele.

Dlatego autoodtwarzanie rzadko jest dobrym rozwiązaniem. Jeśli treści są ważne, wyłączenie automatycznego odtwarzania zwiększy ich widoczność. Jeśli treści w karuzeli nie są ważne, automatyczne odtwarzanie będzie odwracać uwagę od ważniejszych treści. Dodatkowo automatycznie odtwarzające się karuzele mogą być trudne do odczytania (a także irytujące). Ludzie czytają z różną szybkością, więc rzadko zdarza się, że karuzela zamienia się w „odpowiednim” momencie dla różnych użytkowników.

Najlepiej, aby użytkownik mógł sterować nawigacją za pomocą elementów sterujących. Jeśli musisz używać autoodtwarzania, powinno ono być wyłączone, gdy użytkownik najedzie na element. Dodatkowo szybkość przełączania slajdów powinna uwzględniać zawartość slajdu – im więcej tekstu zawiera, tym dłużej powinna być wyświetlana na ekranie.

Oddzielanie tekstu od obrazów

Treść tekstowa karuzeli jest często „wbudowana” w odpowiedni plik obrazu, a nie wyświetlana osobno za pomocą znaczników HTML. Takie podejście nie sprzyja dostępności, lokalizacji i kompresji. Zachęca też do stosowania uniwersalnego podejścia do tworzenia komponentów. Jednak ten sam format obrazu i tekstu rzadko jest równie czytelny na komputerach i urządzeniach mobilnych.

Zadbaj o zwięzłość.

Masz tylko ułamek sekundy, aby przyciągnąć uwagę użytkownika. Krótki i precyzyjny tekst zwiększy szanse na to, że Twoja wiadomość zostanie dobrze odebrana.

Sprawdzone metody dotyczące produktów

Karuzele sprawdzają się w sytuacjach, gdy nie można wykorzystać dodatkowej przestrzeni pionowej na dodatkowe treści. Karuzele na stronach produktów są często dobrym przykładem takiego zastosowania.

Karuzele nie zawsze są jednak używane efektywnie.

• Karuzele, zwłaszcza jeśli zawierają promocje lub przewijają się automatycznie, są mylone z reklamami. Użytkownicy zwykle ignorują reklamy – jest to tzw. znieczulica na banery.
• Karuzele są często używane do zadowolenia wielu działów i uniknięcia podejmowania decyzji dotyczących priorytetów biznesowych. W efekcie karuzele mogą łatwo zmienić się w wysypisko nieskutecznych treści.

Testowanie założeń

Należy ocenić i przetestować wpływ karuzel na wyniki biznesowe, zwłaszcza na stronach głównych. Wskaźniki CTR karuzeli mogą pomóc Ci określić, czy karuzelę i jej zawartość można uznać za skuteczne.

Trafność

Karuzele działają najlepiej, gdy zawierają interesujące i trafne treści z jasnym kontekstem. Jeśli treści nie przyciągają uwagi użytkownika poza karuzelą, umieszczenie ich w karuzeli nie poprawi ich skuteczności. Jeśli musisz użyć karuzeli, nadaj priorytety treściom i zadbaj o to, aby każdy slajd był na tyle trafny, że użytkownik będzie chciał przejść do następnego.