JavaScript-Code entfernen, der das Rendering blockiert

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

Überblick

Bevor der Browser eine Seite rendern kann, muss er die DOM-Struktur durch Parsen des HTML-Markups erstellen. Während dieses Prozesses muss der Parser jedes Mal, wenn er auf ein Skript stößt, dieses beenden und ausführen, bevor er mit dem Parsen des HTML-Codes fortfahren 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 Rendern der Seite verzögern. Weitere Informationen dazu, wie JavaScript den kritischen Renderingpfad beeinflusst, findest du unter Interaktivität mit JavaScript hinzufügen.

Empfehlungen

Vermeiden und verwenden Sie das blockierende JavaScript, 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. Der Inhalt der Inline-Inhalte muss jedoch klein und schnell ausgeführt werden, um eine gute Leistung zu erzielen. Skripts, die für das anfängliche Rendering nicht wichtig sind, sollten asynchron oder bis nach dem ersten Rendering verschoben werden. Zur Verbesserung der Ladezeit müssen Sie außerdem die CSS-Bereitstellung optimieren.

Inline-JavaScript

Externe Blockierskripts zwingen den Browser dazu, auf das Abrufen von JavaScript zu warten. Dadurch kann ein oder mehrere Netzwerk-Roundtrips hinzugefügt werden, bevor die Seite gerendert werden kann. Wenn die externen Skripts klein sind, können Sie deren Inhalt direkt in das HTML-Dokument einfügen und so die Latenz bei Netzwerkanfragen vermeiden. Wenn das HTML-Dokument beispielsweise so aussieht: 
<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
Die Ressource small.js sieht so aus: 
  /* contents of a small JavaScript file */
Dann können Sie das Skript so inline einfügen: 
<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
Durch das Einfügen des Skriptinhalts wird die externe Anfrage für small.js eliminiert. Der Browser kann das erste Rendering dann schneller bereitstellen. Beachten Sie jedoch, dass das HTML-Dokument durch Inline-Anzeigen auch größer wird und dass derselbe Skriptinhalt möglicherweise auf mehreren Seiten eingefügt werden muss. Daher sollten Sie kleine Skripts nur inline einfügen, um eine optimale Leistung zu erzielen.

JavaScript asynchron machen

Standardmäßig blockiert JavaScript die DOM-Erstellung und verzögert somit die Zeit bis zum ersten Rendering. Um zu verhindern, dass JavaScript den Parser blockiert, empfehlen wir, das HTML-Attribut async für externe Skripts zu verwenden. Beispiel: 
<script async src="my.js">
Weitere Informationen zu asynchronen Skripts finden Sie unter Parserblockierung und asynchrones JavaScript. Bei asynchronen Skripts kann nicht garantiert werden, dass sie in der angegebenen Reihenfolge ausgeführt werden. Sie sollten daher nicht document.write verwenden. Skripts, die von der Ausführungsreihenfolge abhängig sind oder auf das DOM oder CSSOM der Seite zugreifen oder es ändern müssen, müssen unter Umständen neu geschrieben werden, um diese Einschränkungen zu berücksichtigen.

JavaScript-Code später laden

Das Laden und Ausführen von Skripts, die für das erste Rendering der Seite nicht erforderlich sind, kann verzögert werden, bis das erste Rendering oder andere wichtige Teile der Seite fertig geladen sind. So lassen sich Ressourcenkonflikte reduzieren und die Leistung verbessern.

Häufig gestellte Fragen

Was muss ich beim Verwenden einer JavaScript-Bibliothek wie jQuery beachten?
Viele JavaScript-Bibliotheken wie JQuery werden verwendet, um die Seite durch zusätzliche Interaktivität, Animationen und andere Effekte zu optimieren. Viele dieser Funktionen können jedoch problemlos hinzugefügt werden, nachdem der ohne Scrollen sichtbare Inhalt gerendert wurde. Prüfen Sie, ob solches JavaScript asynchron wird, oder verschieben Sie das Laden.
Was ist, wenn ich ein JavaScript-Framework zum Erstellen der Seite verwende?
Wenn der Inhalt der Seite mit clientseitigem JavaScript erstellt wird, prüfen Sie, ob die relevanten JavaScript-Module inline eingefügt werden, um zusätzliche Netzwerk-Roundtrips zu vermeiden. Ebenso kann die Nutzung des serverseitigen Renderings die Leistung beim ersten Laden der Seite erheblich verbessern: Rendere JavaScript-Vorlagen auf dem Server, um ein schnelles erstes Rendering zu ermöglichen, und verwende dann clientseitige Vorlagen, sobald die Seite geladen wurde. Weitere Informationen zum serverseitigen Rendering finden Sie unter http://youtu.be/VKTWdaupft0?t=14m28s.

Feedback

War diese Seite hilfreich?