Anzeige
Anzeige
Listicle
Artikel merken

JavaScript: Googler verrät 6 Tipps für schnellere Websites

JavaScript ist quasi unverzichtbar – es ist aber auch ein Quell von Performance-Problemen. Alan Kent von Google hat sechs Tipps, wie du dein JavaScript schlanker und deine Performance besser machst.

3 Min. Lesezeit
Anzeige
Anzeige

Alan Kent von Google spricht in einem Video der E-Commerce-Essentials-Serie über 6 Tipps, die die Performance von JavaScript-Seiten verbessern. (Screenshot: Google Search Central via YouTube/t3n)


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.

1. Wildwuchs von JavaScript-Dateien vermeiden

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.

Anzeige
Anzeige

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.

2. Hohe Zahl an DNS-Lookups vermeiden

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.

Anzeige
Anzeige

3. Ineffizientes JavaScript beseitigen

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.

Anzeige
Anzeige

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.

4. Ungenutztes JavaScript streichen

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.

Anzeige
Anzeige

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.

5. JavaScript-Dateien komprimieren

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.

6. JavaScript-Code mit Ablaufzeitpunkt versehen

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.

Anzeige
Anzeige

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

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige