Beheben Sie die 'reduce unused JavaScript' Lighthouse-Warnung

Was ist die 'reduce unused JavaScript' Lighthouse-Warnung?

Was ist die reduce unused JavaScript Warnung in Lighthouse? Lighthouse markiert Skripte, die mehr als 20kb an ungenutzten Bytes haben.

Die 'reduce unused JavaScript'-Warnung wirkt sich direkt auf den Lighthouse-Score aus.

Ungenutztes JavaScript ist auch ziemlich wichtig für das Bestehen der Core Web Vitals, da ungenutztes JavaScript Kosten verursacht!. Es kann um Netzwerkressourcen konkurrieren und den Main Thread blockieren. Dies wird die Core Web Vitals verlangsamen, insbesondere den Largest Contentful Paint (LCP) und den Interaction to Next Paint (INP).

Was verursacht ungenutztes JavaScript?

Ungenutztes JavaScript kann viele Gründe haben. Ungenutztes JavaScript wird normalerweise verursacht durch:

• Zu viele  Plugins in Ihrem CMS.
• Toten Code.
• Schlechte Codierung.
• Unbeschränkten Tag Manager Zugriff
• Unnötige Importe
  
• Code, der sofort geladen wurde, aber direkt vor der Verwendung hätte geladen werden können.

Wie wirkt sich 'unused JavaScript' auf PageSpeed aus?

Ungenutztes JavaScript wirkt sich direkt auf die Lighthouse-Metriken aus. Es macht das Rendern einer Webseite unnötig kompliziert, was es fast unmöglich macht, diesen hohen Lighthouse-Score zu erreichen. Ihr Browser muss mehr Arbeit leisten, bevor die Webseite auf dem Bildschirm angezeigt werden kann. 

Beachten Sie jedoch, dass ein Lighthouse-Score kein Core Web Vitals Score ist. Die Core Web Vitals werden mit CrUX-Daten gemessen.

Es gibt 2 Probleme mit ungenutztem JavaScript.

• Zunächst einmal muss dieses JavaScript heruntergeladen werden. Diese Skripte werden um Netzwerkressourcen konkurrieren. Dies kann einen großen Einfluss auf den Largest Contentful Paint (LCP) haben
• Zweitens muss der Browser all dieses JavaScript ausführen. Während ein Browser dieses JavaScript ausführt, hört er im Grunde auf, irgendetwas anderes zu tun und kann nicht auf Benutzereingaben reagieren oder das Parsen der Seite fortsetzen. Dies wirkt sich sowohl auf den Largest Contentful Paint (LCP) als auch auf den Interaction to Next Paint (INP) aus

Wie man 'unused JavaScript' findet

Um 'unused JavaScript' zu finden, können Sie das Lighthouse-Audit lesen oder das 'Chrome Coverage Tool' verwenden, um eine vollständige Liste aller JavaScript-Dateien und deren Menge an ungenutzten Bytes zu erhalten.

Öffnen Sie die Chrome Dev Tools mit dem ctrl-shift-i Shortcut. Verwenden Sie dann den ctr-shift-p Shortcut, um das Befehlsmenü zu öffnen und geben Sie 'coverage' ein. Wählen Sie 'Start instrumenting coverage and reload page'. Dies wird die Seite neu laden und Ihnen die Menge an ungenutzten Bytes für alle Dateien anzeigen, die CSS- oder JavaScript-Code enthalten.

Wie man 'reduce unused JavaScript' behebt

Um die 'reduce unused JavaScript'-Warnung zu beheben, müssen Sie zuerst deren Ursprung zurückverfolgen. Lighthouse gibt Ihnen einen Hinweis darauf, welche Skripte eine hohe Menge an ungenutzten Bytes haben. Es gibt 5 übliche Verdächtige:

1. Entfernen Sie unnötige oder triviale Plugins. Wenn Sie ein Plugin-basiertes CMS wie WordPress verwenden, ist die mit Abstand einfachste und effektivste Methode zum Bereinigen Ihres ungenutzten Codes das Entfernen von Plugins, die Sie nicht benötigen oder die leicht durch eine einfache Codeänderung ersetzt werden können (zum Beispiel Ihr Analytics-Plugin, Chat-Plugin, Social-Share-Plugin)
   
2. Entfernen Sie toten Code. Toter Code ist Code, der von der aktuellen Website nicht mehr verwendet wird. Er nimmt nur Platz und Bandbreite in Anspruch. Wenn Sie eine Website besitzen, schlage ich vor, mindestens zweimal im Jahr einen Marathon für toten Code einzuplanen, bei dem Sie Ihre benutzerdefinierten Skripte genau unter die Lupe nehmen und Code entfernen, der nicht mehr benötigt wird.
   
3. Schreiben Sie schlecht codierte Skripte neu.  Schlecht codierte Skripte neigen dazu, viele unnötige Überprüfungen und if/else-Anweisungen zu haben. Diese Überprüfungen werden möglicherweise nie verwendet und bestimmte if/else-Bedingungen sind möglicherweise nicht erforderlich. Wenn Sie viele ältere Skripte haben oder Ihr aktueller JavaScript-Entwickler besser ist als der vorherige, ist es möglicherweise eine gute Idee, ältere Skripte noch einmal zu überarbeiten.
   
4. Bereinigen Sie Ihren Tag Manager und beschränken Sie den Zugriff. Tag Manager ist eine häufige Quelle für ungenutzten Code, insbesondere wenn weniger technische Abteilungen Tags hinzufügen dürfen. Oft vergessen sie, ihre ungenutzten Tags zu entfernen, und der Tag Manager wird zur Hauptquelle für ungenutztes JavaScript.
5. Entfernen Sie unnötige Importe (NextJS, React, VUE etc.). Die meisten SPA-Umgebungen importieren zu viele Komponenten / Funktionen. Überprüfen Sie Ihre Importe doppelt und entfernen Sie ungenutzten Code. 
6. Lazy Load Routen oder Komponenten  (NextJS, React, VUE etc.). Das Lazy Loading von Komponenten wird diese Komponenten nur importieren, sobald sie benötigt werden. Dies entfernt sofort die 'Lighthouse-Warnung für ungenutztes JavaScript' für diese Seiten, auf denen Sie ungenutzten Code lazy laden.
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 sofort. Und seien wir ehrlich, 98% Ihrer Besucher werden sich sowieso nicht anmelden. Also sind diese Skripte größtenteils ungenutzt. Es wäre sinnvoller, dieses Skript zu laden, wenn der Besucher mit dem Formular interagiert, und nicht während des Seitenladens.

Workaround für 'reduce unused JavaScript'

Manchmal ist es nicht möglich, alle Warnungen für ungenutztes JavaScript zu beheben. In diesem Fall könnten Sie versuchen, die Auswirkungen dieser ungenutzten Ressourcen zu minimieren

- Laden Sie alle JavaScript-Ressourcen von Ihrer Hauptdomain (dies vermeidet eine neue Netzwerkverbindung)
- Preloaden Sie wichtigere Ressourcen wie Ihre Schriftarten und das LCP-Bildelement.
- Verzögern Sie so viel JavaScript wie möglich
- Platzieren Sie weniger wichtiges JavaScript am Ende der Seite