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 aufgerufen 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 an sich sollte nur minimale oder 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 angezeigt werden.

• LCP (Largest Contentful Paint)

  Große Karussells im „Above the fold“-Bereich enthalten oft das LCP-Element der Seite und können daher einen großen Einfluss auf den LCP haben. 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, verwenden Sie keine 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 im Ladevorgang der Seite erkannt werden. Die Verwendung von JavaScript zum Initiieren des Ladens von Karussellinhalten ist wahrscheinlich der größte Leistungsfehler, den es bei der Verwendung von Karussells zu vermeiden gilt. 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.

Layout Shifts vermeiden

Hinweis : Für Chrome 88-90 wurden verschiedene Fehlerkorrekturen im Zusammenhang mit der Berechnung von Layout Shifts vorgenommen. 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.

• Navigationssteuerelemente:Das Verschieben oder Hinzufügen/Entfernen von Karussellnavigationssteuerelementen aus dem DOM kann zu Layoutverschiebungen führen, je nachdem, wie diese Änderungen implementiert werden. Bei Karussells mit diesem Verhalten erfolgt 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:

• Karussells mit automatischer Wiedergabe:Folienübergänge sind die häufigste Ursache für karussellbezogene Layoutverschiebungen. In einem Karussell ohne Autoplay treten diese Layout Shifts normalerweise innerhalb von 500 ms nach einer Nutzerinteraktion auf und zählen daher nicht auf den Cumulative Layout Shift (CLS). 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 sein Scroll-Offset (scrollLeft oder scrollTop) aber um denselben Betrag (aber in die entgegengesetzte Richtung) ändert, gilt dies nicht als Layoutänderung, sofern sie im selben Frame auftreten.

Weitere Informationen zu Layout Shifts finden Sie unter Layout Shifts debuggen.

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 tendenziell effizientere APIs und erfordern weniger 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 lassen sich 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. Obwohl Karussells bei der LCP-Berechnung nicht anders behandelt werden als andere UX-Elemente, ist der Mechanismus der Berechnung des LCP für Karussells mit automatischer Wiedergabe ein Anhaltspunkt für Verwirrung.

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). Somit kann jede Folie in einem automatisch wiedergegebenen Karussell das letzte LCP-Element sein, während in einem statischen Karussell nur die erste Folie ein potenzieller LCP-Kandidat wäre.
• 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-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, die Bilder aber unterschiedliche ursprüngliche Größen haben, die kleiner als die Anzeigegröße sind, kann sich das LCP-Element ändern, wenn neue Folien angezeigt werden. Wenn alle Bilder in derselben Größe angezeigt werden, wird in diesem Fall das Bild mit der größten intrinsischen 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

Ab Chrome 88 gelten Bilder, die später aus dem DOM entfernt werden, als potenziell größte Contentful Paints. 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 beim Karussell 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 für Karussells sollte leicht zu klicken und gut sichtbar sein. Das wird selten gut gemacht. Die meisten Karussells haben sowohl kleine als auch subtile Navigationssteuerelemente. Denken Sie daran, dass eine einzelne Farbe oder ein einzelner 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 Navigationssteuerungen für Karussells sollten 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.

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

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 nervig sein. Nutzer lesen unterschiedlich schnell. 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 Nutzer den Mauszeiger auf das Video 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 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 Werbung verwechselt. Nutzer neigen dazu, Werbung zu ignorieren. Dieses Phänomen wird als Bannerblindheit bezeichnet.
• 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 einen Nutzer außerhalb eines Karussells nicht ansprechen würden, führt die Platzierung in einem Karussell nicht zu einer besseren Leistung. 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.