Best Practices für Karussells

Karussells im Hinblick auf Leistung und Nutzerfreundlichkeit optimieren

Katie Hempenius
Katie Hempenius
X

Ein Karussell ist eine UX-Komponente, die Inhalte auf Diashow-ähnliche Weise anzeigt. Karussells können automatisch wiedergegeben werden oder manuell von den Nutzenden aufgerufen werden. Obwohl Karussells woanders verwendet werden können. Sie werden am häufigsten zum Anzeigen von Bildern, Produkte und Werbeaktionen auf Startseiten.

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

Bild mit einem Karussell

Leistung

Ein gut implementiertes Karussell an sich sollte nur sehr wenige oder gar keine auf die Leistung auswirken. Karussells enthalten jedoch oft große Medien-Assets. Große Assets können sich auf die Leistung auswirken, unabhängig davon, ob sie in oder anderswo suchen.

  • LCP (Largest Contentful Paint)

    Große Karussells „above the fold“ (ohne Scrollen sichtbar) enthalten oft das LCP-Element der Seite. kann sich also erheblich auf den LCP auswirken. In diesen Szenarien Durch die Optimierung des Karussells kann der LCP erheblich verbessert werden. Für eine detaillierte wie die LCP-Messung auf Seiten mit Karussells funktioniert, Siehe LCP-Messung für Karussells .

  • INP (Interaction to Next Paint)

    Für Karussells gelten Mindestanforderungen an JavaScript und sollten daher die Reaktionszeit von Seiten beeinflussen. Wenn Sie feststellen, dass das Karussell Ihrer Website Skripts mit langer Ausführungszeit verwenden, sollten Sie Ihre Karussell-Tools ersetzen.

  • CLS (Cumulative Layout Shift)

    Eine überraschende Anzahl von Karussells verwendet unzuverlässige, nicht zusammengesetzte Animationen, zu CLS beitragen. Auf Seiten mit automatisch wiedergegebenen Karussells unendliche CLS verursachen. Diese Art von CLS ist normalerweise nicht offensichtlich sodass das Problem leicht zu übersehen ist. Um dies zu vermeiden vermeiden Sie nicht zusammengesetzte Animationen in Ihrem Karussell erstellen (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, diese zu Beginn des Seitenladevorgangs für den Browser sichtbar sind. Wenn Sie JavaScript verwenden, das Laden von Karussellinhalten zu initiieren, Fehler, die Sie bei der Verwendung von Karussells vermeiden sollten. Dies verzögert das Laden des Bildes und sich negativ auf den LCP auswirken kann.

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 Karussell-Optimierung sollten Sie die erste Folie statisch laden, und dann schrittweise um Navigationssteuerelemente und zusätzliche Inhalte. Diese Technik eignet sich am besten für Umgebungen, in denen längerer Aufmerksamkeit des Nutzers, wodurch der zusätzliche Inhalt geladen wird. In Umgebungen wie Startseiten, auf denen Nutzende nur eine Sekunde kann es ähnlich effektiv sein, nur ein einziges Bild zu laden.

Layout Shifts vermeiden

Folienübergänge und Steuerelemente für die Navigation sind die beiden häufigsten Quellen von Layout Shifts in Karussells:

  • Folienübergänge:Layoutverschiebungen, die bei Folienübergängen auftreten, sind wird in der Regel dadurch verursacht, dass die Layout-induzierenden Eigenschaften von DOM-Elementen aktualisiert werden. Beispiele für diese Properties: left, top, width und marginTop. Verwenden Sie stattdessen die CSS-Datei, um Layoutverschiebungen zu vermeiden. transform um diese Elemente zu ändern. Dieses Demo zeigt, wie Sie mit transform ein einfaches Karussell zu erstellen.

  • Navigationssteuerung:Karussellnavigation verschieben, hinzufügen oder entfernen aus dem DOM können Layoutverschiebungen verursachen, je nachdem, wie diese Änderungen implementiert werden. Karussells mit diesem Verhalten zeigen dies normalerweise in wenn der Nutzer den Mauszeiger darüber bewegt.

Dies sind einige der häufigsten Unklarheiten in Bezug auf die CLS-Messung für Karussells:

  • Autoplay-Karussells:Folienübergänge sind die häufigste Quelle für Layout Shifts in Bezug auf Karussells. In einem Karussell ohne Autoplay werden diese Layout Shifts treten normalerweise innerhalb von 500 ms nach einer Nutzerinteraktion auf und zählen daher nicht in Richtung Cumulative Layout Shift (CLS) Sie können jedoch für Autoplay-Karussells festzulegen, können diese Layout Shifts nicht nur in Richtung CLS. Sie können sich aber auch unbegrenzt wiederholen. Daher ist es besonders wichtig, Es ist wichtig, zu überprüfen, ob ein Autoplay-Karussell Schichten.

  • Scrollen:Bei einigen Karussells ist die Navigation durch Scrollen möglich. Karussell-Folien. Wenn sich die Startposition eines Elements ändert, aber sein Scroll-Offset (d. h. scrollLeft oder scrollTop) gleich viel ändert (aber in entgegengesetzte Richtung), ist dies nicht als Layout Shifts betrachtet, sofern sie im selben Frame auftreten.

Weitere Informationen zu Layout Shifts finden Sie unter Layoutfehler beheben Schichten.

Moderne Technologie nutzen

Viele Websites verwenden JavaScript-Bibliotheken von Drittanbietern, um Karussells zu implementieren. Wenn Sie derzeit ältere Karussell-Tools verwenden, die Leistung durch den Wechsel zu neueren Tools verbessern. Neuere Tools sind meist verwenden effizientere APIs und benötigen weniger wahrscheinlich zusätzliche Abhängigkeiten wie jQuery.

Je nach Art des Karussells, das Sie erstellen, und JavaScript gar nicht erst. Die neue Scroll- Snap API ermöglicht es, karussellähnliche Übergänge nur mit HTML und Preisvergleichsportal.

Hier sind einige hilfreiche Ressourcen zur Verwendung von scroll-snap:

Karussell-Inhalte optimieren

Karussells enthalten oft einige der größten Bilder einer Website. um sicherzustellen, dass diese Bilder vollständig optimiert sind. Das richtige auswählen Bildformat und -komprimierungsstufe, über ein Bild-CDN und Verwenden von srcset zum Bereitstellen mehrerer Bilder Versionen sind alle Techniken zur Reduzierung der Übertragungsgröße von Bildern.

Leistungsmessung

In diesem Abschnitt wird die LCP-Messung im Zusammenhang mit Karussells erläutert. Obwohl Karussells werden beim LCP genauso behandelt wie alle anderen UX-Elemente. ist die Berechnung des LCP für automatisch wiedergegebene Karussells Punkt der Verwirrung.

LCP-Messung für Karussells

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

  • LCP berücksichtigt Seitenelemente, während sie auf den Frame übertragen werden. Neue Kandidaten für das LCP-Element werden nicht mehr berücksichtigt, sobald der Nutzer interagiert (z. B. Tippen, Scrollen oder Tastendruck) auf der Seite. Jede Folie in einer automatisch wiedergegebenen kann das Karussell das letzte LCP-Element sein, während in einem statischen wäre nur die erste Folie ein potenzieller LCP-Kandidat.
  • Wenn zwei Bilder gleicher Größe gerendert werden, wird das erste Bild berücksichtigt. das LCP-Element. Das LCP-Element wird nur aktualisiert, wenn der LCP-Kandidat größer als das aktuelle LCP-Element ist. Sind also alle Karussellelemente gleich groß ist, sollte das LCP-Element als erstes Bild angezeigt werden.
  • Bei der Bewertung von LCP-Kandidaten berücksichtigt LCP die „sichtbare Größe bzw. intrinsischer Größe, je nachdem, welcher Wert kleiner ist. Wenn also eine automatische Wiedergabe Karussell enthält Bilder in einheitlicher Größe, enthält aber Bilder von verschiedene intrinsische Größen die kleiner als die Anzeigegröße sind, kann sich das LCP-Element angezeigt werden. Wenn in diesem Fall alle Bilder auf derselben wird das Bild mit der größten intrinsischen Größe als LCP betrachtet. -Elements. Um den LCP niedrig zu halten, sollten Sie darauf achten, dass alle Elemente in einer die gleiche Größe haben.

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

Ab Chrome 88 Bilder, die später aus dem DOM entfernt werden, werden als potenziell größte Contentful Paints. Vor Chrome 88 wurden diese Bilder Kaufbereitschaft zeigen. Bei Websites mit automatisch wiedergegebenen Karussells ändert sich diese Definition haben einen neutralen oder positiven Einfluss auf den LCP-Wert.

Diese Änderung wurde als Reaktion auf die Beobachtung dass viele Websites Karussell-Übergänge implementieren, indem sie die zuvor angezeigten Bild aus dem DOM-Baum. Vor Chrome 88 war jedes Mal, wenn eine neue Folie angezeigt wurde, löst das Entfernen des vorherigen Elements einen LCP-Wert aus. aktualisieren. Diese Änderung betrifft ausschließlich die automatische Wiedergabe von Karussells. Large Contentful Paint kann nur auftreten, bevor Nutzende zum ersten Mal mit dem Seite.

Änderungen an Grenzwerten in Chrome 121

In Chrome 121 wurde das Verhalten für horizontal scrollende Bilder wie Karussells geändert. Dabei gelten jetzt dieselben Grenzwerte wie beim vertikalen Scrollen. Im Karussell-Anwendungsfall werden Bilder also geladen, bevor sie im Darstellungsbereich sichtbar sind. Das bedeutet, dass das Laden des Bildes für den Nutzer weniger wahrscheinlich auffällt, allerdings auf Kosten von mehr Downloads. Mithilfe der Demo zum horizontalen Lazy Loading können Sie das Verhalten von Chrome mit Safari und Firefox vergleichen.

Weitere Hinweise

In diesem Abschnitt werden Best Practices für UX und Produkte beschrieben, die Sie berücksichtigen sollten. bei der Implementierung von Karussells. Karussells sollten zu Ihren Geschäftszielen beitragen und Inhalte so präsentieren, dass sie leicht zu navigieren und zu lesen sind.

Gut sichtbare Navigationsbedienelemente bereitstellen

Die Steuerelemente für die Karussellnavigation sollten leicht anzuklicken und gut sichtbar sein. Dies ist etwas, das selten gut gemacht wird. Die meisten Karussells haben Navigationssteuerelemente, die sowohl klein als auch subtil sind. Eine einzelne Farbe oder ein einzelner Stil funktioniert die Navigationssteuerung selten in allen Situationen. Zum Beispiel mit einem Pfeil die deutlich vor einem dunklen Hintergrund zu sehen sind, vor einem hellen Hintergrund.

Navigationsfortschritt anzeigen

Die Steuerelemente für die Karussellnavigation sollten Kontext zur Gesamtzahl der die Folien und den Fortschritt der Nutzenden. Diese Informationen erleichtern damit Nutzende zu einer bestimmten Folie navigieren können, um zu verstehen, welche Inhalte aufgerufen wurden. In einigen Fällen wird eine Vorschau der bevorstehenden ganz gleich, ob es sich um einen Auszug aus der nächsten Folie oder eine Liste hilfreich sein und die Interaktion steigern.

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

Auf Mobilgeräten sollten zusätzlich zu den herkömmlichen Wischgesten Wischgesten unterstützt werden. Navigationsbedienelementen wie Bildschirmschaltflächen.

Alternative Navigationspfade angeben

Da es unwahrscheinlich ist, dass die meisten Nutzer mit dem gesamten Karussell-Content interagieren, Inhalte, auf die die Karussell-Folien verweisen, sollten über andere Navigationselemente zugänglich sein Pfade.

Best Practices für die Lesbarkeit

Autoplay nicht verwenden

Die automatische Wiedergabe führt zu zwei nahezu paradoxen Problemen: Animationen in der Regel ablenken und lenken den Blick von wichtigen content; Da Nutzer oft Animationen mit Anzeigen verknüpfen, werden Karussells mit automatischer Wiedergabe ignoriert.

Daher ist Autoplay nur selten eine gute Wahl. Wenn Inhalte wichtig sind, nicht wird die Belichtung durch die automatische Wiedergabe maximiert. wenn der Karussellinhalt nicht wichtig ist, werden wichtigere Inhalte durch die automatische Wiedergabe abgelenkt. Außerdem Karussells mit automatischer Wiedergabe können schwer zu lesen (und darüber hinaus lästig) sein. Gelesene Nutzer unterschiedlich schnell. Daher ist es selten, dass ein Karussell das „richtige“ für verschiedene Nutzende.

Idealerweise sollte die Foliennavigation über Navigationssteuerelemente auf den Nutzer ausgerichtet sein. Wenn Du musst Autoplay verwenden. Autoplay sollte deaktiviert werden, wenn der Nutzer den Mauszeiger darauf bewegt. Außerdem Der Folienübergang sollte den Inhalt der Folie berücksichtigen – je mehr Text die eine Folie enthält, desto länger sollte sie auf dem Bildschirm angezeigt werden.

Text und Bilder trennen

Karussell-Text ist häufig fest integriert die entsprechende Bilddatei statt als separat mithilfe von HTML-Markup angezeigt. Dieser Ansatz ist schlecht für Zugänglichkeits-, Lokalisierungs- und Komprimierungsraten. Außerdem wird ermutigt, „One-Size-fits-all“ für die Asset-Erstellung. Das gleiche Bild und der gleiche Text ist auf Desktop-Computern und Mobilgeräten selten gleich gut lesbar.

Sich kurzfassen

Sie haben nur den Bruchteil einer Sekunde, um die Aufmerksamkeit der Nutzenden zu erregen. Kurz, prägnanter zu gestalten, erhöht sich die Wahrscheinlichkeit, dass Ihre Botschaft vermittelt wird.

Best Practices für Produkte

Karussells eignen sich gut für Situationen, in denen zusätzlicher vertikaler Platz zum „Zusätzliche Inhalte anzeigen“ ist keine Option. Karussells auf Produktseiten ist oft ein gutes Beispiel für diesen Anwendungsfall.

Karussells werden jedoch nicht immer effektiv eingesetzt.

  • Karussells, insbesondere wenn sie Werbeaktionen enthalten oder automatisch im Voraus präsentiert werden, werden leicht verwechselt Anzeigen von Nutzern zu sehen. Nutzer neigen dazu, Werbung zu ignorieren – ein Phänomen auch als Banner bezeichnet. Blindheit.
  • Karussells werden oft verwendet, um mehrere Abteilungen über geschäftliche Prioritäten zu treffen. Daher lassen sich Karussells ganz einfach auf einer Ablagefläche für ineffektive Inhalte landen.

Annahmen testen

Der geschäftliche Nutzen von Karussells, insbesondere von Karussells auf Startseiten, sollte evaluiert und getestet. Mithilfe von Karussell-Klickraten und ihr Inhalt effektiv ist.

Relevant sein

Karussells funktionieren am besten, wenn sie interessanten und relevanten Content enthalten, der in einem klaren Kontext präsentiert. Wenn ein Nutzer außerhalb eines Karussell zu verwenden. Eine Platzierung in einem Karussell führt nicht dazu, dass die Leistung verbessert wird. Wenn Sie Verwenden Sie ein Karussell, priorisieren Sie Inhalte und achten Sie darauf, dass jede Folie ausreichend ist. dass Nutzende sich zur nächsten Folie durchklicken möchten.