JavaScript ist für viele Websites unverzichtbar geworden – insbesondere im E-Commerce. Warenkörbe und Bestellprozesse sind mit reinem HTML nur schwer und für Benutzer wenig praktisch umzusetzen. Auf der anderen Seite ist JavaScript oft auch die Ursache von Performance-Problemen. Daher hat Alan Kent, Developer Advocate mit Spezialisierung auf E-Commerce bei Google, in einem Video sechs Tipps in Bezug auf JavaScript-Libraries und -Frameworks vorgestellt, die die Performance von Websites verbessern können.

Insbesondere, wenn jede UI-Komponente in einer separaten Datei angelegt ist, kommt es schnell zu einem Wildwuchs an JS-Dateien. Pro Datei gibt es einen Overhead, der sich summiert – insbesondere bei Websites, die nur HTTP1 unterstützen. Pagespeed Insights von Google ist nur eines von vielen kostenlosen Tools, die zeigen, ob es zu viele JS-Dateien auf einer Seite gibt.

Die Zahl der Dateien zu reduzieren hängt allerdings auch von der Flexibilität von Plattformen und Content-Management-Systemen ab: Viele CMS beschränken den Zugriff auf JavaScript, um Content-Creator:innen die Arbeit zu erleichtern und das Fehlerpotenzial zu vermindern. Sofern Kontrolle über die JS-Dateien besteht, können mit JavaScript-Bundling-Tools viele kleine Dateien zu wenigen großen zusammengefasst werden. Noch effizienter ist es, wenn diese Dateien parallel heruntergeladen werden können. Da HTTP2 die Effizienz der Downloads mehrer kleiner Dateien erhöht, verbessert dessen Unterstützung auch die Seitenperformance.

Wenn JS-Dateien von anderen Domains geladen werden, kann pro referenzierter Domain ein DNS-Lookup-Overhead anfallen. Summieren sie sich, verlangsamt das den ersten Besuch von User:innen einer Website. Im Network-Tab der Chrome-Developer-Tools werden alle referenzierten Domains angezeigt. Um das zu vermeiden, könnten die JavaScript-Dateien auf dem eigenen Server abgelegt werden. Allerdings gilt es, zu prüfen, wie populär die Dateien sind: Ist es eine großflächig implementierte Datei, kann sie durch den Besuch bei anderen Seiten bereits im Browser vorhanden sein. Hier würde ein erneuter Download Ressourcen verschwenden, der DNS-Lookup wäre das kleinere Übel.

Ineffizienter oder fehlerhafter JavaScript-Code kann eine Website verlangsamen und so zu einer schlechteren User:innen-Experience führen. Um solchen zu finden, zeigt Pagespeed Insights beispielsweise Skripte, die eine zu lange Zeit für das Parsen und Ausführen benötigen, oder Code, der das Rendern der Seite blockiert und damit den Zeitraum vergrößert, in welchem User:innen keinen Inhalt sehen. Die falsche Verwendung der JS-Funktion document.write kann andere Vorgänge blockieren.

Die Beseitigung ist aufwändig: Der Code muss geprüft und umgeschrieben werden. Kent verweist auf verschiedene Techniken, beispielsweise vereinfachte Versionen von komplexeren Komponenten zu schreiben.

Ungenutzter Code ist ebenfalls ein Performance-Problem, denn er muss heruntergeladen und geparst werden. Das verschwendet Ressourcen. Ungenutzter JS-Code kommt vor allem durch die Wiederverwendung von Code über verschiedene Seiten: Selten werden alle Funktionen einer Library oder eines Frameworks genutzt. Oder eine Komponente wird implementiert, die mehr Funktionen besitzt als benötigt. Ungenutzte JavaScript-Sektionen werden in den Pagespeed Insights angezeigt.

Mit Strategien wie dem Tree-Shaking kann nicht gebrauchter Code entfernt werden. Dabei solltest du beachten, dass die Ausführung von Code auch von der Umgebung abhängt. Beim A/B-Testing wird ein Skript beispielsweise nur bei einigen User:innen ausgeführt. Damit der Test aussagekräftig ist, muss das Skript also erhalten bleiben.

Insbesondere größere JavaScript-Dateien sollten für den Download komprimiert sein, um Zeit zu sparen. Zwar muss der Webbrowser mehr Rechenleistung aufbringen, um die Inhalte zu entpacken, insgesamt ist die Komprimierung allerdings ein Gewinn. In den Pagespeed Insights gibt es einen Abschnitt, in welchem JS-Dateien gelistet werden, die komprimiert werden können.

Die Performance der Seite wird auch verbessert, indem die JS-Dateien mit einem Ablaufdatum im Header versehen werden. So wird ein Overhead des Browsers bei der Prüfung auf veraltete JS-Dateien vermieden. Im Network-Tab der Chrome-Developer-Tools können für die heruntergeladenen JS-Dateien die HTTP-Response-Header auf „Cache-Control“ geprüft werden. Um die JS-Dateien korrekt zu cachen, muss die Website eine angemessene Cache-Lifetime im Header ausgeben. Es muss aber möglich sein, die Dateien zu updaten – beispielsweise um Fehler zu beheben oder neue Funktionen einzuführen. Hier kann mit Versionsnummern oder einem Hash des Datei-Inhalts als Teil der Datei-URL gearbeitet werden. Mit jeder neuen Variante der Datei wird eine neue URL genutzt. Bei populären Dateien kann auch eine extern gehostete Datei referenziert werden: Der Browser muss die Datei nur einmal herunterladen und sie auf den folgenden Seiten erneut nutzen.

Wer gut Englisch spricht, kann sich auch Alan Kents Video ansehen: