Nicht verwendetes JavaScript entfernen

Nicht verwendetes JavaScript kann die Ladezeit der Seite verlangsamen:

  • Wenn der JavaScript-Code render-blocking, muss der Browser das Skript herunterladen, parsen, kompilieren und auswerten, bevor es mit allen anderen Aufgaben fortfahren kann, die zum Rendern der Seite erforderlich sind.
  • Selbst wenn das JavaScript asynchron ist (d. h. nicht renderblockierend), konkurriert der Code beim Herunterladen mit anderen Ressourcen um die Bandbreite, was erhebliche Auswirkungen auf die Leistung hat. Das Senden von nicht verwendetem Code über das Netzwerk ist auch für mobile Nutzer verschwendet, die keine unbegrenzten Datentarife haben.

Lighthouse meldet jede JavaScript-Datei mit mehr als 20 Kibibyten ungenutzten Codes:

Screenshot der Prüfung.
Klicken Sie auf einen Wert in der Spalte URL, um den Quellcode des Scripts in einem neuen Tab zu öffnen.

Nicht verwendetes JavaScript entfernen

Nicht verwendetes JavaScript erkennen

Auf dem Tab Abdeckung in den Chrome-Entwicklertools können Sie eine Zeile für Zeile Aufschlüsselung des nicht verwendeten Codes aufrufen.

Mit der Klasse Coverage in Puppeteer können Sie das Erkennen nicht verwendeter und das Extrahieren verwendeter Codezeilen automatisieren.

Build-Tool zur Unterstützung beim Entfernen nicht verwendeten Codes

Mit den folgenden Tooling.Report-Tests können Sie herausfinden, ob Ihr Bundler Funktionen unterstützt, mit denen sich ungenutzter Code leichter vermeiden oder entfernen lässt:

Stackspezifische Anleitung

Angular

Wenn Sie Angular CLI verwenden, müssen Sie Quellzuordnungen in den Produktions-Build aufnehmen, um Ihre Bundles zu prüfen.

Drupal

Sie können ungenutzte JavaScript-Assets entfernen und nur die benötigten Drupal-Bibliotheken zu relevanten Seiten oder Seitenkomponenten hinzufügen. Weitere Informationen finden Sie in der Drupal-Dokumentation. Wenn Sie die angehängten Bibliotheken ermitteln möchten, über die irrelevantes JavaScript hinzugefügt wird, können Sie das Prüftool zur Codeabdeckung in den Chrome-Entwicklertools verwenden. Das entsprechende Design oder Modul können Sie anhand der URL des Skripts erkennen, wenn die JavaScript-Aggregation auf Ihrer Drupal-Website deaktiviert ist. Suchen Sie in der Liste nach Designs oder Modulen mit vielen Skripts, bei denen im Prüftool zur Codeabdeckung viel nicht verwendeter Code (markiert in Rot) angezeigt wird. Einem Design oder Modul sollte nur dann eine Skriptbibliothek zugeordnet werden, wenn sie auch tatsächlich auf der Seite verwendet wird.

Joomla

Prüfen Sie, ob Sie Joomla-Erweiterungen, über die nicht verwendetes JavaScript auf Ihre Seite geladen wird, entfernen oder durch alternative Plug-ins ersetzen können.

Magento

Deaktivieren Sie die integrierte JavaScript-Bundle-Erstellung von Magento.

React

Wenn Sie nicht serverseitig rendern lassen, können Sie Ihre JavaScript-Bundles mit React.lazy() aufteilen. Andernfalls können Sie den Code mithilfe einer Drittanbieterbibliothek wie loadable-components aufteilen.

Vue

Wenn Sie nicht serverseitig rendern und den Vue-Router verwenden, teilen Sie die Bundles nach Lazy-Loading-Routen auf.

WordPress

Reduzieren oder wechseln Sie die Anzahl der WordPress-Plug-ins, über die nicht verwendetes JavaScript auf Ihre Seite geladen wird.

Ressourcen