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.
Gründe für Fehler bei der Prüfung auf nicht verwendetes JavaScript
Lighthouse meldet jede JavaScript-Datei mit mehr als 20 Kibibyten ungenutzten Codes:
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
- Quellcode für die Prüfung Entfernen Sie nicht verwendeten Code
- Nicht verwendeten Code entfernen
- Interaktivität mit JavaScript hinzufügen
- Code-Splitting
- Elimination von Dead Code
- Nicht vollständig importierter Code
- Nicht verwendetes JavaScript- und CSS-Code mit dem Tab „Abdeckung“ in den Chrome-Entwicklertools finden
- class:
Coverage