JavaScript-Code entfernen, der das Rendering blockiert

Diese Regel gilt, wenn PageSpeed Insights feststellt, dass Ihr HTML-Code im ohne Scrollen sichtbaren Teil Ihrer Seite auf eine blockierende externe JavaScript-Datei verweist.

Übersicht

Bevor der Browser eine Seite rendern kann, muss er die DOM-Struktur erstellen, indem er das HTML-Markup parst. Während dieses Vorgangs muss der Parser jedes Skript beenden und ausführen, bevor der HTML-Code weiter geparst werden kann. Bei einem externen Skript wird der Parser außerdem gezwungen, auf den Download der Ressource zu warten. Dies kann zu einem oder mehreren Netzwerk-Roundtrips führen und die Zeit bis zum ersten Rendering der Seite verzögern. Weitere Informationen zu den Auswirkungen von JavaScript auf den kritischen Rendering-Pfad findest du unter Interaktivität mit JavaScript hinzufügen.

Empfehlungen

Sie sollten die Verwendung von blockierendem JavaScript vermeiden und insbesondere diesen vermeiden, insbesondere externe Skripts, die abgerufen werden müssen, bevor sie ausgeführt werden können. Skripts, die zum Rendern von Seiteninhalten erforderlich sind, können inline eingefügt werden, um zusätzliche Netzwerkanfragen zu vermeiden. Die eingefügten Inhalte müssen jedoch klein sein und schnell ausgeführt werden, um eine gute Leistung zu erzielen. Skripts, die für das erste Rendering nicht kritisch sind, sollten bis zum ersten Rendering asynchron oder aufgeschoben werden. Zur Verbesserung der Ladezeit müssen Sie auch die CSS-Bereitstellung optimieren.

Inline-JavaScript

Externe Blockieren-Skripts zwingen den Browser, auf das Abrufen des JavaScript-Codes zu warten, wodurch möglicherweise ein oder mehrere Netzwerk-Roundtrips hinzugefügt werden, bevor die Seite gerendert werden kann. Bei kleinen externen Skripts können Sie deren Inhalt direkt in das HTML-Dokument einbetten und so die Latenz der Netzwerkanfragen vermeiden. Beispiel: Beachte jedoch, dass das Inline-Format auch die Größe des HTML-Dokuments erhöht und dass der gleiche Skriptinhalt möglicherweise über mehrere Seiten hinweg eingefügt werden muss. Für eine optimale Leistung sollten Sie daher nur kleine Skripts inline einbinden.

JavaScript asynchron machen

JavaScript blockiert standardmäßig die DOM-Konstruktion und verzögert somit die Zeit bis zum ersten Rendering. Um zu verhindern, dass JavaScript den Parser blockiert, verwenden Sie bei externen Skripts das HTML-Attribut async. Beispiel: 
<script async src="my.js">
Weitere Informationen zu asynchronen Skripts finden Sie unter Parser-Blockierung und asynchrones JavaScript. Es ist nicht garantiert, dass asynchrone Skripts in der angegebenen Reihenfolge ausgeführt werden. Sie sollten auch nicht document.write verwenden. Skripts, die von der Ausführungsreihenfolge abhängig sind oder auf das DOM- oder CSSOM-Element der Seite zugreifen oder diese ändern müssen, müssen unter Umständen aufgrund dieser Einschränkungen neu geschrieben werden.

JavaScript-Code später laden

Das Laden und Ausführen von Skripts, die nicht für das erste Seiten-Rendering erforderlich sind, können verschoben werden, bis das erste Rendering oder andere wichtige Teile der Seite fertig geladen sind. Dadurch lassen sich Ressourcenkonflikte reduzieren und die Leistung verbessern.

FAQ

Was muss ich beim Verwenden einer JavaScript-Bibliothek wie jQuery beachten?
Viele JavaScript-Bibliotheken, z. B. JQuery, werden verwendet, um die Seite zu optimieren und zusätzliche Interaktivität, Animationen und andere Effekte hinzuzufügen. Viele dieser Verhaltensweisen können jedoch nach dem Rendern des ohne Scrollen sichtbaren Inhalts problemlos hinzugefügt werden. Überprüfen Sie, ob derartiger JavaScript-Code asynchron ist, oder laden Sie das Laden auf.
Was passiert, wenn ich ein JavaScript-Framework zum Erstellen der Seite verwende?
Wenn der Inhalt der Seite von clientseitigem JavaScript erstellt wird, solltest du die relevanten JavaScript-Module prüfen, um zusätzliche Netzwerk-Roundtrips zu vermeiden. Ebenso kann durch das serverseitige Rendern die Leistung beim ersten Laden erheblich verbessert werden: Rendern Sie JavaScript-Vorlagen auf dem Server, um ein schnelles erstes Rendering zu ermöglichen, und verwenden Sie dann clientseitige Vorlagen nach dem Laden der Seite. Weitere Informationen zum serverseitigen Rendering finden Sie unter http://youtu.be/VKTWdaupft0?t=14m28s.

Feedback

War diese Seite hilfreich?