Was ist die 'Avoid Chaining Critical Requests' Warnung?

Was ist die Avoid Chaining Critical Requests Warnung in Lighthouse? Lighthouse schaut auf die Priorität der geladenen Ressourcen. Die Critical Request Chain gibt an, welche Ressourcen mit einer hohen Priorität geladen werden müssen, bevor der Browser die Seite rendern kann.

Lesen Sie mehr darüber in unserem Artikel über die Critical Request Chain.

Wie beeinflusst 'Chaining Critical Requests' die PageSpeed?

Wenn ein Browser eine Seite lädt, baut er einen DOM-Baum (Document Object Model) aus allen HTML-Elementen auf. Danach werden die CSS-Stile über das CSSOM (CSS Object Model) hinzugefügt. Schließlich wird der Render Tree erstellt, der bestimmt, was auf dem Bildschirm angezeigt werden soll.

Wenn ein Browser auf ein Skript oder Stylesheet mit hoher Priorität stößt, pausiert er das Rendern (und damit das Laden der Seite), um diese Ressource abzurufen und auszuführen. Dies blockiert das Rendern der Seite und verlangsamt somit die Ladezeit (First Contentful Paint).

Je mehr abhängige Schritte in dieser Kette, desto länger dauert es, bis die Seite angezeigt werden kann. Stellen Sie sich vor: Sie laden eine CSS-Datei, die eine Schriftart lädt, die ein Bild lädt. Der Browser muss auf die CSS-Datei warten, dann auf die Schriftart und dann auf das Bild.

Wie beheben Sie 'Avoid Chaining Critical Requests'?

Um die 'Avoid Chaining Critical Requests' Warnung zu beheben, müssen Sie zuerst die Ketten identifizieren. Lighthouse zeigt Ihnen genau, welche Ressourcen Teil der Kette sind und wie viel Zeit sie beanspruchen.

Es gibt eine Reihe von Strategien, um dies anzugehen:

• Minimieren Sie die Anzahl kritischer Ressourcen: Entfernen Sie sie, verschieben Sie sie (defer/async) oder markieren Sie sie als nicht kritisch.
• Optimieren Sie die kritischen Ressourcen: Verringern Sie die Größe (minify) und komprimieren Sie sie (gzip/brotli).
• Laden Sie kritische Ressourcen früher: Verwenden Sie <link rel="preload">, um wichtige Ressourcen früher abzurufen.
• Verkürzen Sie die Ketten: Versuchen Sie, Abhängigkeiten zu vermeiden. Anstatt @import in CSS zu verwenden (was eine Kette erstellt), verlinken Sie direkt auf das Stylesheet im HTML.

Hier sind einige spezifische Tipps:

Verwenden Sie 'defer' und 'async' Attribute für Skripte

Für Skripte, die nicht direkt für das Rendern der anfänglichen Ansicht benötigt werden, verwenden Sie defer oder async. Dies stellt sicher, dass das Laden des Skripts das Rendern nicht blockiert.

Optimieren Sie das Laden von Schriftarten

Schriftarten sind oft Teil kritischer Ketten. Verwenden Sie font-display: swap;, um Text sofort sichtbar zu machen, auch wenn die Schriftart noch nicht geladen ist.

Vermeiden Sie @import in CSS

Verwenden Sie kein @import in Ihren CSS-Dateien. Dies zwingt den Browser, die erste CSS-Datei herunterzuladen und zu parsen, bevor er die importierten Dateien finden kann, was eine verzögernde Kette erstellt.