200923Dez

Website-Optimierung: Faktoren und Möglichkeiten

Die Geschwindigkeit einer Website ist ein wichtiger Punkt, der zur Qualität eines Internetauftrittes beiträgt. Besucher haben in der Regel wenig Zeit im Web und erwarten einen schnellen Seitenaufbau. Durch die große Anzahl an Suchergebnissen können langsame Seiten schnell an Gewicht verlieren, da sich Anwender schlicht für einen anderen Auftritt entscheiden können. Ob eine schnellere Seite auch besseren Inhalt liefert, steht auf einem anderen Blatt. Dennoch wird die Optimierung der Website-Geschwindigkeit immer wichtiger. Es gibt sehr viele gute Ressourcen im Netz, die bei der Verbesserung der Ladezeiten helfen können.
In diesem Workshop will ich einmal auf die grundlegenden Möglichkeiten eingehen, durch die sich Websites optimieren lassen. Es geht darum, einen Überblick über die technischen Aspekte zu erhalten, die variabel sind und Einfluss auf die Ladezeit haben. Ich habe ein kleines Schichtenmodell erstellt, das derartige Faktoren darstellen soll.

Website-Optimierung - Faktoren und Möglichkeiten

Die einzelnen Schichten können variieren bzw. ausgetauscht werden. Das Modell soll zur Veranschaulichung dienen und stellt lediglich eine allgemeine Architektur dar, die in der Regel einer gewöhnlichen Internetseite entspricht. Ich will in diesem Artikel kurz auf die einzelnen Punkte eingehen.

Server-Standort
Der Server oder Webspace, auf dem sich die Daten einer Website befinden, sollte so gewählt werden, dass die Strecken zwischen Besucher und Server möglichst kurz ausfallen. Natürlich ist das ein abstrakter Gesichtspunkt, denn es gibt persönliche Vorzüge und Meinungen, welche die Wahl des Anbieters beeinträchtigen. Dennoch sollte man darauf achten, dass der Server-Standort möglichst im gleichen Land wie der Großteil der Seitenbesucher angesiedelt ist. Infos und Bewertungen zu Webspace-Anbietern gibt es beispielsweise bei webhostlist.de
Jede Website hat individuelle Voraussetzungen und eine Datenbank ist nicht immer erforderlich. Bei der Wahl des Providers sollte man sich die Details des Angebots gut durchlesen. Wichtig für den nächsten Punkt, die Optimierung durch .htaccess-Befehle, ist die Unterstützung von .htaccess-Dateien. Dies ist nicht selbstverständlich und wird generell erst ab einem bestimmten Hosting-Paket angeboten.

HTTP-Headerdaten und GZip-Komprimierung (.htaccess)
Durch .htaccess-Befehle lassen sich gezielt HTTP-Headerdaten modifizieren und anpassen. Hier kann sehr viel erreicht werden, weshalb man diesem Punkt große Beachtung schenken sollte. Zum einen stellt die GZip-Kompression eine erhebliche Verbesserung dar, die in jedem Fall genutzt werden sollte. Während man durch die meisten Tipps wenige Millisekunden bei den Ladezeiten gewinnen kann, lassen sich Seiten durch GZip bis zu 80% komprimieren. Dazu gibt es verschiedene Methoden und fertige Beispiele, die sich zum Beispiel bei DZone finden. Ein weitere Möglichkeit (.htaccess-Befehl):

  • php_value output_handler ob_gzhandler

Man sollte verschiedene Befehle ausprobieren, da die Serverkonfigurationen variieren und nicht immer die gleichen Module aktiviert sind.
Weiterhin sollten die Headerdaten so angepasst werden, dass gesendete Dateien richtig im Cache abgelegt werden. Hierfür gibt es "Cache-Control"- oder "Expires"-Tags, die mit .htaccess-Befehlen gesetzt werden können und sollten. Ein Beispiel:

  • # Nur mit aktiviertem mod_headers-Modul
  • <IfModule mod_headers.c>
  • # 1 Woche
  • Header set Cache-Control "max-age=604800, public"
  •  
  • # 1 Monat (Beispiel für Grafiken)
  • <FilesMatch "\.(jpg|png|gif)$">
  • Header set Cache-Control "max-age=2592000, public"
  • Header set Expires "Thu, 23 Dez 2010 12:00:00 GMT"
  • </FilesMatch>
  • </IfModule>
  •  
  • # Nur mit aktiviertem mod_expires-Modul
  • <IfModule mod_expires.c>
  • ExpiresActive On
  • ExpiresByType image/gif "modification plus 10 hours"
  • ExpiresByType image/png "access plus 2 weeks"
  • </IfModule>

Der Vorteil des Apache-Moduls "mod_expires" liegt darin, dass dynamische Angaben im Datum verwendet werden können, während mit "set Expires" eine definitive Zeitangabe erfolgen muss. Möchte man dennoch dynamische Angaben vornehmen, ohne das "mod_expires"-Modul zu verwenden, kann der Weg über ein PHP-Skript gegangen werden, welches den entsprechenden Dateien per Befehl vorangestellt wird und die Headerdaten manipuliert.
Die Welt der .htaccess-Befehle ist umfangreich und kann komplex werden. Weitere Informationen finden sich beispielsweise in der offiziellen Dokumentation von Apache. Dort gibt es auch viele Regeln für URL-Rewriting.

Server-Anfragen (Requests) und DNS-Lookups
Für diese Thematik stehen exzellente Werkzeuge von Google und Yahoo! bereit. Die Anfragen und Ladezeiten von Website-Daten können sehr gut mit den Firefox-Erweiterungen Page Speed oder YSlow ermittelt werden. Für diese Extensions wird Firebug benötigt, mit dessen Netzwerk-Modul ebenfalls sehr gut die unterschiedlichen Daten einer Website analysiert werden können.

Firefox Extension - YSlow

Die YSlow-Erweiterung bietet in der aktuellen Version verschiedene "Rulesets", die beispielsweise auf kleine Seiten ("Small Site or Blog") zugeschnitten sind. An dieser Stelle kann ich nur auf die "Best Practices" von Google und Yahoo! verweisen, deren Schnittmenge eine gute Grundlage für die Optimierung einer Website darstellt. Nicht alle Tipps sind praktikabel oder sorgen für erhebliche Verbesserungen — bei kleineren Projekten lohnen sich Content Delivery Networks (CDN) nicht und viele Hilfestellungen sind für die meisten Webentwickler ohnehin selbstverständlich. Zudem gibt es Unterschiede: Während Yahoo! empfiehlt, JavaScript-Dateien am Ende des html-Codes zu platzieren, zeigen die Google-Richtlinien eine bestimmte Sortierung von CSS- und JS-Dateien im head-Bereich auf, durch die Zeit gewonnen werden kann.
Requests lassen sich nicht immer flach halten und dennoch ist das Verringern der Aufrufe in der Regel realisierbar. Hier ein paar Tipps, die sich überwiegend in den Dokumentationen von Google und Yahoo finden:

  • Verwendung von CSS-Sprites
  • Kombinierte CSS- und JavaScript-Dateien
  • Wenig DNS-Lookups

Die Kombination von mehreren CSS- oder JS-Dateien zu einer Datei lässt sich beispielsweise mit diesem PHP-Skript bewerkstelligen. Dieser Punkt findet jedoch nur Gewichtung, wenn wirklich viele einzelne Dateien verwendet werden.
Die Anzahl der DNS-Lookups sollte gering gehalten werden, was bedeutet, dass möglichst alle zu einer Seite gehörenden Dateien auf einem Server abgelegt sein sollten. Allerdings gibt es auch hier Ausnahmen wie beispielsweise die Google AJAX Libraries. Verweise zu den JavaScript-Frameworks, die bei Google gehostet sind, dürften relativ häufig Verwendung finden und könnten sich damit bei den meisten Besuchern schon im Cache befinden.

HTML/CSS-Code
Der eigentliche Markup-Code einer Seite sollte nicht mit unnötigem Ballast gefüllt sein. Allerdings lässt sich das nicht immer realisieren, vor allem wenn ein Content-Management-System den Code generiert. Dennoch können auch CSS-Dateien komprimiert werden (Minify) — das Google Page Speed-Plugin bietet zu unkomprimierten Stylesheets sogar den fertigen Minified-Code an.
Ansonsten gilt es der Entwicklung von HTML-Templates, auf "Inline"-Deklarationen zu verzichten und Bildern (img-Elemente) feste Angaben für Höhe und Breite (width/height) zu übergeben. Die Skalierung von Bildern über diese Angaben sollte ebenfalls vermieden werden (stattdessen sollten die Bilder bereits in ihrer finalen Größe auf dem Server vorliegen).
In den Google-Richtlinien finden sich hierzu noch Tipps wie "Remove unused CSS" oder "Use efficient CSS selectors". Auch diese Hilfestellungen sind nicht immer praktikabel und verbessern die Geschwindigkeit des Browser-Renderings nur gering. Dennoch gibt Google wertvolle Tipps zur Gestaltung der CSS-Programmierung. So kann es Vorteile bringen, wenn Nachkömmlings-Selektoren (Descendant) durch Kind- oder Klassen-Selektoren ersetzt werden.

  • Nachkömmlings-Selektor:
  • ul li { color:blue; }
  •  
  • Kind-Selektor:
  • ul > li { color:blue; }
  •  
  • Klassen-Selektor:
  • li.meineKlasse { color:blue; }

Man sollte derartige Vorgehensweisen vor der Entwicklungsphase eines Projektes festlegen, da sich ein nachträgliches Ändern solcher Deklarationen oftmals schwierig gestaltet.

Skriptsprachen und Komprimierung (Minify)
Die Verwendung von dynamischen Skriptsprachen wie PHP ist fast schon selbstverständlich. Hier gibt es keine bestimmten Richtlinien oder Hilfestellungen. Allgemein lässt sich festhalten, dass Plugins und Zusatzmodule entsprechende Rechenlasten mit sich ziehen und bedacht eingesetzt werden sollen. In manchen Fällen kann es daher helfen, statische Komponenten (z.B. auch Caching von HTML-Seiten) einzusetzen. Es gilt stets, den eigentlichen Nutzen eines Plugins/Effekts der damit verbundenen Ladezeit gegenüber zu stellen.
Dynamisches Font-Replacement, wie es etwa mit Cufón möglich ist, kann in diversen Browsern langsam sein und einen unschönen Nebeneffekt mit sich ziehen. Eine Alternative könnte hier beispielsweise die Verwendung von PHP (mit GD und FreeType) darstellen.
JavaScript lässt sich sehr gut komprimieren und auch hierfür gibt es im Netz etliche Werkzeuge:

Häufig bieten Skript-Autoren schon fertig komprimierte Versionen ihrer Plugins oder Frameworks an, so dass dieser Schritt hauptsächlich für eigenen JavaScript-Code nützlich sein kann.

Grafiken und CSS-Sprites
Der Anteil an Grafiken auf einer Website wird vom Webdesigner festgelegt und ist wieder bei jedem Projekt unterschiedlich. Der ästhetische Wert eines Auftrittes wird durch die grafische Gestaltung überhaupt erst definiert. Hier ist es sicherlich schwierig, Optimierungen vorzunehmen. Bei dem Speichern für das Web sollten die bestmögliche Kompression für PNG- und JPG-Bilder gewählt und nach Möglichkeit CSS-Sprites verwendet werden. Sprites können mittlerweile von Programmen wie SmartSprites oder dem CSS Sprite Generator automatisch erstellt werden.
Man sollte bei dem Benutzen von CSS-Sprites im Hinterkopf behalten, dass der Aufwand im Gegensatz zu separierten Grafikdateien höher ist — ob sich diese Art der Programmierung bezahlt macht, hängt nicht zuletzt vom Kunden ab. Auch hier sollte man abwägen, in welcher Relation der Aufwand zu der Verbesserung (weniger Requests) steht.

Seiteninhalt
Zum Abschluss ist noch der eigentliche Inhalt einer Website zu erwähnen: Sofern man Einfluss auf die Ausgabe eines Content-Management-Systems oder Frameworks hat, sollte man die Paginierung und Aufteilung von Seiten in Betracht ziehen. Dies bietet sich bei längeren Artikeln oder Artikelserien an und gehört bei modernen Redaktionssystemen zur Standard-Ausstattung.
Aus dem Bereich der Suchmaschinenoptimierung gibt es Erfahrungswerte und so sollte ein reine HTML-Seite (ohne Bilder und CSS-Dateien) nicht mehr als 150 KB groß sein.

Diese Tipps sollen Euch ein besseres Bild der verschiedenen Bereiche vermitteln, die sich bei Websites anpassen lassen. Es gibt zu allen Themen sehr gute Dokumentationen, nicht zuletzt auch in Form von Büchern.