So vermeiden Sie die Verkettung kritischer Anfragen
Veröffentlicht: 2023-08-03Erhalten Sie jedes Mal, wenn Sie einen PageSpeed Insights-Test ausführen, die Warnung „Verkettung kritischer Anfragen vermeiden“?
Nun, das endet heute.
Nachdem Sie diesen Leitfaden gelesen haben, wissen Sie alles über kritische Anfragen, wie sich ihre Verkettung auf Ihre Leistung auswirkt und – was am wichtigsten ist – wie Sie die Warnung „Vermeiden Sie die Verkettung kritischer Anfragen“ beheben können.
- Was gilt als kritische Anfrage?
- Was bedeutet „Verkettung kritischer Anfragen vermeiden“?
- Wie sich die Verkettung kritischer Anfragen auf Ihre Leistung auswirkt
- So vermeiden Sie die Verkettung kritischer Anfragen in WordPress
- Bonus: Weitere Best Practices zur Behebung von „Verkettung kritischer Anfragen vermeiden“
Weiter lesen.
Was gilt als kritische Anfrage?
Eine kritische Anfrage ist eine Ressource, die für die Darstellung der ersten Ansicht einer Webseite unerlässlich ist. Mit anderen Worten: alles, was oberhalb der Falte geladen ist.
Folgendes sehe ich beispielsweise auf meinem Laptop, wenn ich die Homepage von NitroPack lade:
Alle „above-the-fold“-Elemente gelten als kritisch, denn je nachdem, wie schnell sie geladen werden, kann der Benutzer ein großartiges Erlebnis haben oder sofort abspringen.
Was bedeutet „Verkettung kritischer Anfragen vermeiden“?
Einfach ausgedrückt bedeutet die Warnung „Verkettung kritischer Anfragen vermeiden“, dass die kritischen Ressourcen, die zum Rendern Ihrer Seite benötigt werden, zu groß sind.
Im Hinblick auf den Verkettungsteil ist eine kritische Anforderungskette eine Folge von Anforderungen, die voneinander abhängig sind und für die Darstellung der Seite unerlässlich sind. Die Reihenfolge, in der die Anforderungen analysiert und ausgeführt werden, wird durch den Critical Rendering Path (CRP) bestimmt.
Der kritische Rendering-Pfad bezieht sich auf die Abfolge von Schritten, die ein Webbrowser ausführt, um HTML-, CSS- und JavaScript-Code in eine visuelle Darstellung auf dem Bildschirm eines Benutzers umzuwandeln.
Wenn der Browser beginnt, den Code zu analysieren, verarbeitet er die kritischen Anfragen basierend auf der zugewiesenen Priorität:
Nachdem Sie nun wissen, was CRP ist und wie Browser Prioritäten zuweisen, kehren wir zur Definition der „kritischen Anforderungskette“ zurück.
Da es sich um eine Abfolge von Anfragen handelt, dievoneinander abhängig sind , führt das Laden großer, nicht optimierter kritischer Anfragen unweigerlich zu längeren kritischen Ketten, was das Laden Ihrer Seite verlangsamt.
Um diese Aussage zu veranschaulichen, schauen wir uns das folgende Beispiel an:
Stellen Sie sich eine einfache Webseite vor, die die folgenden Ressourcen enthält:
- index.html – die Haupt-HTML-Datei, die die Struktur der Seite definiert.
- styles.css – definiert das visuelle Erscheinungsbild und Layout der Seite.
- main.js – enthält Skripte, die der Webseite Interaktivität und Funktionalität hinzufügen.
- logo.png (Bilddatei)
Stellen Sie sich eine Situation vor, in der jede Ressource Teil einer langen kritischen Anforderungskette ist. Stellen Sie sich beispielsweise vor, dass die HTML-Datei auf mehrere CSS- und JavaScript-Dateien verweist und jede dieser Dateien wiederum auf andere Ressourcen verweist, was zu einer Kette von Abhängigkeiten führt.
In einem solchen Szenario hat eine Verzögerung beim Laden einer der Ressourcen in der Kette einen kaskadierenden Effekt auf die Latenz des kritischen Pfads und die Gesamtleistung Ihrer Seite.
Apropos Web-Performance: Mal sehen, welche Kennzahlen durch die Verkettung kritischer Anfragen am stärksten beeinträchtigt werden …
Wie sich die Verkettung kritischer Anfragen auf Ihre Leistung auswirkt
Je länger die Kette ist, desto länger dauert es, bis der Browser die für die Anzeige Ihrer Inhalte erforderlichen Ressourcen rendert.
In Bezug auf Web-Performance-Metriken bedeutet dies ein schlechtes First Contentful Paint (FCP) und Largest Contentful Paint (LCP).
Scheitern beim ersten Contentful Paint (FCP)
FCP misst, wie lange es dauert, bis der Browser den ersten Teil des DOM-Inhalts (z. B. Bild, SVG, nicht leeres Canvas-Element) auf einer Seite visualisiert.
Diese Elemente mögen unbedeutend erscheinen, sind aber für das Benutzererlebnis Ihrer Website von entscheidender Bedeutung. Sie teilen Ihren Besuchern mit, dass ihre Eingabe verarbeitet wird und die Website geladen wird. Wenn eine Seite einige Sekunden lang leer bleibt, bevor sie geladen wird, wissen Benutzer nicht, ob etwas passiert oder nicht.
Um sicherzustellen, dass der Browser diesen ersten Teil des DOM-Inhalts so schnell wie möglich rendern kann, müssen die kritischen Anforderungsketten kurz und leicht sein. Andernfalls ist die Wahrscheinlichkeit, dass Ihre Besucher aufgrund eines leeren Bildschirms und eines FCP-Fehlers abspringen, vielhöher.
Scheitern bei Largest Contentful Paint (LCP)
LCP misst, wie lange es dauert, bis das größte Above-the-Fold-Element auf einer Seite geladen wird.
Es handelt sich um eines der drei Core Web Vitals (CWV), bei denen es sich um eine Reihe benutzerzentrierter Metriken handelt, die die Ladezeit, visuelle Stabilität und Interaktivität Ihrer Website messen. Sie sind auch ein Google-Rankingfaktor .
Ein schlechter LCP-Score aufgrund des Ladens langer kritischer Anforderungsketten bedeutet also nicht nur, dass Sie eineLeistungsmetrik nicht erfüllen, sondern auch:
- Reduziert Ihre Chancen, das CWV zu bestehen
- Das Ranking Ihrer Website beeinträchtigen
- Bereitstellung einer schlechten Benutzererfahrung
Der todsichere Weg, all das zu vermeiden, besteht darin, den kritischen Pfad zu verkürzen, indem Sie die Anzahl und Größe Ihrer Ressourcen optimieren.
Und so geht's...
So vermeiden Sie die Verkettung kritischer Anfragen (auf WordPress)
Wenn es eine einzige Lösungsstrategie zur Lösung des Problems „Verkettung kritischer Anfragen vermeiden“ gibt, würde diese darin bestehen, Rendering-blockierende Ressourcen zu eliminieren.
Renderblockierende Ressourcen sind Dateien, die der Browser herunterladen, analysieren und ausführen muss, wenn sie auf sie stoßen, bevor er irgendetwas anderes, einschließlich des Renderns, tun kann.
Die Hauptverursacher, die am häufigsten als „Renderblockierung“ gemeldet werden, sind nicht optimierte CSS- und JavaScript-Dateien.
Die folgenden Techniken helfen Ihnen dabei, beides erfolgreich zu bewältigen:
Entfernen Sie nicht verwendetes CSS
Der Begriff „Unused CSS“ bezieht sich auf CSS-Regeln, die auf der aktuellen Seite nicht verwendet werden.
Durch diese Regeln werden Dateien größer als nötig, wodurch Ihr Code aufgebläht wird und lange kritische Anforderungsketten entstehen. Infolgedessen dauert das Laden Ihrer Dateien und Ihrer Seite ewig.
Wenn Sie mit der Feinabstimmung Ihres Codes vertraut sind, können Sie ein Online-Tool wie PurifyCSS verwenden.
Geben Sie die URL Ihrer Seite ein und das Tool entfernt automatisch den unnötigen Code. Anschließend können Sie das „gereinigte“ CSS herunterladen und auf Ihre Website hochladen:
Wichtig : Wenn Sie Ihren Code ändern, besteht das Risiko, dass das Design und die Funktionalität Ihrer Website beeinträchtigt werden.Wenn Sie keine technischen Vorkenntnisse haben, wenden Sie sich an einen Webentwickler oder installieren Sie ein Plugin, das dies automatisch für Sie erledigt.
Entfernen Sie nicht verwendetes CSS mit einem Klick auf eine Schaltfläche. Installieren Sie NitroPack und optimieren Sie Ihre Website automatisch →
JavaScript zurückstellen
Durch das Zurückstellen von JavaScript-Dateien können Sie diese nur bei Bedarf laden, sodass sich der Browser darauf konzentrieren kann, zuerst die wichtigsten Inhalte (above the Fold) bereitzustellen.
Sie können Ihre JS-Dateien mithilfe vonAsyncverzögert laden undaufschieben Attribute.
- asynchron
Asynchrones Laden bedeutet, dass das Skript im Hintergrund abgerufen wird, während die HTML-Analyse und das Rendern der Seite fortgesetzt werden.
Wenn das Skript heruntergeladen wird, wird die HTML-Analyse angehalten, das Skript sofort ausgeführt und die Analyse dann fortgesetzt. Daher kann die Reihenfolge, in der Skripte mit dem Attribut „async“ ausgeführt werden, unvorhersehbar sein, da der Ladevorgang möglicherweise zu unterschiedlichen Zeiten abgeschlossen wird.
Das async-Attribut eignet sich perfekt für Skripte von Drittanbietern, bei denen Sie das Laden und Rendern Ihrer Seite nicht blockieren möchten.
- verschieben
Das Defer- Attribut lädt das Skript wie async ebenfalls asynchron, unterscheidet sich jedoch in der Art und Weise, wie es ausgeführt wird.
Skripte mit dem Defer-Attribut werden im Hintergrund heruntergeladen, während die HTML-Analyse fortgesetzt wird. Die Skriptausführung wird jedoch verzögert, bis die HTML-Analyse abgeschlossen ist. Die Reihenfolge der Ausführung von Skripten mit Verzögerung wird in der Reihenfolge beibehalten, in der sie im HTML erscheinen.
Verwenden Sie dasDefer-Attribut, wenn Sie die Reihenfolge der Skriptausführung beibehalten möchten, wie sie im HTML angezeigt wird.
Codekomprimierung und -minimierung
Eine weitere Ebene der kritischen Optimierung der Anforderungskette besteht darin, die Gesamtgröße Ihrer Ressourcen zu reduzieren, da dies dem Browser hilft, sie schneller herunterzuladen, zu analysieren und zu rendern.
Und das erreichen Sie, indem Sie Ihre Dateien komprimieren und verkleinern.
Durch die Anwendungder Komprimierung wird der Binärcode Ihrer Dateien neu geschrieben und die Informationen werden mit weniger Bits als im Original kodiert.
Das beliebteste Komprimierungstool ist gzip. Gzipping funktioniert, indem es die sich wiederholenden Zeichenfolgen findet und sie durch Zeiger auf die erste Instanz der Zeichenfolge ersetzt. Der Vorteil besteht darin, dass Zeiger weniger Platz beanspruchen als Text.
Die Minimierung hingegen entfernt unnötige Codeelemente wie Kommentare, Zeilenumbrüche oder Leerzeichen:
Quelle:KeyCDN
Durch die Reduzierung Ihres Codes können Sie kritische Anfragen verkürzen und so die Geschwindigkeit Ihrer Website verbessern.
Es gibt online unzählige kostenlose Tools, die Ihnen bei der Optimierung Ihrer Codegröße helfen können. Um sie zu verwenden, müssen Sie Ihren Code eingeben, dann die verkleinerte/komprimierte Version kopieren und wieder auf Ihrer Website einfügen. Hier ein paar Vorschläge:
- CSSNano
- Toptal JavaScript Minifier
- Code verschönern
Weitere Best Practices zur Behebung von „Vermeiden Sie die Verkettung kritischer Anfragen“
Schriftart-Untermenge
Nachdem Sie sich um die CSS- und JavaScript-Ressourcen Ihrer Website gekümmert haben, sind Ihre Webfonts der nächstbeste Kandidat für die Optimierung.
Meist übersehen, handelt es sich bei Web-Schriftarten oft um große Dateien, deren Laden eine Weile dauert und die sogar die Darstellung des Textes blockieren können.
Um dies zu vermeiden, müssen Sie ihre Größe reduzieren, damit der Browser sie sofort laden kann.
Geben Sie die Teilmenge der Schriftart ein.
Bei der Unterteilung von Schriftarten handelt es sich um eine Optimierungstechnik, die nicht verwendete Glyphen (Zeichen) aus einer Schriftart entfernt, um deren Größe massiv zu reduzieren.
Denken Sie beispielsweise darüber nach, wie viele einzigartige Glyphen Ihre Homepage verwendet. Wir wetten, dass es nicht mehr als 100 sind.
Um das ins rechte Licht zu rücken: Font Awesome, die am zweithäufigsten verwendete Schriftart (7 % aller Websites verwenden sie),hat 26.107 Zeichen .
Quelle:Webalmanach
Stellen Sie sich vor, wie viel Zeit Sie dem Browser und Ihren Besuchern ersparen könnten, wenn Sie nur das laden, was für die jeweilige Seite unbedingt erforderlich ist.
Es gibt einige Online-Tools, die Ihnen bei der Anwendung von Schriftart-Untergruppen helfen können. Sie müssen Ihre Schriftartdatei hochladen und die Glyphen auswählen, die entfernt werden sollen. Kehren Sie dann zu Ihrer Website zurück und laden Sie die Teilmengendatei hoch.
Außerdem müssen Sie sicherstellen, dass Sie den Prozess jedes Mal durchlaufen, wenn Sie Ihre Inhalte aktualisieren.
Wichtig : Durch die Unterteilung Ihrer Schriftartdateien mithilfe von Online-Tools besteht das Risiko, dass nach der Optimierung Zeichen auf Ihrer Seite fehlen. Wenn Sie noch nie mit Schriftarten gearbeitet haben, empfehlen wir Ihnen dringend, sich an einen Web-Performance-Spezialisten zu wenden oder ein Plugin zu installieren, das dies automatisch für Sie erledigt.
Unterteilen Sie Ihre Schriftarten risikofrei. Reduzieren Sie ihre Größe um bis zu 70 % durch die Installation von NitroPack →
Schlüsselanfragen vorab laden
Die Verwendung des Attributs „link rel=preload“ zum Vorabladen kritischer Anforderungen ist eine weitere Optimierungsstrategie, die Ihr FCP und LCP verbessert und den kritischen Pfad verkürzt.
Um Ihre kritischste Anfrage zu identifizieren, führen Sie Ihre Website über PageSpeed Insights aus und überprüfen Sie die Warnung „Schlüsselanforderung vorab laden“:
Gehen Sie dann zu Ihrem Code und fügen Sie der spezifischen Ressource das Tag „link rel=preload“ hinzu:
Vergessen Sie nicht, das Attribut „as“ einzuschließen, damit der Browser die Priorität der vorab abgerufenen Ressource entsprechend ihrem Typ festlegen und feststellen kann, ob sie bereits im Cache vorhanden ist.
Zusätzliche Ressourcen: Sehen Sie sich die vollständige Liste der As-Werte an.
So vermeiden Sie die Verkettung kritischer Anfragen mit NitroPack
Die Optimierung Ihrer kritischen Anforderungsketten kann eine mühsame Aufgabe sein, wenn Sie nicht über die richtigen Tools verfügen.
Wie Sie bereits wissen, kann die Feinabstimmung Ihres Codes mehrfach nach hinten losgehen und die Funktionalität und das Design Ihrer Website beeinträchtigen.
Aber das Beheben einer einzelnen PSI-Warnung sollte kein großes Problem darstellen.
Zumindest ist das bei NitroPack nicht der Fall.
NitroPack ist ein All-in-One-Tool zur Geschwindigkeitsoptimierung, das die Leistung Ihrer Website steigert, indem es Folgendes anwendet:
- Entfernen Sie nicht verwendetes CSS
- JavaScript zurückstellen
- Schriftart-Untermenge
Und über 32 weitere bewährte Optimierungstechniken für Sie.
Mit NitroPack sind weder Programmierkenntnisse noch technische Vorkenntnisse erforderlich, um die Leistung Ihrer Website zu steigern.
Klingt zu schön, um wahr zu sein?
Werfen wir einen Blick auf die Websites eines unserer Kunden mit und ohne NitroPack.
Hier sind ihre Ergebnisse ohne NitroPack:
41 Leistungsbewertung auf Mobilgeräten, 47 Ketten und eine kritische Pfadlatenz von 3.781 ms.
Ohne NitroPack
Und hier sind die Ergebnisse mit NitroPack:
95 Leistungsbewertung, 1 Kette, mehr als 2x kürzere Latenz des kritischen Pfads:
Mit NitroPack
Sie können dies und eine Reihe weiterer Leistungsverbesserungen erleben. Installieren Sie NitroPack noch heute und lassen Sie uns für die blitzschnelle Geschwindigkeit Ihrer Website sorgen.