Best Practices für Karussells

Karussells im Hinblick auf Leistung und Nutzerfreundlichkeit optimieren

Katie Hempenius

Ein Karussell ist eine UX-Komponente, mit der Inhalte in Form einer Diashow präsentiert werden. Karussells können automatisch abgespielt oder manuell von Nutzern gesteuert werden. Karussells können auch an anderer Stelle verwendet werden, werden aber am häufigsten verwendet, um Bilder, Produkte und Angebote auf Startseiten zu präsentieren.

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

Leistung

Ein gut implementiertes Karussell sollte an sich nur sehr geringe oder gar keine Auswirkungen auf die Leistung haben. Karussells enthalten jedoch oft große Medien-Assets. Große Assets können sich auf die Leistung auswirken, unabhängig davon, ob sie in einem Karussell oder an anderer Stelle präsentiert werden.

• LCP (Largest Contentful Paint)

  Große Karussells, die sich über dem sichtbaren Bereich befinden, enthalten oft das LCP-Element der Seite und können sich daher erheblich auf das LCP auswirken. In diesen Fällen kann die LCP durch die Optimierung des Karussells erheblich verbessert werden. Eine ausführliche Erklärung dazu, wie die LCP-Messung auf Seiten mit Karussells funktioniert, finden Sie im Abschnitt LCP-Messung für Karussells.

• INP (Interaction to Next Paint)

  Für Karussells gelten nur minimale JavaScript-Anforderungen und sie sollten sich daher nicht auf die Responsivität der Seite auswirken. Wenn Sie feststellen, dass das Karussell Ihrer Website lange laufende Scripts hat, sollten Sie die Karussell-Tools ersetzen.

• CLS (Cumulative Layout Shift)

  In einer überraschend großen Anzahl von Karussells werden ruckelige, nicht zusammengesetzte Animationen verwendet, die zu einer Erhöhung des CLS-Werts beitragen können. Auf Seiten mit automatisch abgespielten Karussells kann dies zu einem unendlichen CLS führen. Diese Art von CLS ist für das menschliche Auge in der Regel nicht sichtbar, was das Problem leicht übersehen lässt. Um dieses Problem zu vermeiden, sollten Sie nicht zusammengesetzte Animationen in Ihrem Karussell vermeiden (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 im Ladevorgang der Seite erkannt werden. Das Laden von Karussellinhalten über JavaScript zu starten, ist wahrscheinlich der größte Leistungsfehler, den Sie bei der Verwendung von Karussells vermeiden sollten. Das verzögert das Laden von Bildern und kann sich negativ auf den LCP auswirken.

Do

<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 sollten Sie die erste Folie statisch laden und sie dann nach und nach um Navigationssteuerungen und zusätzliche Inhalte ergänzen. Diese Technik eignet sich am besten für Umgebungen, in denen Sie die Aufmerksamkeit der Nutzer über einen längeren Zeitraum haben. So haben die zusätzlichen Inhalte Zeit zum Laden. In Umgebungen wie Startseiten, in denen Nutzer nur eine oder zwei Sekunden verweilen, kann es ebenfalls effektiv sein, nur ein einziges Bild zu laden.

Layoutverschiebungen vermeiden

Hinweis : In Chrome 88–90 wurden verschiedene Fehlerkorrekturen im Zusammenhang mit der Berechnung von Layoutverschiebungen veröffentlicht. Viele dieser Fehlerkorrekturen betreffen Karussells. Aufgrund dieser Fehlerkorrekturen sollten Websites in neueren Chrome-Versionen niedrigere Bewertungen für Layoutänderungen im Karussell erhalten.

Folienübergänge und Navigationssteuerungen sind die beiden häufigsten Ursachen für Layoutänderungen in Karussells:

• Folienübergänge:Layoutänderungen, die während Folienübergängen auftreten, werden in der Regel durch die Aktualisierung der layoutauslösenden Eigenschaften von DOM-Elementen verursacht. Beispiele für diese Properties sind left, top, width und marginTop. Verwenden Sie stattdessen die CSS-Eigenschaft transform, um diese Elemente zu überblenden und Layoutverschiebungen zu vermeiden. In dieser Demo wird gezeigt, wie Sie mit transform ein einfaches Karussell erstellen.

• Navigationselemente:Wenn Sie die Navigationselemente für Karussells im DOM verschieben oder hinzufügen/entfernen, kann das je nach Implementierung zu Layoutänderungen führen. Bei Karussells, die dieses Verhalten zeigen, geschieht dies in der Regel, wenn der Nutzer den Mauszeiger darauf bewegt.

Hier sind einige häufige Unklarheiten im Zusammenhang mit der CLS-Messung für Karussells:

• Automatisch abspielende Karussells:Folienübergänge sind die häufigste Ursache für Layoutverschiebungen bei Karussells. In einem Karussell ohne automatische Wiedergabe treten diese Layoutverschiebungen in der Regel innerhalb von 500 Millisekunden nach einer Nutzerinteraktion auf und werden daher nicht auf die kumulative Layoutverschiebung (Cumulative Layout Shift, CLS) angerechnet. Bei automatischen Karussells können diese Layoutänderungen jedoch nicht nur potenziell zum CLS beitragen, sondern sich auch unendlich wiederholen. Daher ist es besonders wichtig, zu prüfen, ob ein automatisch abspielendes Karussell nicht die Ursache für Layoutänderungen ist.

• Scrollen:Bei einigen Karussells können Nutzer durch Scrollen durch die Karussellfolien blättern. Wenn sich die Startposition eines Elements ändert, sich aber sein Scroll-Offset (scrollLeft oder scrollTop) um denselben Betrag (aber in die entgegengesetzte Richtung) ändert, gilt dies nicht als Layoutänderung, sofern sie im selben Frame auftreten.

Weitere Informationen zu Layoutverschiebungen finden Sie unter Layoutverschiebungen beheben.

Moderne Technologien 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 erfordern seltener zusätzliche Abhängigkeiten wie jQuery.

Je nach Art des Karussells, das Sie erstellen, benötigen Sie möglicherweise gar kein JavaScript. Mit der neuen Scroll Snap API können Sie Karussell-ähnliche Übergänge nur mit HTML und CSS implementieren.

Hier finden Sie einige hilfreiche Ressourcen zur Verwendung von scroll-snap:

• Stories-Komponente erstellen (web.dev)
• Web-Styling der nächsten Generation: Scroll-Snap (web.dev)
• Nur-CSS-Karussell (CSS Tricks)
• How to Make a CSS-Only Carousel (CSS Tricks)

Karussellinhalte optimieren

Karussells enthalten oft einige der größten Bilder einer Website. Es kann sich also lohnen, diese Bilder vollständig zu optimieren. Die richtige Auswahl des Bildformats und der Komprimierungsstufe, die Verwendung eines Bild-CDN und die Verwendung von „srcset“, um mehrere Bildversionen bereitzustellen sind alles Methoden, mit denen die Übertragungsgröße von Bildern reduziert werden kann.

Leistungsmessung

In diesem Abschnitt wird die LCP-Messung für Karussells erläutert. Karussells werden bei der LCP-Berechnung nicht anders behandelt als andere UX-Elemente. Die Berechnung der LCP für automatisch abgespielte Karussells ist jedoch oft verwirrend.

LCP-Messung für Karussells

Hier sind die wichtigsten Punkte zur Berechnung des LCP für Karussells:

• Beim LCP werden Seitenelemente berücksichtigt, sobald sie im Frame dargestellt werden. Neue Kandidaten für das LCP-Element werden nicht mehr berücksichtigt, sobald der Nutzer mit der Seite interagiert (tippt, scrollt oder Tasten drückt). Daher kann jede Folie in einem automatisch abgespielten Karussell das endgültige LCP-Element sein, während bei einem statischen Karussell nur die erste Folie ein potenzieller LCP-Kandidat ist.
• Wenn zwei Bilder derselben Größe gerendert werden, wird das erste Bild als LCP-Element betrachtet. Das LCP-Element wird nur aktualisiert, wenn der LCP-Kandidat größer als das aktuelle LCP-Element ist. Wenn also alle Karussellelemente dieselbe Größe haben, sollte das LCP-Element das erste Bild sein, das angezeigt wird.
• Bei der Bewertung von LCP-Kandidaten wird die sichtbare Größe oder die intrinsische Größe, je nachdem, welche kleiner ist, berücksichtigt. Wenn also in einem automatisch abgespielten Karussell Bilder in einer einheitlichen Größe angezeigt werden, aber Bilder mit unterschiedlichen ursprünglichen Größen enthalten sind, 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 ursprünglichen Größe als LCP-Element betrachtet. Um den LCP niedrig zu halten, sollten alle Elemente in einem automatisch abgespielten Karussell dieselbe Eigengröße haben.

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

Seit Chrome 88 werden Bilder, die später aus dem DOM entfernt werden, als potenzielle Largest Contentful Paints betrachtet. Vor Chrome 88 wurden diese Bilder nicht berücksichtigt. Bei Websites mit automatisch abgespielten Karussells wirkt sich diese Definitionänderung neutral oder positiv auf die LCP-Werte aus.

Diese Änderung wurde aufgrund der Beobachtung vorgenommen, dass viele Websites Karussellübergänge implementieren, indem sie das zuvor angezeigte Bild aus dem DOM-Baum entfernen. Vor Chrome 88 wurde jedes Mal, wenn eine neue Folie präsentiert wurde, durch das Entfernen des vorherigen Elements ein LCP-Update ausgelöst. Diese Änderung betrifft nur automatisch abgespielte Karussells. Definitionsgemäß können die potenziell größten Paints mit Inhalt nur auftreten, bevor ein Nutzer zum ersten Mal mit der Seite interagiert.

Änderungen an Grenzwerten in Chrome 121

In Chrome 121 wurde das Verhalten für horizontal scrollbare Bilder wie Karussells geändert. Für diese werden jetzt dieselben Grenzwerte wie beim vertikalen Scrollen verwendet. Das bedeutet, dass für den Karussell-Use-Case Bilder geladen werden, bevor sie im Darstellungsbereich sichtbar sind. Das bedeutet, dass das Laden des Bildes für den Nutzer weniger wahrscheinlich zu bemerken ist, aber es werden mehr Downloads benötigt. In der Demo für horizontales Lazy Loading können Sie das Verhalten in Chrome mit dem in Safari und Firefox vergleichen.

Weitere Hinweise

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 bedienen und zu lesen sind.

Best Practices für die Navigation

Gut sichtbare Navigationselemente bereitstellen

Die Navigationssteuerung des Karussells sollte leicht zu klicken und gut sichtbar sein. Das ist selten gut gemacht – die meisten Karussells haben Navigationssteuerungen, die sowohl klein als auch unauffällig sind. Denken Sie daran, dass eine einzige Farbe oder ein einziger Stil für die Navigationssteuerung selten in allen Situationen funktioniert. Ein Pfeil, der vor einem dunklen Hintergrund gut sichtbar ist, kann vor einem hellen Hintergrund schwer zu erkennen sein.

Navigationsfortschritt anzeigen

Die Navigationssteuerung für Karussells sollte Kontext zur Gesamtzahl der Folien und zum Fortschritt des Nutzers bieten. So können Nutzer leichter zu einer bestimmten Folie wechseln und sehen, welche Inhalte bereits angesehen wurden. In einigen Fällen kann es auch hilfreich sein, eine Vorschau der nächsten Inhalte zu zeigen, z. B. einen Ausschnitt der nächsten Folie oder eine Liste von Thumbnails. Das kann die Interaktion steigern.

Unterstützung von Touch-Gesten

Auf Mobilgeräten sollten neben traditionellen Navigationselementen (z. B. Bildschirmschaltflächen) auch Wischbewegungen unterstützt werden.

Alternative Navigationspfade bereitstellen

Da es unwahrscheinlich ist, dass die meisten Nutzer mit allen Karussellinhalten interagieren, sollten die Inhalte, auf die Karussellfolien verlinken, über andere Navigationspfade zugänglich sein.

Best Practices für die Lesbarkeit

Autoplay nicht verwenden

Die Verwendung von automatischer Wiedergabe führt zu zwei fast paradoxen Problemen: Bildschirmanimationen lenken Nutzer ab und lenken den Blick von wichtigeren Inhalten ab. Gleichzeitig ignorieren Nutzer Karussells mit automatischer Wiedergabe, da sie Animationen oft mit Anzeigen in Verbindung bringen.

Daher ist Autoplay nur selten eine gute Wahl. Wenn Inhalte wichtig sind, wird ihre Sichtbarkeit maximiert, wenn Sie Autoplay nicht verwenden. Wenn Karussellinhalte nicht wichtig sind, lenkt die Verwendung von Autoplay von wichtigeren Inhalten ab. Außerdem sind automatisch abgespielte Karussells schwer zu lesen und können auch nerven. Nutzer lesen mit unterschiedlicher Geschwindigkeit. Daher ist es selten, dass ein Karussell für verschiedene Nutzer immer zur „richtigen“ Zeit weiterwechselt.

Idealerweise sollte die Foliennavigation über Navigationselemente vom Nutzer gesteuert werden. Wenn Sie Autoplay verwenden müssen, sollte die Funktion deaktiviert werden, wenn der Mauszeiger auf ein Video bewegt wird. 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 trennen

Der Textinhalt des Karussells ist oft in die entsprechende Bilddatei eingebettet, anstatt separat mit HTML-Markup angezeigt zu werden. Dieser Ansatz ist schlecht für Barrierefreiheit, Lokalisierung und Komprimierungsraten. Außerdem wird ein „One-Size-fits-all“-Ansatz für die Asset-Erstellung gefördert. Die gleiche Bild- und Textformatierung ist jedoch selten auf Desktop- und Mobilgeräten gleichermaßen gut lesbar.

Präzise formulieren

Sie haben nur einen Bruchteil einer Sekunde Zeit, die Aufmerksamkeit der Nutzer zu gewinnen. Mit kurzen, prägnanten Texten erhöhen Sie die Wahrscheinlichkeit, dass Ihre Botschaft ankommt.

Best Practices für Produkte

Karussells eignen sich gut, wenn kein zusätzlicher vertikaler Raum für zusätzliche Inhalte zur Verfügung steht. Karussells auf Produktseiten sind oft ein gutes Beispiel für diesen Anwendungsfall.

Karussells werden jedoch nicht immer effektiv eingesetzt.

• Karussells, insbesondere wenn sie Angebote enthalten oder automatisch vor- und zurückgeblättert werden, werden von Nutzern leicht mit Anzeigen verwechselt. Nutzer ignorieren Anzeigen in der Regel – ein Phänomen, das als Bannerblindheit bezeichnet wird.
• Karussells werden häufig verwendet, um mehrere Abteilungen zufriedenzustellen und Entscheidungen über Geschäftsprioritäten zu vermeiden. So können Karussells schnell zu einer Müllhalde für ineffektive Inhalte werden.

Annahmen testen

Die Geschäftsauswirkungen von Karussells, insbesondere auf Startseiten, sollten bewertet und getestet werden. Anhand der Klickraten für Karussells können Sie feststellen, ob ein Karussell und seine Inhalte effektiv sind.

Relevant sein

Karussells funktionieren am besten, wenn sie interessante und relevante Inhalte enthalten, die in einem klaren Kontext präsentiert werden. Wenn Inhalte außerhalb eines Karussells nicht für Nutzer interessant sind, wird sich ihre Leistung durch die Platzierung in einem Karussell nicht verbessern. Wenn Sie ein Karussell verwenden müssen, priorisieren Sie die Inhalte und achten Sie darauf, dass jede Folie so relevant ist, dass Nutzer zur nächsten Folie weiterklicken möchten.