In den beiden vorangegangenen Artikeln (Performance Teil I und Performance Teil II) zum Thema Performanceoptimierung von Websites wurde bereits auf die Bedeutung der Ladezeit auf Suchmaschinen und Conversions/Usability eingegangen sowie Tools und erste Optimierungsmaßnahmen vorgestellt. In diesem Artikel werden weitere Maßnahmen aufgezeigt, die zu einer Reduzierung der Ladegeschwindigkeit führen.

Erhöhung der Anzahl gleichzeitiger HTTP-Requests

Parallelisierung von Anfragen

Um mehr Anfragen gleichzeitig ablaufen zu lassen, empfiehlt sich ein Auslagern auf (Sub-)Domains. So können beispielsweise Bilder oder Grafiken auf Subdomains ausgelagert werden. Auch die Auslagerung von CSS- oder JS-Dateien auf eigene Subdomains kann zur Optimierung der Seitenladezeit beitragen.

Dieses Vorgehen kann jedoch zu erhöhter CPU-Last auf dem Client führen und weitere round-trip time für jeden neuen Verbindungsaufbau und DNS lookup für Clients mit leerem Cache erzeugen. Aus diesem Grund kann die Ladezeit sogar verschlechtert werden. Google gibt an, dass die optimale Anzahl an Hosts zwischen 2 und 5 liegt, abhängig z. B. von der Dateigröße oder Bandbreite. Webseiten, die viele statische Ressourcen (mehr als 10) von einem einzigen Host laden, sollten diesen auf mehrere Hosts verteilen.

Minimierung der Größe abzurufender Daten

Komprimierung von Dateien

Die Komprimierung von HTML, CSS und JavaScript wird von den meisten modernen Browsern unterstützt und bietet großes Potenzial zur Reduzierung der Ladegeschwindigkeit durch die Reduzierung der Abrufdaten.

GZIP, standardisiert durch RFC 1952, ist die derzeit bekannteste und effektivste Methode. Darüberhinaus gibt es noch deflate als Komprimierungsformat. Dieses ist jedoch weniger effektiv und nicht so bekannt wie GZIP. Bei der Reduktion der Dateigröße mittels GZIP sollten Dateien (CSS, HTML, JS,…) ab 150 Bytes komprimiert werden. Bei kleineren Dateien oder beispielsweise Bildern, Videos oder PDFs ist von dieser Komprimierungsart abzuraten, da diese Dateien dadurch sogar vergrößert werden könnten.

Beispielsweise bei Bildern bietet es sich an, alle Dateien mit entsprechenden Programmen zu komprimieren. Icons, kleine Dekorationsgrafiken oder animierte Bilder sollten als GIFs dargestellt werden, JPGs für fotografische und PNGs für die übrigen Bilder. Von BMPs oder TIFFs wird in den Google Optimierungsrichtlinien abgeraten. Bei der Nutzung von Googles Add-On Page Speed für den Firefox wird auf die Komprimierung von Bildern nicht nur hingewiesen sondern auch gleich komprimierte JPEG- oder PNG-Versionen direkt zum Download angeboten.

Müssen viele JS-Dateien abgerufen werden, kann ein Zusammenlegen dieser Dateien sinnvoll sein, um die Anzahl an Requests zu reduzieren und dadurch die Seitenladezeit zu reduzieren. Die Dateien selbst können mithilfe von Tools dann auch wieder reduziert werden, als Beispiel sei hier der YUI Compressor von Yahoo! genannt.

Auch die Positionierung von CSS- und JS-Dateien spielt eine Rolle bei der Ladegeschwindigkeit. So sollten CSS-Dateien am Seitenanfang positioniert werden, damit der abrufende Browser schnell die nötigen Informationen über die Darstellung der Seite erhält. JavaScript-Dateien, die für den Seitenaufbau an sich nicht von Bedeutung sind, können hingegen am Seitenende platziert werden, da diese durch das nacheinander gelagerte Laden beim Abruf den Seitenaufbau extrem verlangsamen. Ein konkretes Beispiel, wie sich die Positionierung von CSS- und JS-Dateien auf die Ladezeit auswirkt, findet sich in den Code-Hilfen zum Thema Minimize round-trips bei Google.

Optimierung des Quellcodes

Um das Rendern einer Seite zu beschleunigen sollten Grafiken im Quellcode mit den entsprechenden Höhen- und Breitenangaben ausgestattet sein. So kann der Browser bereits für die später angezeigten Grafiken den erforderlichen Platz einräumen. So müssen beim späteren Laden der Bilder keine Inhalte wie z. B. Text um die Bilder umplatziert werden.

Valider Quellcode gemäß W3C Validator sorgt dafür, dass Browser Fehler (z. B. nicht geschlossene Tags) nicht ausbügeln müssen, und so schneller geladen werden können. Auch aufgeräumter Code, der keine unnötigen Leerzeilen oder Kommentare enthält, kann durch die Reduktion der Dateigröße zur Verringerung der Ladezeit beitragen.

Weitere Maßnahmen zur Performanceoptimierung

Nutzung eines Content Delivery Networks (CDN)

Gerade Websites, die internationale Zugriffe erhalten, können vom Einsatz eines CDNs profitieren. Content Delivery Networks ermöglichen den Zugriff auf Server in der ganzen Welt. So kann die Entfernung vom Server zum Client minimiert werden und die Verbindung schneller aufgebaut werden. Ruft beispielsweise ein Nutzer aus den USA eine Seite ab, die in Spanien liegt, dauert dies länger als der Abruf derselben Seite durch einen Nutzer in den USA. CDNs erkennen den Ort des Nutzers und bedienen die Anfrage von dem Server aus, der geografisch näher am Ort des Nutzers liegt. Anbieter von CDNs sind beispielsweise Amazon oder Googles neuer Dienst Page Speed Service.

Verwendung anderer (Sub-)Domains für cookiefreie Ressourcen

Liegen statische Ressourcen wie Bilder, CSS- oder JS-Dateien, die keine Cookies benötigen, auf einer Domain, die Cookies verwendet, schickt der Browser bei jeder Anfrage die Cookies, die er für diese Domain gespeichert hat, mit. Dies kann verhindert werden, indem für solche cookiefreien Ressourcen (Sub-)Domains genutzt werden. So verwenden zum Beispiel Amazon und Yahoo! andere Domains zur Speicherung ihrer CSS-Dateien und Bilder, die keine Cookies brauchen: images-amazon.com, ymig.com.

Weitere Informationen zu den Web Performance Best Practices von Google und Yahoo in der Übersicht finden sich hier:

Mithilfe der vorgestellten Tools kann ermittelt werden, welche Baustellen im Bereich der Performance-Optimierung bestehen und je nach Aufwand abgearbeitet werden. Welche Maßnahme den stärksten Einfluss auf die Ladezeit hat, hängt immer von der jeweiligen Seite und deren speziellen Geschwindigkeitsproblemen ab. Ein Reiseseite mit vielen hochauflösenden Bildern profitiert vermutlich stark von der Reduzierung der Dateigröße und vom Setzen von Expiration Dates. Eine Seite mit internationalen Abrufen ist mit dem Einsatz eines CDNs oder dem Google Page Speed Service vermutlich gut bedient.

Wer ein CMS für seine Website oder den Blog nutzt, kann auch die Einbindung von fertigen Plugins zur Performanceoptimierung erwägen, wie z. B. WPSuperCache für WordPress. Allerdings kann auch die Nutzung von (vielen) Plugins zu einer Verschlechterung der Performance beitragen und ist je nach Website abzuwägen.

Es ist unbedingt empfehlenswert, sich mit dem Thema Performanceoptimierung auseinanderzusetzen. Nicht nur Suchmaschinen stehen auf performante Websites, auch Besucher bevorzugen Websites mit schnellen Ladezeiten. Eine Optimierung bringt daher Pluspunkte für SEO, Conversions und Usability/User Experience.

Mehr zum Thema: