Verschiedene Methoden der LCP-Optimierung, Ein-Klick-Optimierung des LCP-Plugins WP Meteor LCP-Indikatoroptimierung

WP Meteor, ein kinderleichtes LCP-Optimierungs-Plugin, erklärt detailliert, wie man LCP optimiert

LCP optimieren Dadurch kann die Website in Suchmaschinen besser sichtbar werden und mehr Verkehr generieren.LCP-Optimierung Am einfachsten ist die Installation  WP Meteor ,DasPluginsSie können die Geschwindigkeit von LCP mit einem Klick optimieren, das Laden von JS-Dateien verzögern usw. WP Meteor hat keine komplizierten Einstellungen, sondern nur eine einfache Schaltfläche. Es ist sofort einsatzbereit, benutzerfreundlich und sehr gut für Anfänger geeignet. Im Folgenden finden Sie eine detaillierte Einführung in verschiedene Methoden der LCP-Optimierung.

verwendenWP-PluginsWenn der LCP-Index nach der LCP-Optimierung unter 2,5 liegt, suchen Sie im Plugin nach WP Meteor und installieren Sie es. WP Meteor ist eine brandneue Methode zur Optimierung der Seitengeschwindigkeit. Es kann sogar zusätzlich zu Ihren bestehenden Optimierungen ausgeführt werden, darunter:

1. Automatische Optimierung
2. WP Rocket
3. WP Total Cache
4. WP Super Cache
5. LiteSpeed-Cache

Mehrere Methoden zur LCP-Optimierung

• Largest Contentful Paint (LCP) misst, wie lange es dauert, bis das größte Above-the-Fold-Element auf der Seite geladen ist.
• Durch die Reduzierung des LCP Ihrer Site können Benutzer wichtige Inhalte auf Ihrer Site schneller anzeigen.
• Der Abschnitt „Diagnose“ in PageSpeed Insights zeigt Ihnen, welches Element die LCP-Metrik auslöst.

Das Leistungsfenster in DevTools macht dasselbe.

Um die LCP-Zeit der Seite zu verbessern, müssen Sie die Ladezeit dieses Elements optimieren. Hier sind fünf effektive Möglichkeiten zur Verbesserung Ihres LCP-Index, die natürlich auch zur Verbesserung der FCP-, CLS- und TTI-Werte beitragen.

LCP-Optimierung: So verbessern Sie Ihre LCP-Zeit

1. Bildoptimierung;
2. CSS- und JavaScript-Optimierung;
3. Schnellere Serverantwortzeit;
4. Begrenztes und optimiertes clientseitiges Rendering;
5. Vorladen und Vorverbinden.

1. Bildoptimierung

Bildoptimierung umfasst eine Reihe von Techniken, die alle Lademetriken verbessern und die Layoutverschiebung (CLS) reduzieren. Ein noch wichtigerer Aspekt ist die Bildkomprimierung. Bei der Komprimierung werden verschiedene Algorithmen angewendet, um Bildteile zu entfernen oder zu gruppieren und das Bild dadurch zu verkleinern. Es gibt zwei Arten der Komprimierung: verlustbehaftete und verlustfreie.

• Verlustbehaftete KomprimierungEinige Daten werden aus der Datei entfernt, was zu einem helleren Bild mit geringerer Qualität führt. JPEG und GIF sind Beispiele für verlustbehaftete Bildtypen.
• Verlustfreie KomprimierungBehält die Bildqualität annähernd bei, d. h. es werden keine Daten entfernt. Es erzeugt große, hochwertige Bilder. RAW und PNG sind verlustfreie Bildformate.

Dafür gibt es viele tolle Tools, wie zum BeispielBildminoderOptimizilla.

Mit dem Wachstum Ihrer Website werden Sie wahrscheinlich immer mehr Bilder hinzufügen. Sie benötigen ein Tool, das Ihre Bilder automatisch auf das gewünschte Niveau optimiert.

Wählen Sie das richtige Format

Die Schwierigkeit bei der Auswahl von Bildformaten besteht darin, das richtige Gleichgewicht zwischen Qualität und Geschwindigkeit zu finden. Hochwertige Bilder sind zwar groß, sehen aber gut aus. Bilder mit niedriger Auflösung sehen zwar schrecklich aus, laden aber schneller.

In manchen Fällen sind hochauflösende Bilder erforderlich, um sich von der Konkurrenz abzuheben, beispielsweise auf Fotografie- und Mode-Websites. Für Nachrichten-Websites, persönliche Blogs usw. sind Bilder mit niedriger Pixelanzahl völlig ausreichend. Hier ist eine kurze Regel, die als Orientierung dienen kann.

• Verwenden Sie SVG für Bilder, die aus einfachen geometrischen Formen bestehen, wie z. B. Logos.
• Verwenden Sie PNG, wenn Sie auf Geschwindigkeit verzichten und gleichzeitig die Qualität beibehalten möchten.
• Um die optimale Balance zwischen Qualität und UX zu erreichen, verwenden Sie WebP und behalten Sie das Originalformat als Fallback bei. WebP bietet keine Browserunterstützung für 100%.

Vergessen Sie nicht, nach der Auswahl des Bildtyps zu versuchen, Ihre Bilder zu komprimieren.

Verwenden des srcset-Attributs

Ein typischer Fehler bei der Arbeit mit Bildern besteht darin, auf allen Geräten das gleiche große Bild anzuzeigen. Große Bilder sehen auf kleineren Geräten zwar gut aus, das Durchsuchen ist jedoch sehr langsam.

Ein besserer Ansatz besteht darin, unterschiedliche Bildgrößen anzubieten, sodass der BrowserJe nach AusstattungEntscheiden Sie sich für eine Option. Verwenden Sie dazu das srcset-Attribut und geben Sie die verschiedenen Breiten des anzuzeigenden Bildes an. Hier ein Beispiel:

Wie Sie sehen, verwenden wir für srcset w statt px. Wenn Sie eine 600 Pixel breite Version des Bildes wünschen, müssten Sie 600w schreiben. Auch bei diesem Ansatz wird die Wahl der Bildgröße an den Browser ausgelagert. Sie geben lediglich die Optionen an.

Die Website von Airbnb verwendet diesen Ansatz:

Um die richtige Bildgröße zu bestimmen, verwenden Sie Google Analytics, um den Prozentsatz Ihrer Zielgruppe zu berechnen, die Ihre Website über Desktop-PCs oder Mobilgeräte nutzt. Der Gerätebericht enthält außerdem detaillierte Informationen zu den spezifischen Geräten, die Ihre Besucher verwenden.

Sie sollten auch DevTools verwenden, um zu überprüfen, wie Ihr Bild in verschiedenen Ansichtsfenstern aussieht.

Wenn Sie die Größe eines Bildes ändern müssen, verwenden SieIntelligente GrößenänderungGrößenänderung im Stapelbetrieb.

Hinweis für WordPress-Benutzer:Ab Version 4.4 erstellt WP automatisch verschiedene Versionen von Bildern. Außerdem wurde das srcset-Attribut hinzugefügt. Als WordPress-Nutzer müssen Sie lediglich Geben Sie die richtige Bildgröße an.

Hero-Bilder vorladen

Der letzte Tipp betrifft die Optimierung der Browsererkennung von Helden Die Geschwindigkeit des Bildes. Bilder sind oft oberhalb des Falzes am aussagekräftigsten, daher ist ein schnelleres Laden dieser Bilder für das Benutzererlebnis entscheidend.

Forbes lädt das größte faltbare Bild auf der Homepage vor:

Diese Technik weist den Browser an, dieses bestimmte Bild beim Rendern der Seite zu priorisieren. Das Vorladen kann LCP erheblich verbessern, insbesondere auf Seiten, die Hero-Bilder laden, die:

• JavaScript;
• Die Hintergrundbildeigenschaft in CSS.

2. CSS- und JavaScript-Optimierung

Bevor der Browser eine Seite rendern kann, muss er alle CSS- und JavaScript-Dateien, die er beim Parsen des HTML-Codes findet, laden, analysieren und ausführen. Deshalb blockieren sowohl CSS als auch JavaScript standardmäßig das Rendern. Unoptimiert können sie das Laden der Seite verlangsamen und so Ihren LCP beeinträchtigen. So optimieren Sie sie:

• Herauszoomenund komprimierte Codedateien

Durch Minimierung werden unnötige Teile aus Codedateien entfernt, wie z. B. Kommentare, Leerzeichen und Zeilenumbrüche. Dadurch können kleine bis mittlere Dateigrößen reduziert werden. Durch Komprimierung hingegen wird die Datenmenge in einer Datei durch die Anwendung verschiedener Algorithmen reduziert. Dadurch wird die Dateigröße in der Regel erheblich reduziert.

Aus Performancegründen sind beide Technologien notwendig.Hosting-UnternehmenUndCDN-AnbieterDiese Techniken werden standardmäßig angewendet. Es lohnt sich zu prüfen, ob sie auf Ihrer Website implementiert sind.

Sie können die Registerkarte „Netzwerk“ in DevTools verwenden und die Antwortheader der Datei analysieren, um festzustellen, ob dies der Fall ist:

Die meisten minimierten Dateien haben ".min" im Namen ZIP-Dateien haben einen Content-Encoding-Antwortheader, normalerweise mit dem Wert gzip oder br.

Wenn die Dateien Ihrer Website nicht minimiert oder komprimiert sind, empfehle ich Ihnen, jetzt damit zu beginnen. Fragen Sie Ihren Hosting-Anbieter und CDN-Anbieter, ob sie dies für Sie übernehmen können. Falls nicht, gibt es zahlreiche Minimierungs- und Komprimierungstools.

Implementierung kritischen CSS

Die Implementierung von kritischem CSS ist ein dreistufiger Prozess, der Folgendes umfasst:

• Suchen Sie nach CSS für Stile über dem Falzinhalt in verschiedenen Ansichtsfenstern.
• Platzieren Sie das CSS (inline) direkt im Head-Tag der Seite.
• Verschieben Sie den Rest des CSS.

Sie können beginnen, indem Sie das Coverage-Bedienfeld in DevTools verwenden, um die Verwendung jeder CSS-Datei auf der Seite zu zählen.

Sie können die Assets nach Typ sortieren und jede CSS- und JS-Datei durchsuchen.

Offensichtlich ist das ungenutzte CSS auf der Seite nicht wichtig. An dieser Stelle lohnt es sich, dieses ungenutzte CSS zu entfernen oder zu reduzieren, da es das Rendering verlangsamt.

Um das kritische CSS zu extrahieren, müssen Sie den Code manuell überprüfen oder ein Tool verwenden. Zwei gute Optionen hierfür sindkritischesCSSUndkritisch.

Nach dem Extrahieren wird das kritische CSS in das Head-Tag der Seite eingefügt.

Laden Sie abschließend den Rest des CSS asynchron.Google-VorschlägeVerwenden Sie den Link rel="preload" , as="style" , einen leeren Onload-Handler und verschachteln Sie den Link zum Stylesheet in einem Noscript-Element.

Denken Sie auch an die unterschiedlichen Ansichtsfenster. Desktop- und Mobilnutzer sehen nicht denselben Inhalt im oberen Seitenbereich. Um diese Technik optimal zu nutzen, müssen Sie je nach Gerätetyp unterschiedliche kritische CSS-Elemente verwenden.

Bereitstellung einer kleineren JavaScript-Nutzlast

JavaScript ist einer der Hauptgründe für langsame Ladezeiten im Internet. Wie bei Bildern müssen Sie auch das JavaScript Ihrer Website optimieren, um eine optimale Leistung zu erzielen.

Für LCP,Aufteilen von JavaScript-Paketenist eine hervorragende Möglichkeit, Ihren Score zu verbessern. Die Idee besteht darin, nur den Code zu senden, der für die erste Route benötigt wird. Alles, was nicht im ursprünglichen Paket enthalten ist, sollte später bereitgestellt werden. Auf diese Weise muss weniger JavaScript auf einmal analysiert und kompiliert werden. Einige beliebte Tools hierfür sind WebPack, Rollup und Browserify. Weitere Informationen zum Code-Splitting finden Sie unterDieser Artikel von web.dev.

3. Schnellere Server-Antwortzeit

Die Reduzierung der Serverantwortzeit ist eine der häufigsten Empfehlungen in PageSpeed Insights.

Mit den folgenden Schritten können Sie dieses Problem beheben:

Aktualisieren Sie Ihren Hosting-PlanWenn Sie einen günstigen Shared-Hosting-Plan verwenden, müssen Sie ein Upgrade durchführen. Es ist unmöglich, eine schnelle Website und einen langsamen Host-Server zu haben.

Optimieren Sie Ihren ServerViele Faktoren können die Serverleistung beeinträchtigen, insbesondere in Zeiten mit hohem Datenverkehr.Dieses Tutorial von Katie HempeniusUm Ihre Server zu bewerten, zu stabilisieren, zu verbessern und zu überwachen;

Reduzieren Sie die Abhängigkeit Ihrer Site von Plugins, Tools und Bibliotheken von DrittanbieternSie erhöhen die Menge an Code, der auf dem Server oder Browser ausgeführt werden muss. Dies erhöht den Ressourcenverbrauch und beeinträchtigt Kennzahlen wie Time to First Byte, First Contentful Paint und LCP.

Maximieren Sie die Cache-Nutzung.Caching ist die Grundlage für eine optimale Web-Performance. Viele Assets (Logos, Navigationssymbole, Mediendateien) können monatelang oder sogar ein Jahr lang zwischengespeichert werden. Statisches HTML lässt sich ebenfalls zwischenspeichern, was die TTFB deutlich reduzieren kann.

CDN verwendenCDN verkürzt die Distanz zwischen Besuchern und den Inhalten, auf die sie zugreifen möchten. Um Ihnen die Arbeit so einfach wie möglich zu machen, verwenden Sie ein Caching-Tool mit integriertem CDN.

Verwenden von ServicemitarbeiternService Worker reduzieren die Größe von HTML-Nutzdaten, indem sie die Duplizierung gemeinsamer Elemente vermeiden. Nach der Installation fordert ein Service Worker minimale Daten vom Server an und konvertiert diese in ein vollständiges HTML-Dokument.Weitere Einzelheiten finden Sie in diesem Tutorial von Philip Walton..

4. Eingeschränktes und optimiertes clientseitiges Rendering

Clientseitiges Rendering (CSR) bezeichnet das Rendern einer Seite direkt im Browser mithilfe von JavaScript. Dieser Ansatz verlagert Aufgaben (Datenabruf, Routing usw.) vom Server auf den Client. CSR mag zunächst eine perfekte Lösung sein, wird aber mit zunehmender JavaScript-Einbindung zunehmend schwieriger zu warten.

Wenn Sie CSR implementiert haben, müssen Sie bei der Optimierung von JavaScript besonders vorsichtig sein.Code-Splitting, Komprimierung und Minimierung sind ein MussVerwenden Sie außerdemHTTP/2-Server-Push UndDer Link rel=preload kann dabei helfen, kritische Ressourcen schneller bereitzustellen.

Schließlich können Sie versuchen, CSR mit Prerendering zu kombinieren oder serverseitiges Rendering hinzuzufügen. Der gewählte Ansatz hängt dabei vom Technologie-Stack Ihrer Website ab. Es ist wichtig zu verstehen, wie viel Aufwand Sie clientseitig betreiben und wie sich dies auf die Leistung auswirkt.

Um tiefer in das Thema einzutauchen, empfehle ich die Lektüre dieses umfassenden Leitfadens zum Rendern im Web.

5. Verwenden Sie rel=preload, rel=preconnect und rel=dns-prefetch

Diese drei Attribute helfen dem Browser, indem sie ihn auf die Ressourcen und Verbindungen verweisen, die zuerst verarbeitet werden müssen.

Verwenden Sie zunächst rel=preload für Ressourcen, die der Browser priorisieren soll. Typischerweise sind dies Bilder, Videos, wichtige CSS-Codes oder Schriftarten im oberen Seitenbereich. Fügen Sie dazu einfach ein paar Zeilen zu Ihrem Head-Tag hinzu, wie zum Beispiel diese:

Beim Vorladen von Schriftarten können Elemente wie as="font", type="font/woff2" und crossorigin dem Browser helfen, Ressourcen beim Rendern zu priorisieren. Darüber hinaus trägt das Vorladen von Schriftarten auch dazu bei, FCP-Standards zu erfüllen, was Layoutverschiebungen reduziert.

Forbes.com verwendet diese Technik, um die Ladezeiten der Schriftarten zu verkürzen:

Anschließend teilt rel=preconnect dem Browser mit, dass Sie sofort eine Verbindung zur Domäne herstellen möchten. Dies reduziert Roundtrips zu wichtigen Domänen. Auch hier ist die Implementierung sehr einfach:

Seien Sie beim Vorabverbinden jedoch sehr vorsichtig. Nur weil Sie eine Vorabverbindung zu einer Domäne herstellen können, heißt das nicht, dass Sie dies auch tun sollten. Tun Sie dies nur für Domänen, zu denen Sie eine Verbindung herstellen müssen.Es ist ZeitWenn Sie es für unerwünschte Hosts verwenden, werden alle anderen DNS-Anfragen blockiert, was mehr Schaden als Nutzen anrichtet.

Um die DNS-Lookup-Zeit bei weniger kritischen Verbindungen zu verkürzen, verwenden Sie rel=dns-prefetch.

Prefetch kann auch als Fallback für Preconnect verwendet werden.

Alle diese Techniken eignen sich hervorragend zur Verbesserung der Performance Ihrer Website. Wenn Sie sie noch nicht implementiert haben, seien Sie bei der Auswahl der vorab geladenen Ressourcen und der Hosts, mit denen Sie eine Vorverbindung herstellen, vorsichtig.

Reduzieren der LCP-Metrik auf Ihrer WordPress-Site

Die oben aufgeführten Techniken können dazu beitragen, den LCP auf allen Websites zu verbessern, auch auf WordPress-Websites (WP). Zwei weitere Tipps können jedoch auch zur Optimierung dieser Metrik auf WP-Websites beitragen:

Wählen Sie ein leichtes Design.Ein zu umständliches Theme kann die Ladezeit erheblich verlängern und Ihre Core Web Vitals, einschließlich LCP, beeinträchtigen. Wählen Sie Ihr Theme daher sorgfältig aus. Weitere Informationen finden Sie unterDiese Studie von Kinsta;

Verwenden Sie nicht zu viele Plugins.Plugins bieten zwar nützliche Funktionen, gehen aber meist auch mit Leistungseinbußen einher. Sie erhöhen die Menge des auszuführenden Codes und führen zu einem höheren Ressourcenverbrauch. Prüfen Sie jedes Plugin sorgfältig und überwachen Sie die Leistung Ihrer Website nach dem Hinzufügen.

Beide Tipps sind bei der Arbeit mit WP-Sites unverzichtbar. Kombinieren Sie sie mit den oben aufgeführten Techniken, und Sie werden deutliche Verbesserungen in Ihrem LCP feststellen.

Zusätzliche Tools und Best Practices zur Überwachung der wichtigsten Web-Vitalwerte

Auch wenn Sie keine Probleme mit der LCP-Optimierung haben, ist es eine gute Idee, die Felddaten regelmäßig zu überprüfen, um potenzielle Probleme zu erkennen.

Felddaten werden vom Chrome User Experience Report (CrUX) gesammelt. Diese Daten zeigenEchte BenutzerWie gut deine Seite performt. Die Felddaten findest du direkt unter dem Gesamtscore in PageSpeed Insights:

Da Google die Core Web Vitals einer Seite für die letzten 28 Tage auswertet, sollten Sie Ihre wichtigen Seiten mindestens einmal im Monat testen.

Falls PageSpeed Insights diesen Abschnitt aufgrund fehlender Daten nicht anzeigt, können Sie ein anderes Tool verwenden, um auf den CrUX-Datensatz zuzugreifen:

• LCP-Optimierung Chrome UX-Berichts-API - Einige JavaScript- und JSON-Erfahrung erforderlich;
• LCP-Optimierung BigQuery - Google Cloud-Projekte und SQL-Kenntnisse sind erforderlich;
• LCP-Optimierung Core Web Vitals-Bericht in der Google Search Console- Ideal für Anfänger, nützlich für Vermarkter, SEOs und Webmaster.

Welches Tool Sie wählen, hängt von Ihren Präferenzen ab. Achten Sie unbedingt auf den LCP Ihrer Website sowie auf mögliche Probleme mit anderen Core Web Vitals.

Überprüfen Sie außerdem mindestens einmal im Monat den Core Web Vitals-Bericht. Manchmal tauchen Probleme an unerwarteten Stellen auf und bleiben lange Zeit unentdeckt.

Nach maximaler LCP-Optimierung erzielen Sie unerwartete Erfolge. Sie werden feststellen, dass sich Ihr Ranking in der Suchmaschine verbessert. Dies ist die Rolle von LCP. Bitte ignorieren Sie den LCP-Indikator nicht. LCP-Optimierung ist sehr wichtig!