Größte inhaltsreiche Farbe erklärt: So verbessern Sie Ihre Zeit

Kämpfen Sie damit, wie Sie Largest Contentful Paint auf Ihrer Website verbessern können? Oder sind Sie sich nicht sicher, was Largest Contentful Paint bedeutet und warum Sie sich überhaupt darum kümmern müssen?

Egal, wo Sie anfangen, dieser Beitrag ist für Sie, denn Sie werden alles lernen, was Sie über Largest Contentful Paint wissen müssen.

Dazu gehört, was Largest Contentful Paint bedeutet, warum es wichtig ist, wie man es misst und wie man es verbessert.

Sie können das Inhaltsverzeichnis unten verwenden, um basierend auf Ihrem aktuellen Wissensstand zu einem bestimmten Abschnitt zu springen. Oder lesen Sie weiter, um von vorne zu beginnen.

Was ist Largest Contentful Paint (LCP)? Erklärung der größten inhaltlichen Farbbedeutung

Largest Contentful Paint ist eine Leistungsmetrik, die misst, wie lange es dauert, bis der Hauptinhalt einer Webseite geladen ist.

Largest Contentful Paint ist zusammen mit Cumulative Layout Shift (CLS) und First Input Delay (FID) Teil der Core Web Vitals-Metriken von Google.

Auf einer eher technischen Ebene misst Largest Contentful Paint, wie lange es dauert, bis der Benutzer den Ladevorgang der Seite initiiert, bis der größte Textblock, das größte Bild oder Video im Darstellungsbereich gerendert wird.

Was bedeutet „Hauptinhalt“ in Bezug auf LCP?

Nun, der Hauptinhalt hängt von der eigentlichen Seite ab, aber es könnte einer der folgenden sein:

• Text – genauer gesagt alle Elemente auf Blockebene, die Textknoten oder andere Textelemente auf Inline-Ebene enthalten.
• Bild – Elemente innerhalb eines <img>-Elements oder <image>-Elemente innerhalb eines <svg>-Elements.
• Video – beliebige <video>-Elemente (es verwendet das Posterbild).
• Ein Element mit einem Hintergrundbild – nur wenn es über die CSS-Funktion url() geladen wird (gilt nicht für CSS-Verläufe).

Später in diesem Beitrag erfahren Sie, wie Sie das genaue Largest Contentful Paint-Element für jede Seite Ihrer Website finden.

Größte zufriedene Farbe vs. erste zufriedene Farbe

Eine häufige Frage, die Sie vielleicht haben, ist, was der Unterschied zwischen „Lastest Contentful Paint“ und „First Contentful Paint“ ist, einer weiteren häufigen Leistungsmetrik.

Während die beiden Begriffe ähnlich sind, besteht der Hauptunterschied darin, dass Largest Contentful Paint misst, wie lange es dauert, bis der „Hauptinhalt“ der Seite geladen ist, während First Contentful Paint misst, wie lange es dauert, bis das „erste Objekt“ geladen ist ( ob oder nicht es ist der Hauptinhalt ).

Grundsätzlich:

• LCP = nur Hauptinhalt
• FCP = erster Inhalt, unabhängig davon, um welchen Inhalt es sich handelt

Daher ist Ihre LCP-Zeit fast immer etwas höher als Ihre FCP-Zeit, da das Element „Hauptinhalt“ normalerweise nicht als erstes geladen wird.

Warum ist die größte Content-Malzeit Ihrer Website so wichtig?

Es gibt zwei Hauptgründe, warum die Zeiten für den größten Contentful Paint Ihrer Website wichtig sind:

1. Benutzererfahrung
2. Suchmaschinenoptimierung

Benutzererfahrung

Der Hauptgrund, warum Sie sich um die Zeiten des größten Contentful Paint Ihrer Website kümmern sollten, ist, dass diese Metrik ein guter Indikator dafür ist, wie Sie die Erfahrungen Ihrer Benutzer mit der Leistung Ihrer Website verstehen.

Den meisten Benutzern ist es egal, wie lange es dauert, bis Ihre Website jedes einzelne Skript und Element vollständig geladen hat. Stattdessen kümmern sie sich darum, wie lange es dauert, bis sie beginnen, einen Mehrwert aus Ihrer Website zu ziehen.

Largest Contentful Paint leistet gute Arbeit bei dem Versuch, diesen „Wert“-Moment zu messen, indem es sieht, wie lange es dauert, bis der Hauptinhalt geladen ist.

Wenn Sie Ihre Website optimieren, um eine schnelle Largest Contentful Paint-Zeit zu erreichen, können Sie ziemlich sicher sein, dass Sie den Benutzern auf Ihrer Website zumindest in Bezug auf die Leistung ein solides Erlebnis bieten (Sie möchten auch ein kundenfreundliches Design). und gute Bedienbarkeit).

Das bedeutet natürlich nicht, dass Sie andere Leistungskennzahlen ignorieren sollten. Wir empfehlen immer, die Leistung und Engpässe deiner Website ganzheitlich zu betrachten, weshalb wir unser eigenes Tool zur Überwachung der Anwendungsleistung (APM) entwickelt haben, das kostenlos verfügbar ist, wenn du Kinsta-Hosting verwendest – Kinsta APM.

Suchmaschinenoptimierung (SEO)

Im Bereich der Suchmaschinenoptimierung ist Largest Contentful Paint Teil von Googles Trio der Core Web Vitals-Metriken, die Google in seinem Algorithmus-Update 2022 Page Experience als SEO-Ranking-Faktor verwendet.

Dies bedeutet, dass schlechte Zeiten für Largest Contentful Paint die Leistung Ihrer Website in den Google-Suchergebnissen beeinträchtigen können.

Während andere Faktoren wie Inhaltsqualität/-relevanz und Backlinks immer noch eine viel größere Rolle dabei spielen, wo Ihre Website rankt, ist es wichtig, die Largest Contentful Paint-Zeiten Ihrer Website zu optimieren, um sicherzustellen, dass Sie das Beste aus Ihren SEO-Bemühungen herausholen.

Was kann die größten Contentful Paint Scores beeinflussen?

Zwei Haupttypen von Problemen können sich auf die Zeiten für Largest Contentful Paint einer Seite auswirken:

1. Wie lange es dauert, bis Ihr Server mit dem ursprünglichen HTML-Dokument antwortet.
2. Wie lange es dauert, bis die tatsächliche LCP-Ressource geladen ist.

Die erste Art von Problem befasst sich mit der Antwortzeit des Servers, auch bekannt als Time to First Byte (TTFB). Bevor der Browser eines Benutzers überhaupt daran denken kann, den Hauptinhalt zu laden, muss er zuerst eine Antwort vom Server erhalten.

Hier sind einige der häufigsten Probleme, die sich darauf auswirken:

• Keine Verwendung von Seiten-Caching – keine Verwendung von Seiten-Caching zwingt den Server, mehr „Arbeit“ zu leisten, bevor er mit dem HTML-Dokument antworten kann.
• Langsames Hosting – ein langsamer Hosting-Anbieter hat immer eine langsame TTFB, unabhängig davon, was Sie tun.
• Kein CDN verwenden – Ein Content Delivery Network (CDN) kann TTFB beschleunigen, indem es Seiten aus seinem globalen Netzwerk bereitstellt, anstatt von Benutzern zu verlangen, sie vom Ursprungsserver Ihrer Website herunterzuladen.

Nachdem der Server Ihrer Website das anfängliche HTML-Dokument bereitgestellt hat, kann es beim Laden des eigentlichen Hauptinhaltselements zu weiteren Engpässen kommen.

Hier sind einige der häufigsten Probleme, die sich darauf auswirken:

• Rendering-blockierendes JavaScript oder CSS (oder nicht optimierter/unnötiger Code im Allgemeinen) – wenn der Browser des Benutzers unnötiges JavaScript oder CSS herunterladen und/oder verarbeiten muss, bevor er das Hauptelement laden kann, wird das Ihr LCP verlangsamen.
• Nicht optimierte Bilder – Wenn das LCP-Element ein Bild ist, verlangsamt die Verwendung nicht optimierter Bilder Ihre Zeit, da das Herunterladen größerer Bilder länger dauert.
• Nicht optimiertes Laden von Schriftarten – Wenn das LCP-Element Text ist, kann das Laden von benutzerdefinierten Schriftarten auf nicht optimierte Weise dazu führen, dass es länger dauert, bis dieser Text angezeigt wird.
• Unkomprimierte Dateien – Wenn Sie keine Komprimierungstechnologien wie Gzip oder Brotli verwenden, dauert es länger, bis der Browser des Benutzers die Dateien Ihrer Website herunterlädt.

Abhängig von Ihrer Website treten möglicherweise Engpässe in beiden Bereichen oder nur in einem der Bereiche auf. Etwas später in diesem Beitrag erfahren Sie, wie Sie all diese Probleme lösen können.

Was ist eine gute größte zufriedene Malzeit?

Google definiert eine „gute“ Largest Contentful Paint-Zeit als unter 2,5 Sekunden.

Wenn die Largest Contentful Paint-Zeit Ihrer Seite zwischen 2,5 und 4,0 Sekunden liegt, stuft Google dies als „Verbesserungsbedarf“ ein. Und wenn die Zeit Ihrer Seite über 4,0 Sekunden liegt, definiert Google das als „Schlecht“.

Hier ist eine Grafik von Google, die dies visuell zeigt:

So messen Sie die größte Inhaltsfarbe: Die besten LCP-Testwerkzeuge

Es gibt eine Reihe von Tools, mit denen Sie die Leistung Ihrer Website für Largest Contentful Paint testen können – lassen Sie uns einige der nützlichsten durchgehen…

PageSpeed-Einblicke

PageSpeed ​​Insights ist eines der besten Tools zur Bewertung von Largest Contentful Paint, da es vier nützliche Informationen bietet:

1. Im Chrome UX-Bericht können Sie die Zeiten des größten Contentful Paint Ihrer Website mit echten Nutzern sehen ( wenn Ihre Website genügend Zugriffe hat, um in den Bericht aufgenommen zu werden ).
2. Sie können simulierte Tests durchführen, um zu sehen, wie Ihre Website abschneidet.
3. Google teilt Ihnen das tatsächliche LCP-Element mit, das es für den Test verwendet, wodurch Sie wissen, welches Element optimiert werden muss.
4. Google wird Vorschläge machen, wie Sie Ihre LCP-Zeit verbessern können.

So verwenden Sie es:

1. Rufen Sie die PageSpeed ​​Insights-Website auf.
2. Geben Sie die URL der Seite ein, die Sie testen möchten.
3. Klicken Sie auf Analysieren .

Google zeigt Ihnen dann Ergebnisse sowohl für Mobilgeräte als auch für Desktops an – stellen Sie sicher, dass Sie beide ankreuzen.

Um das Hauptelement zu finden, das Google zur Berechnung des LCP verwendet, können Sie zum Abschnitt „Diagnose“ nach unten scrollen und den Abschnitt „Largest Contentful Paint“ erweitern:

Stellen Sie auch hier sicher, dass Sie sowohl Mobil als auch Desktop überprüfen, da das LCP-Element für beide unterschiedlich sein kann.

Chrome-Entwicklertools

Sie können die Largest Contentful Paint-Zeit auch direkt in den Chrome-Entwicklertools testen, indem Sie die Registerkarte „Leistung“ oder die Lighthouse-Audit-Funktion verwenden. Wir empfehlen die Verwendung der Registerkarte Leistung , da Sie dort weitere Informationen erhalten.

So starten Sie:

1. Öffnen Sie die Seite, die Sie testen möchten.
2. Öffnen Sie die Chrome-Entwicklertools.
3. Wechseln Sie zur Registerkarte Leistung .
4. Stellen Sie sicher, dass das Kontrollkästchen Web Vitals aktiviert ist.
5. Klicken Sie auf die Schaltfläche Neu laden ( siehe unten ).

Sie sollten jetzt eine vollständige Analyse Ihrer Website sehen.

Wenn Sie den Mauszeiger über LCP auf der Registerkarte Netzwerk bewegen, können Sie die Uhrzeit sehen:

Wenn Sie den Mauszeiger über LCP auf der Registerkarte Timings bewegen, können Sie das eigentliche LCP-Element sehen:

Google Search Console

Mit der Google Search Console können Sie zwar keine einzelne Seite auf die Zeit des größten Contentful Paint testen, sie ist jedoch sehr nützlich, um die Leistung der gesamten Website zu bewerten.

Jede Seite Ihrer Website hat eine andere LCP-Zeit, sodass Sie Ihre Homepage nicht einfach testen und Feierabend machen können.

Mit der Google Search Console können Sie sehen, wo jede Seite Ihrer Website in die Google-Kategorien „Gut“, „Verbesserungsbedarf“ und „Schlecht“ fällt. Die Leistungsdaten stammen aus dem Chrome UX-Bericht, basieren also auf echten Nutzerdaten.

Falls Sie dies noch nicht getan haben, müssen Sie Ihre Website zunächst mit der Google Search Console verifizieren.

Sobald Sie dies getan haben, können Sie wie folgt auf den LCP-Bericht zugreifen:

1. Öffnen Sie die Google Search Console für Ihre Website.
2. Gehen Sie auf der Registerkarte Erfahrung zu Core Web Vitals .
3. Klicken Sie neben dem Mobil- oder Desktop-Diagramm auf Bericht öffnen .
4. Suchen Sie im Abschnitt „Warum URLs nicht als gut angesehen werden“ nach Problemen. Wenn Sie auf das Problem klicken, erhalten Sie weitere Informationen darüber, welche URLs Probleme verursachen.

*Stellen Sie sicher, dass Sie sowohl die Desktop- als auch die mobilen Ergebnisse überprüfen, da die Daten jeweils unterschiedlich sein können.

WebseitenTest

WebPageTest ist eine weitere praktische Option zum Ausführen von simulierten Leistungstests.

Im Gegensatz zu PageSpeed ​​Insights können Sie mit WebPageTest verschiedene Testmetriken wie Testort, Verbindungsgeschwindigkeit, Gerät und mehr vollständig anpassen. Das ist der Hauptvorteil der Verwendung gegenüber anderen Tools – es gibt Ihnen mehr Optionen zum Konfigurieren des Tests.

So führen Sie einen Test durch:

1. Gehen Sie zu WebseitenTest.
2. Fügen Sie die Seiten-URL hinzu, die Sie testen möchten.
3. Erweitern Sie die erweiterten Konfigurationsoptionen , um Ihren Test vollständig zu konfigurieren.

Auf der Ergebnisseite sehen Sie die LCP-Daten zusammen mit unzähligen anderen Leistungsmetriken (einschließlich einer Wasserfallanalyse).

So finden Sie das größte inhaltsreiche Malelement

Wenn Sie Largest Contentful Paint verbessern möchten, kann es sehr hilfreich sein, genau zu wissen, welches Element Google zur Berechnung Ihrer LCP-Zeit verwendet.

Wenn Sie beispielsweise wissen, dass Google Ihr Hero-Image als LCP-Element auf Ihrer Homepage verwendet, wissen Sie, dass Sie Wege finden müssen, dieses Hero-Image so schnell wie möglich bereitzustellen, wenn Sie die LCP-Zeiten Ihrer Homepage verbessern möchten.

Wie bereits erwähnt, können Sie Ihr Largest Contentful Paint-Element mit PageSpeed ​​Insights oder Chrome Developer Tools finden.

Stellen Sie sicher, dass Sie sowohl mobile als auch Desktop-Ergebnisse überprüfen, da Ihr LCP-Element auf verschiedenen Geräten unterschiedlich sein kann.

So verbessern Sie Largest Contentful Paint in WordPress (oder anderen Plattformen)

Nachdem Sie nun alles über Largest Contentful Paint wissen, lassen Sie uns einige umsetzbare Tipps zur Verbesserung von Largest Contentful Paint in WordPress geben.

Während wir uns bei diesen Tipps auf WordPress konzentrieren, sind alle Tipps universell und gelten für andere Arten von Websites.

Richten Sie Caching ein, um die Antwortzeit des Servers zu verbessern

Caching kann die Reaktionszeit des Servers verbessern, indem es die Verarbeitungsarbeit reduziert, die Ihr Server leisten muss, bevor er das fertige HTML-Dokument an die Browser der Besucher liefern kann.

Wenn du deine WordPress-Seite mit Kinsta hostest, brauchst du dir keine Gedanken über die Konfiguration des Cachings zu machen, da Kinsta automatisch optimiertes Caching für dich implementiert.

Wenn Sie woanders hosten, können Sie das Caching auf Ihrer Website mit einem kostenlosen Plugin wie WP Super Cache oder einem kostenpflichtigen Plugin wie WP Rocket aktivieren.

Weitere Optionen findest du in unserem Beitrag mit den besten WordPress-Caching-Plugins.

Upgrade auf schnelleres WordPress-Hosting

Während alle Taktiken auf dieser Liste Ihnen helfen können, Ihre LCP-Zeit zu verbessern, gibt es keine Umschweife:

Wenn Sie langsames, nicht optimiertes WordPress-Hosting verwenden, werden Ihre LCP-Zeiten immer durch die Qualität Ihres Hosts begrenzt.

Möglicherweise können Sie die Dinge ein wenig verbessern, aber Sie werden immer Schwierigkeiten haben, LCP-Zeiten unter 2,5 Sekunden zu erreichen, wenn Ihr Host langsam ist.

Wenn du den einfachsten Weg suchst, deine Largest Contentful Paint-Zeiten zu verbessern, kannst du deine Website zu Kinsta migrieren. Kinsta bietet nicht nur eine leistungsoptimierte Hosting-Infrastruktur, sondern wir haben auch integrierte Funktionen, um viele der anderen Optimierungen auf dieser Liste zu handhaben.

Das bedeutet, dass Sie sich auf das Wachstum Ihrer Website konzentrieren können, anstatt sich mit der Optimierung der Largest Contentful Paint-Zeiten herumzuschlagen.

Wenn Sie daran interessiert sind, migriert Kinsta unbegrenzt Websites von jedem Host kostenlos – erfahren Sie hier mehr über die kostenlose Migration.

Wenn Sie immer noch unschlüssig sind, probieren Sie zuerst die restlichen Tipps auf dieser Liste aus. Aber wenn Sie immer noch Probleme haben, nachdem Sie alles auf dieser Liste erledigt haben, brauchen Sie vielleicht einfach ein besseres Hosting.

Verwenden Sie ein Content Delivery Network (CDN)

Ohne ein CDN müssen alle Besucher Ihrer Website den HTML-Code und die statischen Elemente einer Seite von Ihrem Hosting-Server herunterladen.

Wenn sich Ihre Besucher in der Nähe Ihres Servers befinden, ist das normalerweise kein Problem. Wenn Ihre Besucher jedoch über die ganze Welt verteilt sind, kann dies Ihre Website aufgrund der physischen Entfernung zwischen einem Besucher und dem Server Ihrer Website verlangsamen.

Mit einem CDN können Sie die statischen Elemente Ihrer Website (oder sogar die fertigen HTML-Seiten Ihrer Website) an das globale Netzwerk des CDN verteilen. Auf diese Weise können Besucher Dateien vom nächstgelegenen Standort des CDN herunterladen, was viel schneller ist.

Wenn du mit Kinsta hostest, empfehlen wir die Verwendung der Edge-Caching-Funktion von Kinsta, um die besten Ergebnisse zu erzielen.

Die Edge-Caching-Funktion von Kinsta funktioniert, indem die vollständigen HTML-Seiten und statischen Assets deiner Website im globalen Netzwerk von Cloudflare zwischengespeichert werden ( anstatt nur statische Assets wie die meisten CDN-Lösungen zwischenzuspeichern ).

Das bedeutet, dass die Besucher Ihrer Website die komplette Seite vom nächstgelegenen Edge-Standort herunterladen können, was sowohl die Reaktionszeit des Servers als auch die Ladezeit Ihrer LCP-Ressource verkürzt.

Um das Edge-Caching von Kinsta zu aktivieren, gehe zur Registerkarte Edge-Caching im Dashboard deiner Website in MyKinsta.

Wenn Sie woanders hosten, können Sie mit beliebten CDN-Diensten wie KeyCDN, Bunny, StackPath und anderen ein CDN für die statischen Assets Ihrer Website einrichten.

Renderblockierendes JavaScript vermeiden (aufschieben oder entfernen)

Renderingblockierendes JavaScript ist JavaScript, das vor Ihrem Haupt-LCP-Element geladen wird, obwohl es zu diesem Zeitpunkt nicht benötigt wird.

Durch das Verzögern des Ladens des LCP-Elements werden Ihre LCP-Ladezeiten verlangsamt.

Um dies zu beheben, gibt es einige Strategien, die Sie implementieren können:

• Entfernen Sie nach Möglichkeit unnötiges JavaScript.
• Verzögern Sie das JavaScript, damit es das Laden des Hauptelements Ihrer Website nicht blockiert.
• Verzögern Sie das JavaScript, bis ein Benutzer mit Ihrer Website interagiert.

Für die meisten Menschen ist der einfachste Weg, diese Funktionalität zu implementieren, über Plugins wie Autoptimize oder WP Rocket.

Für eine vollständige Anleitung dazu haben wir zwei sehr detaillierte Posts:

• So eliminieren Sie Render-Blocking-Ressourcen in WordPress
• So verschieben Sie das Parsen von JavaScript

Vermeiden Sie Render-Blocking-CSS und optimieren Sie die CSS-Bereitstellung

So wie nicht optimiertes JavaScript Ihre Website verlangsamen kann, kann auch nicht optimiertes CSS dasselbe bewirken.

Im Wesentlichen möchten Sie so wenig CSS wie möglich laden. Und für das CSS, das Sie laden müssen, möchten Sie es auf optimale Weise laden. In der Regel bedeutet dies, dass Sie wichtiges CSS frühzeitig laden und unkritisches CSS auf einen späteren Zeitpunkt im Ladeprozess verschieben möchten.

Wenn Sie kein Entwickler sind, können Sie dies am einfachsten erreichen, indem Sie Plugins zur Leistungsoptimierung wie Perfmatters, WP Rocket oder FlyingPress verwenden.

Beispielsweise bietet WP Rocket integrierte Funktionen, um ungenutztes CSS Seite für Seite zu entfernen und CSS optimal bereitzustellen.

Wenn Sie sich genauer ansehen möchten, wie Sie all dies tun können, lesen Sie unseren vollständigen Leitfaden zur Optimierung von CSS.

Minimieren Sie Ihr HTML, CSS und JavaScript

Zusätzlich zu den oben genannten Techniken zur Code-Optimierung sollten Sie auch den HTML-, CSS- und JavaScript-Code Ihrer Website minimieren.

Im Wesentlichen entfernt dies unnötige Zeichen und Leerzeichen aus dem Code Ihrer Website, um seine Größe zu verringern.

Wenn du bei Kinsta hostest, kann Kinsta die Minimierung automatisch über unsere Cloudflare-Integration handhaben. So steuern Sie diese Funktion:

1. Öffne das Dashboard deiner Website in MyKinsta.
2. Wechseln Sie zur Registerkarte CDN .
3. Klicken Sie neben Bildoptimierung auf Einstellungen .
4. Aktivieren Sie die Kontrollkästchen für CSS und JS und speichern Sie die Einstellungen.

Wenn Sie Ihre Website woanders hosten, können Sie ein kostenloses Plugin wie Autoptimize verwenden, um Ihren Code zu minimieren, oder eines der umfassenden Premium-Plugins wie Perfmatters, WP Rocket oder FlyingPress.

Oder sehen Sie sich unser vollständiges Code-Minifizierungs-Tutorial an, um mehr zu erfahren. Während sich das Tutorial auf JavaScript konzentriert, können Sie dieselben Methoden und Plugins auch verwenden, um anderen Code zu minimieren.

Komprimierung auf Serverebene verwenden (Gzip oder Brotli)

Mit der Komprimierung auf Serverebene können Sie die Größe der Dateien Ihrer Website mithilfe von Technologien wie Gzip oder Brotli verringern.

Beispielsweise reduzierte die Komprimierung, die wir für die Kinsta-Website verwenden, die Dateigröße der Kinsta-Homepage um 85,82 %.

Wenn du deine WordPress-Website mit Kinsta hostest, brauchst du dir darüber keine Gedanken zu machen, da Kinsta die Brotli-Komprimierung für alle Seiten automatisch aktiviert.

Wenn Sie Ihre Website woanders hosten, können Sie dieses kostenlose Tool von GiftOfSpeed ​​verwenden, um zu überprüfen, ob auf Ihrer Website Gzip oder Brotli aktiviert ist.

Wenn Ihre Website keine Komprimierung verwendet, können Sie unserer Anleitung zum Aktivieren der Gzip-Komprimierung folgen, um sie einzurichten.

Wenn Sie Cloudflare verwenden, um den Inhalt Ihrer Website bereitzustellen, verfügt Cloudflare auch über eine integrierte Einstellung zum Aktivieren der Brotli-Komprimierung:

1. Öffnen Sie Ihre Website im Cloudflare-Dashboard.
2. Gehen Sie im Seitenleistenmenü zu Geschwindigkeit → Optimierung .
3. Aktivieren Sie den Brotli -Schalter.

Bilder komprimieren und skalieren

Wenn Ihr LCP-Element ein Bild ist, wird das Finden von Möglichkeiten, die Größe dieser Bilddatei zu reduzieren, die Zeit verkürzen, die der Browser eines Benutzers benötigt, um das Bild herunterzuladen (und somit Ihre LCP-Zeit verkürzen).

Um die Bildgröße zu reduzieren, sollten Sie das Bild auf die Abmessungen skalieren, in denen Sie es tatsächlich verwenden, es mit verlustbehafteter oder verlustfreier Komprimierung komprimieren und es in einem optimierten Format wie WebP bereitstellen.

Dieser Ansatz ist im Allgemeinen eine bewährte Methode zur Leistungsoptimierung – er ist nicht spezifisch für Largest Contentful Paint.

Um einen umfassenderen Überblick zu erhalten, lesen Sie unseren ausführlichen Leitfaden zur Bildoptimierung für Websites.

Und oh ja – wenn du deine WordPress-Seite mit Kinsta hostest, brauchst du dir darüber keine Gedanken zu machen, denn Kinsta bietet eine integrierte Funktion zur automatischen Optimierung der Bilder deiner Seite, ohne dass Tools von Drittanbietern erforderlich sind.

So aktivieren Sie diese Funktion:

1. Öffne das Dashboard deiner Website in MyKinsta.
2. Wechseln Sie zur Registerkarte CDN .
3. Klicken Sie neben Bildoptimierung auf Einstellungen .
4. Wählen Sie Ihre bevorzugte Stufe der Bildoptimierung und speichern Sie die Einstellungen – die Verwendung von Lossy bietet die größten Geschwindigkeitsverbesserungen, obwohl dies möglicherweise einen geringen Einfluss auf die Bildqualität hat.

Laden Sie das größte Contentful Paint-Bild vor

Wenn Ihr LCP-Element ein Bild ist, besteht eine weitere Strategie zur Verbesserung des LCP darin, das Largest Contentful Paint-Bild vorab zu laden. Aus diesem Grund sehen Sie in PageSpeed ​​Insights möglicherweise eine Empfehlung wie „Lasten Sie das größte Contentful Paint-Bild vorab laden“.

Mit Preload können Sie den Browser eines Benutzers anweisen, das Herunterladen bestimmter Ressourcen zu priorisieren, z. B. das spezifische Bild, das das LCP-Element Ihrer Website ist.

Die einfachste Möglichkeit, LCP-Bilder vorab zu laden, ist die Verwendung eines Plugins wie Perfmatters, das eine spezielle Funktion zum Vorladen kritischer Bilder bietet. Sie müssen lediglich angeben, wie viele Bilder vorab geladen werden sollen – wir empfehlen, mit einem zu beginnen, da sich das Vorladen zu vieler Assets negativ auswirken kann.

Es gibt auch einige kostenlose Plugins auf WordPress.org, um dies zu erreichen, wie z. B. das Plugin „Preload Featured Images“ von WPZOOM, sowie andere Premium-Plugins, wie z. B. FlyingPress.

Suchen Sie nach Lazy Loading-Problemen

Ein weiteres Problem, das die Meldung „Preload Largest Contentful Paint image“ in PageSpeed ​​Insights auslösen kann, sind Probleme mit der Verzögerung beim Laden von Bildern auf Ihrer WordPress-Site.

Oder dies kann auch eine Warnung „Largest Contentful Paint image was faully loading“ in PageSpeed ​​Insights auslösen.

Mit Lazy Loading können Sie die anfänglichen Ladezeiten Ihrer Website verkürzen, indem Sie mit dem Laden bestimmter Ressourcen (z. B. Bilder) warten, bis ein Benutzer beginnt, mit Ihrer Website zu interagieren.

Obwohl das normalerweise eine gute Sache ist, kann es Ihre LCP-Zeiten verlangsamen, wenn Ihre Website versucht, das Bild, das Ihr LCP-Element ist, faul zu laden. Aus diesem Grund sollten Sie sicherstellen, dass Ihre Website keine Bilder träge lädt, die im anfänglichen Darstellungsbereich sichtbar sind.

Wenn Sie die Lazy-Loading-Funktion des nativen Browsers verwenden, die WordPress in WordPress 5.5 eingeführt hat, sollte dieses Problem nicht auftreten, da WordPress das erste In-Content-Bild bereits ab WordPress 5.9 automatisch ausschließt.

Wenn Sie mehr als das erste Bild ausschließen möchten, können Sie die Funktion wp_omit_loading_attr_threshold verwenden (aber die meisten Leute müssen hier nichts tun).

Wenn Sie jedoch ein Lazy-Loading-Plugin mit JavaScript-Unterstützung verwenden, müssen Sie diesen Ausschluss möglicherweise manuell in den Einstellungen des Plugins einrichten. Beispielsweise enthält das Perfmatters-Plug-in eine Option, mit der Sie die ersten „X“-Bilder vom verzögerten Laden ausschließen können.

Wenn Ihr Lazy-Loading-Plugin diese Art von Ausschluss nicht zulässt, können Sie zu einem anderen Plugin wechseln, das dies ermöglicht.

Optimieren Sie das Laden von Schriftarten mit Font-Display: Optional

Wenn es sich bei Ihrem LCP-Element um Text handelt, kann der Schriftartladeprozess Ihrer Website das Erscheinen des Textes verzögern, was Ihre LCP-Zeit verlangsamt.

Dies geschieht normalerweise, wenn benutzerdefinierte Schriftarten verwendet werden. Wenn Ihre Website so konfiguriert ist, dass mit dem Rendern von Text gewartet wird, bis die benutzerdefinierte Schriftart geladen wurde, wird dies die Arbeit verlangsamen, wenn das Laden der benutzerdefinierten Schriftartdatei lange dauert.

Um dies zu beheben, können Sie den Font-Display: Optional CSS-Deskriptor verwenden.

Dies weist den Browser an, eine Fallback-Schriftart zu verwenden, wenn die benutzerdefinierte Schriftart nicht innerhalb eines kleinen Fensters geladen wird (normalerweise etwa 100 ms oder weniger).

Im Klartext bedeutet dies im Grunde, dass der Browser der benutzerdefinierten Schriftart die Möglichkeit geben sollte, geladen zu werden. Wenn die benutzerdefinierte Schriftart jedoch nicht schnell genug geladen wird, sollte der Browser einfach eine Fallback-Systemschriftart verwenden, um eine weitere Verzögerung des Inhalts zu vermeiden.

Alternativ können Sie auch Font-Display: Swap verwenden, das die Fallback-Schriftart sofort lädt und dann die benutzerdefinierte Schriftart „austauscht“, sobald die benutzerdefinierte Schriftart geladen ist. Dieser Ansatz kann jedoch Probleme mit der kumulativen Layoutverschiebung verursachen, wenn die Schriftarten unterschiedliche Größen haben, also sollten Sie vorsichtig sein.

Sofern Ihre benutzerdefinierte Schriftart für das Design Ihrer Website nicht unbedingt erforderlich ist, ist die Verwendung von Font-Display: Optional aus der Sicht von Core Web Vitals normalerweise die beste Option.

Wenn Sie mit der direkten Verwendung von CSS vertraut sind, können Sie die Font-Display-Eigenschaft im Stylesheet Ihres untergeordneten Designs manuell bearbeiten.

Wenn Sie CSS nicht verwenden möchten, können Sie auch Plugins finden, die Ihnen dabei helfen, obwohl sich die meisten auf die Optimierung für Google Fonts konzentrieren:

• Asset CleanUp – unterstützt Google Fonts für kostenlose und benutzerdefinierte lokale Schriftarten mit der Pro-Version.
• Perfmatters – bietet eine Funktion für Google Fonts.

Wenn Sie Elementor zum Entwerfen Ihrer Website verwenden, enthält Elementor auch eine integrierte Option, mit der Sie diese für Seiten verwenden können, die Sie mit Elementor erstellen:

1. Gehen Sie zu Elementor → Einstellungen .
2. Öffnen Sie die Registerkarte Erweitert .
3. Setzen Sie das Dropdown-Menü Google Fonts Load auf Optional .

Zusammenfassung

Zu lernen, wie Sie Largest Contentful Paint verbessern können, ist wichtig, um die Benutzererfahrung Ihrer Website zu verbessern und Ihre Suchmaschinen-Rankings zu maximieren.

Die Verbesserung von Largest Contentful Paint besteht im Allgemeinen aus zwei Teilen: Verkürzen Sie die Antwortzeit Ihres Servers und optimieren Sie dann den Code Ihrer Website, um das LCP-Element so schnell wie möglich wiederzugeben.

Wenn du dir keine Gedanken über langsame Reaktionszeiten des Servers machen möchtest, kannst du deine WordPress-Seite zu Kinsta verschieben. Die leistungsoptimierte Architektur von Kinsta wurde speziell entwickelt, um Ihre Website so schnell wie möglich bereitzustellen.

Außerdem kannst du mit der Edge-Caching-Funktion von Kinsta die Seiten deiner Website im globalen Netzwerk von Cloudflare zwischenspeichern, was bedeutet, dass Besucher aus der ganzen Welt blitzschnelle Serverantwortzeiten (und folglich blitzschnelle LCP-Zeiten) genießen werden.

Wenn Sie mehr erfahren möchten, können Sie auf diesen Seiten weitere Informationen über das verwaltete WordPress-Hosting von Kinsta oder das verwaltete WooCommerce-Hosting von Kinsta finden.

Wenn du möchtest, dass dir ein Fachmann bei einigen benutzerdefinierten LCP-Leistungsoptimierungen hilft, kannst du auch einen Anbieter im Kinsta-Agenturverzeichnis finden.