So verbessern Sie First Contentful Paint (FCP) in WordPress (serverseitige und Front-End-Optimierung)

Haben Sie jemals das Gefühl gehabt, dass das Laden Ihrer WordPress-Site ewig dauert? Wenn ja, sind Sie nicht allein. Langsame Websites frustrieren Benutzer und beeinträchtigen Ihr Suchranking. Aber keine Sorge, WordPress-Entwickler! Dieser Artikel vereinfacht die Verbesserung einer wichtigen Kennzahl: First Contentful Paint (FCP).

Stellen Sie sich FCP als den Moment vor, in dem Ihr Benutzer das erste Stück tatsächlichen Inhalts wie Text oder ein Bild sieht. Je schneller es erscheint, desto glücklicher sind sie. Langsamer FCP? Möglicherweise klicken sie weg, bevor sie Ihren nützlichen Inhalt sehen.

In diesem Artikel werde ich FCP-Verbesserungen in einfache Schritte aufschlüsseln, die selbst Programmier-Ninjas in der Ausbildung verstehen können. Ich werde über die Verwendung spezieller Stile („kritisches CSS“) und die Beseitigung etwaiger Hindernisse („renderblockierende Ressourcen“) sprechen.

Was ist FCP und warum ist es wichtig?

FCP ist eine entscheidende Kennzahl, die die Zeit misst, die der Browser benötigt, um den ersten sinnvollen Inhalt auf Ihrer Seite darzustellen. Dies kann Text, ein Bild, ein Symbol oder ein beliebiges Element sein, das nicht nur ein Ladesymbol oder eine Hintergrundfarbe ist.

Im Wesentlichen ist es der Moment, in dem Ihr Besucher endlich etwas Greifbares sieht, ein Zeichen dafür, dass Ihre Website lebendig und munter ist. Ein flinker FCP sagt den Besuchern: „Hey, wir sind hier und bereit, Ihnen etwas Großartiges zu zeigen!“

Andererseits vermittelt ein langsamer FCP das Bild von Trägheit und potenziellen technischen Problemen. Dies kann dazu führen, dass frustrierte Besucher abspringen, bevor sie Ihre Inhalte überhaupt gesehen haben, was sich auf Ihr Engagement und Ihre Konversionsraten auswirkt.

Bei der Verbesserung des FCP geht es darum, sicherzustellen, dass Ihre Website umgehend den ersten „Wow“-Moment liefert. Indem Sie die Kontrolle darüber übernehmen, wie Ihre Seite gerendert wird, können Sie die Benutzererfahrung verbessern, SEO-Rankings steigern und eine Website erstellen, die wirklich glänzt.

Was ist ein guter FCP-Score?

Streben Sie einen FCP von 1,8 Sekunden oder weniger an. Dieser Zeitrahmen stellt sicher, dass die meisten Benutzer Ihre Website als schnell und reaktionsschnell wahrnehmen. Google hält dies für eine gute Nutzererfahrung.

Während das Ziel 1,8 Sekunden ist, streben Sie eine noch schnellere Geschwindigkeit an. Das 75. Perzentil der Seitenladevorgänge, segmentiert nach Mobil- und Desktop-Geräten, sollte idealerweise in diesem Bereich liegen. Dadurch wird Konsistenz gewährleistet und unterschiedliche Gerätetypen und Netzwerkgeschwindigkeiten berücksichtigt.

Hier ist die Aufschlüsselung:

0-1,8 Sekunden: Gut! Benutzer nehmen Ihre Website als blitzschnell wahr.
1,8–3 Sekunden: Immer noch gut, aber es besteht Verbesserungsbedarf, um mögliche Frustrationen der Benutzer zu vermeiden.
3+ Sekunden: Schlecht! Besucher könnten aufgrund der wahrgenommenen Langsamkeit abspringen.

– Quelle: web.dev

Diagnostizieren Sie Ihre FCP-Probleme

Tools wie Lighthouse, Google PageSpeed ​​Insights und GTmetrix können Ihre Website analysieren und bestimmte Elemente identifizieren, die Ihren FCP verzögern. Suchen Sie nach Schuldigen wie:

• Große oder nicht optimierte Bilder
• Renderblockierende Ressourcen
• Schwere Schriftarten
• Übermäßig komplexes JS und CSS

Sobald Sie die Verdächtigen identifiziert haben, gehen Sie tiefer in die Materie ein, um deren Auswirkungen zu verstehen. Tools wie Google PageSpeed ​​Insights bieten detaillierte Leistungsanalysen und helfen Ihnen dabei, bestimmte Skripte, Stile und Netzwerkanfragen zu identifizieren, die sich auf FCP auswirken.

Öffnen Sie Google PageSpeed ​​Insights, geben Sie die URL Ihrer Website in die Suchleiste ein und klicken Sie aufAnalysieren .

• Dadurch wird ein detaillierter Bericht erstellt, der Bereiche hervorhebt, in denen Verbesserungen vorgenommen werden können, um den FCP und die Gesamtleistung zu verbessern.

• Behalten Sie die FCP-Metrik im Auge. Hier erfahren Sie, wie lange es dauert, bis der erste echte Inhalt auf dem Bildschirm Ihres Besuchers angezeigt wird.

• Schauen Sie sich als Nächstes den Abschnitt„Diagnose“ in PageSpeed ​​Insights an.Es listet spezifische Möglichkeiten zur Verbesserung des FCP auf Ihrer Website auf.

Strategien zur Verbesserung des FCP

Um wirklich ansprechende Erlebnisse zu schaffen, müssen wir FCP an beiden Fronten angehen: serverseitige und Front-End-Optimierung. Schauen wir uns die umsetzbaren Strategien für jeden an:

Serverseitige Optimierung

Dabei geht es darum, Änderungen am Server vorzunehmen, um schnell die notwendigen Daten für die Anzeige der Webseite zu senden. Dies kann durch die Verwendung guter Caching-Methoden, das Komprimieren von Dateien vor dem Senden und eine schnellere Reaktion des Servers erreicht werden.

1. Reduzieren Sie die Server-Reaktionszeit (TTFB)

Time to First Byte (TTFB) ist ein Maß, das als Hinweis auf die Reaktionsfähigkeit eines Webservers oder einer anderen Netzwerkressource verwendet wird.

Die Reduzierung der TTFB kann durch die Optimierung der Softwarekonfiguration Ihres Servers, die Sicherstellung effizienter Datenbankabfragen und die Minimierung von HTTP-Anfragen erreicht werden.

1.1. Wählen Sie einen besseren Hosting-Anbieter

Die Wahl des Hosting-Anbieters kann die Leistung Ihrer Website erheblich beeinflussen. Suchen Sie nach Anbietern, die eine hervorragende Betriebszeit, starke Sicherheitsmaßnahmen und Hochgeschwindigkeitshardware bieten.

Cloudways kann eine gute Wahl sein, da Leistung und Optimierung im Vordergrund stehen. Darüber hinaus verfügt es über eine zuverlässige Betriebszeit und stellt sicher, dass Ihre Website für Benutzer immer zugänglich ist. Sehen wir uns an, was Cloudways bietet, um die Leistung Ihrer Website zu verbessern. Hier können Sie auch ausführlicher darüber lesen.

1.2. Optimieren Sie die Serversoftware

Dazu gehört die Feinabstimmung Ihrer Webserver-Softwarekonfiguration, um eine optimale Leistung sicherzustellen. Dazu kann die Aktivierung der Komprimierung, die Optimierung Ihrer SSL/TLS-Konfiguration für Geschwindigkeit und Sicherheit sowie die Konfiguration Ihres Servers für die effiziente Bereitstellung statischer Dateien gehören.

1.3. Verwenden Sie ein Content Delivery Network (CDN)

Ein CDN ist ein Netzwerk von Servern, die über verschiedene Standorte auf der ganzen Welt verteilt sind.

Wenn ein Benutzer eine Datei von Ihrer Site anfordert, wird diese vom nächstgelegenen Server im CDN bereitgestellt, was zu schnelleren Ladezeiten führt. CDNs tragen auch dazu bei, Ihre Website vor Verkehrsspitzen und DDoS-Angriffen zu schützen.

Für Cloudways-Benutzer bietet die Integration von Cloudflare CDN zusätzliche Vorteile, die über die reine geografische Verteilung hinausgehen. Es lässt sich nahtlos in Ihr Cloudways-Konto integrieren und vereinfacht die Einrichtung und Verwaltung. Darüber hinaus umfasst Cloudflare CDN Funktionen wie:

2. Nutzen Sie Caching auf Serverebene

Caching auf Serverebene kann die Geschwindigkeit Ihrer Website erheblich verbessern, indem eine Kopie der Seiten der Website an einem temporären Speicherort gespeichert wird. Dadurch wird der Arbeitsaufwand zum Generieren eines Seitenaufrufs reduziert, was zu schnelleren Ladezeiten für Ihre Benutzer führt.

2.1. WP-Plugins für Caching auf Serverebene

Es stehen mehrere WordPress-Plugins zur Verfügung, die Ihnen bei der Implementierung von Caching auf Serverebene helfen können. Diese beinhalten:

1. W3 Total Cache: Dieses Plugin bietet eine umfassende Suite von Caching-Optionen, einschließlich Seiten-Caching, Objekt-Caching und Browser-Caching.
2. WP Super Cache: Dieses benutzerfreundliche Plugin generiert statische HTML-Dateien von Ihrer dynamischen WordPress-Site. Der Webserver verwendet diese HTML-Dateien, anstatt die aufwändigeren PHP-Skripte zu verarbeiten.

2.2. Konfigurieren Sie serverseitige Caching-Regeln

Beim Konfigurieren des serverseitigen Cachings müssen Sie Regeln dafür festlegen, wie und wann Ihr Server Inhalte zwischenspeichern soll. Hier sind einige allgemeine Schritte:

• Caching aktivieren: Dies erfolgt normalerweise über die Konfigurationsdatei Ihres Servers (z. B. .htaccess für Apache-Server).
• Cache-Control-Header festlegen: Diese Header definieren, welche Dateitypen zwischengespeichert werden und wie lange sie gespeichert werden.
• ETags konfigurieren: Mithilfe von ETags kann der Browser feststellen, ob sich der zwischengespeicherte Inhalt seit der letzten Zwischenspeicherung geändert hat.
• Verwenden Sie Expires-Header: Diese Header teilen dem Browser mit, wie lange der Inhalt zwischengespeichert werden soll.

Front-End-Optimierung

Dabei geht es darum, Änderungen auf dem Gerät des Benutzers vorzunehmen, um die Webseite schneller anzuzeigen. Dies kann erreicht werden, indem der Einsatz von Ressourcen reduziert wird, die die Seite verlangsamen, CSS- und JavaScript-Dateien verbessert werden und Bilder nur dann geladen werden, wenn sie benötigt werden.

3. Eliminieren Sie Render-blockierende Ressourcen

Renderblockierende Ressourcen wie CSS und JavaScript können die Ladezeit Ihrer Website verlangsamen. So beheben Sie dieses Problem:

3.1. Identifizieren Sie kritisches CSS und laden Sie es zuerst

Kritisches CSS ist der Mindestsatz an blockierendem CSS, der zum Rendern des „above-the-fold“-Inhalts einer Webseite erforderlich ist. Identifizieren und integrieren Sie das kritische CSS im HTML-Dokument und verzögern Sie das Laden aller anderen CSS-Stile.

3.2. Nicht kritisches JavaScript aufschieben oder asynchron laden

Nicht kritisches JavaScript kann verzögert oder asynchron geladen werden, um das Rendern von Seiten zu beschleunigen. Verwenden Sie dazu das Attribut „defer“ oder „async“ in Ihren Skript-Tags.

Verwenden Sie das Defer-Attribut in Ihren Skript-Tags, um das Laden von nicht kritischem JavaScript zu verzögern, bis das HTML-Dokument vollständig analysiert wurde:

 <script src="non-critical.js" defer></script>

Alternativ können Sie das Attribut async verwenden, um das Skript asynchron zu laden:

 <script src="non-critical.js" async></script>

3.3 Entfernen Sie nicht verwendete Skripte und Stile

Eliminieren Sie unnötige Bytes, indem Sie nicht verwendete Skripte und Stile entfernen. Die folgenden Tools können dabei helfen, nicht verwendetes CSS zu identifizieren und zu entfernen.

1. PurifyCSS: Mit diesem Tool kann ungenutztes CSS entfernt werden. Es überprüft Ihre Quelldateien und entfernt nicht verwendete Selektoren aus Ihrem CSS.
2. UnCSS: Ähnlich wie PurifyCSS entfernt auch UnCSS nicht verwendete Stile aus Ihren Stylesheets.
3. Chrome DevTools: Die Registerkarte „Abdeckung“ in Chrome DevTools kann dabei helfen, nicht verwendeten JavaScript- und CSS-Code zu identifizieren.

4. Optimieren Sie Ihre CSS-Struktur

Die Optimierung Ihres CSS kann zu schnelleren Renderzeiten und einer besseren Benutzererfahrung führen. Hier ist wie:

4.1. CSS-Dateien minimieren und reduzieren

Durch die Minimierung werden unnötige Zeichen aus dem Code entfernt, um dessen Größe zu verringern und dadurch die Ladezeiten zu verbessern. Durch die Komprimierung wird die Größe von CSS-Dateien reduziert, um die Bereitstellung an den Browser zu optimieren. Breeze bietet eine integrierte CSS-Minimierung, die alle Ihre CSS-Dateien automatisch minimiert, um die Ladezeiten zu verbessern. Es bietet außerdem separate Optionen zum Inlining von kritischem CSS, wodurch FCP weiter verbessert wird.

4.2. Wichtige CSS-Anfragen vorab laden

Das Preload- Attribut im <link>-Tag ermöglicht es dem Browser, wichtige CSS-Dateien so schnell wie möglich herunterzuladen, was die zum Rendern der Seite benötigte Zeit verkürzen kann. Hier ist ein Beispiel für die Verwendung des preload-Attributs zumVorladen einer CSS-Datei:

 <link rel="preload" href="styles.css" as="style">

Dadurch wird der Browser angewiesen, sofort mit dem Herunterladen der Datei „styles.css“ zu beginnen, da diese wahrscheinlich bald benötigt wird.Das Attribut„as=“style“ ist wichtig, da es dem Browser hilft, die richtige Priorität für das Herunterladen der Ressource festzulegen.

Hinweis: Seien Sie vorsichtig, wenn Sie zu viele Ressourcen vorab laden, da dies die Leistung verlangsamen und die erforderliche Bandbreite verbrauchen kann.Es wird empfohlen, beim ersten Laden der Seite nur kritische CSS-Dateien vorab zu laden.

5. Vermeiden Sie JavaScript-abhängige Elemente „Above the Fold“.

JavaScript-abhängige Elemente können die Ladezeit Ihrer Website verlangsamen. So beheben Sie dieses Problem:

5.1. Nutzen Sie alternative Lösungen für Animationen und Slider

Erwägen Sie die Verwendung von CSS-Animationen oder HTML5-Videos als Alternativen zu JavaScript-basierten Animationen und Schiebereglern. Diese Alternativen können ähnliche Funktionen mit geringerer Auswirkung auf die Seitenladezeit bieten.

CSS-Animationen sind eine leistungsstarke Funktion, die JavaScript-Animationen ersetzen kann. Sie werden von der Rendering-Engine des Browsers ausgeführt, die für eine bessere Leistung die Hardwarebeschleunigung nutzen kann.

Hier ist ein Beispiel einer einfachen CSS-Animation:

 @keyframes Folie {
  from { transform: translatorX(0); }
  zu { transform: translatorX(100px); }
}

.myElement {
  Animation: Folie 2s unendlich;
}

Mit HTML5-Videos können umfangreiche, dynamische Inhalte erstellt werden, ohne auf JavaScript angewiesen zu sein. Es wird von allen modernen Browsern unterstützt und kann über die Standard-HTML5-Video-API gesteuert werden.

 <Video width="1080" height="720" steuert>
  <source src="movie.mp4" type="video/mp4">
  Ihr Browser unterstützt das Video-Tag nicht.
</video>

5.2. Verzögern Sie nicht unbedingt erforderliche JavaScript-Ausführung

Nicht unbedingt erforderliches JavaScript kann zurückgestellt werden, bis die Seite geladen wurde. Dadurch kann der Browser die Seite schneller rendern und das Benutzererlebnis verbessern.

DasDefer- Attribut im <script>-Tag ermöglicht es dem Browser, das Skript auszuführen, nachdem das HTML-Dokument vollständig analysiert wurde.

 <script src="script.js" defer></script>

Dasasync- Attribut ermöglicht es, das Skript parallel zu anderen Ressourcen abzurufen und auszuführen, sobald es verfügbar ist, ohne das Rendern der Seite zu blockieren.

 <script src="script.js" async></script>

JavaScript stellt Ereignisse wie DOMContentLoaded und Loadbereit, die verwendet werden können, um die Ausführung von nicht unbedingt erforderlichem JavaScript zu verzögern, bis die Seite geladen wurde.

 window.addEventListener('load', function() {
  // Ihr Code hier
});

6. Vermeiden Sie das träge Laden von Bildern über dem Falz

Lazy Loading kann die Leistung verbessern, indem Bilder nur dann geladen werden, wenn sie benötigt werden. Es ist jedoch wichtig, das verzögerte Laden von Bildern zu vermeiden, die über dem Falz erscheinen. Hier ist wie:

6.1. Laden Sie kritische Bilder vorab

Durch das Vorladen kann der Browser wichtige Bilder so schnell wie möglich herunterladen. Dies reduziert die Zeit, die zum Rendern der Seite benötigt wird, und verbessert das Benutzererlebnis. So können Sie es machen:

• Verwenden Sie denPreload- Wert des rel-Attributs in einemLink-Element in Ihrem HTML. Dadurch wird der Browser angewiesen, so schnell wie möglich mit dem Herunterladen der angegebenen Ressource zu beginnen.
• Wenn Ihr Server HTTP/2 unterstützt, können Sie Server Push verwenden, um Ressourcen an den Client zu senden, bevor sie angefordert werden. Dies kann besonders effektiv sein, um kritische Bilder vorab zu laden.

6.2. Verwenden Sie Above-The-Fold-Bildoptimierungstechniken

Optimieren Sie Bilder, die über dem Falz angezeigt werden, indem Sie sie komprimieren, ihre Größe entsprechend ändern und moderne Bildformate wie WebP verwenden.

7. Bilder optimieren und komprimieren

Durch die Bildoptimierung können die Seitenladezeiten erheblich verkürzt, die Bandbreitennutzung reduziert und das Benutzererlebnis verbessert werden. Hier ist wie:

7.1. Wählen Sie das richtige Bildformat und die richtige Komprimierungsstufe

Je nach Inhalt des Bildes können unterschiedliche Bildformate und Komprimierungsstufen verwendet werden. Verwenden Sie beispielsweise JPEG für Fotos, PNG für Grafiken mit wenigen Farben und SVG für Vektorbilder.

Mit Imagify können Sie die Größe und Komprimierung von Bildern mühelos mit einem einzigen Klick ändern und gelten als eines der besten WordPress-Plugins zur Bildoptimierung. Hier sind die Anweisungen:

• Installieren Sie zunächst das Imagify-Plugin auf Ihrer WordPress-Site und aktivieren Sie es.
• Verwenden Sie Ihre E-Mail-Adresse, um den API-Schlüssel zu generieren. Kopieren Sie nach der Generierung diesen Schlüssel und fügen Sie ihn in den folgenden Pfad ein:WordPress Dashboard > Einstellungen > Imagify .
• Gehen Sie zum WordPress-Dashboard → Einstellungen → Imagify → Abschnitt „Optimierung“ .

Wählen Sie im Abschnitt „Optimierung“ die Option „ Bilder im WebP-Format auf der Website anzeigen“ und „<Bild>-Tags verwenden“aus.

7.2. Verwenden Sie Responsive Image-Techniken

Responsive Bildtechniken wie dassrcset- Attribut in HTML ermöglichen es dem Browser, basierend auf der Bildschirmgröße und Auflösung des Geräts die am besten geeignete Bildquelle auszuwählen.Dies kann die Bandbreitennutzung reduzieren und die Ladezeiten auf Mobilgeräten verbessern.

8. Reduzieren Sie Ihre DOM-Größe

Die Reduzierung der Größe Ihres Document Object Model (DOM) kann zu einer besseren Leistung führen. Hier sind einige Strategien:

8.1. Minimieren Sie HTML-Markup

Halten Sie Ihr HTML sauber und schlank. Entfernen Sie unnötige Tags, verwenden Sie semantische HTML-Elemente und vermeiden Sie nach Möglichkeit Inline-Styling.

Um Ihr HTML sauber und schlank zu halten, können Sie:

• Verwenden Sie HTML-Validatoren wie den W3C Markup Validation Service, um unnötige Tags zu identifizieren und zu entfernen.
• Verwenden Sie semantische HTML-Elemente wie <article>, <section> und <nav>, um weitere Informationen zu Ihren Inhalten bereitzustellen.
• Verwenden Sie externe CSS-Stylesheets oder internes CSS im Abschnitt <head> anstelle von Inline-Stilen.

 <!-- Gut -->
<Kopf>
    <Stil>
        .meine Klasse {
            Farbe blau;
        }
    </style>
</head>
<Körper>
    <div class="myClass">Hallo Welt!</div>
</body>

<!-- Schlecht -->
<Körper>
    <div>Hallo Welt!</div>
</body>

8.2. Vermeiden Sie unnötige verschachtelte Elemente

Tief verschachtelte Elemente können das DOM größer und komplexer machen und das Rendern der Seite verlangsamen. Versuchen Sie, Ihre HTML-Struktur so flach wie möglich zu halten.

Um zu vermeiden, dass das DOM größer und komplexer wird, können Sie Folgendes tun:

• Verwenden Sie CSS Flexbox oder Grid für Layoutzwecke anstelle von verschachtelten Tabellen oder Divs.
• Verwenden Sie CSS-Kombinatoren, um Elemente zu formatieren, ohne die HTML-Komplexität zu erhöhen.

Verwenden SieDocument.querySelector() oder Document.querySelectorAll(), um direkt auf tief verschachtelte Elemente zuzugreifen.

 <!-- Gut -->
<div class="container">
    <div class="item">Element 1</div>
    <div class="item">Element 2</div>
</div>

<!-- Schlecht -->
<div>
    <div>
        <div>Element 1</div>
    </div>
    <div>
        <div>Punkt 2</div>
    </div>
</div>

9. Stellen Sie sicher, dass der Text beim Laden des Webfonts sichtbar bleibt

Webfonts können Ihre Website verlangsamen, aber Sie können dies abmildern, indem Sie sicherstellen, dass der Text während des Ladens des Webfonts sichtbar bleibt.

9.1. Verwenden Sie Schriftart-Anzeigeoptionen wie „Swap“ oder „Fallback“

Die CSS-Eigenschaft„font-display“ steuert, wie eine Schriftart angezeigt wird, je nachdem, ob und wann sie heruntergeladen und zur Verwendung bereit ist.

Der „Swap“-Wert weist den Browser an, die Fallback-Schriftart zu verwenden, um den Text anzuzeigen, bis die benutzerdefinierte Schriftart geladen wurde, während der „Fallback“-Wert der Schriftart eine kurze Blockierungsperiode und eine unendliche Swap-Periode gibt.

Um Schriftart-Anzeigeoptionen wie „Swap“ oder „Fallback“ zu verwenden, können Sie die Eigenschaft „font-display“ zu Ihrer @font-face-Regel in Ihrem CSS hinzufügen. So können Sie es machen:

 @Schriftart {
  Schriftfamilie: 'MyFont';
  src: url('/path/to/myfont.woff2') format('woff2'),
       url('/path/to/myfont.woff') format('woff');
  Schriftartenanzeige: swap; /* oder Fallback */
}

Dadurch wird der Browser angewiesen, die Ersatzschriftart zum Anzeigen des Textes zu verwenden, bis die benutzerdefinierte Schriftart geladen wurde. Wenn Sie „Fallback“ verwenden, erhält die Schriftart eine kurze Blockierungsperiode und eine unendliche Swap-Periode.

9.2. Hosten Sie Webfonts lokal oder auf einem CDN

Das lokale Hosten von Webfonts oder in einem Content Delivery Network (CDN) kann die Ladezeiten verkürzen, indem die Anzahl der HTTP-Anfragen reduziert, Browser-Caching genutzt und die Geschwindigkeit der Inhaltsbereitstellung verbessert wird.

Um Webfonts lokal oder auf einem CDN zu hosten, können Sie die folgenden Schritte ausführen:

• Sie können Webfont-Dateien von Quellen wie Google Fonts, Font Squirrel usw. herunterladen.
• Wenn Sie die Webfonts lokal hosten, laden Sie die Dateien auf Ihren Server hoch. Wenn Sie ein CDN verwenden, befolgen Sie die Anweisungen des CDN, um die Dateien hochzuladen.
• Verwenden Sie die @font-face- Regel in Ihrem CSS, um auf den Speicherort der Schriftartdateien zu verweisen.

 @Schriftart {
  Schriftfamilie: 'MyFont';
  src: url('/path/to/myfont.woff2') format('woff2'),
       url('/path/to/myfont.woff') format('woff');
}

Dies kann die Ladezeiten verkürzen, indem die Anzahl der HTTP-Anfragen reduziert, Browser-Caching genutzt und die Geschwindigkeit der Inhaltsbereitstellung verbessert wird.

Zusammenfassung

Zusammenfassend lässt sich sagen, dass die Verbesserung des First Contentful Paint (FCP) Ihrer WordPress-Site ein vielschichtiger Prozess ist, der sowohl serverseitige als auch Front-End-Strategien umfasst. Die Verbesserung der Serverreaktion, die Verwendung von Server-Caching, das Entfernen von Rendering-Blöcken und die Verbesserung von CSS beschleunigen FCP.

Tools wie Lighthouse, Google PageSpeed ​​Insights und GTmetrix können bei der Diagnose von FCP-Problemen helfen und Sie bei Ihren Optimierungsbemühungen unterstützen. Denken Sie daran, dass ein guter FCP-Wert 1,8 Sekunden oder weniger beträgt, was sicherstellt, dass die meisten Benutzer Ihre Website als schnell und reaktionsschnell wahrnehmen.