Core Web Vitals Probleme beheben – Schritt für Schritt

Sie führen einen kurzen Check Ihrer Website durch, und ein übersichtlicher kleiner Bericht erscheint mit einigen farbigen Balken. Einige sind grün, was beruhigend wirkt, und ein oder zwei sind alarmierend rot, was nicht der Fall ist. Die Beschriftungen daneben lesen sich wie eine Fremdsprache: Largest Contentful Paint, Interaction to Next Paint, Cumulative Layout Shift. Sie haben keine Ahnung, was sie bedeuten, nur dass ein roter Balken wahrscheinlich schlecht ist und dass dessen Behebung anscheinend wichtig ist, um in den Suchergebnissen aufzutauchen. Wenn Ihnen das bekannt vorkommt, sind Sie hier genau richtig.

Diese Messwerte werden Core Web Vitals genannt, und hinter den einschüchternden Namen beschreiben sie drei sehr menschliche Erfahrungen: Wird die Seite schnell angezeigt, reagiert sie, wenn ich tippe, und bleibt sie ruhig, während ich lese? In diesem Leitfaden werden wir jeden einzelnen in einfache Sprache übersetzen und dann Schritt für Schritt erklären, wie man die Ursache für eine schlechte Bewertung findet und behebt. Sie müssen keinen Code schreiben, sondern nur verstehen, was passiert und welchen Hebel Sie betätigen müssen.

Was Core Web Vitals tatsächlich messen

Beliebte Suchmaschinen möchten Menschen auf Seiten leiten, die sich gut anfühlen, nicht nur auf Seiten mit den richtigen Wörtern. Um dieses Gefühl in großem Maßstab zu beurteilen, haben sie sich auf drei Messwerte geeinigt, die als Stellvertreter für eine reibungslose Erfahrung dienen. Jeder entspricht einem Moment potenzieller Frustration, den wir alle schon einmal erlebt haben.

Wenn man sie so betrachtet, sind sie nicht mehr abstrakt. Ein schlechter Largest Contentful Paint bedeutet, dass die Benutzer zu lange warten müssen, um etwas Nützliches zu sehen. Ein schlechter Interaktionswert bedeutet, dass sich die Seite nicht reagierend und verzögert anfühlt. Ein schlechter Layout Shift Wert bedeutet, dass Dinge ärgerlich herumspringen. Die Behebung Ihrer Vitals ist im Grunde nur die Behebung dieser drei Ärgernisse, und das hängt direkt mit der umfassenderen Arbeit in unserem Leitfaden zusammen: wie man eine langsame Website beschleunigt.

Schritt eins: Messen Sie, bevor Sie etwas anfassen

Die oberste Regel zur Behebung von Performance-Problemen ist, zuerst zu messen, denn Raten verschwendet Mühe für das falsche Problem. Kostenlose Test-Tools zeigen Ihnen, welche der drei Vitals versagt und weisen entscheidend auf die wahrscheinliche Ursache hin. Einige Tools berichten über echte Besucher im Laufe der Zeit, was die tatsächliche Erfahrung widerspiegelt, während andere einen einzelnen Labortest auf Abruf durchführen, was für Experimente nützlich ist. Verwenden Sie beides: Die Daten echter Besucher sagen Ihnen, ob Sie wirklich ein Problem haben, und der Labortest hilft Ihnen, die Ursache zu finden.

Es lohnt sich auch, die richtigen Seiten zu testen. Ihre meistbesuchten Seiten und die, auf denen die Leute am häufigsten landen, sind weitaus wichtiger als eine obskure Ecke Ihrer Website, die niemand besucht. Und da die meisten Besucher mit dem Handy kommen, überprüfen Sie immer das mobile Ergebnis, das in der Regel das härtere und ehrlichere ist. Dies ist genau die Art von strukturierter Überprüfung, die wir in unserem Leitfaden zur Überprüfung der Website-Gesundheit empfehlen.

Schritt zwei: Beheben Sie einen langsamen Hauptinhalt (LCP)

Wenn das größte Inhaltselement, meist ein großes Bild oder ein Textblock, zu lange zum Laden benötigt, sind fast immer ein paar Übeltäter schuld. Der häufigste ist ein überdimensioniertes Hero-Image, das nicht richtig komprimiert wurde, sodass der Browser weit mehr Daten herunterlädt, als er benötigt. Die Optimierung dieses einzelnen Bildes führt oft zur größten Verbesserung aller möglichen Änderungen, und unser Leitfaden zur Bildoptimierung für schnellere Seiten erklärt genau, wie das geht.

Der zweite Übeltäter ist ein langsamer Server oder Hosting-Plan, der nur zögerlich die erste Antwort sendet. Wenn Ihr Testwerkzeug eine lange Wartezeit meldet, bevor überhaupt etwas geladen wird, könnte das Problem vor der eigentlichen Seite liegen. Die Kombination von solidem Caching mit einem Content Delivery Network, das Dateien von einem Standort in der Nähe jedes Besuchers bereitstellt, löst dieses Problem häufig. Letzteres erklären wir in unserem Leitfaden was ein CDN ist und ob Sie eines benötigen.

Eine kurze Checkliste für LCP

Komprimieren Sie Ihr Hauptbild und passen Sie die Größe korrekt an, stellen Sie sicher, dass das Bild eifrig geladen wird, anstatt verzögert zu werden, aktivieren Sie das Caching und ziehen Sie ein Content Delivery Network in Betracht, wenn Ihre Zielgruppe weit verbreitet ist. Diese vier Schritte lösen die meisten Probleme mit langsamem Inhalt ohne kundenspezifische Entwicklung.

Schritt drei: Beheben Sie eine nicht reagierende Seite (INP)

Die Interaktionsmessung erfasst den schrecklichen Moment, in dem Sie auf eine Schaltfläche tippen oder ein Menü öffnen und die Seite einen Moment lang einfriert, bevor sie reagiert. Dies liegt fast immer daran, dass der Browser mit zu viel Hintergrundarbeit überladen ist, meist Code von Add-ons und externen Diensten, die alle gleichzeitig um Aufmerksamkeit buhlen. Wenn der Browser mit dieser Arbeit beschäftigt ist, kann er nicht sofort auf Ihr Tippen reagieren.

Die Lösung ist selten glamourös: Es geht darum, die Menge des auf der Seite ausgeführten Codes zu reduzieren. Die größten Erfolge erzielt man durch das Entfernen von Add-ons, die man nicht mehr verwendet, und das Kürzen externer Skripte, dieselbe Hausarbeit, die wir in unserem Leitfaden zum sicheren Verwalten von Plugins und Add-ons behandeln. Jedes ungenutzte Tool, das Sie entfernen, ist Arbeit, die der Browser nicht mehr erledigen muss, wodurch er sofort auf Ihre Besucher reagieren kann.

Schritt vier: Behebung einer ruckelnden Seite (CLS)

Layoutverschiebung ist das visuell auffälligste Problem und oft am einfachsten zu beheben, sobald man die Ursache kennt. Sie tritt auf, wenn etwas später als der umgebende Inhalt geladen wird und alles andere verschiebt: ein Bild, das ohne seinen reservierten Platz erscheint, eine Anzeige, die eingeblendet wird, ein Banner, das die Seite nach unten drückt, oder eine Schriftart, die sich ändert und die Textgröße verändert. Die Abhilfe besteht darin, den Platz im Voraus zu reservieren, sodass das langsam eintreffende Element sauber in eine Lücke passt, die immer darauf gewartet hat.

Bei Bildern bedeutet dies, dem Browser die Abmessungen jedes Bildes im Voraus mitzuteilen. Für Anzeigen und eingebettete Inhalte bedeutet es, ihnen einen festen reservierten Bereich zuzuweisen. Dies sind kleine, fast unsichtbare Änderungen, die das ärgerliche Springen eliminieren. Es ist erwähnenswert, dass dies der einzige Punkt ist, an dem eine übereifrige Lazy-Loading-Einstellung nach hinten losgehen kann, indem Bilder verzögert geladen werden, ohne ihren Platz zu reservieren, sodass die beiden Themen eng miteinander verbunden sind.

Ein praktisches Beispiel: rote Balken grün färben

Stellen Sie sich einen Eigentümer vor, dessen Homepage zwei rote Balken anzeigt: langsamer Hauptinhalt und ein springendes Layout. Anstatt in Panik zu geraten oder die Seite neu aufzubauen, arbeitet er die Schritte der Reihe nach ab. Er führt einen Test durch, der ein riesiges, unkomprimiertes Bannerfoto als Ursache für den langsamen Inhalt identifiziert. Er passt die Größe dieses einen Bildes an und komprimiert es, und der Balken für den langsamen Inhalt verbessert sich beim nächsten Test dramatisch. Eine Änderung, ein großer Gewinn.

Als Nächstes wenden sie sich dem Springen zu. Der Test zeigt ein Werbebanner an, das einen Moment nach dem Laden der Seite eingeblendet wird und alles darunter nach unten verschiebt. Sie geben diesem Banner eine feste, reservierte Höhe, sodass der Platz von Anfang an offen gehalten wird und nichts springt, wenn das Banner erscheint. Der Layout-Balken wird grün. Mit zwei gezielten Korrekturen, von denen keine einen Entwickler erforderte, sind beide roten Balken behoben. Die Lektion ist, dass fehlende Vitals fast immer auf eine kleine Anzahl spezifischer, benennbarer Ursachen zurückzuführen sind, und sobald man aufhört zu raten und anfängt zu messen, ist der Weg zur Behebung überraschend kurz. Die meisten Eigentümer sind erleichtert, festzustellen, dass sie keinen kostspieligen Neuaufbau benötigten, sondern nur einen sorgfältigen Blick darauf, was der Test ihnen tatsächlich sagte.

Schritt fünf: Neu messen und beobachten

Nachdem Sie Änderungen vorgenommen haben, widerstehen Sie dem Drang, sofort den Sieg zu erklären. Da sich die Daten echter Besucher im Laufe der Zeit ansammeln, kann es einige Wochen dauern, bis die von Suchmaschinen verwendeten offiziellen Bewertungen Ihre Verbesserungen widerspiegeln. Verwenden Sie Labortests, um zu bestätigen, dass eine Änderung kurzfristig funktioniert hat, und beobachten Sie dann die Daten echter Besucher in den folgenden Wochen, um zu sehen, wie sie sich festsetzen. Leistung, wie Fitness, reagiert eher auf Beständigkeit als auf einen einmaligen Kraftakt.

Aus diesem Grund sind Vitals am besten als fortlaufende Gesundheitsprüfung und nicht als einmalige Rettungsaktion zu betrachten. Neue Inhalte, frische Add-ons und saisonale Kampagnen können einen grünen Wert wieder ins Rote verschieben, sodass regelmäßige Überprüfungen Sie vor Problemen bewahren. Wir plädieren für diese langfristige Gewohnheit in unserem Leitfaden zum Langfristigen Erhalt der Website-Geschwindigkeit und verbinden die Geschwindigkeit mit der Sichtbarkeit in den Suchergebnissen in unserem Artikel über Website-Geschwindigkeit und Core Web Vitals.

Fazit

Core Web Vitals klingen technisch, aber sie laufen auf drei ehrliche Fragen hinaus: Wurde die Seite schnell angezeigt, reagierte sie beim Antippen und blieb sie beim Lesen ruhig? Jede schlechte Bewertung weist auf eine spezifische, behebbare Ursache hin – ein überdimensioniertes Bild, ein überlasteter Browser, ein nicht reservierter Platz – und Sie müssen selten Code schreiben, um es richtigzustellen. Die Disziplin besteht einfach darin, zuerst zu messen, das tatsächliche Problem zu beheben, anstatt eines geratenen, und dann erneut zu messen.

Arbeiten Sie die Metriken der Reihe nach ab: Bändigen Sie den größten Inhalt mit Bildoptimierung und Caching, beruhigen Sie eine nicht reagierende Seite durch Entfernen von ungenutztem Code, stabilisieren Sie ein springendes Layout durch Reservieren von Platz, dann überprüfen Sie erneut und bleiben Sie wachsam. Tun Sie das, und Sie verwandeln diese alarmierenden roten Balken in grüne, geben Ihren Besuchern ein reibungsloseres Erlebnis und Ihren Seiten eine bessere Chance, gesehen zu werden. Wenn die Diagnose oder die Behebung mehr ist, als Sie auf sich nehmen möchten, können Sie uns gerne kontaktieren.

Häufig gestellte Fragen

Referenzen

1. Google. "Core Web Vitals." web.dev.
2. Mozilla. "Web performance." developer.mozilla.org.
3. HTTP Archive. "Web Almanac: Performance." almanac.httparchive.org.