Was ist „Largest Contentful Paint“ und wie können Sie diesen Wert verbessern?
LCP mit Fastly verbessern
Wie jeder, der sich mit SEO und Website-Performance beschäftigt, weiß, sind Google Core Web Vitals (CWVs) ein entscheidender Faktor bei der Bewertung und Verbesserung der Kundenerfahrung auf Ihrer Website. Diese CWVs beinhalten drei wichtige Metriken:
Interaktivität: Interaction to Next Paint oder INP
Visuelle Stabilität: Cumulative Layout Shift oder CLS
In diesem Beitrag geht es um die erste (und aussagekräftigste) dieser Metriken, den LCP, und darum, wie man diesen verbessern kann.
Was ist LCP?
Der LCP-Wert misst die Zeit, die zwischen dem Beginn des Ladevorgangs der Seite und der Darstellung des größten Elements vergeht. Bei den gemessenen Elementen handelt es sich in der Regel um Bilder, Videos und Elemente auf Blockebene, die Textknoten enthalten. Einfach ausgedrückt – es ist die längste Wartezeit, die ein Nutzer auf Ihrer Website während der Navigation hat.
Ein guter Richtwert ist alles unter 2,5 Sekunden.
Warum ist LCP wichtig? Warum ist es für die Website-Performance relevant?
LCP ist sowohl für das Nutzererlebnis als auch für den Geschäftserfolg von entscheidender Bedeutung:
Es wirkt sich direkt auf die Nutzerzufriedenheit aus – Kunden, Besucher und Verbraucher auf Ihrer Website sind unberechenbar. Selbst sehr kurze Verzögerungen bei den Ladezeiten können zu verpassten Gelegenheiten führen. Denken Sie an das letzte Mal, als Sie eine langsame Website besucht haben … Wir wetten, dass Sie wahrscheinlich Ihr Fenster geschlossen haben oder zumindest von der Erfahrung genervt waren.
Er verbessert die Suchmaschinenoptimierung (SEO) – Google gibt direkt und offen an, dass CWVs Einfluss darauf haben, wie Ihre Seite in den Suchergebnissen angezeigt wird. Ein schlechter LCP führt zu schlechteren Platzierungen (und weniger Besuchern auf Ihrer Seite).
Er reduziert die Absprungraten – eine geringe Kundenzufriedenheit (#1) korreliert direkt mit höheren Absprungraten. Mit schnelleren Ladezeiten können Sie die Nutzer zufriedenstellen und auf Ihrer Website halten.
Er steigert die Conversion-Rates – Zufriedene Kunden und schnell ladende Websites führen zu höheren Conversion-Rates.
Wie können Sie LCP verbessern?
Die Nutzung eines modernen CDN ist eine der schnellsten und effektivsten Methoden, um Ihre Core Web Vitals zu verbessern, insbesondere den Largest Contentful Paint – den wichtigsten der drei CWVs.
Obwohl Ihre CDN-Konfiguration zur Verbesserung von INP und CLS beitragen kann, sind sie nicht die Hauptfaktoren.
Der Largest Contentful Paint kann direkt durch Ihre CDN-Konfiguration und Ihr API-Design beeinflusst werden. Eine der Möglichkeiten zur Optimierung des LCP besteht darin, sich auf die Time to First Byte (TTFB) zu konzentrieren. Durch das Cachen von API-Antworten und das Komprimieren von Bildern auf der Edge können Sie Ihre TTFB und damit Ihren LCP verbessern.
Optimiertes API-Design kann erheblichen Einfluss darauf haben, wie schnell dynamische Inhalte geladen werden – und bietet dabei nicht nur ein personalisierteres Nutzererlebnis, sondern auch ein schnelleres.
Am besten ist es, ein modernes CDN zu verwenden, das bei all diesen Herausforderungen helfen kann:
Wie kann Fastly zur Verbesserung von LCP beitragen?
Ein modernes CDN wie Fastly kann helfen, Ihren LCP-Score zu verbessern, indem es Ihre Zeit zum ersten Byte (TTFB) verbessert, API-Antworten zwischenspeichert und Bilder auf der Edge komprimiert.
Ein optimiertes API-Design und ein Netzwerk, das seine offenen Verbindungen aktiv aufrechterhält, können die Ladezeit für Ihre gecachten Inhalte, Ihre dynamischen Inhalte und sogar Ihre nicht gecachten Inhalte erheblich verbessern, während Sie eine personalisiertere und schnellere User Experience bieten.
Auslieferung veralteter Inhalte
Mit Fastly können Sie „veraltete“ Inhalte bereitstellen, wenn Ihr Origin zu lange braucht. Wenn ein Kunde versucht, eine Seite zu laden, Ihr Origin aber nicht erreichbar ist oder zu lange für eine Antwort benötigt, kann Fastly diesem Besucher weiterhin „veraltete“ (zwischengespeicherte) Inhalte ausliefern, bis das Problem behoben ist – das bedeutet, dass die Auslieferung von Inhalten an Ihre Zielgruppe nicht unterbrochen wird. Dadurch werden nicht nur das Nutzererlebnis und die Zufriedenheit aufrechterhalten, sondern auch Ihre SEO-Rankings verbessert (Google erkennt nicht, dass Ihre Website nicht oder nur langsam geladen wird). Sobald Ihre ursprüngliche Website wieder verfügbar ist, werden die Inhalte aktualisiert.
Behandlung von Anfragen mit hohem Volumen
Die stetig steigende Nachfrage durch Web-Crawler kann Ihre Server übermäßig belasten und Ihre Leistung beeinträchtigen. Fastly lässt sich ganz einfach so konfigurieren, dass es Crawlern „veraltete“ Inhalte bereitstellt, wodurch die Belastung Ihrer Server verringert wird. Die Crawler erhalten immer noch echte und relevante Inhalte, es ist nur vielleicht nicht die absolut neueste Version. Wir verarbeiten mühelos ein großes Volumen an Anfragen (sogar DDoS-Angriffe) ohne Performance-Einbußen und umgehen dabei intelligent die „Wetterlage“ des Internets.
Besseres Sicherheitsranking
Die Integration unseres DDoS, Bot-Schutz und der TLS bedeutet eine sicherere Website für Ihre Kunden und die Verhinderung verschiedener Cyber-Angriffe. Die wiederholten Algorithmus-Updates von Google machen deutlich, dass die Sicherheit einer Website stark in den Ranking-Faktor des SEO einer Website einfließt. Websites mit schlechten oder fehlenden Sicherheitsmaßnahmen haben negative Auswirkungen auf Rankings und Suchergebnisse.
Schnellere Ladezeiten für große Dateien
Wenn Sie Ihren Kunden größere Videodateien bereitstellen, kann Fastly die Seitengeschwindigkeit schnell verbessern. Google indiziert Videodateien in der Regel nicht, es sei denn, sie befinden sich auf Plattformen wie YouTube; wenn Ihre Website also verschiedene eingebettete Videodateien auf demselben Webserver hostet, besteht die Gefahr, dass die Seite langsam lädt. Fastly kann zwischengespeicherte Versionen der Videodateien bereitstellen – eine hervorragende Möglichkeit, dieses Problem zu umgehen.
Zwischenspeicherung dynamischer Inhalte
APIs
Fastly hilft dabei, Ihren Origin vor übermäßigen API-Anfragen zu schützen. Unternehmen halten den API-Traffic oft für zu dynamisch, um einen Vorteil aus der Bereitstellung durch ihr CDN zu ziehen. Fastly setzt sich seit Langem für Best Practices im API-Design ein, die es ermöglichen, API-Antworten auf der Edge zu cachen. Leider werden API-Antworten allzu oft als „nicht zwischenspeicherbar“ abgetan, was bedeutet, dass man einige der einfachsten Performance- und Zuverlässigkeitsvorteile verpasst, die man erzielen könnte, wenn man seine API-Antworten nur in einem Edge-Netzwerk cachen würde. Die Verfügbarkeit von APIs kann sich auf die Verfügbarkeit der Websites und Services von Partnern auswirken. Daher ist es von entscheidender Bedeutung, dass Sie Maßnahmen ergreifen, um eine möglichst hohe API-Verfügbarkeit zu gewährleisten. Sie können dies erreichen, indem Sie mehr Ihrer API-Inhalte auf der Edge mit dem richtigen CDN cachen.
Dynamischer Inhalt
Fastly kann auch „dynamische“ oder sich häufig ändernde Inhalte cachen (beispielsweise Account-Informationen, standortspezifische Produkte, sich ändernde Lagerbestände oder neue Schlagzeilen). Traditionelle CDN-Kunden leiden, da ihr Traffic zum Ursprung zurückkehren muss, was zu langsameren Reaktionszeiten, höheren Infrastrukturkosten und höheren Kosten für Ausgangsdaten für diese zahlreichen (unnötigen) Antworten führt. Moderne CDNs ermöglichen es Ihrem Unternehmen hingegen, wirklich dynamische, sich mit jeder Anfrage ändernde Inhalte bereitzustellen, die nicht vom Ursprung, sondern von der Edge aus bereitgestellt werden. Dadurch können Sie Ihren Code näher am Endnutzer ausführen und so kostspielige und zeitaufwendige Performance-Einbußen vermeiden.
Bildoptimierung
Fastly trägt zur erheblichen Optimierung von Bildern bei – durch das Speichern von Bildkopien auf verteilten Servern wird dem Endnutzer ein Bild vom jeweils nächstgelegenen Standort bereitgestellt. Dadurch werden die Ladezeiten verkürzt und Sie können Bilder dynamisch an das Gerät und die Bildschirmgröße des Endnutzers anpassen, komprimieren oder konvertieren. Indem wir die optimierteste Version eines Bildes bereitstellen, geben wir dem Endnutzer nicht nur das bestmögliche Erlebnis, sondern minimieren auch die häufige Belastung, die Bildladezeiten für eine Website verursachen. Wenn es Ihnen gelingt, die Bearbeitung und Bereitstellung von Bildern auf Ihrer Website oder in Ihrer Anwendung so zu optimieren, dass jedes Bild kleiner, die Ladezeiten kürzer und die Aufrufe am Origin-Server weniger werden, wird sich dies positiv auf Ihre Performance als Ganzes auswirken.
Wenn Sie mehr darüber erfahren möchten, wie Fastly Ihre LCP verbessern kann, nehmen Sie Kontakt mit uns auf.