JavaScript-Code entfernen, der das Rendern 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

Vor dem Rendern einer Seite für den Nutzer muss der Browser die Seite parsen. Wenn er beim Parsen auf ein blockierendes externes Skript stößt, muss er anhalten und diesen JavaScript-Code herunterladen. Dabei wird jedes Mal ein Netzwerk-Roundtrip hinzugefügt, wodurch das erste Rendern der Seite verzögert wird.

Empfehlungen

JavaScript-Code zum Rendern des ohne Scrollen sichtbaren Bereichs sollte inline platziert werden. JavaScript-Code zum Hinzufügen zusätzlicher Funktionen zur Seite sollte erst nach der Bereitstellung des ohne Scrollen sichtbaren Inhalts ausgeführt werden. Wenn dadurch die Ladezeit verkürzt werden soll, müssen Sie auch die CSS-Bereitstellung optimieren.

Kurzen JavaScript-Code inline einfügen

Wenn die externen Skripts kurz sind, können Sie sie direkt in das HTML-Dokument aufnehmen. Wenn kleine Dateien auf diese Weise inline eingefügt werden, kann der Browser mit dem Rendern der Seite fortfahren. Wenn das HTML-Dokument zum Beispiel so aussieht:

<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

und die Ressource small.js so:

  /* contents of a small JavaScript file */

können Sie das Skript folgendermaßen inline einfügen:

<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

Dadurch wird die externe Anforderung von small.js vermieden, indem die Datei inline im HTML-Dokument platziert wird.

JavaScript-Code später laden

Um zu vermeiden, dass JavaScript-Code das Laden einer Seite blockiert, sollten Sie beim Laden des JavaScript-Codes das HTML-Attribut "async" verwenden. Beispiel:

<script async src="my.js">

Wenn Ihre JavaScript-Ressourcen "document.write" verwenden, kann das asynchrone Laden problematisch sein. Skripts mit "document.write" sollten so umgeschrieben werden, dass ein anderes Verfahren verwendet wird.

Wenn Ihre Seite voneinander abhängige Skripts lädt, muss außerdem beim asynchronen Laden des JavaScript-Codes darauf geachtet werden, dass Ihre Anwendung Skripts in der richtigen Abhängigkeitsreihenfolge lädt.

Häufig gestellte Fragen

Was muss ich beim Verwenden einer JavaScript-Bibliothek wie jQuery beachten?
Viele JavaScript-Bibliotheken, wie z. B. jQuery, werden zur Anreicherung von Seiten mit zusätzlichen interaktiven Elementen, Animationen und anderen Effekten verwendet. Viele dieser Funktionen können aber auch ganz einfach nach dem Rendern des ohne Scrollen sichtbaren Inhalts hinzugefügt werden. Überprüfen Sie, ob Sie solchen JavaScript-Code nach dem Laden der Seite laden und ausführen lassen können.
Was muss ich beim Erstellen einer Seite mithilfe eines JavaScript-Frameworks beachten?
Wenn der Inhalt der Seite über clientseitigen JavaScript-Code erstellt wird, prüfen Sie die Möglichkeit, die entsprechenden JavaScript-Module inline einzufügen, um zusätzliche Netzwerk-Roundtrips zu vermeiden. Ein serverseitiges Rendern kann die für das erste Laden der Seite erforderliche Zeit ebenfalls bedeutend verkürzen: Rendern Sie JavaScript-Vorlagen auf dem Server, fügen Sie die Ergebnisse inline in den HTML-Code ein und verwenden Sie anschließend clientseitige Vorlagen nach dem Laden der Anwendung. Weitere Informationen zum serverseitigen Rendern finden Sie unter http://youtu.be/VKTWdaupft0?t=14m28s.