Best Practices für Karussells

Karussells für Leistung und Nutzerfreundlichkeit optimieren

Katie Hempenius

Ein Karussell ist eine UX-Komponente, mit der Inhalte wie in einer Diashow präsentiert werden. Karussells können automatisch abgespielt werden oder Nutzer können manuell durch sie navigieren. Karussells können zwar auch an anderen Stellen verwendet werden, werden aber am häufigsten eingesetzt, um Bilder, Produkte und Angebote auf Startseiten zu präsentieren.

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

Leistung

Ein gut implementiertes Karussell sollte nur sehr geringe oder gar keine Auswirkungen auf die Leistung haben. Karussells enthalten jedoch oft große Media-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 im sichtbaren Bereich befinden, enthalten oft das LCP-Element der Seite und können daher einen erheblichen Einfluss auf den LCP haben. In diesen Fällen kann die Optimierung des Karussells die LCP erheblich verbessern. Eine ausführliche Erklärung zur LCP-Messung auf Seiten mit Karussells finden Sie im Abschnitt LCP-Messung für Karussells.

• INP (Interaction to Next Paint)

  Für Karussells sind nur minimale JavaScript-Anforderungen erforderlich. Daher sollten sie sich nicht auf die Reaktionsfähigkeit der Seite auswirken. Wenn Sie feststellen, dass das Karussell Ihrer Website lange ausgeführte Skripts enthält, sollten Sie die Karussell-Tools ersetzen.

• CLS (Cumulative Layout Shift)

  Überraschend viele Karussells verwenden ruckartige, nicht zusammengesetzte Animationen, die zum CLS beitragen können. Auf Seiten mit automatisch abspielenden Karussells kann dies zu unendlichem CLS führen. Diese Art von CLS ist für das menschliche Auge in der Regel nicht sichtbar, weshalb das Problem leicht zu übersehen ist. Um dieses Problem zu vermeiden, sollten Sie in Ihrem Karussell keine nicht zusammengesetzten Animationen verwenden, 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 frühzeitig während des Seitenladevorgangs erkannt werden. Die Verwendung von JavaScript zum Initiieren des Ladens von Karussellinhalten ist wahrscheinlich der größte Leistungsfehler, den Sie bei der Verwendung von Karussells vermeiden sollten. Dadurch wird das Laden von Bildern verzögert und der LCP kann sich verschlechtern.

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

Für eine erweiterte Karusselloptimierung sollten Sie die erste Folie statisch laden und dann nach und nach Navigationssteuerelemente und zusätzliche Inhalte hinzufügen. Diese Technik eignet sich am besten für Umgebungen, in denen Nutzer längere Zeit aufmerksam sind, da so genügend Zeit zum Laden der zusätzlichen Inhalte bleibt. Auf Startseiten, auf denen Nutzer vielleicht nur ein oder zwei Sekunden bleiben, kann es ähnlich effektiv sein, nur ein einzelnes Bild zu laden.

Layoutverschiebungen vermeiden

Die beiden häufigsten Quellen für Layout Shifts in Karussells sind Übergänge zwischen Folien und Navigationssteuerelemente:

• Folienübergänge:Layout Shifts, die während Folienübergängen auftreten, werden in der Regel durch das Aktualisieren der layoutbestimmenden Eigenschaften von DOM-Elementen verursacht. Beispiele für einige dieser Properties sind left, top, width und marginTop. Um Layoutverschiebungen zu vermeiden, verwenden Sie stattdessen die CSS-Eigenschaft transform, um diese Elemente zu animieren.

• Navigationssteuerelemente:Wenn Sie die Karussellnavigation im DOM verschieben oder hinzufügen bzw. entfernen, kann dies je nach Implementierung zu Layout Shifts führen. Karussells, die dieses Verhalten zeigen, reagieren in der Regel auf das Hovern des Nutzers.

Hier sind einige häufige Fragen zur CLS-Messung für Karussells:

• Autoplay-Karussells:Übergänge zwischen Folien sind die häufigste Ursache für Layout Shifts 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 Cumulative Layout Shift (CLS) angerechnet. Bei Autoplay-Karussells können diese Layoutverschiebungen jedoch nicht nur auf CLS angerechnet werden, sondern sich auch unbegrenzt wiederholen. Daher ist es besonders wichtig, zu prüfen, ob ein Autoplay-Karussell Layoutverschiebungen verursacht.

• Scrollen:Bei einigen Karussells können Nutzer durch Scrollen durch die Karussellfolien navigieren. Wenn sich die Startposition eines Elements ändert, sein Scroll-Offset (scrollLeft oder scrollTop) sich jedoch um denselben Betrag (aber in die entgegengesetzte Richtung) ändert, wird dies nicht als Layoutverschiebung betrachtet, sofern die Änderungen im selben Frame erfolgen.

Weitere Informationen zu Layoutverschiebungen finden Sie unter Layoutverschiebungen debuggen.

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 erfordern 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 karussellartige Übergänge nur mit HTML und CSS implementieren.

Hier finden Sie einige Ressourcen zur Verwendung von scroll-snap, die hilfreich sein könnten:

• Stories-Komponente erstellen (web.dev)
• Webstyling der nächsten Generation: Scroll-Snap (web.dev)
• CSS-Only Carousel (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 Auswahl des richtigen Bildformats und der richtigen Komprimierungsstufe, die Verwendung eines Bild-CDNs und die Verwendung von „srcset“ zum Bereitstellen mehrerer Bildversionen sind alles Techniken, mit denen die Übertragungsgröße von Bildern reduziert werden kann.

Leistungsmessung

In diesem Abschnitt wird die LCP-Messung im Zusammenhang mit Karussells erläutert. Karussells werden bei der LCP-Berechnung nicht anders behandelt als andere UX-Elemente. Die Berechnung des LCP für automatisch abspielende Karussells ist jedoch ein häufiger Grund für Verwirrung.

LCP-Messung für Karussells

Hier sind die wichtigsten Punkte, um die Berechnung des LCP für Karussells zu verstehen:

• Beim LCP werden Seitenelemente berücksichtigt, wenn sie im Frame gerendert 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 ablaufenden Karussell das letzte LCP-Element sein, während in einem statischen Karussell nur die erste Folie ein potenzieller LCP-Kandidat ist.
• Wenn zwei gleich große Bilder gerendert werden, gilt das erste Bild als LCP-Element. Das LCP-Element wird nur aktualisiert, wenn der LCP-Kandidat größer als das aktuelle LCP-Element ist. Wenn alle Karussellelemente gleich groß sind, sollte das LCP-Element also das erste angezeigte Bild sein.
• Bei der Bewertung von LCP-Kandidaten wird die sichtbare Größe oder die intrinsische Größe, je nachdem, welche kleiner ist, berücksichtigt. Wenn in einem automatisch abspielenden Karussell Bilder in einer einheitlichen Größe angezeigt werden, aber Bilder mit unterschiedlichen natürlichen Größen enthalten sind, die kleiner als die Anzeigegröße sind, kann sich das LCP-Element ändern, wenn neue Folien angezeigt werden. Wenn alle Bilder in diesem Fall in derselben Größe angezeigt werden, gilt das Bild mit der größten intrinsischen Größe als LCP-Element. Damit der LCP niedrig bleibt, sollten alle Elemente in einem automatisch abspielenden Karussell dieselbe intrinsische Größ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, auf denen automatisch abspielende Karussells verwendet werden, wirkt sich diese Änderung der Definition entweder 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 abspielende Karussells. Per Definition können potenzielle Largest Contentful Paints 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 scrollende Bilder wie Karussells geändert. Dafür werden jetzt dieselben Grenzwerte wie für das vertikale Scrollen verwendet. Das bedeutet, dass Bilder für das Karussell geladen werden, bevor sie im sichtbaren Bereich zu sehen sind. Das bedeutet, dass das Laden von Bildern für den Nutzer weniger wahrscheinlich auffällt, aber mehr Downloads erforderlich sind.

Weitere Hinweise

In diesem Abschnitt werden Best Practices für UX und Produkte behandelt, die Sie bei der Implementierung von Karussells berücksichtigen sollten. Karussells sollten Ihre Geschäftsziele unterstützen und Inhalte auf eine Weise präsentieren, die leicht zu lesen und zu navigieren ist.

Best Practices für die Navigation

Gut sichtbare Navigationssteuerelemente bereitstellen

Die Steuerelemente für die Karussellnavigation sollten gut sichtbar und einfach anzuklicken sein. Das wird selten gut umgesetzt. Die meisten Karussells haben Navigationssteuerelemente, die sowohl klein als auch dezent sind. Eine einzelne Farbe oder ein einzelner Stil für das Navigationssteuerelement funktioniert selten in allen Situationen. Ein Pfeil, der vor einem dunklen Hintergrund gut sichtbar ist, ist vor einem hellen Hintergrund möglicherweise schwer zu erkennen.

Navigationsfortschritt anzeigen

Die Steuerelemente für die Karussellnavigation sollten Kontext zur Gesamtzahl der Folien und zum Fortschritt des Nutzers geben. So kann der Nutzer leichter zu einer bestimmten Folie navigieren und sehen, welche Inhalte er sich bereits angesehen hat. In manchen Situationen kann es auch hilfreich sein, eine Vorschau auf die bevorstehenden Inhalte zu geben, z. B. einen Ausschnitt der nächsten Folie oder eine Liste von Thumbnails. So lässt sich die Interaktion steigern.

Unterstützung von mobilen Gesten

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

Alternative Navigationspfade anbieten

Da die meisten Nutzer wahrscheinlich nicht mit allen Karussellinhalten interagieren, sollten die Inhalte, auf die Karussellfolien verweisen, über andere Navigationspfade zugänglich sein.

Best Practices für die Lesbarkeit

Autoplay nicht verwenden

Die Verwendung der automatischen Wiedergabe führt zu zwei fast paradoxen Problemen: Animationen auf dem Bildschirm lenken Nutzer ab und lenken den Blick von wichtigeren Inhalten ab. Gleichzeitig ignorieren Nutzer Karussells, die automatisch abgespielt werden, da sie Animationen oft mit Anzeigen in Verbindung bringen.

Daher ist Autoplay selten eine gute Wahl. Wenn Inhalte wichtig sind, wird ihre Sichtbarkeit maximiert, wenn kein Autoplay verwendet wird. Wenn Karussellinhalte nicht wichtig sind, lenkt die Verwendung von Autoplay von wichtigeren Inhalten ab. Außerdem können automatisch abspielende Karussells schwer zu lesen sein und als störend empfunden werden. Nutzer lesen unterschiedlich schnell. Daher ist es selten, dass ein Karussell für verschiedene Nutzer immer zum „richtigen“ Zeitpunkt wechselt.

Die Foliennavigation sollte idealerweise über Navigationssteuerelemente erfolgen. Wenn Sie Autoplay verwenden müssen, sollte es 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 getrennt halten

Der Textinhalt von Karussells ist oft in die entsprechende Bilddatei „eingebettet“ und wird nicht separat über HTML-Markup angezeigt. 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. Dieselbe 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, um die Aufmerksamkeit eines Nutzers zu erregen. Kurze, prägnante Texte erhöhen die Wahrscheinlichkeit, dass Ihre Botschaft ankommt.

Best Practices für Produkte

Karussells eignen sich gut, wenn kein zusätzlicher vertikaler Platz für die Anzeige von zusätzlichem Inhalt 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 Werbeaktionen enthalten oder automatisch weiterlaufen, werden von Nutzern leicht mit Anzeigen verwechselt. Nutzer ignorieren Anzeigen oft – ein Phänomen, das als Bannerblindheit bezeichnet wird.
• Karussells werden oft verwendet, um mehrere Abteilungen zu beruhigen und Entscheidungen über geschäftliche Prioritäten zu vermeiden. Daher können Karussells leicht zu einer Ablage für ineffektive Inhalte werden.

Annahmen testen

Die geschäftlichen Auswirkungen von Karussells, insbesondere auf Startseiten, sollten bewertet und getestet werden. Anhand der Klickraten von Karussells lässt sich feststellen, ob ein Karussell und seine Inhalte effektiv sind.

Relevant sein

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