Reduce Unused JavaScript in Lighthouse beheben

Was ist die Lighthouse-Warnung "Reduce unused JavaScript"?

Zuletzt überprüft von Arjen Karel im März 2026

Lighthouse markiert jede JavaScript-Datei mit mehr als 20 KiB ungenutztem Code. Wenn Sie diese Warnung sehen, lädt und führt Ihre Seite JavaScript herunter, das sie für den aktuellen Seitenaufbau nicht benötigt.

Diese Warnung wirkt sich direkt auf Ihren Lighthouse Performance Score aus. Aber noch wichtiger ist, dass ungenutztes JavaScript Ihren echten Nutzern schadet. Laut dem 2025 Web Almanac liefert die durchschnittliche mobile Seite 646 KB JavaScript aus, wovon 251 KB auf der Seite, auf der es geladen wird, ungenutzt bleiben. Beim 90. Perzentil steigt diese Zahl auf 931 KB verschwendetes JavaScript.

Gleichzeitig stieg die Total Blocking Time auf mobilen Geräten laut dem Performance-Kapitel des 2025 Web Almanac im Jahresvergleich um 58% auf einen Median von 1.916 ms. JavaScript-Payloads wachsen schneller, als Geräte schneller werden. Bei den von CoreDash überwachten Websites erzielen Origins (Domains), die ihr ungenutztes JavaScript unter 100 KB halten, in 93% der Fälle ein "gut" bei INP, verglichen mit 64% bei Origins, die 400 KB überschreiten.

Was verursacht ungenutztes JavaScript?

Ungenutztes JavaScript kann viele Ursachen haben. Die häufigsten sind:

• Zu viele Plugins in Ihrem CMS.
• Toter Code (dead code), der von der aktuellen Website nicht mehr verwendet wird.
• Schlecht geschriebene Skripte mit unnötigen Überprüfungen und Verzweigungen.
• Uneingeschränkter Zugriff auf den Tag Manager, bei dem Marketingteams Tags hinzufügen und vergessen, sie zu entfernen.
• Unnötige Imports: Das Einbinden einer kompletten Bibliothek, wenn Sie nur eine Funktion verwenden.
• Code, der auf jeder Seite ausgeführt wird, aber nur auf bestimmten Routen benötigt wird.
• Sofort geladene Skripte, die erst kurz vor ihrer Verwendung hätten geladen werden können.

Wie wirkt sich ungenutztes JavaScript auf die Core Web Vitals aus?

Ungenutztes JavaScript beeinträchtigt Ihre Performance auf zwei Arten:

• Netzwerk-Konkurrenz. Jede JavaScript-Datei muss heruntergeladen werden. Diese Anfragen konkurrieren um Bandbreite mit Ihrem LCP-Bild, Ihren Schriftarten und Ihrem CSS. Bei einer mobilen Verbindung kann diese Verzögerung Ihren Largest Contentful Paint weit über den Schwellenwert von 2,5 Sekunden hinaus schieben.
• Blockierung des Haupt-Threads. Der Browser muss all dieses JavaScript parsen, kompilieren und ausführen. Während er das tut, kann er nicht auf Benutzereingaben reagieren oder das Rendern der Seite fortsetzen. Dies wirkt sich direkt sowohl auf LCP als auch auf INP aus.

Denken Sie daran, dass ein Lighthouse-Score kein Core Web Vitals-Score ist. Die Core Web Vitals werden mit Felddaten von echten Benutzern (CrUX) gemessen. Lighthouse ist ein Diagnosetool, das Ihnen hilft, Probleme zu finden, aber Ihre tatsächliche Performance ist das, was Ihre Besucher tatsächlich erleben. Sie können Ihre Feld-Performance mit Real User Monitoring überprüfen.

Wie man ungenutztes JavaScript findet

Es gibt drei Möglichkeiten, ungenutztes JavaScript auf Ihrer Seite zu identifizieren:

1. Lesen Sie das Lighthouse-Audit

Lighthouse listet jede JavaScript-Datei auf, die mehr als 20 KiB ungenutzten Code enthält. Es zeigt die gesamten Bytes, die ungenutzten Bytes und die potenziellen Einsparungen an. Das ist Ihr Ausgangspunkt. Beachten Sie, dass Lighthouse 13 (Oktober 2025) zu einem auf Insights (Erkenntnissen) basierenden Audit-Format übergegangen ist, aber die Prüfung auf ungenutztes JavaScript ist immer noch da.

2. Verwenden Sie das Chrome Coverage Tool

Das Coverage Tool liefert Ihnen eine zeilenweise Aufschlüsselung von genutztem gegenüber ungenutztem Code für jede JavaScript- und CSS-Datei auf der Seite.

Öffnen Sie die Chrome DevTools mit Strg+Umschalt+I (oder Cmd+Option+I auf dem Mac). Verwenden Sie dann Strg+Umschalt+P, um das Befehlsmenü zu öffnen, und tippen Sie coverage ein. Wählen Sie Show Coverage (Coverage anzeigen) und klicken Sie dann auf den Neu laden-Button, um mit der Instrumentierung zu beginnen. Nachdem die Seite geladen wurde, sehen Sie jede Datei mit ihrem Prozentsatz an ungenutzten Bytes.

Wechseln Sie in den "Per block" Coverage-Modus (Dropdown-Menü oben im Panel) für detailliertere Ergebnisse. Die Blockebenen-Abdeckung erkennt ungenutzte Verzweigungen innerhalb von Funktionen, nicht nur, ob eine Funktion überhaupt aufgerufen wurde.

Klicken Sie auf eine beliebige Zeile, um die Datei im Sources-Panel zu öffnen. Blaue Zeilen sind genutzter Code. Rote Zeilen sind ungenutzt. Dies sagt Ihnen genau, welche Funktionen und Verzweigungen während des Ladens der Seite nie ausgeführt wurden.

3. Analysieren Sie Ihre Bundles

Wenn Sie einen Bundler wie webpack, Rollup oder Vite verwenden, nutzen Sie einen Bundle Analyzer, um zu visualisieren, was sich in Ihren JavaScript-Dateien befindet. Tools wie webpack-bundle-analyzer und source-map-explorer zeigen eine Treemap (Kacheldiagramm) jedes Moduls in Ihrem Bundle, was es offensichtlich macht, wenn eine große Bibliothek für ein kleines Feature eingebunden wird.

Ungenutzt bedeutet nicht immer nicht benötigt

Denken Sie daran, dass "ungenutzt" auf einer Seite nicht "nicht benötigt" bedeutet. Ein Skript, das Ihr Checkout-Formular antreibt, wird auf Ihrer Homepage als 100% ungenutzt angezeigt. Das bedeutet nicht, dass Sie es löschen sollten. Es bedeutet, dass Sie es nicht auf der Homepage laden sollten.

Das ist es, was Code Splitting löst: Jede Route lädt nur das JavaScript, das sie tatsächlich benötigt. Wenn Sie große Mengen an "ungenutztem" JavaScript sehen und Ihre Website eine Single Page Application ist, ist die Lösung fast immer ein besseres Code Splitting auf Routen-Ebene, nicht das Löschen von Code.

Wie man "Reduce unused JavaScript" behebt

Um die Warnung "Reduce unused JavaScript" zu beheben, müssen Sie zunächst nachverfolgen, woher die Verschwendung kommt. Lighthouse sagt Ihnen, welche Skripte eine hohe Menge an ungenutzten Bytes haben. Hier sind 7 Möglichkeiten, es zu reduzieren:

1. Entfernen Sie nicht benötigte Plugins. Wenn Sie ein CMS wie WordPress verwenden, ist der einfachste Gewinn das Entfernen von Plugins, die Sie nicht benötigen, oder das Ersetzen trivialer Plugins durch ein paar Zeilen Code. Ihr Analytics-Plugin, Social-Share-Buttons und Chat-Widget sind häufige Übeltäter.
2. Entfernen Sie toten Code. Toter Code ist Code, der von der aktuellen Website nicht mehr verwendet wird. Planen Sie mindestens zweimal im Jahr ein Audit auf toten Code ein. Tools wie Knip können die Erkennung ungenutzter Exporte und Abhängigkeiten in JavaScript-Projekten automatisieren.
3. Führen Sie Tree Shaking für Ihre Bundles durch. Tree Shaking entfernt ungenutzte Exporte beim Build-Prozess. Damit es funktioniert, benötigen Sie die ES-Modul-Syntax (import/export), nicht CommonJS (require). Fügen Sie "sideEffects": false zu Ihrer package.json hinzu, damit Ihr Bundler ungenutzten Code aggressiv entfernen kann. Importieren Sie nur, was Sie brauchen:

   // Schlecht: importiert die gesamte Bibliothek (70+ KB)
   import _ from 'lodash';
   const result = _.debounce(fn, 300);
   
   // Gut: importiert nur debounce (~1 KB mit Tree Shaking)
   import { debounce } from 'lodash-es';
   const result = debounce(fn, 300);

4. Wenden Sie Code Splitting für Ihre Routen an. Laden Sie nur das JavaScript, das jede Seite tatsächlich benötigt. Verwenden Sie das dynamische import(), um Ihre Bundles nach Route oder nach Feature aufzuteilen:

   // Anstatt alles vorab zu importieren:
   import { validateForm } from './formValidation.js';
   
   // Laden Sie es nur, wenn der Benutzer mit dem Formular interagiert:
   document.querySelector('form').addEventListener('focus', async () => {
     const { validateForm } = await import('./formValidation.js');
     validateForm();
   }, { once: true });

   In React verwenden Sie React.lazy() mit <Suspense> für Splitting auf Komponenten-Ebene. Im Next.js App Router senden React Server Components standardmäßig null JavaScript an den Client. In Vue verwenden Sie defineAsyncComponent() oder dynamische Imports im Vue Router.

5. Räumen Sie Ihren Tag Manager auf und schränken Sie den Zugriff ein. Der Tag Manager ist eine häufige Quelle für ungenutzten Code, besonders wenn Marketingteams Tags hinzufügen, ohne alte zu entfernen. Überprüfen Sie Ihren Tag Manager Container regelmäßig. Jedes Tag, das beim Laden der Seite ausgelöst wird, fügt JavaScript hinzu, das um Ressourcen konkurriert.
6. Entfernen Sie unnötige Imports. In React-, Vue- und Next.js-Projekten überprüfen Sie Ihre Import-Anweisungen. Importieren Sie eine gesamte Komponentenbibliothek, obwohl Sie nur zwei Komponenten verwenden? Ziehen Sie moment.js (330 KB) heran, wenn die native Intl-API oder eine 2 KB-Alternative wie dayjs ausreichen würde?
7. Verzögern Sie das Laden von nicht-kritischen Skripten. Manchmal benötigen Sie ein Skript (zum Beispiel, um ein Formular abzusenden), aber Sie benötigen es nicht während des Ladens der Seite. Laden Sie es, wenn der Benutzer es tatsächlich benötigt. Ein Skript, das bei Interaktion statt beim Laden der Seite lädt, ist im Lighthouse-Audit nicht länger "ungenutztes JavaScript". Siehe auch async vs defer, um den Unterschied zwischen den beiden Lade-Strategien zu verstehen.

Wenn Sie es nicht vollständig beheben können

Manchmal können Sie nicht das gesamte ungenutzte JavaScript entfernen. Skripte von Drittanbietern, A/B-Testing-Tools und Werbenetzwerke liefern oft große Bundles aus, über die Sie keine Kontrolle haben. Minimieren Sie in diesem Fall ihre Auswirkungen:

• Hosten Sie Skripte von Drittanbietern selbst (self-host) auf Ihrer Hauptdomain, wo dies möglich ist. Dies vermeidet die Kosten für ein neues DNS-Lookup und eine TCP-Verbindung für jede externe Domain.
• Priorisieren Sie kritische Ressourcen. Preloaden Sie Ihr LCP-Bild und kritische Schriftarten, damit sie in der Netzwerkwarteschlange nicht hinter JavaScript-Downloads stecken bleiben.
• Verzögern (defer) Sie so viel JavaScript wie möglich. Verschieben Sie nicht-kritische Skripte mit defer, async oder verzögertem Laden aus dem kritischen Rendering-Pfad.
• Verwenden Sie fetchpriority="low" bei nicht wesentlichen Skript-Ressourcen, um dem Browser mitzuteilen, dass sie warten können.
• Überwachen Sie Ihre Felddaten. Verwenden Sie Real User Monitoring, um zu überprüfen, ob Ihre Änderungen das Erlebnis für echte Benutzer tatsächlich verbessert haben und nicht nur den Lighthouse-Score.