Sprawdzone metody dotyczące karuzeli

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

Katie Hempenius

Karuzela to element UX, który wyświetla treści w postaci prezentacji. Karuzele mogą się „autoodtwarzać” lub użytkownicy mogą ręcznie przełączać się między nimi. 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ć go w ogóle. 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 do kolejnego wyrenderowania)

  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 karuzelami, które odtwarzają się automatycznie, może to spowodować nieskończony CLS. Ten typ CLS zwykle nie jest widoczny dla ludzkiego oka, przez co łatwo go przeoczyć. 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

Treść karuzeli powinna być wczytywana za pomocą znaczników HTML strony, aby była możliwa do wykrycia przez przeglądarkę na wczesnym etapie procesu 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 najlepiej sprawdza się w środowiskach, w których użytkownik poświęca więcej czasu na oglądanie treści – daje to dodatkowy czas na wczytanie treści. W środowiskach takich jak strony główne, na których użytkownicy mogą spędzić zaledwie sekundę lub dwie, załadowanie tylko jednego obrazu może być równie skuteczne.

Unikaj 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 do przejścia 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). W przypadku autoodtwarzanych karuzel te zmiany układu mogą nie tylko potencjalnie wpływać na CLS, ale też mogą się 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.

Korzystanie z nowoczesnej technologii

Wiele witryn używa bibliotek JavaScriptu firm zewnętrznych do implementowania karuzel. 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 kilka przydatnych materiałów dotyczących scroll-snap:

• Tworzenie komponentu Relacji (web.dev)
• Style w internecie nowej generacji: przyciąganie do dołu (web.dev)
• Karuzela tylko z CSS (CSS Tricks)
• 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 obrazów i użycie atrybutu srcset do wyświetlania wielu wersji obrazu to techniki, które mogą zmniejszyć rozmiar przesyłanych obrazów.

Pomiar skuteczności

W tej sekcji omówiliśmy pomiar LCP w przypadku karuzeli. Chociaż podczas obliczania LCP karuzele są traktowane tak samo jak inne elementy UX, mechanizm obliczania LCP w przypadku automatycznie odtwarzających się karuzeli często budzi wątpliwości.

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. Nowe elementy kandydujące do roli LCP nie są już brane pod uwagę, gdy użytkownik wejdzie w interakcję ze stroną (kliknie, przewinie lub naciśnie klawisz). W związku z tym każdy slajd w automatycznie odtwarzanym karuzeli może być ostatnim elementem LCP, podczas gdy w statycznej karuzeli tylko pierwszy slajd może być potencjalnym kandydatem na element LCP.
• Jeśli renderowane są 2 obrazy o takim samym rozmiarze, pierwszym z nich będzie element LCP. 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ą taki sam rozmiar, element LCP powinien być pierwszym wyświetlanym obrazem.
• 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 odtwarzany pokaz slajdów 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ć niskie wartości LCP, musisz się upewnić, że wszystkie elementy w automatycznie odtwarzanym karuzeli mają ten sam rozmiar.

Zmiany w obliczaniu LCP w przypadku karuzeli 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 używają automatycznie odtwarzających się karuzeli, 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 Chrome 121 zmieniliśmy zachowanie obrazów z przewijaniem poziomym, takich jak karuzele. Teraz używają tych samych wartości progowych co przewijanie w pionie. Oznacza to, że w przypadku karuzeli obrazy będą wczytywane, zanim staną się widoczne w widoku. Oznacza to, że wczytywanie obrazu jest mniej widoczne dla użytkownika, ale kosztuje więcej pobrań. Aby porównać działanie funkcji ładowania opóźnionego w układzie poziomym w Chrome, Safari i Firefox, skorzystaj z demonstracji.

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

Dodaj widoczne elementy sterujące nawigacją.

Elementy sterujące karuzelą powinny być łatwe do kliknięcia i bardzo dobrze widoczne. Jest to coś, co rzadko jest dobrze wykonane – większość karuzel ma małe i subtelne elementy sterujące. 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ć słabo widoczna 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 wyświetlanie podglądu nadchodzących treści (np. fragmentu następnej slajdu lub listy miniatur) może być przydatne i zwiększyć zaangażowanie.

Obsługa gestów na urządzeniach 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

Ponieważ mało prawdopodobne jest, że większość użytkowników będzie korzystać ze wszystkich treści w karuzeli, treści, do których prowadzą linki na slajdach 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ą uwagę użytkowników i odciągają ich wzrok od ważniejszych treści. Jednocześnie użytkownicy często kojarzą animacje z reklamami, więc ignorują automatycznie odtwarzane karuzele.

Dlatego autoodtwarzanie jest rzadko 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ę, aby elementy karuzeli były wyświetlane w „właściwym” 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 na przyciągnięcie uwagi 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 wyświetlanie dodatkowych 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ą łatwo mylone z reklamami przez użytkowników. Użytkownicy często ignorują reklamy – zjawisko to nazywa się ślepotą 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 stać się miejscem na nieskuteczne 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 przedstawione w jasnym kontekście. 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.