Verkettung kritischer Anfragen in WordPress vermeiden

Eine kritische Anfragenkette ist eine Reihe von Anfragen, die voneinander abhängen und für das Laden einer Seite entscheidend sind. Sie folgt dem Critical Rendering Path, der die Reihenfolge bestimmt, in der Anfragen verarbeitet und ausgeführt werden.

Lange kritische Anfragenketten, besonders solche mit umfangreichen Ressourcen, können das Laden Ihrer Seite erheblich verlangsamen, weil sie das Rendering blockieren. Die Reduzierung dieser Ketten verringert die Latenz und beschleunigt die Ladezeit Ihrer Seite.

Das Verketten kritischer Anfragen kann zu langsameren Ladezeiten und schlechteren Reaktionszeiten auf Ihrer Website führen.
Alle wesentlichen Ressourcen werden in der in Ihrem HTML-Code festgelegten Reihenfolge gerendert, was die erste Anzeige von Inhalten auf den Bildschirmen Ihrer Besucher je nach Ressourcengröße und Kettenlänge verzögern kann.

Dieser Leitfaden zeigt verschiedene Methoden, um das Verketten kritischer Anfragen auf Ihrer Seite zu vermeiden. Beginnen wir mit den Grundlagen.

Wie kritische Anfragenketten die Website-Geschwindigkeit beeinflussen

Zu Beginn des Seitenladevorgangs liest der Browser das HTML und verarbeitet kritische Anfragen basierend auf ihrer Priorität. Üblicherweise wird HTML zuerst priorisiert, gefolgt von CSS, Bildern und JavaScript.

Lange Ketten dieser kritischen Anfragen können Ihre Website verlangsamen, indem sie die Latenz erhöhen und die Ladezeiten verlängern. Die Gesamtverzögerung entspricht der Summe der Zeit, die zum Herunterladen aller Ressourcen in der längsten Kette kritischer Anfragen benötigt wird.

Sie können die Leistung und Nutzererfahrung Ihrer Seite verbessern, indem Sie die Anzahl dieser kritischen Ressourcen reduzieren.
Dies kann durch das Verzögern ihres Downloads, ihr komplettes Entfernen oder das Verkürzen der kritischen Pfade erreicht werden.

Kritische Anfragen verstehen: Die Lighthouse-Perspektive

Eine kritische Anfrage umfasst jede Ressource, die zum Rendern der Seite erforderlich ist. Lighthouse definiert eine kritische Anfrage als:

Nicht vorgeladen
Render-blockierend
Mit mittlerer, hoher oder sehr hoher Priorität deklariert.

Solche Anfragen umfassen oft Elemente wie die Überschrift eines Blogbeitrags oder Bilder aus dem Hero-Banner, die sofort auf dem Bildschirm des Besuchers erscheinen sollen.

Analyse kritischer Anfragen mit GTmetrix

GTmetrix beschreibt eine kritische Anfrage als:

Render-blockierend
Nicht vorgeladen
Mit mittlerer, hoher oder sehr hoher Priorität deklariert.

Wenn mindestens eine solche Kette vorhanden ist, startet GTmetrix ein Audit. Anschließend wird die längste kritische Anfragenkette angezeigt, einschließlich aller Anfragen und der maximalen Latenz des kritischen Pfads.

So beheben Sie das Verketten kritischer Anfragen

Um die Leistung Ihrer Website zu verbessern und die Verkettung von Anfragen zu vermeiden, können Sie die Methode des Vorladens wichtiger Anfragen anwenden. Diese Technik gibt an, welche Dateien früh im Ladevorgang geladen werden sollen, da sie für das Rendering des sichtbaren Bereichs entscheidend sind.

So setzen Sie das wirkungsvoll um:

Hinweis: Es ist eine gute Idee, Ihre Website zu sichern, bevor Sie Änderungen vornehmen. Falls etwas schiefgeht, können Sie Ihre Seite schnell in den vorherigen Zustand zurücksetzen*. Sie können WP Staging für einfache, automatische Backups verwenden. Werfen Sie für weitere Hilfe einen Blick in den Leitfaden für Backup und Wiederherstellung.*

WP STAGING – WordPress Backup, Restore & Migration

Wichtige Anfragen vorladen

Identifizieren Sie die wichtigsten Ressourcen, die das Laden Ihrer Seite beeinflussen. Dazu gehören oft CSS-, JavaScript-Dateien, Schriftarten und Bilder oberhalb der Faltlinie.

Verwenden Sie das rel= "preload"-Attribut im HTML-<head>-Bereich, um den Browser anzuweisen, diese Ressourcen frühzeitig zu laden. Das ist besonders wichtig für CSS und JavaScript, die das Rendering blockieren.

Geben Sie den Typ des vorgeladenen Inhalts korrekt über das as-Attribut an (z. B. as= "script" für JavaScript). Das hilft dem Browser, diese Ressourcen effizient zu priorisieren.

Plan B: WP Rocket fürs Vorladen verwenden

Wenn Sie einen einfacheren, plugin-basierten Ansatz bevorzugen, ist WP Rocket ein empfehlenswertes Tool, um das Vorladen wichtiger Anfragen zu automatisieren.

WP Rocket erleichtert das Vorladen von Schriftarten und anderen kritischen Assets direkt von Ihrer Domain und stellt sicher, dass diese Ressourcen schnell geladen werden, um das Rendering-Blockieren zu reduzieren.

Außerdem bietet WP Rocket Funktionen wie die Optimierung der CSS-Auslieferung, einschließlich der Optionen zum Entfernen ungenutzter CSS und zum asynchronen Laden von CSS. Das verbessert die Leistung Ihrer Seite zusätzlich, indem die Auswirkungen von render-blockierendem CSS verringert werden.

Anzahl kritischer Ressourcen reduzieren

Beschleunigen Sie Ihre Website, indem Sie das wesentliche CSS und JavaScript für Inhalte oberhalb der Faltlinie minimieren. Optimieren Sie das Laden, indem Sie nicht kritisches CSS und JavaScript verzögern oder ganz entfernen. Diese Strategie hilft dem Browser, wichtige Inhalte schneller zu laden, indem unnötige Ressourcen wie ungenutztes CSS und JS vermieden werden.

Um die Anzahl der kritischen Ressourcen auf Ihrer Website mit dem WP Rocket-Plugin zu reduzieren, folgen Sie diesen Schritten, um spezifische Optimierungsoptionen im Tab "File Optimization" zu aktivieren:

Warnung: Wenn Sie diese Optionen in WP Rocket aktivieren, schalten Sie sie einzeln frei und testen Sie Ihre Website. So stellen Sie sicher, dass keine Änderung Ihr Layout zerstört. Werden alle gleichzeitig aktiviert, kann das Probleme verursachen und die Ursache schwer auffindbar machen. Prüfen Sie nach jeder Anpassung stets die Funktionalität und das Erscheinungsbild Ihrer Seite.

Anzahl der kritischen Ressourcen reduzieren

Minify CSS Files: Aktivieren Sie diese Option, um Ihre CSS-Dateien zu komprimieren und unnötige Leerzeichen sowie Kommentare zu entfernen. Das reduziert die Dateigröße und beschleunigt das Laden.
Optimize CSS Delivery: Wählen Sie dies, um render-blockierendes CSS auf Ihrer Website zu eliminieren, was schnelleres Page-Rendering ermöglicht. Beachten Sie, dass nur eine Methode in den CSS-Optimierungseinstellungen ausgewählt werden kann.
Minify JavaScript Files: Aktivieren Sie diese Option, um Ihre JavaScript-Dateien durch Entfernen von Leerzeichen und Kommentaren zu komprimieren.
Combine JavaScript Files: Wenn Ihre Website kein HTTP/2 verwendet, sollten Sie interne und externe JavaScript-Dateien kombinieren, um HTTP-Anfragen zu reduzieren.
Load JavaScript Deferred: Aktivieren Sie dies, um das Laden von JavaScript-Dateien bis nach dem Abschluss des HTML-Parsings zu verzögern, was die Ladezeiten erheblich verbessern kann.

Verkettete Anfragen mit ‚`font-display`‚ vermeiden

Um verkettete Anfragen zu vermeiden und die Leistung Ihrer Website zu verbessern, können Sie die font-display-Eigenschaft verwenden, um zu steuern, wie Webfonts während des Ladens angezeigt werden. Hier sind die Schritte und Werte, die Sie verwenden können:

Die font-display-Werte definieren:

Auto: Nutzt die Standardstrategie des Browsers.
Block: Zeigt einen unsichtbaren Platzhalter, bis die Schriftart geladen ist.
Swap: Verwendet eine Fallback-Schriftart, bis der Webfont geladen ist, und wechselt dann.
Fallback: Versteckt den Text kurz und verwendet dann eine Fallback-Schriftart, bis der Webfont geladen ist.
Optional: Ähnlich wie Fallback, aber der Browser kann entscheiden, den Webfont nicht zu verwenden.

Für die meisten modernen Browser wird font-display: swap; empfohlen, da es den Flash of Invisible Text (FOIT) verhindert.

Implementierung von font-display: Fügen Sie die font-display-Eigenschaft Ihren @font-face-Regeln in Ihrem CSS hinzu:

CSS

@font-face {
  font-family: 'Your Font';
  src: url('your-font.woff2') format('woff2');
  font-display: swap;
}

Schriftarten vorladen: Verwenden Sie den <link rel="preload">-Tag im HTML-<head>, um sicherzustellen, dass Schriftarten früh im Rendering-Prozess geladen werden:

HTML

<link rel="preload" href="your-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Schriftarten mit WP Rocket vorladen

Das schnelle Laden von Schriftarten ist wichtig, um Layout-Verschiebungen auf Ihrer Website zu vermeiden. WP Rocket, ein beliebtes WordPress-Plugin, hilft dabei. So laden Sie Schriftarten vor:

Klicken Sie auf den Tab „Preload", um auf die Einstellungen für das Vorladen von Schriftarten zuzugreifen.

Scrollen Sie nach unten zum Abschnitt „Preload Fonts". Fügen Sie die zuvor identifizierten URLs der Schriftarten in das vorgesehene Feld ein und achten Sie darauf, dass jede URL in einer neuen Zeile steht. Klicken Sie anschließend auf die Schaltfläche „Save Changes".

Schriftarten mit WP Rocket vorladen, um die Verkettung kritischer Anfragen zu vermeiden

Das Vorladen von Schriftarten mit WP Rocket sorgt für ein flüssigeres Laden Ihrer Website, reduziert CLS und verbessert die Nutzererfahrung.

Zusammenfassung

Das Verständnis und die Reduzierung der Auswirkungen kritisch verketteter Anfragen sind entscheidend, um die Leistung Ihrer Website zu steigern.
Diese Probleme anzugehen kann die Ladezeiten erheblich verbessern und ein flüssigeres, reaktionsschnelleres Nutzererlebnis bieten.
Das verbessert nicht nur die Nutzerzufriedenheit, sondern wirkt sich auch positiv auf das SEO-Ranking aus und macht Ihre Seite für Suchmaschinen attraktiver.

Autor: Rene Hermenau

Über den Autor: René Hermenau ist Gründer von WP STAGING. Er arbeitet an WordPress-Backups, Staging, Migrationen, Datenbankverarbeitung und sicheren Deployment-Workflows.

Vollständiges Autorenprofil von Rene Hermenau ansehen