Im Bereich „Empfehlungen“ Ihres Lighthouse-Berichts werden alle URLs aufgeführt, die den First Paint Ihrer Seite blockieren. Ziel ist es, die Auswirkungen dieser URLs, die das Rendering blockieren, zu reduzieren. Dazu werden wichtige Ressourcen inline platziert, nicht kritische Ressourcen ausgesetzt und nicht genutzte Ressourcen entfernt.
Welche URLs werden als Ressourcen gekennzeichnet, die das Rendering blockieren?
Lighthouse kennzeichnet zwei Arten von URLs, die das Rendering blockieren: Skripts und Stylesheets.
Ein <script>-Tag, das:
- Ist im
<head>des Dokuments. - Hat kein
defer-Attribut. - Hat kein
async-Attribut.
Ein <link rel="stylesheet">-Tag, das:
- Hat kein
disabled-Attribut. Wenn dieses Attribut vorhanden ist, lädt der Browser das Stylesheet nicht herunter. - Hat kein
media-Attribut, das speziell mit dem Gerät des Nutzers übereinstimmt.media="all"gilt als Rendering-Blockierung.
So identifizieren Sie kritische Ressourcen
Der erste Schritt zur Reduzierung der Auswirkungen von Ressourcen, die das Rendering blockieren, besteht darin, herauszufinden, was kritisch ist und was nicht. Auf dem Tab „Abdeckung“ in den Chrome-Entwicklertools können Sie nicht kritische CSS- und JS-Elemente ermitteln. Wenn Sie eine Seite laden oder ausführen, sehen Sie auf dem Tab, wie viel Code verwendet und wie viel geladen wurde:
Sie können die Größe Ihrer Seiten reduzieren, indem Sie nur den Code und die Stile versenden, die Sie benötigen. Klicken Sie auf eine URL, um die entsprechende Datei im Feld "Quellen" zu überprüfen. Stile in CSS-Dateien und Code in JavaScript-Dateien sind in zwei Farben markiert:
- Grün (kritisch): Stile, die für First Paint erforderlich sind; Code, der für die Hauptfunktionen der Seite entscheidend ist
- Rot (nicht kritisch): Stile, die sich auf nicht sofort sichtbare Inhalte beziehen; Code wird in den Hauptfunktionen der Seite nicht verwendet.
So eliminierst du Skripts, die das Rendering blockieren
Nachdem Sie den kritischen Code gefunden haben, verschieben Sie ihn von der URL, die das Rendering blockiert, in ein Inline-script-Tag auf Ihrer HTML-Seite.
Wenn die Seite geladen wird, hat sie alle erforderlichen Elemente, um die Hauptfunktionen der Seite zu verarbeiten.
Wenn die URL keinen wichtigen Code enthält, der das Rendering blockiert, kannst du ihn in der URL belassen und die URL mit den Attributen async oder defer kennzeichnen (siehe auch Interaktivität mit JavaScript hinzufügen).
Code, der nicht verwendet wird, muss entfernt werden (siehe Nicht verwendeten Code entfernen).
Stylesheets eliminieren, die das Rendering blockieren
Ähnlich wie bei Inline-Code in einem <script>-Tag sind auch hier kritische Stile für den ersten Paint in einem <style>-Block an der head der HTML-Seite erforderlich.
Laden Sie dann die restlichen Stile asynchron über den preload-Link (siehe Nicht verwendete CSS zurückstellen).
Sie können das Extrahieren und Einfügen von „Above the Fold“-CSS mit dem kritischen Tool automatisieren.
Ein weiterer Ansatz zum Entfernen von Stilen, die das Rendering blockieren, besteht darin, diese Stile in verschiedene Dateien aufzuteilen, die nach Medienabfragen organisiert sind. Fügen Sie dann jedem Stylesheet-Link ein Medienattribut hinzu. Beim Laden einer Seite blockiert der Browser nur den First Paint, um die Stylesheets abzurufen, die dem Gerät des Nutzers entsprechen (siehe CSS mit Rendering blockieren).
Schließlich müssen Sie den CSS-Code komprimieren, um zusätzliche Leerzeichen oder Zeichen zu entfernen (siehe CSS reduzieren). So wird sichergestellt, dass Sie immer die kleinstmöglichen Sets an Ihre Nutzer senden.
Stackspezifische Anleitung
AMP
Verwende Tools wie den AMP-Optimierer, um AMP-Layouts serverseitig zu rendern.
Drupal
Sie können ein Modul verwenden, um wichtige CSS- und JavaScript-Elemente inline einzubetten. Sie können Assets aber auch asynchron über JavaScript laden, z. B. mit dem Modul Advanced CSS/JS Aggregation.
Joomla
Es gibt eine Reihe von Joomla-Plug-ins, mit denen Sie wichtige Assets einbetten oder weniger wichtige Ressourcen aufschieben können.
WordPress
Es gibt eine Reihe von WordPress-Plug-ins, mit denen Sie wichtige Assets einbetten oder weniger wichtige Ressourcen aufschieben können.