Im Abschnitt „Empfehlungen“ Ihres Lighthouse-Berichts sind alle URLs aufgeführt, die den First Paint Ihrer Seite blockieren. Ziel ist es, die Auswirkungen dieser URLs zu reduzieren, die das Rendering blockieren. Dazu werden wichtige Ressourcen eingebunden, nicht kritische Ressourcen verschoben und nicht verwendete Ressourcen entfernt.
Welche URLs werden als Ressourcen gekennzeichnet, die das Rendering blockieren?
Lighthouse meldet zwei Arten von renderblockierenden URLs: Scripts und Stylesheets.
Ein <script>-Tag, das:
- Befindet sich in der
<head>des Dokuments. - Es hat kein
defer-Attribut. - Es hat kein
async-Attribut.
Ein <link rel="stylesheet">-Tag, das:
- Es hat kein
disabled-Attribut. Wenn dieses Attribut vorhanden ist, lädt der Browser das Stylesheet nicht herunter. - Es gibt kein
media-Attribut, das genau mit dem Gerät des Nutzers übereinstimmt.media="all"gilt als renderblockierend.
Kritische Ressourcen identifizieren
Der erste Schritt zur Reduzierung der Auswirkungen von renderblockierenden Ressourcen besteht darin, zu ermitteln, was wichtig ist und was nicht. Suchen Sie in den Chrome-Entwicklertools auf dem Tab „Abdeckung“ nicht kritisches CSS und JS. 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 senden, die Sie benötigen. Klicken Sie auf eine URL, um die Datei im Bereich „Quellen“ zu prüfen. Stile in CSS-Dateien und Code in JavaScript-Dateien sind in zwei Farben gekennzeichnet:
- Grün (kritisch): Stile, die für die erste Darstellung erforderlich sind; Code, der für die Hauptfunktionen der Seite entscheidend ist.
- Rot (nicht kritisch): Stile, die für Inhalte gelten, die nicht sofort sichtbar sind; Code wird nicht in der Hauptfunktion der Seite verwendet.
Scripts entfernen, die das Rendering blockieren
Nachdem Sie den kritischen Code identifiziert haben, verschieben Sie ihn von der renderblockierenden URL in ein Inline-script-Tag auf Ihrer HTML-Seite.
Wenn die Seite geladen wird, sind alle erforderlichen Informationen für die Hauptfunktionen der Seite verfügbar.
Wenn eine renderblockierende URL Code enthält, der nicht kritisch ist, können Sie ihn in der URL belassen und die URL dann mit den Attributen async oder defer kennzeichnen. Weitere Informationen finden Sie unter Interaktivität mit JavaScript hinzufügen.
Code, der nicht verwendet wird, sollte entfernt werden. Weitere Informationen finden Sie unter Nicht verwendeten Code entfernen.
Stylesheets entfernen, die das Rendering blockieren
Ähnlich wie beim Einfügen von Code in einem <script>-Tag werden kritische Stile, die für den ersten Paint erforderlich sind, in einem <style>-Block auf der head der HTML-Seite inline eingefügt.
Laden Sie dann den Rest der Stile asynchron über den Link preload (siehe Nicht verwendetes CSS verschieben)
Mit dem Critical-Tool können Sie das Extrahieren und Einfügen von CSS für den Bereich „Above the Fold“ automatisieren.
Eine weitere Möglichkeit, renderblockierende Stile zu entfernen, besteht darin, diese Stile in verschiedene Dateien aufzuteilen, die nach Medienabfrage organisiert sind. Fügen Sie dann jedem Stylesheet-Link ein Medienattribut hinzu. Beim Laden einer Seite blockiert der Browser nur die erste Paint-Operation, um die Stylesheets abzurufen, die zum Gerät des Nutzers passen (siehe Render-Blocking-CSS).
Schließlich sollten Sie Ihr CSS minimieren, um alle zusätzlichen Leerzeichen oder Zeichen zu entfernen (siehe CSS minimieren). So wird sichergestellt, dass Sie Ihren Nutzern das kleinstmögliche Bundle senden.
Stackspezifische Anleitung
AMP
Verwende Tools wie den AMP-Optimierer, um AMP-Layouts serverseitig zu rendern.
Drupal
Sie haben die Möglichkeit, ein Modul zu verwenden, um wichtige CSS- und JavaScript-Elemente inline einzubetten, und das Attribut „defer“ für nicht kritische CSS- oder JavaScript-Elemente zu verwenden.
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.