Was JavaScript die Ladezeit kostet

So funktioniert es

Ein Bild ist fertig, sobald es angekommen ist. Ein Skript fängt dann erst an: Der Browser muss es lesen, übersetzen und ausführen. Das alles passiert im Hauptthread, demselben Strang, der auch Klicks und Eingaben verarbeitet. Solange ein Skript läuft, reagiert die Seite nicht. Das misst der Wert INP.

Wie stark das bremst, hängt vom Gerät ab. Ein aktueller Laptop führt dasselbe Skript um ein Vielfaches schneller aus als ein günstiges Handy.

bytereport zählt die übertragene Größe aller Skript-Dateien, die das HTML einbindet. Skripte direkt im HTML und solche, die andere Skripte später nachladen, sind nicht dabei. Gut sind bis etwa 350 KB, über 1 MB gilt als schlecht. Weil die Größe komprimiert gemessen wird, muss der Browser ein Mehrfaches davon verarbeiten.

Worauf es ankommt

• Nur, was gebraucht wird. Oft lädt eine Seite eine ganze Bibliothek für eine einzige Funktion, etwa einen Slider oder ein Menü.
• Seltenes erst bei Bedarf. Ein Formular-Assistent oder eine Karte muss nicht mit der Seite laden, sondern erst, wenn jemand sie öffnet.
• Minimiert und komprimiert. Minimieren entfernt Leerzeichen und Kommentare; dazu kommt die Kompression beim Übertragen.
• Fremde Skripte im Blick. Tracking, Chat und Werbung bringen oft mehr JavaScript mit als die Seite selbst, siehe Drittanbieter.
• Nicht im Weg. Skripte im Kopf der Seite brauchen defer oder async, sonst halten sie den Aufbau an, siehe render-blockierende Ressourcen.

So richtest du es ein

Welche Skripte eine Seite lädt, bestimmen Theme, Plugins und eingebundene Dienste. Im CMS deaktivierst du Plugins, die niemand nutzt, oder lässt sie nur auf den Seiten laden, die sie brauchen. Im Tag-Manager prüfst du, welche Tags noch jemand auswertet.

Bei selbst entwickelten Seiten kümmert sich die Agentur oder das Entwicklerteam darum: Das Build-Werkzeug (ein Bundler wie esbuild, Rollup oder webpack) minimiert die Dateien und teilt selten genutzten Code ab, der erst per import() nachgeladen wird. Die Liste in den Details zeigt die Skripte nach Größe; fang oben an.