Web Performance Optimization

Make the Web faster!

Was kann optimiert werden?

Eine Website setzt sich aus verschiedenen Elementen zusammen: CSS, HTML, Bilder, Javascript-Dateien, Texte, usw. Nur etwa ein Zehntel der Zeit verbringt der Browser mit dem Download des eigentlichen HTML-Codes. Den Rest benötigt er, um Ressourcen wie Javascript, Bilder oder CSS-Dateien zu laden, zu interpretieren und darzustellen („rendern“). Hier steckt fast immer ein großes Optimierungspotenzial.

Die Optimierungsmaßnahmen lassen sich also grob in zwei Bereiche unterteilen. Der eine betrifft den Client, also den Browser. Der andere zielt auf serverseitige Verbesserungen.

Die clientseitigen Optimierungen

Clientseitig lauten die wichtigsten Regeln:

Anzahl der HTTP-Requests minimieren
Jede abgeschickte Anfrage (Request) kostet den Browser Zeit. Eine einfache und effektive Methode ist es daher, die Anzahl der Requests zu senken zum Beispiel durch sogenannte Sprites für Bilddaten. Häufig verwendete Icons werden dabei in einem großen Bild zusammengefasst und am Verwendungsort über CSS angesteuert.

CSS-Dateien am Anfang des HTML-Dokuments laden
Das CSS enthält die Layout-Information zu den einzelnen HTML-Elementen. Steht diese Information am Anfang des Ladevorgangs zur Verfügung, so kann das CSS sofort für den Seitenaufbau verwendet werden. Späteres Laden der CSS-Dateien führt in dem ein oder anderen Browser (z.B. Internet Explorer) zu einem sogenannten Redrawing-Prozess, der Zeit kostet und den Prozessor belastet, da nach dem Laden der HTML-Elemente alles noch einmal komplett neu gerendert werden muss.

Javascript-Dateien am Ende einer HTML-Datei einbinden
Eine Javascript-Datei wird, sobald geladen, einmalig ausgeführt, damit die Javascript Engine des Browsers die Funktionen dieser Datei „kennenlernt“. Dieser Vorgang wirkt blockierend: Der Browser muss diese Aufgabe zuerst abarbeiten, um mit den folgenden Tasks fortfahren zu können. Daher kann es den Seitenaufbau stark verzögern, wenn das Javascript am Anfang der HTML-Datei eingebunden ist. Um dies zu vermeiden, sollten die Skripte nachgelagert geladen werden (Deferred Loading).

Ressourcen verkleinern
Javascript und CSS-Dateien können durch Tools wie JSMin oder YUI Compressor automatisiert verkleinert werden. Dadurch werden die Dateien um etwa die Hälfte kleiner. Eine signifikante Komprimierung von Bildern erlauben Programme wie ImageOptim oder RIOT.

Die serverseitigen Optimierungen

Serverseitig empfehlen sich folgende Vorgehensweisen:

Dateiübertragung optimieren
Auch serverseitige Optimierungen setzen auf Kompression, wie z. B. auf die Übertragung der Dateien im GZIP-Format. Damit lassen sich Texte bis zu 70% verkleinern.

Ressourcenmanagement durch Caching optimieren
Eine weitere Methode, ressourcenschonend Inhalte zu übertragen, findet sich im Cache-Management. Über den Cache kann die Lebenszeit einer Ressource gesteuert werden. Bilder oder Texte, die keiner redaktionellen Dynamik unterliegen, können mit einer langen Lebensdauer ausgeliefert werden. Der Browser merkt sich diese Einstellungen und verwendet die Dateien aus dem eigenen Cache — ohne das Netzwerk zu belasten.

Statische Dateien über CDN ausliefern
Optimierungspotenzial steckt auch in der Auslieferung der sogenannten statischen Dateien. Statische Dateien ändern sich nicht durch Nutzerinteraktivität. Diese können über ein CDN (Content Delivery Network) ausgeliefert werden. CDNs bieten den Vorteil, ein Netzwerk an Servern über die ganze Welt verteilt zur Verfügung zu stellen. Dadurch fallen lange Übertragungswege weg und die Last beim Laden der Ressourcen verteilt sich auf mehrere Server, was auch eine verbesserte User Experience mit sich bringt.

Die Analyse-Tools

Zu Beginn eines Optimierungsprozesses steht die Performance-Analyse. Hier stehen verschiedene Arten von Tools zur Auswahl: Manche lassen sich als Browser-Plug-ins (YSlow, PageSpeed) betreiben, andere sind Standalone-Programme (Dynatrace) oder webbasierte Applikationen (Webpagetest). Die Tools schließen sich dabei nicht aus, vielmehr sorgen ergänzende Messungen mit unterschiedlichen Methoden zu einem differenzierteren Gesamtbild.

Die Messergebnisse der Analyse-Tools fließen in ein Punktesystem ein. Aus diesem System ergibt sich ein Index, welcher die Gesamt-Performance der Seite sichtbar macht. Hier setzen die verschiedenen Hersteller unterschiedliche Schwerpunkte – gerade deshalb ist ein Vergleich der Messungen mit unterschiedlichen Tools sinnvoll, um zu einem ausgewogenen Eindruck zu bekommen.

Mehr aus Websites rausholen - Jetzt Erstgespräch vereinbaren

Unsere Leistungen

• Umfassende Performance-Analysen basierend auf Messungen mit verschiedenen Tools
• Beratung zu Optimierungsmöglichkeiten bei bestehenden Internetpräsenzen
• Umsetzung der Optimierungsmaßnahmen bei Implementierung

Unsere Referenzen

• Web Performance Optimization für einen Marktführer im Touristikbereich
• Web Performance Optimization für Smartshopping