Eine möglichst kleine JavaScript-Datei verringert die Ladezeiten und verbessert so die Performance. Um eine Datei zu reduzieren, sind Programmierkenntnisse von Vorteil, allerdings nicht immer notwendig.
Reduzierung der Größe von JavaScript-Dateien: unnötige Zeichen entfernen
So gut wie jeder Code benutzt unnötige Zeichen. Welche Gründe das hat, kann völlig unterschiedlich sein: Bei Themes stellen sie die Vielseitigkeit sicher, blähen den Code jedoch unnötig auf, wenn ein Webmaster nicht alle Funktionen nutzt.
Ist der Code hingegen eigens für die Website geschrieben, sind unnötige Zeichen ebenfalls typisch: Denn Zeilenumbrüche, Leerzeichen, Kommentare und Einzüge erhöhen die Lesbarkeit für den Entwickler. Doch Browser und Suchmaschinen benötigen diese Hilfe nicht. Durch „Minifying“ können diese Zeichen einfach entfernt werden, die Einsparungen können beträchtlich sein.
Ein weiteres Problem sind unnötige Dopplungen im Code. Tools, die beim Auffinden solcher unnötigen Zeichen helfen können, sind beispielsweise Bundle Buddy, Chrome DevTools, ESLint, JSHint oder auch Plato. Allerdings: Sie alle helfen dir dabei, Fehler und unnötigen Code aufzuspüren, du musst sie jedoch selbst beheben.
Deswegen sind Programmierkenntnisse unerlässlich, denn jedes irrtümlich gelöschte Zeichen kann dafür sorgen, dass deine Website nicht mehr wie gewünscht funktioniert. Deswegen solltest du zudem den Originalcode aufbewahren und getrennt abspeichern. Das gilt auch für vermeintlich simple Aufgaben wie das Löschen von Leerzeichen oder Zeilenumbrüchen, weil du oder dein Entwickler den Code in der Originalversion deutlich leichter bearbeiten können.
Platzsparend ist auch die Wahl einer sinnvollen Bibliothek. Viele Programmierer greifen auf jQuery zurück, nutzen einen Großteil der Funktionen jedoch gar nicht. Wenn du die Dateien zu reinem JavaScript konvertierst und eine platzsparende Bibliothek wie Zepto nutzt, kannst du die Dateigröße verringern.
Komprimieren und Optimieren von JavaScript-Dateien
Wenn du JavaScript-Dateien optimieren möchtest, ist dies in der Regel auch ohne Programmierkenntnisse möglich. Das große Problem: Wenn sich dort Fehler einschleichen, kannst du ohne Programmierkenntnisse die gesamte Optimierung rückgängig machen.
Es kann viel Zeit und Ärger sparen, sich direkt an einen Programmierer zu wenden oder die Performance mit anderen Möglichkeiten zu optimieren. Hierunter fallen beispielsweise das Komprimieren von Bildern, effiziente Cache-Richtlinien oder JavaScript asynchron zu laden.
Wenn du deine JavaScript-Dateien komprimieren möchtest, solltest du die Möglichkeiten nutzen, die dein Webserver dafür bereitstellt. Mit gzip oder Brotli komprimierst du deine Datei und erhöhst die Ladegeschwindigkeit, ohne die Verarbeitungszeit zu stark herauszufordern. Auch die Fehlerquote ist gering.
Wenn du dich mit Tools an die automatische Optimierung herantraust, solltest du deinen Original-Code zur Sicherheit immer als Backup behalten, damit kein kleiner Fehler deine gesamte Website zerschießt. Empfehlenswerte Tools für die Optimierung von JavaScript sind der YUI Compressor, JSMin und Googles Closure Compiler.
Wenn du WordPress nutzt, findest du zudem einige Plug-ins, mit denen du deine Performance verbessern kannst, die ebenfalls Komprimierungs- und Optimierungsfunktionen an Board haben. Darunter beispielsweise Autoptimize, WP Rocket oder JCH-Optimize (auch für Joomla, Drupal und Magento).
Fazit
Die Größe von JavaScript-Dateien kannst du mit wenigen Schritten deutlich reduzieren. Viele Tools zeigen dir ungenutzten und somit überflüssigen Code an, auf den deine Website verzichten kann. Die übrig gebliebene Datei kannst du zusätzlich komprimieren und so noch mehr Platz sparen. Achte aber immer darauf, eine funktionierende Originaldatei aufzubewahren.
