Websitegeschwindigkeit optimieren

Die Geschwindigkeit einer Website zu optimieren ist meist ein Zwiespalt. Einerseits möchte man eine möglichst schöne, oft durch gimmicks (JQuery, Mootools) gespickte Website haben – andererseits aber möchte man auch nicht ewig auf die auslieferung der Websites warten.

Zum Glück hat sich dieses Problem durch Breitband-Anschlüsse etwas verringert, trotzdem ist eine Optimierung der Website Geschwindigkeit nicht zu unterschätzen. Angriffspunkte um die Geschwindigkeit zu verbessern sind die Bilder, die CSS & Javascript Dateien und die gZip Komprimierung der Seite mittels PHP und Apache.

Bilder

Heutzutage ist es normal große, aufwändige Bilder zu nutzen um die Website optisch aufzuwerten. Die Möglichkeit hier: Abspecken der Bilder – entweder durch Photoshop oder Fireworks selber oder durch spezielle Komprimierungstools. Ein Online-Anbieter, welche die Dateien komprimiert ist Smush.it.

Hier können entweder Links zu den Bildern angegeben werden, welche Stapelweise verarbeitet werden – oder aber die andere Möglichkeit: Die Dateien werden nacheinander vom Desktop aus hochgeladen. Alle Bilder werden anschliessend in einer .zip Datei archiviert und können dann heruntergeladen werden.

smushed

CSS & Javascript

Ein wichtiger Punkt sind die CSS & Javascript Dateien – diese sollten nach Möglichkeiten ausgelagert werden, denn somit werden sie vom Browser zwischengespeichert und im Cache aufbewahrt. Sollte ein User nun die folgenden Seiten besuchen müssen diese Informationen nicht erneut geladen werden. Auch die CSS & Javascript Dateien sollten komprimiert werden, dafür gibt es eine Reihe von Online-Anbietern die dieses ermöglichen.

U.a. sind dies Javascriptcompressor.com, CSSDrive.com und Ebiene.de. Weitere sind leicht bei Google zu finden. Trotzdem ist beim komprimieren Vorsicht geboten, denn ab und an funktionieren anschliessend einige JS Funktionen nicht mehr. Hier sollte die eigene Website also anschliessend nochmals getestet werden. Um die Dateien weiter programmierfähig zu halten sollten 2 Versionen angelegt werden – eine komprimierte und eine lesbare an der weiterentwickelt werden kann.

gZip komprimierung

Eine oftmals unterschätzte Möglichkeit der komprimierung ist die „on-the-fly“ Möglichkeit mittels PHP & Apache. Seit PHP4 gibt es die Möglichkeit durch einen Aufruf der Funktion ob_start(); die gZip komprimierung anzuschmeissen. Dafür muss lediglich folgender Code am Anfang der Seite plaziert werden:

<?php
     ob_start('ob_gzhandler');
?>

Dadurch wird die Seite zu lasten des Servers vor Ausgabe komprimiert und an den Browser gesendet. Die modernen Browser unterstützen dies Problemlos. Die älteren können durch eine Abfrage davon ausgenommen werden:

<?php
    if( strpos( @getenv ("HTTP_ACCEPT_ENCODING"),"gzip") !== FALSE)
        ob_start("ob_gzhandler");
?>

Eine weiter Möglichkeit ist das Apache Modul mod_gzip – Dazu sollte eine info.php mit der Funktion

<?php
    phpinfo();
?>

erstellt werden. Diese anschließend aufrufen und nachprüfen ob das Apache Modul vorhanden ist. Wenn dies der Fall ist eine .htaccess Datei erstellen und mit dem einfachen Befehl

SetOutputFilter DEFLATE

die gzip komprimierung aktivieren.

Abschluss

Es gibt noch ein paar weitere Möglichkeiten die Geschwindigkeit der Seite zu verbessern. Ein paar gute Anhaltspunkte hierfür gibt YSlow – ein Firefox-Plugin von Yahoo, welches die Website untersucht und weitere Verbesserungsvorschläge gibt.

Andre Teich

arbeitet als Webentwickler und Webdesigner bei der Firma Tintometer in Dortmund. Die Fachgebiete sind die Webentwicklung mit PHP, JavaScript, MySQL, CSS und die Designarbeiten mit der Adobe Creative Suite.

6 Kommentare zu "Websitegeschwindigkeit optimieren"

SEOdiot 12. Feb 2009 um 15:01 Uhr

Coole Schnellübersicht! Sinnvolle Mittagspause! ;o)

Einen manchmal sehr unterschätzten Aspekt beim Platz sparen würde ich aber noch anführen: Leerzeichen bzw. -zeilen. Diese lassen sich in GZip zwar toll komprimieren, aber was von Haus aus nicht drin ist, muss später auch nicht erst noch komprimiert werden. Und je nach Seitengröße kommen da auch schnell mal ein paarhundert Byte zusammen. Wir hatten sogar mal einen Fall, wo die tausenden, vom CMS generierten Leerzeilen in jeder Seite mehr als die Hälfte der ganzen Seitengröße ausmachten. Frag nicht, wie schnell diese Website wurde, nachdem wir einfach nur diesen Ballast rausgenommen haben…

Für das Debugging ist so ein zusammengeschobener Quellcode zwar nicht schön, aber man kann ja eine Zwischenschicht zwischen dem Skript und der eigentlichen Ausgabe einschieben, das derartige Leerzeilen und Einrückungen im Code automatisch eliminiert, bevor alles an den Server gepumpt wird. Und bei Redaktionssystemen gibt es auch oft die Möglichkeit, entsprechende Filter zwischen Entwicklungs- und Live-System zu hängen bzw. gleich unterschiedliche Templates für die beiden System zu verwenden.

Und was man vielleicht auch nicht vergessen sollte: so manche Platzverschwendung fängt schon beim grundsätzlichen Aufbau der Seite an. CSS-Layout ist im Vergleich zu Tabellen ungleich kürzer. CSS-Formatierung ist im Vergleich zu klassischen font-Orgien ungleich kürzer. Und auch die kurze „Kodierung“ von ids und classes kann bei entsprechend häufiger Verwendung enorm Platz sparen (also die Klasse z.B. einfach nur „p1“ zu nennen anstatt „normal-text“ oder „hg“ statt „header-gruen“ – Google macht das zum Teil sehr schön vor).

Ach ja, was Google auch schön vormacht ist das Platz-Sparen mit Bildern. Einfach ein einziges Bild mit z.B. allen benötigten Icons in einer Seite erstellen und dann über die Hintergrund-Positionierung nur den jeweils gerade benötigten Ausschnitt anzeigen. Denn einmal ein größeres Bild mit 10 Icons drin runterzuladen geht wegen des HTTP-Overheads normalerweise viel schneller als 10 kleine Bilder zu holen…

Und nicht zuletzt „noch einen Stock tiefer“: lasst doch gerade bei PHP-Sachen mal den Zend-Profiler mitlaufen und geht in Euch, ob da nicht die eine oder andere Routine schneller programmiert werden könnte. Vor allem wenn Datenbankabfragen beteiligt sind, stellt man manchmal fest, dass man wegen dieser und jener Vererbung einen unnötigen Query macht, das ResultSet noch weiter eingegrenzt werden könnte oder manches vielleicht sogar doppelt aus der DB geholt wird…

Andre 12. Feb 2009 um 15:16 Uhr

Ui…dein Text ist ja fast ausführlicher als meiner ;) Aber die Sachen die du ansprichst stimmen auf jeden Fall.

die Problematik bei den Leerzeichen, Klassen usw. seh ich dann nur in der Programmierbarkeit…klar kann man von allem eine zweite Datei anlegen, aber bei Dateien die man evtl. öfter mal ändert ist das dann doch schon etwas mühseliger.

Man muss einfach den goldenen Weg finden würd ich sagen :)

WE News – Website Turbo & Optimierung - Webmaster-Glossar.de

[…] PHP’ler – Optimierungsanleitung auf chikki.de […]

Christian Straube 26. Feb 2011 um 08:13 Uhr

Hi,
schöne Übersicht :-)
Das Optimieren der JavaScript- und CSS-Dateien kann man auch bequem mit einem lokalen ANT-Build erledigen, dann muss man nicht dauernd zig Tools bemühen. Wie das geht steht beispielsweise hier http://www.christian-straube.de/2011/02/23/website-geschwindigkeit-verbessern/ oder hier http://phpperformance.de/optimierung-externer-client-ressourcen-durch-ant-deploy-prozess/

WE News – Website Turbo & Optimierung > Blog & Website

[…] PHP'ler – Optimierungsanleitung auf chukki.de […]

WE News - Website Turbo & Optimierung » Webmaster Glossar » Webmaster Glossar

[…] PHP’ler – Optimierungsanleitung auf chukki.de […]

Kommentar schreiben