Early Bird TYPO3-Anleitung zu Google Core Web Vitals

Ja, sie sind wichtig!

Core Web Vitals sind wichtig, weil sie Ihnen helfen, die Leistung Ihrer TYPO3-Site zu messen. Sie liefern konkrete Metriken, die Sie nachverfolgen und testen können, um die UX Ihrer Site zu beurteilen und dann bei Bedarf Verbesserungen vorzunehmen.

Iußerdem wird Google ab Mai 2021 die Core Web Vitals als wichtigen SEO-Ranking-Faktor nutzen. Core Web Vitals werden ein wichtiger Teil der neuen Page Experience Signals sein, zusammen mit HTTPS-Sicherheit, Safe-Browsing, Mobile-Friendliness und intrusive Interstitial-Richtlinien.

LCP misst die Ladeleistung der Seite.

Hier geht es nicht um die Ladegeschwindigkeit der Seite, sondern um die wahrgenommene Seitengeschwindigkeit. Sie misst die Zeit, die das Laden des ersten größten eindrückbaren Elements der Seite dauert.

Eine Seite lädt Elemente für Elemente in Stufen. Der Hauptinhalt am Anfang Ihrer Seiten muss also schnell geladen werden. Je schneller das geschieht, desto besser ist der LCP. Die LCP sollte nicht mehr als 2,5 Sekunden betragen.

Lassen Sie uns mit einem Beispiel verstehen, auf der Desktop-Version der Website, die wir als Referenz genommen haben, ist das LCP-Element ein Bild:

Wenn Ihre Inhalte auf Ihrer TYPO3-Website sehr lange zum Laden brauchen, erhöht sich die Wahrscheinlichkeit, dass Benutzer frustriert sind und Ihre Website verlassen. Wenn Sie also schlechte LCP-Werte erhalten, ist es wichtig, die folgenden Schritte zu unternehmen, um diese Metrik zu verbessern.

Natürlich hängt die Lösung, die Sie verwenden, von der Ursache des schlechten Ergebnisses ab. Es gibt eine Handvoll Gründe, warum Sie mit LCP-Problemen zu kämpfen haben könnten. Zu den häufigsten Problemen gehören ein langsamer Server sowie Rendering-blockierendes JavaScript und CSS.

Ein paar Methoden, die Sie zur Verbesserung von LCP verwenden können, sind:

• Eliminieren Sie große Elemente.

Wenn Sie PageSpeed Insights zum Testen Ihrer Website verwendet haben, werden Sie benachrichtigt, wenn es ein bestimmtes Element auf Ihrer Seite gibt, das ein Problem darstellt. Wenn dies der Fall ist, können Sie in Erwägung ziehen, es zu entfernen (oder zu verkleinern), um LCP zu verbessern.

• Minimieren Sie blockierendes JavaScript und CSS.

Wenn Sie die Anzahl der Ressourcen auf Ihrer Website reduzieren, die blockierendes CSS und JavaScript enthalten, können Sie die Zeit verringern, die zum vollständigen Laden des Hauptinhalts Ihrer Seite benötigt wird. 

Sie können Manifier for TYPO3 Extension verwenden, um JS und CSS zu manifizieren.

• Nutzen Sie das faule Laden.

Von Lazy Loading spricht man, wenn Bilder auf einer Seite erst dann geladen werden, wenn ein Benutzer nach unten zu ihnen scrollt. Dies können Sie mit der TYPO3 Extension Lazy Load erreichen.

• Verwenden Sie ein Content Delivery Network (CDN).

Ein CDN ist ein Netzwerk von Servern, das den Inhalt Ihrer Website von einem Rechenzentrum in unmittelbarer Nähe Ihrer Besucher lädt. https://extensions.typo3.org/extension/cloudflare

• Wenn keine der oben genannten Empfehlungen hilft, Ihr LCP zu verbessern, ist es vielleicht an der Zeit, Ihr TPO3-Webhosting zu aktualisieren. Je hochwertiger Ihr Hosting ist, desto bessere Server und eine bessere Gesamtleistung der Website können Sie erwarten.

CLS misst die Häufigkeit der Layout-Verschiebung, die der Benutzer während des Ladens der Webseite erleben muss. Eine solche unerwartete Layout-Verschiebung tritt auf, weil verschiedene Seitenressourcen asynchron geladen werden oder die DOM-Elemente oben auf dem bestehenden Inhalt hinzugefügt werden.

Zum Beispiel Anzeigen, Bilder, Videos, Schriftarten, Überschriften - sie alle ändern dynamisch ihre Größe.

Das ist ärgerlich und frustrierend für den Benutzer, da er vielleicht etwas anklicken möchte, und dann passiert die Verschiebung, und er klickt versehentlich auf etwas anderes.

Wenn Sie im Diagnosebereich von PageSpeed Insights zum Abschnitt Große Layoutverschiebungen vermeiden gehen, können Sie auch die einzelnen Elemente auf Ihrer Seite sehen, die sich "verschieben" und Ihren Score beeinflussen:

Der CLS-Score von weniger als 0,1 bietet eine gute Benutzererfahrung.

So verbessern Sie die kumulative Layout-Verschiebung (CLS)

Wenn sich Elemente auf einer Seite verschieben, während die Seite geladen wird, führt dies oft zu einem hohen CLS - was nicht gut ist. Visuelle Instabilität kann dazu führen, dass ein Benutzer auf das falsche Element klickt oder einfach verwirrt ist, warum sich Elemente verschoben haben, sobald die Seite vollständig geladen ist.

Idealerweise sollte Ihr CLS nicht mehr als 0,1 betragen. Wenn er höher ist, gibt es einige Schritte, die Sie unternehmen können, um ihn zu verbessern.

• Geben Sie die Bildabmessungen an. 

Wenn Sie keine Attribute für die Länge und Breite Ihrer Bilder festgelegt haben, kann dies zu einer Erhöhung Ihres CLS-Scores führen. Das Gleiche gilt für alle Medien, wie GIFs, Videos und Infografiken.

• Die Berücksichtigung ist die dynamische Anzeige.

Alle Anzeigen auf Ihrer Website sollten einen eigenen, reservierten Bereich haben, der das Seherlebnis des Benutzers nicht zu sehr beeinträchtigt. Wenn Sie z. B. große Anzeigen am oberen Rand der Seite platzieren, kann dies das Lesen des Inhalts erschweren.

• Undefinierte Elementgrößen

Eine dritte Möglichkeit, Ihren CLS-Score zu verbessern, besteht darin, einen Platz für Einbettungen und Iframes auf Ihren Seiten zu reservieren. Wenn diese Elemente keine definierten Abmessungen haben, können sie sich beim Laden der Seite verschieben und das Layout der Seite beeinträchtigen, was letztendlich die UX vereitelt.

FID misst den ersten Eindruck des Benutzers von der Seite.

Auch hier geht es nicht darum, wie schnell die Seite lädt, sondern wie schnell der Benutzer mit ihr interagieren kann. Diese Core Web Vital Metrik erfasst den ersten Eindruck des Benutzers mit einer Seite bis zu dem Zeitpunkt, an dem der Browser auf diese Interaktion reagieren kann.

Die Interaktion könnte sein, wenn der Benutzer auf einen Link klickt, auf eine Schaltfläche tippt oder ein benutzerdefiniertes Formular verwendet.

Wie lange es dauert, bis ein Link anklickbar wird. Wenn der Benutzer ein Formular ausfüllt und auf das Laden der nächsten Seite warten muss, weil der Browser mit dem Laden anderer Teile der Webseite beschäftigt ist, dann ist die FID hoch.

Dies führt zu Frustration, da der Benutzer die Informationen ausgefüllt hat und zur nächsten Seite weitergehen möchte.

Eine erste Eingabeverzögerung von weniger als 100 Millisekunden bietet dem Benutzer eine hervorragende Erfahrung.

Wie verbessert man die Verzögerung der ersten Eingabe in TYPO3 (FID)

Wie Sie sich vielleicht erinnern, ist die ideale Zeit für FID 100 ms oder weniger. Wenn Ihre Website also länger braucht, leidet wahrscheinlich Ihre UX darunter.

Die effektivste Methode zur Verbesserung der FID ist die Optimierung Ihres JavaScript. Es gibt verschiedene Möglichkeiten, dies zu tun.

• Minimieren oder verschieben Sie JavaScript. 

Auf diese Weise können Besucher mit Ihrer Website interagieren, während das JavaScript noch im Browser geladen wird. Sie können dies mit einem Plugin wie Async JavaScript erreichen:

• Die Async JavaScript TYPO3 Methode.

Dies kann nicht nur dazu beitragen, FID, Seitengeschwindigkeit und UX zu verbessern, sondern auch Ihre Suchmaschinenplatzierung zu erhöhen.

• Löschen von unnötigen Skripten von Drittanbietern

Eine weitere Möglichkeit, die FID zu verbessern, besteht darin, alle unnötigen Skripte von Drittanbietern zu entfernen. Zu viele Skripte können Ihr Netzwerk verstopfen und zu langsameren Antwortzeiten führen.

• Browser-Caching ausnutzen 

Schließlich sollten Sie die Verwendung eines Browser-Caches in Betracht ziehen. Indem er das Laden des Inhalts Ihrer Website in den Browsern der Benutzer erleichtert, kann ein Cache die Ausführung von JavaScript-Aufgaben beschleunigen.