Nicht verwendetes JavaScript entfernen

Ungenutztes JavaScript kann die Seitenladegeschwindigkeit verlangsamen:

  • Wenn der JavaScript-Code das Rendering blockiert, muss der Browser das Skript herunterladen, parsen, kompilieren und auswerten, bevor es mit allen anderen Arbeiten fortfahren kann, die zum Rendern der Seite erforderlich sind.
  • Selbst wenn der JavaScript-Code asynchron ist (also nicht blockiert), konkurriert der Code während des Downloads mit anderen Ressourcen um Bandbreite, was erhebliche Auswirkungen auf die Leistung hat. Das Senden von ungenutztem Code über das Netzwerk ist auch Verschwendung für mobile Nutzer, die keine unbegrenzten Datentarife haben.

So schlägt die Prüfung nicht verwendeter JavaScripts fehl

Lighthouse kennzeichnet jede JavaScript-Datei mit mehr als 20 Kibibyte an nicht verwendetem Code:

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

So entfernen Sie nicht verwendetes JavaScript

Nicht verwendetes JavaScript erkennen

Auf dem Tab Abdeckung in den Chrome-Entwicklertools finden Sie eine zeilenweise Aufschlüsselung des nicht verwendeten Codes.

Mit der Klasse Coverage in Puppeteer können Sie den Prozess zum Erkennen von nicht verwendetem Code und zum Extrahieren von verwendetem Code automatisieren.

Erstellungstool zur Unterstützung des Entfernens von nicht verwendetem Code

Prüfen Sie die folgenden Tooling.Report-Tests, um herauszufinden, ob Ihr Bundler Funktionen unterstützt, mit denen nicht verwendeter Code leichter vermieden oder entfernt werden kann:

Stackspezifische Anleitung

Angular

Wenn Sie Angular CLI verwenden, fügen Sie Quellzuordnungen in Ihren Produktions-Build ein, um Ihre Bundles zu prüfen.

Drupal

Entfernen Sie gegebenenfalls nicht verwendete JavaScript-Assets und hängen Sie nur die benötigten Drupal-Bibliotheken an die entsprechende Seite oder Komponente einer Seite an. Weitere Informationen finden Sie unter Bibliothek definieren.

Joomla

Sie können die Anzahl der Joomla-Erweiterungen, über die nicht verwendetes JavaScript auf Ihre Seite geladen wird, reduzieren oder durch andere ersetzen.

Magento

Deaktiviere die integrierte JavaScript-Bundle-Erstellung von Magento.

React

Wenn du nicht serverseitig renderst, teile deine JavaScript-Bundles mit React.lazy(). Andernfalls können Sie Code mithilfe einer Drittanbieterbibliothek wie loadable-components aufteilen.

Vue

Wenn Sie nicht serverseitig rendern und den Vue-Router verwenden, teilen Sie die Pakete mithilfe von Lazy Loading-Routen auf.

WordPress

Sie können die Anzahl der WordPress-Plug-ins, über die nicht verwendetes JavaScript auf Ihre Seite geladen wird, reduzieren oder ändern.

Ressourcen