Ungenutztes JavaScript

Silktide lädt Ihre Seiten in einem echten Browser und misst, wie viel von jedem Skript tatsächlich ausgeführt wird, während die Seite lädt. Skripte mit viel ungenutztem Code werden gemeldet, zusammen mit der potenziellen Einsparung.

Warum das wichtig ist

Ungenutztes kostet Ihre Besucher doppelt: Einmal beim Herunterladen und noch einmal, wenn der Browser Code parst und kompiliert, der nie ausgeführt wird. Auf Smartphones überwiegt diese zweite Belastung - ein Mittelklasse-Smartphone kann um ein Mehrfaches länger damit beschäftigt sein, ein Skript zu verarbeiten, als es herunterzuladen; in dieser Zeit kann die Seite nicht auf Tippen oder Scrollen reagieren.

Ungenutzter Code sammelt sich genauso an wie ungenutztes CSS: Frameworks und Bibliotheken liefern Funktionen, die Sie nicht nutzen, und alter Code wird selten entfernt. Jeder Besucher zahlt dafür bei jedem Seitenaufruf.

So beheben Sie das Problem

Entfernen Sie Skripte, die die Seite nicht mehr benötigt, einschließlich Tags für Dienste, die Sie nicht mehr verwenden.
Teilen Sie große Bundles auf, damit jede Seite nur den Code lädt, den sie verwendet. Moderne Build-Tools unterstützen Code-Splitting und erledigen dies automatisch.
Laden Sie Code für Inhalte unterhalb der Falz oder für On-Demand-Funktionen - Modals, Player, Widgets - erst bei Bedarf, statt direkt am Anfang:

\/\/ Lädt das Chat-Widget erst, wenn der Besucher es anfordert
button.addEventListener('click', async () => {
  const { openChat } = await import('.\/chat.js');
  openChat();
});

So testet Silktide das

Die Seite wird in einem echten Browser geladen und es wird aufgezeichnet, welche Teile jedes Skripts während des Ladevorgangs ausgeführt werden.
Für jedes Skript wird gemessen, wie viele seiner Bytes nie ausgeführt wurden.
Es werden alle Skripte mit nennenswerter Verschwendung gemeldet, einschließlich ihrer aktuellen Größe, des ungenutzten Prozentsatzes und der potenziell einzusparenden Bytes.

Fehlerbehebung

Der Code läuft, nur nicht während des Seitenladens

Die Messung umfasst den anfänglichen Ladevorgang. Code, der erst später ausgeführt wird - Formularvalidierung, Menüsteuerung, Funktionen hinter Klicks - gilt als ungenutzt, obwohl die Seite ihn letztlich benötigt. Solcher Code ist ein guter Kandidat dafür, bei Bedarf statt im Voraus geladen zu werden.

Der ungenutzte Code befindet sich in einem Drittanbieter-Skript

Fremde Bundles lassen sich in der Regel nicht kürzen, aber Sie können steuern, wann sie geladen werden. Siehe Drittanbieter-Code und Fassaden für Drittanbieter-Code für entsprechende Ansätze.