Speed running

Websites schneller laden - 4 Schritte für mehr Performance

Ladezeiten reduzieren - das Rendering im Browser optimieren

Um Websites heutzutage im Browser schnellstmöglich und über alle Endgeräte hinweg optimiert darzustellen, sollten einige Punkte beachtet werden. Vor allem bei der mobilen Darstellung sind Ladezeit und Bedienbarkeit nicht mehr nur ein Problem der „User Experience“, auch Suchmaschinen wie Google gewichten immer stärker die mobile Nutzbarkeit und sorgen bei entsprechender Optimierung für Sichtbarkeit der Inhalte. Aktuell wird der „mobile-first Index“ eingeführt, Google reagiert damit konsequent auf die weltweite Entwicklung mit stark zunehmenden mobilen Suchanfragen.

Den Rendering-Prozess einer Webseite behandeln gängige Browser durchaus etwas unterschiedlich, allen gemein ist aber die Interpretation des HTML Codes und die Abarbeitung zusätzlicher Ressourcen wie CSS oder Javascript-Dateien in einer bestimmten Reihenfolge. Nach der Interpretation des Codes erfolgt letztlich die Darstellung im Browser.

Natürlich spielen Variablen wie Serverantwortzeit oder die Nutzung eines CDN (Content Delivery Network) ebenfalls eine Rolle, die folgenden 4 Punkte können aber auf Browserseite schon für wesentlich mehr Performance sorgen. Viele Studien belegen den direkten Zusammenhang zwischen Ladezeiten einer Website und Umsatz/Marge in digitalen Geschäftsmodellen.

1. Reduzieren: wieviel Code brauche ich?

Im ersten Schritt kann sich jeder Website-Inhaber Gedanken über die Reduzierung des vorhandenen Codes machen. Neben dem HTML-Gerüst werden weitere Ressourcen wie CSS oder Javascript-Dateien zusätzlich für den Browser bereitgestellt. Dabei wird oft nur ein Bruchteil der geladenen Informationen für die Darstellung der Seite im Browser benötigt. Große CSS-Dateien von Frameworks wie Bootstrap oder Foundation stellen umfangreiche Funktionen zur Verfügung, von denen viele gar nicht benötigt werden. Gleiches gilt für externe Javascript-Dateien, die ebenfalls zusätzliche Ladezeit in Anspruch nehmen.

Es ist möglich den kompletten HTML-Quellcode (im Bestfall ist er möglichst auch W3C konform) zu minimieren, bis hin zur Auslieferung ohne Leerzeichen oder Kommentare. Dadurch können mit geringerer Datenmenge die gleichen Informationen übertragen werden.

Ebenso können CSS Dateien minimiert oder externe CSS-Styles teilweise innerhalb des HTML Dokumentes bereitgestellt werden. Auch bei Javascript-Dateien mach es Sinn nur die benötigten Funktionen auszulagern in einem extra Script zur Verfügung zu stellen.

Grafiken werden oft deutlich zu groß für den Browser zur Verfügung gestellt und nur mittels Skalierung verkleinert angezeigt. Hier kann man entweder serverseitig größen-optimierte Grafiken bereitstellen oder eine Technologie namens srcset nutzen, die dem Browser abhängig vom Darstellungsbereich mehrere Bild-Größen zur Verfügung stellt.

2. Komprimieren: kann ich den Datenstrom verringern?

Mittels gzip oder deflate können alle gängigen Browser wie Safari, Firefox oder Chrome komprimierte Dateien empfangen, entpacken und lokal darstellen. Sie fragen über den HTTP-Header eine solche Auslieferung an, der Server kann die zur Darstellung der Website benötigten Dateien dann in komprimierter Form zurücksenden. Es macht Sinn diese Funktion vor allem für HTML, CSS und Javascript-Ressourcen zu nutzen. 

Grafiken im Format JPG oder GIF sind bereits komprimiert und für das Web optimiert, hier bedeutet eine zusätzliche Komprimierung über den HTTP-Header meist keine wesentliche Einsparung an der übertragenen Datenmenge.

Oft ist es auch üblich Grafiken oder weitere statische Ressourcen von einer separaten (Sub-) Domain auszuliefern, um mehr HTTP-Verbindungen parallel nutzen zu können.

3. Zwischenspeichern: muss der Browser Ressourcen immer neu vom Server laden?

Statische Inhalte können für den Browser mit einer Gültigkeit gekennzeichnet werden. Dann muss bei wiederholten Aufrufen für einen bestimmten Zeitraum keine erneute Übertragung vom Server erfolgen. Überprüfen Sie Ihr Browser Caching für statische Ressourcen wie JS, CSS oder Grafik-Dateien. Im Falle der wiederholten Anfrage des Browsers mittels Zeitstempel an den Server, liefert dieser als HTTP-Antwort den Statuscode 304 „not modified“ zurück und es wird die lokale Kopie im Zwischenspeicher genutzt. Normalerweise wird ein Wert in Sekunden angegeben, innerhalb dieses Zeitraums soll die Datei nicht erneut vom Server geladen werden.

4. Optimieren: wie sieht das optimale Zusammenspiel der Ressourcen aus?

Im letzten Schritt sollte das Zusammenspiel der minimierten und möglichst komprimiert übertragenen Ressourcen im Browser optimiert werden.

Die zeitliche Abfolge des Ladens der notwendigen Ressourcen kann beeinflusst werden. Ein asynchrones Laden von Script-Dateien kann für eine deutlich schnellere Interpretation des Browsers sorgen, da die Dateien parallel zum restliche Code der Seite geladen und automatisch bei Beendigung des Ladevorgangs ausgeführt werden. Im Normalfall wird das Rendern immer für den Download-Vorgang externer Scripte unterbrochen.

Browser unterstützen daher Befehle wie „async“ oder „defer“. Mit ihnen kann man die optimale Abfolge der benötigten Script-Ressourcen steuern. Ähnliche Ansätze existieren für CSS Dateien, bei denen möglichst nur zur aktuellen Darstellung notwendiges CSS geladen und restliche Style-Informationen eventuell später zur Verfügung gestellt werden.

Überlegen Sie, welche Bestandteile einer Webseite je nach Endgerät Sinn machen. Nicht alle Videos, Grafiken oder Navigations-Elemente müssen hier z.B. auf einem Smartphone zur Verfügung stehen. Wie sich Webseiten in verschiedenen Browsern und Auflösungen verhalten kann man mit Hilfsmitteln wie browserstack.com testen.

Online Tools

Wer diese Punkte beachtet, sorgt für bessere User Experience seiner Website und optimiert gleichzeitig seine Inhalte aus technischer Sicht für Suchmaschinen. Sie können diesen Prozess mit Hilfe folgender Online-Tools transparent analysieren- kostenlos:

https://developers.google.com/speed/pagespeed/insights/

https://tools.pingdom.com/

https://gtmetrix.com/

Über den Autor: Karsten ist Online Marketing Manager bei Infopark und renommierter Experte für die Themen SEO, SEA, Customer Journey, Google Analytics und vor allem der Optimierung von Webseiten. Wenn Sie Fragen zum Artikel haben, senden Sie ihm einfach eine Nachricht an karsten.galkowski@infopark.de

Scrivito CMS: der Content-Hub für Ihre Websites und Apps

Scrivito CMS ist unsere komplette Unternehmenslösung für Digital-Experience-Plattformen, Websites und Webanwendungen der nächsten Generation. Als Software as a Service benötigt Scrivito keine IT-Wartung. Das Content-Management-System ist äußerst flexibel und erfüllt höchste Sicherheitsstandards.