Wie reduziere ich die Ausführungszeit von JavaScript?

Mit JavaScript bringst Du Interaktivität in Deine Website. Egal ob Kontaktformulare, Kalender oder Produktfilter: Zahlreiche Bestandteile moderner Webseiten bauen auf JavaScript. Der Nachteil ist jedoch, dass die Ausführung von JavaScript die Ladezeiten Deiner Seite massiv beeinflussen kann.

Inhaltsverzeichnis

  1. Warum wird JavaScript so langsam ausgeführt?
  2. Wie kann ich die Ausführungszeit von JavaScript verbessern?
  3. Tools im Überblick
  4. Wo finde ich weitere Infos?

Warum wird JavaScript so langsam ausgeführt?

Die Gründe, warum JavaScript Deine Website verlangsamt, lassen sich in vier Kostentypen einteilen: Netzwerkkosten, Kompilierungskosten, Kosten der Ausführung und Speicherkosten.

  • Netzwerkkosten: Dies ist der naheliegendste Grund. Je größer eine JavaScript-Datei ist, desto länger benötigt der Browser, um diese herunterzuladen.
  • Kompilierungskosten: JavaScript wird im sogenannten Haupt-Thread in vom Rechner lesbaren Maschinencode interpretiert. Der Haupt-Thread ist jedoch auch für die Verarbeitung von Benutzer-Input sowie das Rendern der Webseite verantwortlich. Lange Ausführungszeiten von JavaScript können den Haupt-Thread daher blockieren und das Laden der Seite verlangsamen.
  • Ausführungskosten: Der Haupt-Thread interpretiert JavaScript nicht nur, sondern führt den Code auch aus. Je mehr JavaScript-Code beim Laden der Webseite ausgeführt wird, desto länger dauert es, bis Deine Besucher mit der Seite interagieren können. Diese Time to Interact bestimmt, wie Nutzer die Geschwindigkeit Deiner Website wahrnehmen.
  • Speicherkosten: Verwendest Du in Deinen JavaScript-Dateien viele Arrays, Funktionen und Objekte, werden deren Werte im Code referenziert. Diese Referenzen belegen in der Masse sehr viel Speicher, was die Performance Deiner Seite verlangsamt. Dies kann sich zum Beispiel durch Probleme beim Scrollen, lange Ladezeiten oder einem kompletten Einfrieren der Seite äußern.

Wie kann ich die Ausführungszeit von JavaScript verbessern?

1. Sende nur den JavaScript-Code, den Deine Nutzer benötigen

Nicht jedes Script muss direkt beim Laden einer Website ausgeführt werden. Schaue Dir Deine JavaScript-Dateien genau an und prüfe, welcher Code bei welcher Interaktion mit dem User benötigt wird. Strukturiere Deinen Code dann so, dass JavaScript nur dann aufgerufen wird, wenn es die Seiteninteraktion erfordert.

2. Minimiere Deinen JavaScript-Code

Prüfe genau, welche Funktionen und Kommentare Du brauchst. Schaue, ob Du Code zusammenfassen oder vereinfachen kannst.

3. Komprimiere Deine JavaScript-Dateien

In der täglichen Entwicklungsarbeit sind Webentwickler auf sauberen und gut strukturierten Code angewiesen. Der Browser braucht diesen Luxus nicht – und erledigt seine Arbeit sogar schneller, wenn Du ihm den unformatierten Code bereitstellst. Um Deinen Pagespeed zu steigern, solltest Du Deine JavaScript-Dateien daher komprimieren, also in einer einzigen Programmzeile darstellen.

JavaScript-Code vor der Komprimierung

JavaScript-Code vor der Komprimierung

JavaScript-Code nach der Komprimierung

JavaScript-Code nach der Komprimierung

Hierfür kannst Du neben Plugins für einen Code Editor Deiner Wahl auch kostenfreie Online Tools nutzen, in die Du den Code entweder hinein kopierst oder direkt ganze JavaScript-Dateien hochlädst.

UglifyJS richtest Du zum Beispiel über das Terminal Deines Rechners ein und führst es kinderleicht aus:

npm install uglify-js
uglifyjs [input files] [options]

4. Lösche nicht benötigten JavaScript-Code

Schaue, ob Du bestimmte Funktionen, Variablen oder Objekte in Deinem Code überhaupt noch benutzt. Gerade bei deinstallierten Plugins oder überarbeiteten Features bleibt häufig nicht mehr benötigter Code zurück.

5. Cache Deinen JavaScript-Code

Bei jeder Browseranfrage prüft der Server, ob die angefragten Dateien vorhanden sind und stellt diese zum Download bereit. Richtest Du einen Cache ein, schaffst Du für den User einen unsichtbaren Puffer, indem alle benötigten Dateien für Deine Website vorhanden sind. Dies reduziert die Antwortzeit des Servers und erhöht Deinen Pagespeed.

Zahlreiche Hosting-Anbieter stellen in ihren Paketen Cache-Lösungen bereit, die Du nur noch aktivieren musst. Nutzt Du Wordpress als Content Management System, kannst Du hierfür ein Plugin wie zum Beispiel WP Super Cache nutzen.

Tools im Überblick

Komprimierung von JavaScript-Dateien

Cachen von JavaScript-Dateien

Wo finde ich weitere Infos?