Was ist der CLS Wert und wie kann dieser bei Magento Onlineshop verbessert werden?

Name: KonVis - Was ist der CLS Wert und wie kann dieser bei Magento Onlineshop verbessert werden?
Brand: KonVis
Rating: 5 (1 reviews)

Wie kann der CLS-Wert ermittelt werden?

Der einfachste Weg ist dies über das Pagespeed-Tool von google selbst zu tun. Das Tool ist in die Google Search Console (https://search.google.com/search-console/) eingebunden, aber kann auch direkt aufgerufen werden (https://pagespeed.web.dev/)

Wie man den CLS-Wert eines Magento-Shops verbessert

In der heutigen digitalen Welt sind Benutzererfahrung (UX) und Ladegeschwindigkeit für den Erfolg eines Online-Shops von entscheidender Bedeutung. Ein wichtiger Bestandteil der Web-Vitals, die Google verwendet, um die Leistung von Websites zu bewerten, ist der Cumulative Layout Shift (CLS).

Dieser Wert misst, wie stark sich das Layout einer Seite während des Ladevorgangs verschiebt – und eine hohe CLS-Bewertung kann zu einer schlechten Nutzererfahrung führen. Besonders in einem Magento-Shop, der oft komplexe Elemente wie Produktbilder, Preisänderungen und interaktive Elemente enthält, ist es wichtig, den CLS-Wert zu optimieren.

In diesem Blogpost beschreibe ich, wie der CLS-Wert eines Magento-Shops verbessern kannst, um eine bessere Nutzererfahrung zu bieten und die SEO-Rankings zu steigern.

Was ist der Cumulative Layout Shift (CLS)?

Der Cumulative Layout Shift (CLS) misst die kumulative Verschiebung von Elementen auf einer Seite, die während des Ladevorgangs stattfindet. Ein hoher CLS-Wert entsteht, wenn Inhalte nach dem initialen Laden der Seite plötzlich ihre Position ändern, was den Benutzer stören kann. Ein CLS-Wert von 0,1 oder weniger wird als gut angesehen, während Werte über 0,25 als problematisch gelten.

Typische Ursachen für einen hohen CLS-Wert sind:

Bilder, die keine festen Dimensionen haben
Schriften, die ihre Größe während des Ladevorgangs ändern
Dynamisch geladene Inhalte (wie Werbung oder Widgets), die das Layout verschieben

Schritt-für-Schritt-Anleitung zur Verbesserung des CLS-Werts deines Magento-Shops

1. Verwendung von festen Dimensionen für Bilder

Bilder sind eine der häufigsten Ursachen für Layout-Verschiebungen. Wenn Bilder auf einer Seite ohne feste Höhe und Breite geladen werden, kann es zu einer unerwarteten Verschiebung kommen, wenn die Bilder vollständig geladen sind.

Wie es funktioniert: Stelle sicher, dass alle Bilder, die auf deiner Magento-Seite geladen werden, feste Dimensionen haben. Dies kannst du direkt im HTML- oder CSS-Code tun.

So geht’s:

Gehe zu den Bilddateien in deinem Magento-Shop und stelle sicher, dass jedes Bild entweder im HTML oder in den CSS-Dateien eine feste Höhe und Breite zugewiesen bekommt.
Magento bietet Optionen für die Bildgrößen in den Katalogeinstellungen. Nutze diese, um standardisierte Größen für Produktbilder festzulegen.

2. Optimierung von Web-Schriften

Web-Schriften (wie Google Fonts) können ebenfalls Layout-Verschiebungen verursachen, insbesondere wenn sie asynchron geladen werden und während des Ladevorgangs die Schriftarten für Textbereiche ändern.

Wie es funktioniert: Vermeide es, dass Schriften die Darstellung von Texten während des Ladevorgangs ändern, indem du die richtigen Techniken für das Laden von Web-Schriften verwendest.

So geht’s:

Verwende die font-display: swap; CSS-Eigenschaft. Diese stellt sicher, dass ein Text sofort mit einer Fallback-Schriftart angezeigt wird und erst dann mit der richtigen Schriftart ersetzt wird, wenn sie vollständig geladen ist.
Achte darauf, dass Schriften lokal gehostet werden, um Ladezeiten zu verkürzen.

3. Vermeidung von Layout-Verschiebungen durch Werbung und Widgets

Externe Inhalte wie Werbung, dynamisch geladene Widgets oder eingebettete Videos können das Layout einer Seite erheblich stören.

Wie es funktioniert: Verhindere, dass dynamische Inhalte das Layout verschieben, indem du ihnen feste Dimensionen und Positionen zuweist.

So geht’s:

Definiere im CSS feste Größen für Werbeanzeigen oder Widgets, bevor sie geladen werden.
Nutze Platzhalter oder "Invisible"-Container, die den Platz für die Werbung oder das Widget reservieren, sodass die Seite stabil bleibt, während der Inhalt nachgeladen wird.

4. Lazy Loading für Bilder und andere Medien

Lazy Loading sorgt dafür, dass Bilder und andere Medien erst dann geladen werden, wenn sie sichtbar sind. Dies kann helfen, die Ladezeiten zu verkürzen, aber wenn es nicht richtig implementiert wird, kann es auch zu Layout-Verschiebungen führen.

Wie es funktioniert: Lazy Loading sollte so implementiert werden, dass es keine Layout-Verschiebungen verursacht, wenn Inhalte nachgeladen werden.

So geht’s:

Stelle sicher, dass du eine ordnungsgemäße Platzhaltertechnik verwendest, sodass der Browser bereits den Raum für ein Bild oder Video reserviert, bevor es geladen wird.
Magento 2 bietet nativ Lazy Loading, aber achte darauf, dass es richtig konfiguriert ist, um Layout-Probleme zu vermeiden.

5. Verwende asynchrones Laden für JavaScript

JavaScript kann das Rendering von Seiten beeinflussen, und schlecht geladenes JavaScript kann den CLS-Wert negativ beeinflussen.

Wie es funktioniert: Das asynchrone Laden von JavaScript-Dateien hilft, das Rendering nicht zu blockieren und Layout-Verschiebungen zu vermeiden.

So geht’s:

Nutze das async oder defer Attribut für JavaScript, um das Laden von Skripten zu steuern und sicherzustellen, dass sie die Darstellung der Seite nicht blockieren.
Achte darauf, dass JavaScript-Dateien nicht das Layout beeinflussen oder unvorhergesehene Änderungen an der Seite vornehmen.

6. Verwendung eines Content Delivery Networks (CDN)

Ein CDN sorgt dafür, dass statische Inhalte wie Bilder, JavaScript und CSS schneller geladen werden, indem sie von einem Server in der Nähe des Nutzers bereitgestellt werden. Dies verbessert nicht nur die Ladegeschwindigkeit, sondern kann auch helfen, den CLS-Wert zu reduzieren.

So geht’s:

Nutze ein CDN, um sicherzustellen, dass deine Inhalte schnell und effizient an die Endbenutzer ausgeliefert werden.

Zusammenfassung

Die Verbesserung des CLS-Werts eines Magento-Shops ist entscheidend, um die Benutzererfahrung zu optimieren und die SEO-Rankings zu steigern. Indem du die oben genannten Schritte befolgst – von der Optimierung von Bildern und Schriften bis hin zur Verwendung von Lazy Loading und asynchronem JavaScript – kannst du sicherstellen, dass deine Website stabil und benutzerfreundlich bleibt. Achte darauf, regelmäßig die Web-Vitals zu überwachen und die Leistung deines Shops zu verbessern, um eine schnelle und reibungslose Nutzererfahrung zu gewährleisten.

Die Optimierung des CLS-Werts ist ein fortlaufender Prozess, aber mit den richtigen Anpassungen wirst du eine spürbare Verbesserung feststellen und die Zufriedenheit deiner Kunden steigern.