Um Sie bei der Optimierung Ihrer Website für die Core Web Vitals von Google zu unterstützen, haben wir einige potenzielle Problembereiche identifiziert und zeigen Ihnen, wie Sie diese aktualisieren können, um Ihre Core Web Vital-Werte zu verbessern. Weitere Informationen darüber, was die einzelnen Core Web Vitals bedeuten, wie man die Werte misst und welche Werte ideal sind, finden Sie unter Einführung in Core Web Vitals.
Benutzerdefinierte und schwere Widgets
Sowohl benutzerdefinierte als auch schwere Widgets können langsam sein, weil sie Inhalte von einem Drittanbieterdienst laden, was den Aufruf einer externen API zum Abrufen und anschließenden Laden der Inhalte erfordert.
Nicht alle benutzerdefinierten Widgets werden langsam geladen. Es hängt davon ab, wie das benutzerdefinierte Widget erstellt wurde.
Starke Widgets: Map, Twitter Feed, Facebook Like, Facebook Feed/Page, Facebook Comments, Audio (Soundcloud, Mixtape), Video (Custom, Youtube, Vimeo), Photo Gallery, Image Slider, Lottie Animations, Multi-location, Google Calendar und Disqus.
Wie beheben
So verbessern Sie Ihre Core Web Vitals-Werte:
Entfernen Sie benutzerdefinierte/starke Widgets aus dem oberen Bereich Ihrer Seite und verschieben Sie sie nach unten. Dadurch wird verhindert, dass sie sich negativ auf CLS und FID auswirken, indem sie geladen werden und dann den Inhalt darunter auf der Seite weiter nach unten schieben.
Vermeiden Sie das Hinzufügen mehrerer benutzerdefinierter/starker Widgets auf der gleichen Seite. Jedes Widget hat unterschiedliche Ladezeiten, was die LCP verringern kann.
Wenn ein benutzerdefiniertes Widget FID verursacht, können Sie Ihren Entwickler bitten, die Art und Weise zu verbessern, wie der Inhalt gerendert und abgerufen wird, indem Techniken wie asynchrones Laden, Abrufen von Daten außerhalb des Hauptthreads und mehr verwendet werden.
eCommerce
Store wird dynamisch mit JavaScript geladen. Dies kann CLS beeinträchtigen, da der Store länger zum Laden braucht als die restlichen Inhalte der Seite. Aus diesem Grund empfehlen wir, den Store nach unten auf der Seite zu verschieben, statt an den oberen Rand.
Wie beheben
So verbessern Sie Ihre Core Web Vitals-Werte:
Fügen Sie den Inhalt oberhalb von Store ein, anstatt Store an den Anfang der Seite Store zu stellen. Dadurch wird sichergestellt, dass der Store im Below-the-Fold-Bereich liegt.
Erstellen Sie Ihre eigenen Kategorieseiten oder verwenden Sie das Store Product Gallery Widget, um Kategorieseiten zu erstellen. Sowohl native Bilder als auch Fotogalerieelemente werden schneller geladen als der Store, da sie weniger Inhalte und Code zum Rendern haben, bevor sie angezeigt werden.
Schriftarten
Web-Schriftarten können Ihre Website verlangsamen, da der Browser für jede Schriftart- und Schriftstärkekombination die gesamte Schriftfamilie herunterladen und laden muss. Schriften werden automatisch heruntergeladen und in den HTML-Code eingebettet, bis zu 50 KB. Dies beschleunigt die Geschwindigkeit, mit der Ihr Browser benutzerdefinierte Schriftarten wiedergibt und hilft, CLS zu verhindern. Dies ist jedoch nicht immer ausreichend, weshalb wir empfehlen, höchstens zwei verschiedene Schriftfamilien und nur wenige Schriftstärken aus jeder Familie zu verwenden.
Wie beheben
So verbessern Sie Ihre Web Vitals-Werte:
Wenn Sie mehr als zwei Schriftarten angewendet haben, entfernen Sie diese aus bestimmten Elementen oder Widgets auf Ihrer Website. Verwenden Sie globale Schriftarten, um nur die benötigten Schriften und Schriftstärken anzuwenden. Danach werden nur noch die Schriftarten heruntergeladen, die für die korrekte Darstellung des Textes notwendig sind.
Google Tag Manager
Google Tag Manager lädt möglicherweise zusätzliche Bibliotheken und Code herunter, die Sie nicht benötigen, was die LCP verringern kann.
Wie beheben
So verbessern Sie Ihre Web Vitals-Werte:
Wenn möglich, entfernen Sie Google Tag Manager. Wenn Sie nur eine oder zwei Tracking-Technologien haben, lohnt es sich möglicherweise nicht, Google Tag Manager zu implementieren.
Wenn Sie Google Tag Manager implementieren, halten Sie sich an unsere Google Tag Manager Tracking-Anleitung. Dadurch wird sichergestellt, dass der Tracking-Code korrekt geladen wird und die Website nicht verlangsamt.
Stellen Sie Google Tag Manager nicht in den Kopf der Website. Dies bewirkt, dass es zuerst geladen wird, vor anderen wichtigen Elementen der Website.
Bilder und Hintergrundvideos
Bilder und Hintergrundvideos sind in der Regel das größte Asset, das von Browsern auf Ihre Website heruntergeladen wird. Wenn zu viele Bilder, ein großes Bild oberhalb der Falz oder ein Video vorhanden sind, kann dies zu einer Verzögerung im LCP und einem Anstieg des CLS führen, da der Browser die Elemente erst herunterladen muss, bevor sie gerendert werden können. Dies geschieht typischerweise bei großen Hintergrundbildern/-videos, Bild-Diashows, Hintergrundbildern mit einem weiteren Bild darüber oder bei mehreren großen Bildern in Folge am oberen Rand der Seite.
Unter „großem Bild“ verstehen wir ein Bild, das einen Großteil der Seitenbreite einnimmt.
Wie beheben
So verbessern Sie Ihre Web Vitals-Werte:
Verwenden Sie nur ein einziges Bild oberhalb des Falzes.
Wenn Sie mehrere Bilder oberhalb des Falzes benötigen, reduzieren Sie die Größe der Bilder auf ein Symbol oder eine Miniaturansicht.
Verschieben Sie Hintergrundvideos und Diashows nach unten auf der Seite. Wenn Sie eine Diashow benötigen, beschränken Sie diese auf maximal drei Bilder.