SEO-News

Google: 6 Tipps für schnellere Webseiten mit JavaScript

Wie man Webseiten mit JavaScript beschleunigen kann, erklärt Alan Kent von Google in einem neuen Video.

 


 Anzeige

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

 

Verwandte Beiträge

Die Google Search Console meldet für eine Seite ein 'noindex', aber das lässt sich einfach nicht nachvollziehen? Das kann am Rendering der Seite per JavaScript liegen.

Wenn Google auf Webseiten mit schlechten Inhalten stößt, werden Webseiten und dort enthaltenes JavaScript gar nicht erst gerendert. Das kann dann problematisch sein, wenn per JavaScript relevante...

Wenn eine Website plötzlich schlechtere Rankings bei Google erhält, bringt es nichts, sich auf technische Details wie die Ladezeit zu konzentrieren.

SEO-Newsletter bestellen

Im monatlichen SEO-Newsletter erhaltet Ihr eine Übersicht der jeweils zehn wichtigsten SEO-Meldungen des Monats. Mit dem SEO-Newsletter bleibt Ihr auf dem Laufenden.
Ich bin mit den Nutzungsbedingungen einverstanden

 

 

 

Anzeige

rnkeffect

Premium-Partner (Anzeige)


Anzeigen InternetX

SEO Agentur aus Darmstadt

Better sell online

Online Solutions Group

Onsite-Optimierung

Onsite-Optimierung

 

Sprecher auf

SEO- und Suchmaschinenblogs

SEO-FAQ

Bild © FM2 - Fotolia.com

SEO selber machen

SEO selber machen

Bekannt aus

Website Boosting


Internet World Business

SEO United


The SEM Post


Webselling

Jetzt vernetzen

SEO-Glossar

SEO-Glossar

 

SEO im Ohr, der Podcast von SEO Südwest: aktuell Folge

SEO-Beratung

Wir bringen gemeinsam Ihre Webseite in Google nach vorne. Profitieren Sie von jahrelanger SEO-Erfahrung.

Social Networks und RSS-Feed

Auszeichnungen

seo19 sieger sichtbarkeit 2020 200x200px