Warum ich das schreibe

Mittlerweile betreibe ich einige Websites, und seit ich angefangen habe, schwankte meine Leistung immer wieder. Ich fand es manchmal geradezu nervig. Bei mir scheint lokal alles so gut zu funktionieren, aber dann überprüfe ich meine Serveranalysen und sehe, dass meine Geschwindigkeit in bestimmten Ländern schrecklich war.

Es schien immer so zu seinCLSoderLCPdas war das Problem für mich. Deshalb dachte ich, ich würde meine Erfahrungen teilen und versuchen, anderen dabei zu helfen, dies herauszufinden, insbesondere wenn Sie das Gleiche durchmachen. Oder hatten Sie möglicherweise Probleme damit und haben eine einzigartige Perspektive oder Lösung? Ich würde gerne davon hören.

EntsprechendSuchmaschinenjournalDurch die Optimierung dieser beiden Kennzahlen können Sie die Sichtbarkeit und Benutzerzufriedenheit Ihrer Website erheblich verbessern. Das klang in der Theorie großartig, aber die tatsächlichen Probleme zu beheben, war eine andere Geschichte. Lassen Sie mich Ihnen erklären, was ich gelernt habe.

Was genau sind CLS und LCP?

Bevor ich auf meine eigenen Schwierigkeiten eingehe, möchte ich erklären, was das eigentlich ist, denn als ich diese Akronyme zum ersten Mal in der Google Search Console sah, hatte ich keine Ahnung, was sie bedeuteten.

Kumulative Layoutverschiebung (CLS)misst, wie stark Ihr Seitenlayout beim Laden hin und her springt. Kennen Sie das, wenn Sie gerade auf eine Schaltfläche tippen und sich die gesamte Seite verschiebt, sodass Sie auf das Falsche klicken? Das ist ein CLS-Problem. Als Nutzer ist das unglaublich frustrierend und es stellt sich heraus, dass Suchmaschinen Sie auch dafür bestrafen.

Größter Contentful Paint (LCP)misst, wie lange es dauert, bis das größte sichtbare Element auf Ihrer Seite geladen ist. Normalerweise ist das ein Heldenbild oder ein großer Textblock. Wenn Ihr LCP langsam ist, starren Ihre Besucher auf eine halb geladene Seite und viele verlassen sie einfach.

Beide fallen unter GoogleKern-Web-Vitals, die sich direkt auf Ihr Suchranking auswirken. Selbst wenn Ihre Inhalte brillant sind, können schlechte CLS- und LCP-Werte Sie bremsen.

Optimieren Sie Ihre Website für CLS und LCP

🖼️

Bildabmessungen festlegen
Geben Sie Breite und Höhe für Bilder an

📢

Gehen Sie verantwortungsvoll mit Anzeigen um
Vermeiden Sie unerwartete Größenänderungen der Anzeige

⚡

Laden Sie wichtige Ressourcen vorab herunter
Stellen Sie sicher, dass kritische Inhalte schnell geladen werden

🔄

Minimieren Sie dynamische Inhalte
Begrenzen Sie Inhalte, die sich während des Ladens ändern

📊

Überwachen Sie die Leistung regelmäßig
Verwenden Sie Tools, um CLS- und LCP-Ergebnisse zu verfolgen

Mein CLS-Albtraum

CLS war das erste Problem, auf das ich stieß. Für mich sahen meine Seiten gut aus, aber meine Ergebnisse waren schrecklich. Nach langem Suchen habe ich die Hauptschuldigen gefunden:

Bilder ohne Maße:Ich habe für meine Bilder keine Breite und Höhe festgelegt. Der Browser hatte keine Ahnung, wie viel Speicherplatz er reservieren sollte, also verschob sich alles, sobald die Bilder geladen waren.
Schriftarten werden zu spät geladen:Meine benutzerdefinierten Schriftarten wurden geladen, nachdem die Seite gerendert wurde, was dazu führte, dass mein gesamter Text sprang, da die neue Schriftart die Ersatzschrift ersetzte. Dieser war subtil, aber es hat gepasst.
Dynamischer Inhalt:Ich hatte einige Komponenten, die nach dem Laden der Seite Inhalte einfügten und alles darunter nach unten drückten.

Die Behebung der meisten meiner CLS-Probleme war überraschend einfach. Ich begann, explizite Abmessungen für alle Bilder und Medien zu definieren. Ich habe beim Laden von Schriftarten den Font-Display-Swap hinzugefügt, damit der Fallback sofort gerendert wird. Und ich habe mit CSS Platz für alle Inhalte reserviert, die dynamisch geladen werden.

Werkzeuge wieGoogle PageSpeed Insightswaren hier eine große Hilfe. Sie zeigen Ihnen genau, welche Elemente Layoutverschiebungen verursachen, sodass Sie nicht raten müssen.

Dann kam das LCP-Problem

Gerade als ich dachte, ich hätte die Dinge geklärt, meinLCP-Ergebnissefing an zu flackern. Das Frustrierende daran war, dass meine Website in Großbritannien schnell geladen wurde, meine Analysen jedoch in anderen Ländern schreckliche Geschwindigkeiten zeigten. Das ist die Sache mit LCP – es hängt stark davon ab, wo sich Ihre Benutzer befinden und wie weit sie von Ihrem Server entfernt sind.

Die Hauptprobleme, die ich gefunden habe, waren:

Große, nicht optimierte Bilder:Meine Heldenbilder waren viel zu groß. Ich habe Fotos in voller Auflösung hochgeladen, ohne sie zu komprimieren.
Antwortzeit des Servers:Ohne ein CDN mussten Benutzer, die weit von meinem Server entfernt waren, ewig auf die erste Antwort warten.
Renderblockierendes JavaScript:Im Kopf wurden Skripte geladen, die das Rendern der Seite blockierten, bis sie fertig waren.

AlsBacklinkos Studiezeigt, dass Websites mit guten LCP-Werten ein deutlich besseres Engagement und niedrigere Absprungraten aufweisen. Als ich begann, diese Probleme zu beheben, konnte ich den Unterschied in meinen eigenen Analysen erkennen.

Was meinem LCP tatsächlich geholfen hat

Ich begann, alle meine Bilder zu komprimieren und, wo möglich, das WebP-Format zu verwenden. Ich habe auch nicht unbedingt erforderliche Skripte so verschoben, dass sie asynchron geladen werden, oder sie ganz zurückgestellt. Meine Websites werden auf Vercel gehostet, das einen Großteil der Edge-Netzwerk-Angelegenheiten für mich übernimmt. Wenn Sie jedoch ein herkömmliches Hosting nutzen, ist die Einrichtung einesCDNkann einen großen Unterschied für den internationalen Verkehr machen.

Ein CDN speichert Kopien Ihrer Website an Orten auf der ganzen Welt, sodass Besucher von einem Ort in ihrer Nähe bedient werden und nicht von Ihrem einzigen Ursprungsserver. Wenn Sie in bestimmten Regionen schlechte Geschwindigkeiten feststellen, ist dies eines der ersten Dinge, die es wert sind, untersucht zu werden.

Das Ärgerliche daran: Es ist nie wirklich „repariert“

Hier erfahren Sie, wovon Ihnen niemand etwas erzähltCLS und LCP. Sie reparieren sie nicht einmal und machen dann weiter. Jedes Mal, wenn ich eine neue Funktion oder ein neues Bild hinzufüge oder mein Layout ändere, können sich die Ergebnisse erneut verschieben. Es ist eine fortlaufende Sache.

Ich hatte Wochen, in denen in der Google Search Console alles grün war, und dann füge ich eine neue Komponente hinzu und plötzlich ist mein CLS wieder markiert. Es ist geradezu nervig, aber ich habe jetzt gelernt, meine Core Web Vitals nach jeder wesentlichen Änderung zu überprüfen.

Einfluss von CLS und LCP auf die Benutzererfahrung

0,1 Sekunden

Benutzertoleranz

32 %

Erhöhung der Absprungrate

7 %

Rückgang der Conversion-Rate

Kern-Web-Vitals

Bedeutung des SEO-Rankings

Ein Bericht vonDie Finanzmarkehebt hervor, wie langsame Websites direkt zu Umsatzverlusten führen können. Das ist Motivation genug, den Überblick zu behalten, auch wenn es langweilig erscheint.

Die Tools, die mir am meisten geholfen haben

Wenn Sie mit denselben Problemen zu kämpfen haben, sind hier die Tools aufgeführt, die ich tatsächlich verwende und die ich hilfreich finde:

Google Search Console:Hier bemerkte ich meine Probleme zum ersten Mal. Es zeigt Ihre Core Web Vitals-Ergebnisse nach Seiten aufgeschlüsselt an und sagt Ihnen genau, was Ihrer Aufmerksamkeit bedarf.
PageSpeed-Einblicke:Ich lasse das auf jeder Seite durchgehen, nachdem ich Änderungen vorgenommen habe. Es gibt konkrete, umsetzbare Empfehlungen statt vager Ratschläge.Shopifys Web-Performance-Leitfadenist auch eine großartige Begleitressource.
Web Vitals-Erweiterung:Diese Chrome-Erweiterung zeigt Ihre CLS-, LCP- und anderen Messwerte in Echtzeit an, während Sie Ihre eigene Website durchsuchen. Ich lasse es während der Entwicklung ständig eingeschaltet.

Sobald Sie Ihre Leistungsprobleme identifiziert haben, nutzen Sie unsereKI-Ranking-Tool für die Google-Sucheum zu prüfen, ob Ihre Verbesserungen tatsächlich zu einer besseren Sichtbarkeit in der Suche führen. Es hat keinen Sinn, Punkte zu korrigieren, wenn es Ihrem Ranking nicht hilft.

Mein Rat, wenn Sie das durchmachen

Wenn Ihre Leistung genauso auf und ab war wie meine, würde ich Folgendes vorschlagen:

Keine Panik.CLS- und LCP-Probleme kommen unglaublich häufig vor. Sie machen nicht alles falsch – diese Kennzahlen sind nur sensibel.
Überprüfen Sie Ihre Analysen nach Ländern.Ihre Website ist für Sie möglicherweise schnell, für Besucher anderswo jedoch langsam. Ein CDN kann dieses Problem schnell lösen.
Korrigieren Sie zuerst die Bilder.Meiner Erfahrung nach sind nicht optimierte Bilder und fehlende Abmessungen die Ursache für die meisten CLS- und LCP-Probleme.
Testen Sie nach jeder Änderung.Gewöhnen Sie sich an, PageSpeed Insights immer dann auszuführen, wenn Sie wichtige Aktualisierungen vornehmen.
Sei geduldig.Die Aktualisierung der Daten der Google Search Console kann Tage oder Wochen dauern. Gehen Sie nicht davon aus, dass Ihre Korrekturen nicht funktionieren, nur weil sich das Dashboard noch nicht geändert hat.

Ich lerne immer noch und beschäftige mich immer noch damit. Meine Ergebnisse sind besser als sie waren, aber ich würde sie nicht als perfekt bezeichnen. Wenn Sie Lösungen gefunden haben, die für Sie funktioniert haben, möchte ich wirklich davon hören. Sie können auch versuchen, Ihre Leistungsdaten mit unserem zu visualisierenkostenloser Online-Diagrammerstellerum Verbesserungen im Laufe der Zeit zu verfolgen.

Das Fazit lautet:CLS und LCPverschwinden nicht. Sie sind wichtig für SEO, sie sind wichtig für das Benutzererlebnis, und wenn Sie wie ich Websites betreiben, werden sie Sie auf Trab halten. Aber sie sind reparierbar und jede Verbesserung, die Sie vornehmen, ist es wert.