Zum Inhalt springen
EUID Prüfservice & Prüfsiegel, Startseite
Website prüfen lassen

Prüfpunkt co2.js_uebermaessigDatenmenge je Aufruf

Wann ist der JavaScript-Anteil einer Seite zu hoch?

Der Browser überträgt JavaScript und führt es danach auf dem Gerät des Besuchers aus: Er liest es, übersetzt es und arbeitet es ab. Die Prüfung meldet den Befund, wenn JavaScript mehr als 45 % der übertragenen Bytes ausmacht und zugleich mehr als 300 KB groß ist.

Eine mittlere Seite lädt über ein halbes Megabyte JavaScript

Der Web Almanac 2024 misst im Median 558 KB JavaScript je Seite am Telefon und 613 KB am Desktop, 14 % mehr als im Jahr davor. Davon bleiben beim Laden am Telefon im Median 206 KB ungenutzt, also 44 %; bei jeder zehnten Seite sind es 818 KB. Ein Teil davon sind Bibliotheken, die seit Jahren mitlaufen: jQuery steckt in 74 % der Seiten am Telefon, jQuery Migrate, eine Hilfsdatei für ältere jQuery-Schreibweisen, in 33 %. Die Autoren lesen das als Zeichen, dass viele Websites noch auf ältere jQuery-Fassungen angewiesen sind.

Ein günstiges Telefon rechnet ein Vielfaches länger

Das V8-Team von Google Chrome hat 2019 verglichen, wie lange Telefone am JavaScript derselben Seite rechnen: Ein mittleres Telefon brauchte für Reddit drei- bis viermal so lange wie ein Spitzengerät, ein Telefon für unter 100 Dollar mehr als sechsmal so lange. Solange der Browser JavaScript ausführt, reagiert die Seite nicht auf Eingaben. Wer auf einem älteren Telefon auf das Menü tippt, wartet, tippt noch einmal und landet woanders. Auf dem schnellen Rechner, an dem die Seite gebaut wird, ist diese Wartezeit kaum zu sehen, auf dem älteren Telefon eines Kunden schon.

Schnellere Reaktion auf Eingaben, mehr Verkäufe: der Fall redBus

Wie schnell eine Seite auf einen Fingertipp reagiert, misst Google als Interaction to Next Paint (INP): die Zeit vom Tippen bis zur sichtbaren Antwort. Lange JavaScript-Aufgaben verlängern sie. Das Busticket-Portal redBus hat diese Zeit verkürzt und danach 7 % mehr Verkäufe gezählt; Google führt den Fall auf web.dev unter seinen Fallstudien. Das ist eine Angabe des Unternehmens, keine allgemeine Regel. Die Mechanik gilt auch für ein Kontaktformular: Reagiert der Absende-Knopf erst nach einer Pause, wirkt die Seite kaputt, und der Besucher bricht ab.

KI-Crawler laden Ihr JavaScript und führen es nicht aus

Nach einer Auswertung des Hosters Vercel vom Dezember 2024 führt keiner der großen KI-Crawler JavaScript aus, darunter die von OpenAI, Anthropic, Meta und Perplexity; Googles Gemini nutzt die Technik des Googlebot und baut Seiten vollständig auf. Geladen werden die Skripte trotzdem: Beim Crawler von ChatGPT waren 11,50 % der Abrufe JavaScript-Dateien, bei Claude 23,84 %. Für Ihre Seite heißt das: Die Bytes werden übertragen, der Inhalt, den sie erst im Browser aufbauen, bleibt für diese Systeme unsichtbar. Text, Preise und Öffnungszeiten gehören ins HTML, das der Server ausliefert; JavaScript bleibt für die Bedienung.

Warum der Anteil erst ab 300 KB zählt

Ein Anteil allein träfe leichte Seiten: Sparen Sie Bilder und Schriften, steigt der JavaScript-Anteil, auch wenn das JavaScript gleich bleibt. Deshalb zählt der Anteil erst ab 300 KB JavaScript. Darunter ist auch ein hoher Anteil in absoluten Bytes wenig.

Wie der Befund in den Punktwert eingeht

Der JavaScript-Anteil zählt 15 % des CO₂-Punktwerts. Liegt der Anteil bei höchstens 45 % oder das JavaScript bei höchstens 300 KB, gehen die vollen 15 Punkte ein; mit Befund sind es 0 Punkte.

Was JavaScript auf dem Gerät kostet

Ein Bild wird einmal dekodiert und gezeigt. JavaScript wird geparst, kompiliert und ausgeführt, oft auch nach dem Laden weiter, etwa für Animationen, Tracking oder Chat-Fenster. Auf älteren Telefonen dauert das spürbar und kostet Akku. Lighthouse, das Prüfwerkzeug in Chrome, zeigt diese Arbeit als Ausführungszeit des JavaScripts.

Beispiele

Aufklappmenü

Nicht erfüllt
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $(".menue-knopf").click(function () { $(".menue").toggle(); });
</script>
Erfüllt
<details class="menue">
  <summary>Menü</summary>
  <nav>…</nav>
</details>
<!-- reines HTML; Tastatur und Vorlesesoftware bedienen es von selbst -->

So gehen Sie es an

  1. Ermitteln Sie mit dem Reiter „Coverage“ in den Chrome-Entwicklerwerkzeugen, welcher Teil des JavaScripts auf der Seite ungenutzt bleibt.
  2. Entfernen Sie Bibliotheken, die nur für eine Kleinigkeit geladen werden, etwa ein ganzes Framework für ein Aufklappmenü.
  3. Teilen Sie den Code auf: Was nur auf einer Seite oder nach einem Klick gebraucht wird, lädt erst dort.
  4. Prüfen Sie Tracking-, Chat- und Werbe-Skripte darauf, ob sie auf dieser Seite gebraucht werden.

Tipps aus der Praxis

  • Drosseln Sie in den Chrome-Entwicklerwerkzeugen im Reiter „Performance“ den Prozessor und laden Sie die Seite neu. Mit „Calibrate“ stellt Chrome eine Stufe ein, die einem einfachen oder mittleren Telefon nahekommt; Chrome schreibt selbst, dass das ein Telefon nur annähert.
  • Laden Sie ein Chat-Fenster erst, wenn jemand auf „Chat starten“ klickt. Die Web Sustainability Guidelines empfehlen, fremde Inhalte erst zu laden, wenn der Besucher etwas damit tut.
  • Schreiben Sie bei einem Relaunch eine Obergrenze für JavaScript je Seite in den Auftrag, etwa 300 KB nach Kompression. Dann wird die Menge bei der Abnahme gemessen.
  • Steht jQuery Migrate in der Liste der geladenen Dateien, braucht ein Plugin oder das Theme noch ältere jQuery-Schreibweisen. Fragen Sie beim nächsten Update nach einer Fassung, die ohne auskommt.

Weiter im Prüfbereich CO₂ & EmpCo

Dieser Prüfpunkt gehört zum Prüfbereich CO₂ & EmpCo; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.

  • Siegel Digitale Barrierefreiheit
  • Siegel Daten & Recht
  • Siegel Technische Qualität
  • Siegel Digital Excellence
  • Siegel Cyberversicherung

Geprüft. Für eine bessere digitale Zukunft.euid.com