Best Practices für Karussells

Karussells in Bezug auf Leistung und Nutzerfreundlichkeit optimieren.

Katie Hempenius

Ein Karussell ist eine UX-Komponente, die Inhalte wie eine Diashow anzeigt. Karussells können automatisch wiedergegeben oder von Nutzern manuell navigiert werden. Karussells können zwar an anderer Stelle verwendet werden, werden aber am häufigsten zum Anzeigen von Bildern, Produkten und Angeboten auf Startseiten eingesetzt.

In diesem Artikel werden Best Practices für Leistung und UX für Karussells erläutert.

Leistung

Ein gut implementiertes Karussell an sich sollte kaum oder keinen Einfluss auf die Leistung haben. Karussells enthalten jedoch oft große Medien-Assets. Große Assets können die Leistung beeinträchtigen, unabhängig davon, ob sie in einem Karussell oder an anderer Stelle angezeigt werden.

• LCP (Largest Contentful Paint)

  Große Karussells, die ohne Scrollen sichtbar sind, enthalten oft das LCP-Element der Seite und können daher einen erheblichen Einfluss auf den LCP haben. In diesen Szenarien kann die Optimierung des Karussells den LCP erheblich verbessern. Eine ausführliche Erläuterung der Funktionsweise der LCP-Messung auf Seiten mit Karussells finden Sie im Abschnitt LCP-Messung für Karussells.

• INP (Interaction to Next Paint)

  Karussells haben minimale JavaScript-Anforderungen und sollten sich daher nicht auf die Reaktionszeit von Seiten auswirken. Wenn Sie feststellen, dass das Karussell Ihrer Website Skripts mit langer Ausführungszeit enthält, sollten Sie die Karussell-Tools ersetzen.

• CLS (Cumulative Layout Shift)

  Eine überraschende Anzahl von Karussells verwendet verzögerte, nicht zusammengesetzte Animationen, die zu CLS beitragen können. Auf Seiten mit automatisch wiedergegebenen Karussells kann dies zu einer unendlichen CLS führen. Diese Art von CLS ist für das menschliche Auge normalerweise nicht sichtbar, sodass das Problem leicht zu übersehen ist. Um dies zu vermeiden, vermeiden Sie die Verwendung von nicht zusammengesetzten Animationen in Ihrem Karussell (z. B. bei Folienübergängen).

Best Practices für die Leistung

Karussellinhalte mit HTML laden

Karussellinhalte sollten über das HTML-Markup der Seite geladen werden, damit sie vom Browser schon früh während des Seitenaufbaus gefunden werden können. Der größte Leistungsfehler, den Sie bei der Verwendung von Karussells vermeiden sollten, ist wahrscheinlich der größte Leistungsfehler, den Sie beim Laden von Karussellinhalten mit JavaScript starten sollten. Dadurch wird das Laden des Bildes verzögert, was den LCP-Wert beeinträchtigen kann.

Das sollten Sie tun:

<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>

Don'ts

const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

Für eine erweiterte Karusselloptimierung empfiehlt es sich, die erste Folie statisch zu laden und sie dann schrittweise um Navigationssteuerelemente und zusätzliche Inhalte zu erweitern. Diese Methode eignet sich am besten für Umgebungen, in denen Sie die Aufmerksamkeit eines Nutzers besonders lange halten. So erhält der zusätzliche Inhalt Zeit zum Laden. In Umgebungen wie Startseiten, in denen Nutzer möglicherweise nur ein oder zwei Sekunden verweilen, kann nur das Laden eines einzelnen Bilds ähnlich effektiv sein.

Layoutverschiebungen vermeiden

Hinweis : In Chrome 88–90 wurden verschiedene Fehlerkorrekturen im Zusammenhang mit der Berechnung von Layoutverschiebungen veröffentlicht. Viele dieser Fehlerkorrekturen beziehen sich auf Karussells. Aufgrund dieser Korrekturen sollten Websites in späteren Versionen von Chrome mit niedrigeren Werten für die karussellbezogenen Layoutverschiebungen rechnen.

Folienübergänge und Steuerelemente für die Navigation sind die zwei häufigsten Ursachen für Layoutverschiebungen in Karussells:

• Folienübergänge:Layoutverschiebungen, die bei Folienübergängen auftreten, werden in der Regel dadurch verursacht, dass die layoutverbessernden Eigenschaften von DOM-Elementen aktualisiert werden. Beispiele für diese Attribute sind: left, top, width und marginTop. Wenn Sie Layoutverschiebungen vermeiden möchten, verwenden Sie stattdessen die CSS-Eigenschaft transform, um diese Elemente zu übertragen. In dieser Demo wird gezeigt, wie du mit transform ein einfaches Karussell erstellen kannst.

• Navigationssteuerung:Wenn Sie Karussellnavigationssteuerungen verschieben oder aus dem DOM hinzufügen bzw. daraus entfernen, kann es zu Layoutverschiebungen kommen, je nachdem, wie diese Änderungen implementiert werden. Karussells, die dieses Verhalten zeigen, reagieren normalerweise, wenn der Nutzer den Mauszeiger darauf bewegt.

Dies sind einige der häufigsten Missverständnisse bei der CLS-Messung für Karussells:

• Autoplay-Karussells:Folienübergänge sind die häufigste Ursache für karussellbezogene Layoutverschiebungen. In einem Karussell ohne Autoplay treten diese Layoutverschiebungen in der Regel innerhalb von 500 ms nach einer Nutzerinteraktion auf und werden daher nicht auf die Cumulative Layout Shift (CLS) angerechnet. Bei Karussells mit automatischer Wiedergabe können diese Layoutverschiebungen jedoch nicht nur in Richtung CLS zählen, sondern sie können sich auch unbegrenzt wiederholen. Daher ist es besonders wichtig zu prüfen, ob ein Karussell mit Autoplay-Funktion keine Ursache für Layoutverschiebungen ist.

• Scrollen:Bei einigen Karussells können Nutzer per Scrollen durch Karussellfolien navigieren. Wenn sich die Startposition eines Elements ändert, aber der Scrollversatz (d. h. scrollLeft oder scrollTop) um denselben Wert (jedoch in die entgegengesetzte Richtung) geändert wird, gilt dies nicht als Layoutverschiebung, sofern sie im selben Frame auftreten.

Weitere Informationen zu Layoutverschiebungen finden Sie unter Fehlerbehebung bei Layoutverschiebungen.

Moderne Technologie nutzen

Viele Websites verwenden JavaScript-Bibliotheken von Drittanbietern, um Karussells zu implementieren. Wenn Sie derzeit ältere Karussell-Tools verwenden, können Sie die Leistung möglicherweise verbessern, indem Sie zu neueren Tools wechseln. Neuere Tools verwenden in der Regel effizientere APIs und benötigen weniger zusätzliche Abhängigkeiten wie jQuery.

Je nach Art des Karussells, das Sie erstellen, benötigen Sie jedoch möglicherweise überhaupt kein JavaScript. Mit der neuen Scroll Snap API lassen sich karussellähnliche Übergänge nur mit HTML und CSS implementieren.

Die folgenden Ressourcen zur Verwendung von scroll-snap könnten hilfreich sein:

• Komponente „Stories“ erstellen (web.dev)
• Webstile der nächsten Generation: Scroll-Snap (web.dev)
• Karussell für Nur-CSS (CSS-Tricks)
• So erstellen Sie ein Nur-CSS-Karussell (CSS-Tricks)

Karussellinhalte optimieren

Karussells enthalten oft einige der größten Bilder einer Website. Daher kann es sich lohnen, dafür zu sorgen, dass diese Bilder vollständig optimiert sind. Die Auswahl des richtigen Bildformats und der Komprimierungsstufe, Verwendung eines Bild-CDN und Verwenden von srcset zum Bereitstellen mehrerer Bildversionen sind alles Verfahren, mit denen sich die Übertragungsgröße von Bildern reduzieren lässt.

Leistungsmessung

In diesem Abschnitt wird die LCP-Messung in Verbindung mit Karussells erläutert. Obwohl Karussells bei der LCP-Berechnung genauso behandelt werden wie andere UX-Elemente, ist der Mechanismus der LCP-Berechnung für die automatische Wiedergabe von Karussells ein häufiger Grund für Verwirrung.

LCP-Messung für Karussells

Dies sind die wichtigsten Punkte, um zu verstehen, wie die LCP-Berechnung für Karussells funktioniert:

• Beim LCP werden Seitenelemente so berücksichtigt, wie sie in den Frame gezeichnet werden. Neue Kandidaten für das LCP-Element werden nicht mehr berücksichtigt, sobald der Nutzer mit der Seite interagiert (tippt, scrollt oder drückt). Daher kann jede Folie in einem automatisch wiedergegebenen Karussell das letzte LCP-Element sein. In einem statischen Karussell hingegen wäre nur die erste Folie ein potenzieller LCP-Kandidat.
• Wenn zwei Bilder gleicher Größe gerendert werden, wird das erste Bild als LCP-Element betrachtet. Das LCP-Element wird nur aktualisiert, wenn der LCP-Kandidaten größer als das aktuelle LCP-Element ist. Wenn also alle Karussell-Elemente die gleiche Größe haben, sollte das LCP-Element das erste Bild sein, das angezeigt wird.
• Bei der Bewertung von LCP-Kandidaten berücksichtigt LCP die sichtbare oder die interne Größe, je nachdem, was kleiner ist. Wenn also ein automatisch abspielendes Karussell Bilder in einer einheitlichen Größe anzeigt, aber Bilder mit unterschiedlichen systeminternen Größen enthält, die kleiner als die Anzeigegröße sind, kann sich das LCP-Element ändern, wenn neue Folien angezeigt werden. Wenn in diesem Fall alle Bilder in derselben Größe angezeigt werden, wird das Bild mit der größten intrinsischen Größe als LCP-Element betrachtet. Um den LCP-Wert niedrig zu halten, sollten Sie darauf achten, dass alle Elemente in einem Karussell mit automatischer Wiedergabe die gleiche Größe haben.

Änderungen an der LCP-Berechnung für Karussells in Chrome 88

Ab Chrome 88 gelten Bilder, die später aus dem DOM entfernt werden, als potenzielle Largest Contentful Paints. Vor Chrome 88 wurden diese Bilder nicht berücksichtigt. Bei Websites mit Karussells mit automatischer Wiedergabe wirkt sich diese Änderung der Definition entweder neutral oder positiv auf die LCP-Werte aus.

Diese Änderung wurde als Reaktion auf die Beobachtung vorgenommen, dass viele Websites Karussellübergänge implementieren, indem das zuvor angezeigte Bild aus dem DOM-Baum entfernt wird. Vor Chrome 88 löste das Entfernen des vorherigen Elements jedes Mal, wenn eine neue Folie angezeigt wurde, eine LCP-Aktualisierung aus. Diese Änderung betrifft nur automatisch abgespielte Karussells per Definition. Potenziell Largest Contentful Paints können nur erfolgen, bevor der Nutzer zum ersten Mal mit der Seite interagiert.

Änderungen an Grenzwerten in Chrome 121

In Chrome 121 wurde das Verhalten von horizontal scrollbaren Bildern wie Karussells geändert. Für diese gelten jetzt dieselben Grenzwerte wie für das vertikale Scrollen. Bei Karussell-Anwendungsfällen werden also Bilder geladen, bevor sie im Darstellungsbereich sichtbar sind. Das bedeutet, dass das Laden des Bildes für den Nutzer weniger wahrnehmbar ist, allerdings auf Kosten von mehr Downloads. In der Demo zum horizontalen Lazy Loading können Sie das Verhalten in Chrome mit Safari und Firefox vergleichen.

Weitere Aspekte

In diesem Abschnitt werden Best Practices für UX und Produkte erläutert, die Sie bei der Implementierung von Karussells beachten sollten. Karussells sollten Ihre Geschäftsziele voranbringen und Inhalte so präsentieren, dass sie leicht zu navigieren und zu lesen sind.

Best Practices für die Navigation

Gut sichtbare Navigationssteuerelemente bereitstellen

Die Steuerelemente für die Karussellnavigation sollten leicht anzuklicken und gut sichtbar sein. Das wird selten gut umgesetzt. Die meisten Karussells haben kleine und subtile Navigationssteuerelemente. Denken Sie daran, dass eine einzelne Farbe oder ein bestimmter Stil nur selten in allen Situationen funktioniert. Beispielsweise kann ein Pfeil, der vor einem dunklen Hintergrund deutlich sichtbar ist, auf einem hellen Hintergrund möglicherweise schlecht zu erkennen sein.

Navigationsfortschritt anzeigen

Die Steuerelemente für die Karussellnavigation sollten Kontext zur Gesamtzahl der Folien und zum Fortschritt des Nutzers liefern. So können Nutzer leichter zu einer bestimmten Folie wechseln und erkennen, welche Inhalte sie sich bereits angesehen haben. In manchen Situationen kann es auch hilfreich sein, eine Vorschau auf zukünftige Inhalte zu geben – sei es ein Auszug aus der nächsten Folie oder eine Liste von Thumbnails – und die Interaktion fördern.

Touch-Gesten für Mobilgeräte unterstützen

Auf Mobilgeräten sollten Wischgesten zusätzlich zu den herkömmlichen Navigationssteuerelementen (z. B. Bildschirmschaltflächen) unterstützt werden.

Alternative Navigationspfade angeben

Da es unwahrscheinlich ist, dass die meisten Nutzer mit allen Karussellinhalten interagieren werden, sollten die Inhalte, zu denen die Karussell-Folien verlinken, auch über andere Navigationspfade zugänglich sein.

Best Practices für bessere Lesbarkeit

Autoplay nicht verwenden

Die Verwendung von Autoplay bringt zwei fast paradoxe Probleme mit sich: Bildschirmanimationen lenken den Nutzer in der Regel von wichtigen Inhalten ab und lenken den Blick von wichtigen Inhalten weg. Gleichzeitig ignorieren Nutzer Karussells, die automatisch wiedergegeben werden, weil sie Animationen oft mit Anzeigen in Verbindung bringen.

Daher ist Autoplay selten eine gute Wahl. Wenn Inhalte wichtig sind, können Sie die Autoplay-Funktion nicht verwenden, um ihre Präsenz zu maximieren. Sind Karussellinhalte nicht wichtig, lenkt die Verwendung der Autoplay-Funktion von den wichtigeren Inhalten ab. Darüber hinaus kann die automatische Wiedergabe von Karussells schwierig zu lesen sein (und auch lästig sein). Da Menschen in unterschiedlicher Geschwindigkeit lesen, kommt es selten vor, dass ein Karussell für verschiedene Nutzer ständig zur richtigen Zeit wechselt.

Idealerweise sollte die Navigation mit Folien durch die Steuerelemente für den Nutzer gesteuert werden. Wenn Sie Autoplay verwenden müssen, sollte die Autoplay-Funktion deaktiviert werden, wenn der Nutzer den Mauszeiger darauf bewegt. Außerdem sollte die Folienübergangsrate den Folieninhalt berücksichtigen: Je mehr Text eine Folie enthält, desto länger sollte sie auf dem Bildschirm angezeigt werden.

Text und Bilder voneinander trennen

Karusselltextinhalte sind oft in die entsprechende Bilddatei verankert, anstatt separat über HTML-Markup angezeigt zu werden. Dieser Ansatz ist schlecht für die Zugänglichkeit, Lokalisierung und Komprimierungsraten. Außerdem wird ein „One-Size-fits-all“-Ansatz für die Asset-Erstellung empfohlen. Allerdings sind Bild- und Textformatierungen selten in Desktop- und mobilen Formaten gleichermaßen gut lesbar.

Fassen Sie sich kurz.

Sie haben nur den Bruchteil einer Sekunde Zeit, um die Aufmerksamkeit der Nutzenden zu wecken. Kurze, prägnante Texte erhöhen die Wahrscheinlichkeit, dass Ihre Botschaft vermittelt wird.

Best Practices für Produkte

Karussells eignen sich gut in Situationen, in denen die Verwendung von zusätzlichem vertikalem Raum zum Anzeigen zusätzlicher Inhalte nicht möglich ist. Karussells auf Produktseiten sind ein gutes Beispiel für diesen Anwendungsfall.

Karussells werden jedoch nicht immer effektiv eingesetzt.

• Karussells können leicht mit Werbeanzeigen von Nutzern verwechselt werden, vor allem, wenn sie Werbung enthalten oder automatisch fortfahren. Nutzer ignorieren Anzeigen – ein Phänomen, das als Bannerblindheit bezeichnet wird.
• Karussells werden häufig verwendet, um mehrere Abteilungen zu platzieren und keine Entscheidungen über Geschäftsprioritäten zu treffen. Daher können Karussells schnell zu einer Ablage für ineffektive Inhalte werden.

Ihre Annahmen testen

Die geschäftlichen Auswirkungen von Karussells, insbesondere auf Startseiten, sollten bewertet und getestet werden. Anhand der Karussellklickrate kannst du feststellen, ob ein Karussell und seine Inhalte effektiv sind.

Relevant sein

Karussells funktionieren am besten, wenn sie interessante und relevante Inhalte mit einem klaren Kontext enthalten. Inhalte, die Nutzer außerhalb eines Karussells nicht ansprechen, werden nicht besser abschneiden, auch wenn sie in einem Karussell platziert werden. Wenn Sie ein Karussell verwenden müssen, priorisieren Sie die Inhalte und achten Sie darauf, dass jede Folie so relevant ist, dass der Nutzer bis zur nächsten Folie weiterklicken möchte.