Wie man Webseiten mit JavaScript beschleunigen kann, erklärt Alan Kent von Google in einem neuen Video.
JavaScript bietet viele Vorteile. Damit lassen sich zum Beispiel visuelle Effekte auf Webseiten realisieren und Reaktionen auf Interaktionen von Besucherinnen und Besuchern ausführen. Kaum eine E-Commerce-Website kommt heute noch ohne JavaScript aus, denn Vorgänge wie das Ablegen von Artikeln im Warenkorb oder der Bestellprozess benötigen meist die Funktionalität von JavaScript.
Nachteilig daran ist, dass JavaScript Webseiten langsamer machen kann, denn der Code muss zunächst geladen, interpretiert und dann ausgeführt werden.
Was man unternehmen kann, damit Webseiten trotz JavaScript nicht zu langsam sind, erklärt Alan Kent von Google in einem neuen Video aus der Serie 'Ecommerce Essentials'.
1. Vermehrung von JavaScript-Dateien vermeiden
JavaScript-Dateien haben die Eigenschaft, sich mit der Zeit zu vermehren, etwa dann, wenn neue Funktionen zu einer Webseite hinzugefügt werden. Weil jede Datei separat angefragt und geladen werden muss, kann dies die betreffenden Seiten verlangsamen. Um dies zu vermeiden, kann man kleinere JavaScript-Dateien zu größeren Dateien zusammenfassen. Wenn diese dann auch noch parallel geladen werden, führt dies zu einer Verkürzung der Ladezeit.
Es git verschiedene Tools, die das Zusammenfassen von JavaScript-Dateien ermöglichen. Dazu gehört beispielsweise webpack.
Wenn eine Website HTTP/2 unterstützt, kann dies die Effizienz beim Laden zusätzlich verbessern.
2. Anzahl der DNS Lookups reduzieren
Wenn JavaScript-Dateien von vielen verschiedenen Domains geladen werden müssen, sind entsprechend viele DNS Lookups notwendig, die alle Zeit benötigen. Zum Beschleunigen kann man versuchen, zumindest einige JavaScript-Dateien stattdessen auf dem eigenen Server zu hosten.
Aber Vorsicht: Manche populäre JavaScript-Dateien, die auch auf anderen Websites verwendet werden, befinden sich vielleicht schon im Browser Cache der Besucherinnen und Besucher. Wenn man die Dateien auf dem eigenen Server ablegt, führt das dazu, dass sie vom Browser erneut heruntergeladen werden müssen, was die Zeitersparnis durch die verminderten DNS Lookups egalisieren kann.
3. Entfernen von ineffizientem JavaScript
JavaScript, das die CPU des Clients stark belastet, JavaScript, das beim Ausführen das Rendern der Seite blockiert oder auch die Verwendung von document.write sind Beispiele für ineffizentes JavaScript. Google PageSpeed Insights erkennt ineffizientes JavaScript und zeigt dies im Testergebnis an.
Eine Lösung für diese Probleme besteht darin, besseren JavaScript-Code zu schreiben bzw. bessere JavaScript-Bibliotheken auf einer Website zu verwenden. Dies kann jedoch recht komplex werden und muss im Einzelfall bewertet werden.
4. Entfernen von nicht benötigtem JavaScript
Die meisten Webseiten nutzen nicht alle Funktionen, die in einer bestimmten JavaScript-Bibliothek angeboten werden. Das Verwenden der kompletten Bibliothek führt zu unnötigen Ladezeiten, weil die Dateien übertragen, interpretiert und ausgeführt werden müssen.
Techniken wie Tree Shaking können dazu beitragen, die Teile des Codes zu identifizieren, der tatsächlich auf einer Seite benötigt werden. Auch in Google Page Speed Insights werden Hinweise auf nicht benötigtes JavaScript angezeigt.
Allerdings kann das Ausführen von JavaScript vom Kontext abhängen, so dass zum Beispiel bei einem A/B-Test jeweils ein anderer Teil des JavaScripts benötigt wird. Daher sollte beim Entfernen von scheinbar nicht benötigten Code Vorsicht gelten.
5. Komprimieren der JavaScript-Dateien
Auch wenn das Entpacken von komprimiert übertragenen JavaScript-Dateien zu einer höheren CPU-Last auf dem Client führt, bringt diese Technik meistens insgesamt eine Beschleunigung der Ladezeiten. Das auch aus dem Grund, dass sich JavaScript-Dateien sehr gut komprimieren lassen und die Ersparnis an zu übertragendem Datenvolumen recht groß ist.
6. Auf effizientes Caching achten
Durch die korrekte Angabe der Lebensdauer von Dateien im HTTP Header zum Beispiel per "Cache Control" sowie durch das Setzen eines ausreichend langen Zeitraums bis zum Ablauf der Dateien kann der Browser zusätzlich entlastet werden.
Es muss allerdings darauf geachtet werden, dass Dateien bei Bedarf aktualisiert werden können, zum Beispiel dann, wenn es eine neue Version einer Bibliothek gibt oder wenn neue Funktionen benötigt werden. Das kann man zum Beispiel durch Hinzufügen der Versionsnummer oder eines Hashes des Inhalts der Datei zur URL erreichen.
Auch das Referenzieren von bekannten JavaScript-Dateien auf einen gemeinsam genuzten Server kann dazu führen, dass der Browser eine bereits im Cache befindliche Version der Datei verwenden kann.
Fazit
JavaScript ist hilfreich und auf vielen Websites nicht mehr verzichtbar. Um die Ladezeiten trotz JavaScript in Grenzen zu halten, sollten verschiedene Best Practices angewandt werden. Manche davon wie das Ermöglichen von Caching oder die komprimierte Übertragung der Dateien sind einfacher umsetzbar. Andere wie zum Beispiel die Erhöhung der Effizienz des Codes können je nach Situation sehr viel Aufwand mit sich bringen. Hier muss jeweils ein sinnvoller Abgleich zwischen Aufwand und Nutzen getroffen werden.
Titelbild: Google
SEO-Newsletter bestellen
