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 przypominający pokaz slajdów. Karuzele mogą odtwarzać treści automatycznie. lub użytkownicy mogą przechodzić z niej ręcznie. Chociaż karuzele mogą być używane w innym miejscu, najczęściej służą do wyświetlania obrazów, produkty i promocje na stronach głównych.

W tym artykule omawiamy sprawdzone metody zwiększania wydajności i wrażeń użytkowników w przypadku karuzel.

Wyniki

Poprawnie zaimplementowana karuzela sama w sobie powinna mieć bardzo minimalny poziom lub nie zawierać jej wcale. na wydajność. 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 na karuzeli czy w innym miejscu.

• LCP (największe wyrenderowanie treści)

  Duże karuzele w części strony widocznej na ekranie często zawierają element LCP strony. może więc mieć duży wpływ na LCP. W takich sytuacjach zoptymalizowanie karuzeli może znacznie poprawić LCP. Aby dowiedzieć się więcej, jak działa pomiar LCP na stronach zawierających karuzele, Zapoznaj się z pomiarem LCP w przypadku karuzeli. .

• INP (interakcja z następnym wyrenderowaniem)

  Karuzele mają minimalne wymagania JavaScript, więc nie powinny wpływa na responsywność 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 wykorzystuje nieskomponowane nieskomponowane animacje, mogą przyczyniać się do rozwoju CLS. Na stronach z automatycznie odtwarzanymi karuzelami ma on wartość może powodować nieskończoną wartość CLS. Ten typ CLS zwykle nie jest widoczny przez co łatwo można przeoczyć problem. Aby tego uniknąć unikaj korzystania z nieskomponowanych animacji. w karuzeli (np. podczas przejść).

Sprawdzone metody zwiększania skuteczności

Wczytywanie treści karuzeli za pomocą kodu HTML

Zawartość karuzeli powinna być ładowana za pomocą znaczników HTML strony, tak aby były wykrywalna przez przeglądarkę na wczesnym etapie wczytywania strony. Użycie języka JavaScript do: inicjowania wczytywania treści karuzeli jest prawdopodobnie błąd w skuteczności reklam, którego należy unikać przy korzystaniu 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);

Aby przeprowadzić zaawansowaną optymalizację karuzeli, spróbuj statycznie wczytać pierwszy slajd, Później stopniowo dodając do niego elementy nawigacyjne treści. Ta technika sprawdza się najlepiej w środowiskach, w których dłuższy czas uwagi użytkownika, co wydłuża czas wczytywania treści. W np. stron głównych, na których użytkownicy mogą przebywać tylko przez chwilę po drugie wczytywanie jednego obrazu może przynieść podobną skuteczność.

Unikanie przesunięć układu

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

• Przejścia slajdów: przesunięcia układu, które występują podczas przejść między slajdami, są zwykle jest spowodowana aktualizacją właściwości wywołujących układ elementów DOM. Przykłady z tych usług to: left, top, width i marginTop Aby uniknąć przesunięć układu, zamiast tego użyj CSS transform do przenoszenia tych elementów. Ten demonstracja pokazuje, jak używać transform do aby utworzyć podstawową karuzelę.

• Elementy sterujące nawigacji: przenoszenie, dodawanie/usuwanie nawigacji po karuzeli. elementy sterujące DOM mogą powodować przesunięcia układu w zależności od tego, jak te zmiany są zaimplementowane. Karuzele, które wykazują takie zachowanie, zwykle odpowiedź na najechanie przez użytkownika.

Oto niektóre z najczęstszych wątpliwości związanych z pomiarem CLS: karuzele:

• Autoodtwarzanie karuzeli: przejścia slajdów są najczęstszym źródłem związane z karuzelą. W karuzeli, która nie jest odtwarzana automatycznie, te przesunięcia układu zazwyczaj występują w ciągu 500 ms od interakcji użytkownika i dlatego nie są liczone w kierunku skumulowanego przesunięcia układu (CLS). Pamiętaj jednak: w przypadku autoodtwarzanych karuzel nie tylko mogą liczyć się w odniesieniu do CLS, ale mogą się też powtarzać w nieskończoność. Dlatego w szczególności ważne jest sprawdzenie, czy autoodtwarzana karuzela nie jest źródłem układu zmiany.

• Przewijanie: niektóre karuzele umożliwiają nawigację za pomocą przewijania. karuzela między slajdami. Jeśli pozycja początkowa elementu zmieni się, ale jego odsunięcie przewijania (czyli scrollLeft lub scrollTop) zmienia się o tę samą wartość (ale w odwrotnym kierunku), to nie jest uznajemy za przesunięcie układu, o ile występują w tej samej klatce.

Więcej informacji o przesunięciach układu znajdziesz w artykule Układ debugowania .

Korzystaj z nowoczesnej technologii

Wiele witryn korzysta z bibliotek JavaScript innych firm, aby i zaimplementować karuzele. Jeśli używasz obecnie starszych narzędzi karuzeli, aby poprawić wydajność przez przejście na nowsze narzędzia. Nowsze narzędzia korzystają z wydajniejszych interfejsów API i rzadziej wymagają dodatkowych zależności np. jQuery.

Jednak w zależności od typu karuzeli, którą tworzysz, możesz nie potrzebować JavaScriptu. Nowy ekran Przewiń Interfejs API Snap umożliwia stosowanie przejść karuzelowych wyłącznie za pomocą kodu HTML CSS.

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

• Tworzenie komponentu Relacje (web.dev)
• Nowa generacja stylu stron internetowych: przyciąganie przewijania (web.dev)
• Karuzela obsługująca tylko CSS (triki CSS)
• Jak utworzyć karuzelę obejmującą tylko usługi porównywania cen (triki CSS)

Optymalizuj zawartość karuzeli

Karuzele często zawierają jedne z największych obrazów w witrynie, więc warto, trzeba zadbać o ich pełną optymalizację. Wybór właściwych formatu obrazu i poziomu kompresji, z użyciem CDN dla obrazów oraz przy użyciu atrybutu srcset do udostępniania wielu obrazów wszystkich technik, które mogą zmniejszyć rozmiar przesyłanych obrazów.

Pomiar skuteczności

W tej sekcji omówiono sposób pomiaru LCP w przypadku karuzel. Chociaż Podczas LCP karuzele są traktowane tak samo jak pozostałe elementy UX. Metoda obliczania LCP dla autoodtwarzanych karuzeli jest to element wspólnego dezorientacji.

Pomiar LCP w karuzeli

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

• LCP uwzględnia elementy strony, gdy są one malowane w ramce. Nowi kandydaci dla elementu LCP nie są już brane pod uwagę po interakcji użytkownika (kliknięcia, przewija stronę lub naciśniesz klawisze) ze stroną. Oznacza to, że każdy slajd w trakcie autoodtwarzania może być ostatecznym elementem LCP. karuzela tylko pierwszy slajd byłby potencjalnym kandydatem LCP.
• Jeśli wyrenderowane zostaną 2 obrazy o równym rozmiarze, bierzemy pod uwagę pierwszy z nich parametru LCP. Element LCP jest aktualizowany tylko wtedy, gdy kandydat LCP jest aktualizowany większy niż bieżący element LCP. Jeśli wszystkie elementy karuzeli są który ma jednakowy rozmiar, elementem LCP powinien być pierwszy wyświetlany obraz.
• Oceniając kandydatów LCP, LCP bierze pod uwagę „widoczny rozmiar rozmiaru wewnętrznego w zależności od tego, która z tych wartości jest mniejsza”. Dlatego jeśli autoodtwarzanie karuzela wyświetla obrazy o stałym rozmiarze, ale zawiera obrazy zróżnicowana wewnętrzna rozmiary mniejsze niż rozmiar wyświetlacza, element LCP może się zmieniać slajdy są wyświetlane. W tym przypadku, jeśli wszystkie obrazy są wyświetlane obraz o największym rozmiarze wewnętrznym będzie uznawany za LCP . Aby utrzymać niski LCP, musisz zadbać o to, aby wszystkie elementy karuzela mają taki sam rozmiar wewnętrzny.

Zmiany w sposobie obliczania LCP w przypadku karuzel w Chrome 88

Od Chrome 88, obrazy, które zostaną później usunięte z DOM, są uważane za potencjalnie największe wyrenderowania treści. Przed wersją Chrome 88 te obrazy były wykluczane z: do rozważenia zakupu. W przypadku witryn korzystających z autoodtwarzanych karuzeli ta definicja się zmieni. będzie mieć neutralny lub pozytywny wpływ na wyniki LCP.

Ta zmiana została wprowadzona w odpowiedzi na obserwacja że wiele witryn stosuje przejścia karuzeli, usuwając wcześniejsze z drzewa DOM. Przed wersją Chrome 88 za każdym razem, gdy nowe slajdu, usunięcie poprzedniego elementu spowodowałoby zwiększenie LCP. . Ta zmiana ma wpływ tylko na odtwarzane automatycznie karuzele według definicji, potencjał największe wyrenderowania treści mogą mieć miejsce tylko przed interakcją użytkownika stronę.

Zmiany progów w Chrome 121

W wersji 121 Chrome zmienił się sposób działania obrazów przewijanych w poziomie, np. karuzel. Progi te są teraz takie same jak przy przewijaniu pionowym. 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ń. Skorzystaj z demonstracji leniwego ładowania poziomego, aby porównać zachowanie przeglądarki Chrome z działaniem w Safari i Firefoksie.

Inne uwagi

W tej sekcji omawiamy sprawdzone metody dotyczące wrażeń użytkowników i usług, które warto stosować podczas wdrażania karuzeli. Karuzele powinny pomagać w osiąganiu celów biznesowych i prezentować treści w sposób, który będzie łatwa w nawigacji i czytelności.

Sprawdzone metody dotyczące nawigacji

Dodaj dobrze widoczne elementy sterujące nawigacji

Elementy sterujące karuzeli powinny być łatwe do kliknięcia i dobrze widoczne. To jest co zdarza się rzadko. W większości karuzeli są elementy sterujące nawigacji, są małe i subtelne. Pamiętaj, że jeden kolor lub styl elementy sterujące nawigacją rzadko działają we wszystkich sytuacjach. Na przykład strzałka który jest wyraźnie widoczny na ciemnym tle, może być niewyraźny na jasnym tle.

Wskaż postęp nawigacji

Elementy sterujące karuzeli powinny zapewniać kontekst dotyczący łącznej liczby slajdy i postępy użytkownika. Dzięki tym informacjom przejść do konkretnego slajdu i dowiedzieć się, co zostały już wyświetlone. Czasami wyświetla się podgląd nadchodzących np. fragment następnego slajdu lub listę miniatur, mogą też być pomocne i zwiększyć ich zaangażowanie.

Obsługa gestów mobilnych

Na urządzeniach mobilnych oprócz tradycyjnych gestów przesuwania palcem powinny być też obsługiwane elementy sterujące nawigacji (np. przyciski na ekranie).

Podaj alternatywne ścieżki nawigacji

Mało prawdopodobne, że większość użytkowników wejdzie w interakcję z całą treścią karuzeli, treści, do których prowadzą linki w prezentacjach karuzelowych, powinny być dostępne z innych elementów nawigacyjnych ścieżek konwersji.

Sprawdzone metody zwiększania czytelności

Nie używaj autoodtwarzania

Wykorzystanie autoodtwarzania wiąże się z dwoma niemal paradoksalnymi problemami: Mogą też rozpraszać uwagę i odciągać uwagę od ważniejszych interakcji. treść; jednocześnie, ponieważ użytkownicy często wiążą animacje z reklamami, zignoruje automatycznie odtwarzane karuzele.

Dlatego rzadko wybieramy autoodtwarzanie. Jeśli treść jest ważna, nie autoodtwarzanie zapewni jej maksymalną ekspozycję. jeśli zawartość karuzeli jest nieistotna, korzystanie z autoodtwarzania zmniejszy zainteresowanie ważniejszymi treściami. Ponadto automatycznie odtwarzane karuzele mogą być trudne do odczytania (i irytujące). Liczba przeczytanych przez: z różnymi prędkościami, dlatego rzadko „prawo” w zależności od użytkownika.

Najlepiej, gdy nawigacja po slajdach powinna być skierowana do użytkownika za pomocą elementów sterujących nawigacji. Jeśli Musisz włączyć autoodtwarzanie, odtwarzanie powinno być wyłączone po najechaniu kursorem myszy. Ponadto Należy wziąć pod uwagę treść slajdu i im więcej tekstu. tym dłużej powinna być wyświetlana na ekranie.

Oddziel tekst od obrazów

Tekst w karuzeli jest często „wbudowany” z odpowiednim plikiem graficznym, niż wyświetlane oddzielnie za pomocą znaczników HTML. To niekorzystne podejście ułatwienia dostępu, lokalizacji i współczynników kompresji. Zachęca również do jest uniwersalna. Jednak ten sam obraz i tekst Rzadko zdarza się, aby formaty były tak samo czytelne na komputerach i urządzeniach mobilnych.

Zadbaj o zwięzłość

Masz tylko ułamek sekundy, aby przyciągnąć uwagę użytkownika. Krótkie, w tekście reklamy zwiększają szansę na dotarcie do właściwego odbiorcy.

Sprawdzone metody dotyczące produktów

Karuzele dobrze się sprawdzają w sytuacjach, gdy dodatkowe miejsce w pionie pozwala wyświetlanie dodatkowej treści nie jest możliwe. Karuzele na stronach produktów są To dobry przykład tego zastosowania.

Jednak karuzele nie zawsze są efektywnie używane.

• Karuzele, zwłaszcza jeśli zawierają promocje lub wyświetlają się automatycznie, można łatwo pomylić z reklam przez użytkowników. Użytkownicy często ignorują reklamy. znany jako baner ślepotę.
• Karuzele są często używane do rozmieszczania reklam wielu działów i unikania tworzenia w podejmowaniu decyzji o priorytetach biznesowych. Dzięki temu karuzele mogą łatwo zmieniać na wysypisko nieskutecznych treści.

Sprawdź swoje założenia

Karuzele, zwłaszcza te na stronach głównych, powinny mieć zostały sprawdzone i przetestowane. Współczynnik klikalności karuzeli może pomóc określić, karuzela i jej zawartość są skuteczne.

Trafność

Karuzele działają najlepiej, gdy zawierają interesujące i trafne treści, w jasnym kontekście. Gdyby treść nie zaangażowałaby użytkownika poza karuzeli – umieszczenie jej w karuzeli nie polepsza jej skuteczności. Jeśli musisz Używać karuzeli, nadać priorytet treściom i zadbać o to, aby każdy slajd był wystarczająco spójny które użytkownik chciałby przejść do kolejnego slajdu.