Fix eliminate render-blocking resources Lighthouse-Warnung
Werden Sie Render-Blocking-Ressourcen los und verbessern Sie die Core Web Vitals
'Eliminate render-blocking resources' in Kürze
Während des Ladens einer Seite mit Render-Blocking-Ressourcen kann ein Browser nicht mit dem Rendern beginnen, da er wartet, bis alle Elemente, die dies verursachen, heruntergeladen und ausgewertet sind.
Dies bricht die goldene Regel von PageSpeed: 'Starten Sie das Rendern immer so früh wie möglich'. Jede Verzögerung beim Rendern der Seite führt dazu, dass die Seite langsamer lädt als nötig.
Beheben Sie diese Lighthouse-Warnung, indem Sie diese Render-Blocking-Ressourcen entfernen oder verschieben.
Was ist die 'Eliminate render-blocking resources' Lighthouse-Warnung?
Was verursacht die Eliminate render-blocking resources Warnung in Lighthouse? Lighthouse markiert Seiten, die entweder:
- Ein Script-Tag haben, das sich im Head befindet und nicht verschoben ist.
Skripte im Head der Seite sind standardmäßig Render-Blocking, wenn sie nicht das defer oder async Attribut haben. - Ein verlinktes Stylesheet, das dem Gerätemedium entspricht.
Ein <link rel="stylesheet"> blockiert das Rendern der Seite, wenn es nicht deaktiviert ist und dem Medium des Browsers entspricht. Zum Beispiel blockiert <link rel="stylesheet" media="print"> das Rendern auf Desktop-Geräten nicht
Die 'Eliminate render-blocking resources' Warnung wirkt sich direkt auf einige Lighthouse-Metriken aus. Theoretisch könnten Seiten mit Render-Blocking-Ressourcen-Bildern immer noch ziemlich schnell laden. In der Praxis tun sie das oft nicht. Zu viele Render-Blocking-Ressourcen wirken sich höchstwahrscheinlich direkt auf wichtige Lighthouse-Metriken wie First Contentful Paint (FCP) und Largest Contentful Paint (LCP) aus.
Eine kurze Erinnerung - Was ist Rendering?
Rendering ist ein Prozess, der in der Webentwicklung verwendet wird, bei dem Website-Code in die interaktiven Seiten umgewandelt wird, die Benutzer sehen, wenn sie eine Website besuchen. Der Begriff bezieht sich im Allgemeinen auf die Verwendung von HTML, CSS und JavaScript-Codes. Der Prozess wird von einer Rendering-Engine abgeschlossen, der Software, die von einem Webbrowser verwendet wird, um eine Webseite zu rendern..
Was verursacht 'Render-Blocking-Ressourcen'?
Render-Blocking-Ressourcen sind immer StyleSheets und JavaScripts im Head der Seite. Das bedeutet, dass sie nur von Ihrem CMS, manuell von Ihrem Webentwickler oder durch ein Plugin hinzugefügt werden können. Wenn Sie versuchen, den Ursprung einer Render-Blocking-Ressource zu finden, versuchen Sie, an diesen Orten zu suchen:
- Das Template Die Template-Dateien Ihrer Website sind der erste Ort, an dem Sie suchen sollten. Finden Sie den Ort, an dem sich der <head>-Code befindet, und suchen Sie nach Hardcoded-Styles und -Skripten.
- Das CMS manchmal benötigt das CMS selbst einige Skripte (zum Beispiel jQuery), um ordnungsgemäß zu funktionieren.
- Plugins. Plugins sind berüchtigt dafür, Styles und Skripte in die Seite einzufügen.
Wie beeinflussen 'Render-Blocking-Ressourcen' PageSpeed
Render-Blocking-Ressourcen blockieren das Generieren des Render-Trees. Wenn der Render-Tree noch nicht aufgebaut wurde, beginnt der Browser nicht mit dem Rendern. Das bedeutet, dass die Seite vollständig leer bleibt, bis alle Render-Blocking-Ressourcen heruntergeladen und ausgewertet wurden. Dies wirkt sich auf Metriken wie den First Contentful Paint und den Largest Contentful Paint aus.
So beheben Sie 'Eliminate render-blocking resources'
Um 'Render-Blocking-Ressourcen' zu beheben, müssen Sie sicherstellen, dass diese Ressourcen nicht mehr Render-Blocking sind. Der einfachste Weg ist, diese Ressourcen einfach zu entfernen. Manchmal blockieren alte, ungenutzte Ressourcen immer noch das Rendern der Seite. Wenn Sie sie nicht entfernen können, sollten Sie sie verschieben.
JavaScript verschieben
JavaScript kann verschoben werden, indem das defer oder async Attribut zum Script-Tag hinzugefügt wird.
//deferred javascript <script defer src="script.js"></script> //async javascript <script async src="script.js"></script>
StyleSheets verschieben
Das Verschieben von Stylesheets kann etwas kniffliger sein. Wenn ein Stylesheet verschoben wird, wird die Seite zuerst ohne die Styles gerendert. Wenn die Styles dann geladen werden, wendet der Browser das Styling an, was zu allen möglichen Flackern und Layout-Shifts (CLS) führt. Deshalb benötigen Sie Inline-, Critical CSS. Critical CSS ist eine Sammlung der Styles, die zum Rendern des sichtbaren Teils der Seite erforderlich sind.
<style>//cricical CSS here</style>
<link rel="preload"
href="css.css"
type="text/css"
as="style"
onload="this.onload=null;this.rel='stylesheet';"/>
Workaround für 'Eliminate render-blocking resources'
Manchmal ist es nicht möglich, diese Render-Blocking-Ressourcen zu eliminieren. Sie haben möglicherweise keinen Zugriff auf das Template oder Ihr CMS benötigt möglicherweise bestimmte Skripte. Es gibt einige Workarounds, um die Auswirkungen dieser Render-Blocking-Ressourcen zu verringern.
- Minimieren und komprimieren Sie Ihre Styles und Skripte.
Minimieren und komprimieren Sie Ihre aktuellen Styles und Skripte. Kleinere Ressourcen haben weniger Auswirkungen auf die Ladeleistung als größere Ressourcen. - Teilen Sie große Dateien in mehrere Dateien auf.
Das Aufteilen großer Dateien in mehrere Dateien kann die Ladezeit für die Ressourcen verkürzen. - Entladen Sie Ressourcen pro Seite.
Wenn eine Ressource nicht von einer Seite entfernt werden kann, bedeutet das nicht, dass sie auf allen Seiten erforderlich ist. WordPress-Plugins neigen beispielsweise dazu, Skripte und Styles zu allen Seiten hinzuzufügen, auch wenn das Plugin auf dieser Seite möglicherweise nicht aktiv ist.
Urgent Fix Required?
Google Search Console failing? I offer rapid-response auditing to identify the failure point within 48 hours.
- 48hr Turnaround
- Rapid Response
- Failure Identification
