Sprawdzone metody dotyczące karuzeli

Zoptymalizuj karuzele pod kątem wydajności i łatwości obsługi.

Katie Hempenius

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

W tym artykule omawiamy sprawdzone metody dotyczące wydajności i UX w przypadku karuzel.

Występy

Dobrze wdrożona karuzela sama w sobie powinna mieć niewielki wpływ na skuteczność lub w ogóle nie mieć go wcale. Jednak karuzele często zawierają duże zasoby multimedialne. Duże komponenty mogą wpływać na skuteczność niezależnie od tego, czy są wyświetlane w karuzeli, czy w innym miejscu.

• LCP (największe wyrenderowanie treści)

  Duże karuzele w części strony widocznej na ekranie zawierają często element LCP strony, dlatego mogą mieć znaczny wpływ na LCP. W takich przypadkach optymalizacja karuzeli może znacznie poprawić LCP. Dokładne wyjaśnienie sposobu działania pomiaru LCP na stronach z karuzelami znajdziesz w sekcji Pomiar LCP w przypadku karuzel.

• INP (interakcja do następnego wyrenderowania)

  Wymagania dotyczące JavaScriptu są minimalne, dlatego nie powinny wpływać na czas reagowania stron. Jeśli stwierdzisz, że karuzela w Twojej witrynie zawiera długotrwałe skrypty, rozważ zastąpienie narzędzi karuzeli.

• CLS (skumulowane przesunięcie układu)

  Zaskakująca liczba karuzeli zawiera niespójne, nieskomponowane animacje, które mogą przyczyniać się do generowania wartości CLS. Na stronach z karuzelami odtwarzającymi się automatycznie może to powodować nieskończoną wartość CLS. Ten typ CLS zwykle nie jest widoczny dla człowieka, co sprawia, że problem łatwo przeoczyć. Aby uniknąć tego problemu, unikaj używania nieskomponowanych animacji w karuzeli (np. podczas przejść slajdów).

Sprawdzone metody zwiększania skuteczności

Wczytywanie treści karuzeli za pomocą kodu HTML

Zawartość karuzeli powinna być wczytywana za pomocą znaczników HTML strony, aby przeglądarka mogła ją znaleźć na wczesnym etapie wczytywania. Użycie JavaScriptu do inicjowania wczytywania treści karuzeli to prawdopodobnie największy błąd, którego należy unikać podczas korzystania z karuzeli. Opóźnia to wczytywanie obrazu 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);

Jeśli chcesz skorzystać z zaawansowanej optymalizacji karuzeli, rozważ statyczne wczytywanie pierwszego slajdu, a następnie stopniowe uzupełnianie go o elementy sterujące nawigacji i dodatkowe treści. Ta technika sprawdza się najlepiej w środowiskach, w których użytkownik dłużej przyciąga uwagę – daje to dodatkowy czas na wczytanie treści. W środowiskach takich jak strony główne, w których użytkownicy pozostają na niej tylko przez sekundę lub dwie, wczytywanie tylko jednego obrazu może być skuteczne.

Unikaj przesunięcia układu

Przejścia slajdów i elementy sterujące nawigacji to 2 najczęstsze źródła zmian układu w karuzeli:

• Przejścia slajdów: przesunięcia układu, które występują podczas przejść między slajdami, są zwykle spowodowane przez aktualizację właściwości wywołujących układ elementów DOM. Przykładowe właściwości: left, top, width i marginTop. Aby uniknąć przesunięcia układu, użyj do przenoszenia tych elementów właściwości CSS transform. Ta prezentacja pokazuje, jak za pomocą transform utworzyć podstawową karuzelę.

• Elementy sterujące nawigacji: przenoszenie lub dodawanie i usuwanie elementów sterujących nawigacji karuzelowej z DOM może powodować przesunięcia układu w zależności od sposobu wdrożenia tych zmian. Karuzele, które wykazują takie działanie, zwykle reagują na najechanie kursorem przez użytkownika.

Oto kilka częstych problemów związanych z pomiarem CLS w przypadku karuzel:

• Autoodtwarzanie karuzel: przejścia między slajdami to najczęstsze źródło przesunięcia układu związanego z karuzelą. W karuzeli, która nie jest autoodtwarzana, układ ma zwykle miejsce w ciągu 500 ms od interakcji użytkownika i dlatego nie jest liczony do skumulowanego przesunięcia układu (CLS). Jednak w przypadku karuzel z autoodtwarzaniem nie tylko przesunięcie układu może się liczyć w kierunku CLS, ale też może się powtarzać w nieskończoność. Dlatego przede wszystkim należy sprawdzić, czy karuzela autoodtwarzana nie jest źródłem przesunięć układu.

• Przewijanie: niektóre karuzele umożliwiają użytkownikom poruszanie się po slajdach za pomocą przewijania. Jeśli pozycja początkowa elementu zmienia się, ale przesunięcie jego przewijania (czyli scrollLeft lub scrollTop) zmienia się o tę samą ilość (ale w przeciwnym kierunku), nie jest to uznawane za przesunięcie układu, o ile ma miejsce w tej samej ramce.

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

Korzystaj z nowoczesnej technologii

Wiele witryn korzysta z zewnętrznych bibliotek JavaScript do implementacji karuzel. Jeśli używasz obecnie starszych narzędzi karuzelowych, możesz przejść na nowsze narzędzia, aby poprawić wydajność. Nowsze narzędzia używają zwykle wydajniejszych interfejsów API i mniej prawdopodobne, że będą wymagać dodatkowych zależności, takich jak jQuery.

Jednak w zależności od typu tworzonej karuzeli kod JavaScript może być w ogóle niepotrzebny. Nowy interfejs API Scroll Snap umożliwia implementowanie przejść przypominających karuzelę, korzystając wyłącznie z kodu HTML i CSS.

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

• Tworzenie komponentu Relacje (web.dev)
• Nowa generacja stylu stron internetowych: przyciąganie do przewijania (web.dev)
• Karuzela obejmująca tylko CSS (wskazówki dotyczące CSS)
• Jak utworzyć karuzelę zawierającą tylko CSS (wskazówki dotyczące CSS)

Zoptymalizuj treści w karuzeli

Karuzele często zawierają niektóre z największych obrazów w witrynie, więc warto je przejrzeć i sprawdzić, czy są one w pełni zoptymalizowane. Techniki ograniczające rozmiar obrazów można zmniejszyć, wybierając odpowiedni format i poziom kompresji, korzystanie z sieci CDN dla obrazów oraz użycie metody srcset do wyświetlania wielu wersji obrazów.

Pomiar skuteczności

W tej sekcji omawiamy pomiar LCP w odniesieniu do karuzel. Chociaż podczas obliczania LCP karuzele są traktowane tak samo jak inne elementy UX, mechanika obliczania LCP dla karuzel z autoodtwarzaniem jest często myląca.

Pomiar LCP w przypadku karuzel

Oto najważniejsze informacje, które pomogą Ci zrozumieć, jak działa obliczanie LCP w przypadku karuzel:

• LCP bierze pod uwagę elementy strony, gdy są one naniesione w ramce. Nowi kandydaci elementu LCP nie są już brani pod uwagę, gdy użytkownik wejdzie w interakcję ze stroną (kliknie, przewinie lub naciśnie klawisz). Oznacza to, że każdy slajd w karuzeli z autoodtwarzaniem może być ostatnim elementem LCP, podczas gdy w karuzeli statycznej tylko pierwszy z nich mógłby być potencjalnym kandydatem do LCP.
• Jeśli renderowane są 2 obrazy o jednakowym rozmiarze, pierwszy z nich będzie uznawany za element LCP. Element LCP jest aktualizowany tylko wtedy, gdy kandydat LCP jest większy niż bieżący element LCP. Jeśli więc wszystkie elementy karuzeli mają jednakowe rozmiary, pierwszym wyświetlanym obrazem musi być element LCP.
• Oceniając kandydatów LCP, LCP bierze pod uwagę „widoczny rozmiar lub rozmiar wewnętrzny, w zależności od tego, która wartość jest mniejsza”. Jeśli więc w karuzeli z autoodtwarzaniem są obrazy o stałym rozmiarze, ale są w nich obrazy o różnych rozmiarach wewnętrznych mniejszych niż rozmiar wyświetlacza, element LCP może się zmieniać w miarę wyświetlania nowych slajdów. W takim przypadku, jeśli wszystkie obrazy są wyświetlane w tym samym rozmiarze, za element LCP zostanie uznany obraz o największym rozmiarze wewnętrznym. Aby utrzymać niski LCP, zadbaj o to, aby wszystkie elementy w karuzeli z autoodtwarzaniem miały ten sam rozmiar wewnętrzny.

Zmiany w obliczaniu LCP w przypadku karuzel w Chrome 88

Od Chrome 88 obrazy, które są później usuwane z DOM, są uznawane za potencjalne największe wyrenderowanie treści. Przed Chrome 88 takie obrazy nie były brane pod uwagę. W przypadku witryn, które korzystają z karuzeli z autoodtwarzaniem, ta zmiana definicji będzie mieć neutralny lub pozytywny wpływ na wynik LCP.

Ta zmiana została wprowadzona w odpowiedzi na obserwację – wiele witryn implementuje przejścia karuzeli, usuwając wcześniej wyświetlany obraz z drzewa DOM. Przed Chrome 88 przy każdym wyświetleniu nowego slajdu usunięcie poprzedniego elementu powodowało uruchomienie aktualizacji LCP. Ta zmiana ma wpływ tylko na karuzele odtwarzane automatycznie według definicji. Potencjalne największe wyrenderowanie treści może nastąpić tylko przed pierwszą interakcją użytkownika ze stroną.

Zmiany progów w Chrome 121

W Chrome 121 zmienił się sposób działania obrazów przewijanych w poziomie, np. karuzeli. Obowiązują w nich te same progi co w przypadku przewijania w pionie. Oznacza to, że w przypadku karuzeli obrazy będą wczytywane, zanim pojawią się w widocznym obszarze. Oznacza to, że wczytywanie obrazu będzie mniej zauważalne dla użytkownika, ale wiąże się to z koniecznością pobrania większej liczby plików. Użyj demonstracji leniwego ładowania w poziomie, aby porównać działanie przeglądarek Chrome z tymi w Safari i Firefoksie.

Inne uwagi

W tej sekcji omawiamy sprawdzone metody dotyczące wrażeń użytkowników i usług, o których warto pamiętać przy wdrażaniu karuzel. Karuzele powinny pomagać w osiąganiu celów biznesowych i prezentować treści w łatwy sposób nawigować i czytać.

Sprawdzone metody dotyczące nawigacji

Dodaj widoczne elementy sterujące nawigacji

Elementy sterujące nawigacją karuzeli powinny być łatwe do kliknięcia i dobrze widoczne. Rzadko się to zdarza, ale w większości karuzeli są to małe i subtelne elementy sterujące nawigacji. Pamiętaj, że jeden kolor lub styl elementów sterujących nawigacji rzadko sprawdza się we wszystkich sytuacjach. Na przykład strzałka wyraźnie widoczna na ciemnym tle może być słaba na jasnym tle.

Wskazuje postęp nawigacji

Elementy sterujące nawigacją w karuzeli powinny zapewniać kontekst dotyczący łącznej liczby slajdów i postępów użytkownika. Te informacje ułatwiają użytkownikowi przejście do konkretnego slajdu i zrozumienie, które treści zostały już wyświetlone. W niektórych sytuacjach zaprezentowanie zapowiedzi kolejnych treści – niezależnie od tego, czy jest to fragment następnego slajdu czy lista miniatur – również może pomóc w zwiększeniu zaangażowania.

Obsługa gestów na urządzeniach mobilnych

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

Podaj alternatywne ścieżki nawigacji

Większość użytkowników raczej nie wejdzie w interakcję ze wszystkimi treściami karuzeli, dlatego treści, do których prowadzą linki ze slajdów w karuzeli, powinny być dostępne z innych ścieżek nawigacyjnych.

Sprawdzone metody dotyczące czytelności

Nie używaj autoodtwarzania

Stosowanie autoodtwarzania wiąże się z dwoma niemal paradoksalnymi problemami: animacje na ekranie zazwyczaj rozpraszają użytkownika i odwracają wzrok od ważniejszych treści. Jednocześnie użytkownicy często wiążą animacje z reklamami, dlatego ignoruje karuzele, które odtwarzają się automatycznie.

Rzadko się więc zdarza, że autoodtwarzanie jest dobrym wyborem. Jeśli treść jest ważna, pomijanie autoodtwarzania zmaksymalizuje jej widoczność. Jeśli karuzela nie ma znaczenia, użycie autoodtwarzania powróci do ważniejszych materiałów. Poza tym autoodtwarzane karuzele mogą być trudne do odczytania (i irytujące). Użytkownicy czytają w różnym tempie, więc rzadko zdarza się, że karuzela przełącza się w „właściwy” momencie dla różnych użytkowników.

W idealnej sytuacji nawigacja po slajdach powinna być kierowana do użytkowników za pomocą elementów sterujących nawigacji. Jeśli musisz użyć autoodtwarzania, powinno być ono wyłączone po najechaniu kursorem. Dodatkowo współczynnik przejść powinien uwzględniać treść slajdu – im więcej tekstu zawiera slajd, tym dłużej powinien on być wyświetlany na ekranie.

Rozdziel tekst i obrazy

Tekst w karuzeli jest często „upieczony” w odpowiednim pliku obrazu zamiast wyświetlać się oddzielnie za pomocą znaczników HTML. Takie podejście szkodzi łatwiejszym zmianom dostępu, lokalizacji i kompresji. Wspiera też uniwersalne podejście do tworzenia zasobów. Jednak te same formaty obrazów i tekstu rzadko są jednakowe w formatach reklam na komputery i urządzenia mobilne.

Zadbaj o zwięzłość

Masz tylko ułamek sekundy na przyciągnięcie uwagi użytkownika. Krótka, szczegółowa treść zwiększa szanse na dotarcie z przekazem do konkretnego odbiorcy.

Sprawdzone metody dotyczące usługi

Karuzele dobrze sprawdzają się w sytuacjach, gdy użycie dodatkowej przestrzeni w pionie do wyświetlenia dodatkowych treści nie jest możliwe. Dobrym przykładem takiego zastosowania są często karuzele na stronach produktów.

Jednak karuzele nie zawsze są wykorzystywane skutecznie.

• Karuzele, zwłaszcza jeśli zawierają promocje lub automatyczne przechodzenie, mogą łatwo popełnić błąd przy reklamach. Użytkownicy mają tendencję do ignorowania reklam, co jest znane jako znieczucie na banery.
• Karuzele są często używane do wyznaczania wielu działów i unikania podejmowania decyzji dotyczących priorytetów biznesowych. W efekcie karuzele mogą się łatwo zmienić w wyrzucanie nieskutecznych treści.

Przetestuj swoje założenia

Należy ocenić i przetestować wpływ karuzel na działalność, zwłaszcza tych na strony główne. Współczynniki klikalności karuzeli pomagają określić, czy karuzela i jej zawartość są skuteczne.

Trafność

Karuzele działają najlepiej, gdy zawierają interesujące i trafne treści przedstawione w jasnym kontekście. W przeciwnym razie treści nie wciągnęłyby użytkownika poza karuzelę – umieszczenie ich w karuzeli nie poprawi jej skuteczności. Jeśli musisz użyć karuzeli, nadaj priorytet treściom i zadbaj o to, aby każdy slajd był na tyle odpowiedni, by użytkownik chciał przejść do kolejnego.