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:
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
- Quellcode für die Prüfung Nicht verwendeten Code entfernen
- Nicht verwendeten Code entfernen
- Interaktivität dank JavaScript
- Codeaufteilung
- Eliminierung von Dead Code
- Fehlerhafter importierter Code
- Ungenutzten JavaScript- und CSS-Code über den Tab „Abdeckung“ in den Chrome-Entwicklertools finden
- Klasse:
Coverage