In der Artikelreihe Webseiten beschleunigen bin ich ja ausführlich auf das Firefox-Add-on Page Speed eingegangen, das die Geschwindigkeit des Seitenaufbaus eurer Website bewertet und Tipps zur Beschleunigung gibt. Page Speed wurde von Google entwickelt, das darauf aufbauend seit gestern einen neuen Service anbietet, nämlich den (kostenpflichtigen) Page Speed-Dienst.

Automatische Seitenoptimierung mit Hilfe des Page Speed-Dienstes

Wenn ihr eure Webseiten mit der Hilfe von Page Speed beschleunigen wolltet, musstet ihr schon ein wenig Zeit und Gehirnschmalz investieren, um ein gutes Ergebnis zu erhalten. Mit dem Page Speed-Dienst bietet Google nun eine automatische Seitenoptimierung an ohne das ihr selbst etwas an eurer Website ändern müsst. Wie gesagt ist dieser Dienst kostenpflichtig. Damit ihr nicht die Katze im Sack kaufen müsst, bietet Google einen kostenlosen Test an, mit dem ihr die jetzige Version eurer Website mit einer durch den Page Speed-Dienst optimierten Version vergleichen könnt.

Der Test des Page Speed-Dienstes

Auf der Testseite tragt ihr eure Website ein und gebt an von welchem Serverstandort aus der Test erfolgen soll. Am sinnvollsten ist meiner Meinung nach die Eingabe Europe (Irland), bei der der Test ca. 8 Minuten dauert. Zwar könnt ihr unter “More Configurations” noch weitere Standorte wie z. B. Frankfurt wählen, allerdings dauert der Test dann unverhältnismäßig lange (mind. 24 Minuten). Je nach Standort könnt ihr auch unter verschiedenen Browserversionen wählen, es werden allerdings nur der Internet Explorer und Google Chrome unterstützt. Ich habe zum Testen die Einstellung “Europe (Ireland) – IE 8 – DSL” gewählt.

Optimierung nicht immer besser

Zuerst habe ich den Test mit meiner Rätselseite durchgeführt, die ich schon von Hand recht gut optimiert habe und die bisher von Page Speed mit 90 Punkten bewertet wurde.

Testergebnis des Google Page Speed-Dienstes auf www.raetselstunde.de

Wie ihr seht, hat der Page Speed-Dienst beim Erstaufruf der Seite nur eine minimale Verbesserung von 0,9 % bewirkt. Beim wiederholten Aufruf der Seite war die von Google optimierte Version allerdings um 0,6 Sekunden bzw. 21,8 % schneller.

Dass dies nicht immer so sein muss, zeigt der 2. Test, den ich mit der Webmaster-Zentrale (laut Page Speed-AddOn 90 Punkte) durchgeführt habe.

Testergebnis des Google Page Speed-Dienstes auf www.webmaster-zentrale.de

Obwohl ich diesen Blog nur teilweise optimiert habe, konnte der Test diesmal nur beim Erstaufruf ein besseres Resultat erzielen (allerdings immerhin 31,5 %). Beim wiederholten Aufruf war die von Google optimierte Version etwas langsamer (5,4 %). Eine mögliche Erklärung dafür wäre, dass ich hier im Blog Hyper Cache verwende und dass die von diesem WordPress-Plugin durchgeführte Optimierung standardmäßig schon recht gut ist.

Weitere Informationen

Weitere Informationen über die durchgeführten Tests könnt ihr übrigens erhalten, wenn ihr unter den Screenshots auf “View Test” klickt. Neben dem Page Speed-Score findet ihr rechts oben Buttons mit Buchstaben, die einzelne Unterpunkte eurer Original-Website bzw. der optimierten Version bewerten (der Buchstabe “A” ist dabei das bestmögliche Ergebnis). Mit einem Klick auf den Buchstaben erhaltet ihr weitere Auswertungen und Verbesserungstipps. Wer möchte, kann sich hier seine Zeit mit etlichen Statistiken vertreiben:

• Summary – Der Überblick über die durchgeführten Tests.
• Details – Zeigt anhand eines “Wasserfalls” an, wann welche Datei geladen wurde (vergleichbar mit der Website Pingdom-Tools).
• Performance Review – Zeigt z. B. für jede Datei an, ob sie gezippt und gecacht wurde.
• Page Speed – Hier erhaltet ihr die gleichen Infos, die auch von dem Firefox-Add-on Page Speed angezeigt werden.
• Content Breakdown – Diese Statistik liefert einen Überblick über die von euch verwendeten Dateiarten (z. B. Bilder, Javascript-, Flash- oder CSS-Dateien).
• Domains – Liefert einen Überblick über die Domains, von denen die Dateien abgerufen werden.
• Screenshot – Zeigt je einen Screenshot vom Start und vom Ende des Ladevorgangs und die dabei entstandenen Statusmeldungen an.

Kosten des Google Page Speed-Dienstes

Über die Kosten seines Dienstes schweigt sich Google zur Zeit noch aus. Einigen Webmastern wird der Dienst im Moment aber kostenlos angeboten. Wenn ihr wollt, könnt ihr euch auch dafür anmelden. Da die Formularseite aber komplett in Englisch gehalten ist, vermute ich mal, dass deutschsprachige Websites keine großen Chancen auf einen kostenlosen Betatest haben werden. Neben den Standard-Informationen wie E-Mail-Adresse und Domain will Google auch die Anzahl eurer täglichen Pageviews wissen. Die kleinste Angabe ist dabei “Unter 100″. Das könnte eventuell bedeuten, dass bei einer solch geringen Zahl von Seitenaufrufen der Dienst vielleicht noch kostenlos ist (quasi als Lockangebot). Das ist jetzt aber reine Spekulation meinerseits.

Wer braucht eine kostenpflichtige Optimierung?

Jetzt stellt sich natürlich die Frage, für wen eine kostenpflichtige Optimierung überhaupt sinnvoll ist? Wenn ihr eine Website nur aus Spaß an der Freude betreibt und nur wenig oder gar kein Geld damit verdient, macht ein solcher Dienst für euch wohl keinen Sinn. Wenn ihr allerdings einen größeren Online-Shop habt, der euch zeitmäßig voll auslastet und mit dem ihr euren kompletten Lebensunterhalt verdient, ist es eventuell sinnvoll, die Optimierung eurer Website auszulagern. Je länger die Ladezeit eures Shops nämlich ist umso größer ist die Wahrscheinlichkeit, dass ein potentieller Kunde eventuell abspringt und zu einem anderen Anbieter wechselt.

Automatisch oder von Hand optimieren?

Würdet ihr den Google Page Speed-Dienst eventuell nutzen, wenn das Preis-Leistungs-Verhältnis stimmen würde? Oder überlasst ihr nichts dem Zufall und optimiert eure Seite lieber selbst? Schreibt doch bitte in den Kommentaren etwas dazu.

Das Google Kompendium

Im 5. und letzten Teil der Artikelreihe Webseiten beschleunigen will ich erklären, wie ihr den Code eurer Webseiten optimieren könnt. Die Möglichkeiten sind natürlich gerade bei HTML und CSS sehr begrenzt, da es sich ja nicht um Programmiersprachen sondern um eine Auszeichnungssprache (HTML) bzw. um eine Beschreibungssprache (CSS) handelt. Ein paar Tipps wie ihr euren Code optimieren und damit eure Webseiten beschleunigen könnt, kann ich euch aber trotzdem geben.

Reihenfolge von CSS und Javascript optimieren

Wenn ihr mit Page Speed eure Website überprüft, dann spuckt das Tool eventuell folgende Fehlermeldung aus:

Optimize the order of styles and scripts

Oder auf Deutsch: “Optimieren Sie die Reihenfolge der Stile und Skripte”. Mit styles (Stile) sind die CSS-Dateien gemeint und mit scripts (Skripte) Javascript-Dateien. Warum ist es nun wichtig, bei der Einbindung dieser Dateien auf die richtige Reihenfolge zu achten? Das liegt einfach daran, dass der Browser den HTML-Code erst verarbeiten kann, wenn er weiß, wie dieser formatiert wird. Deshalb ist es sinnvoll, die CSS-Dateien bereits im <head>-Teil des HTML-Dokuments zu laden (alles andere wäre im übrigen auch nicht valide). Dann weiß der Browser wie die einzelnen HTML-Befehle dargestellt werden sollen und kann sofort damit beginnen.

Außerdem ist es wichtig, die Dateien zu gruppieren. Zuerst sollten alle CSS-Befehle im Code erscheinen und danach alle Javascript-Anweisungen. Gleichartige Dateien kann der Browser nämlich gleichzeitig herunterladen. Bei verschiedenen Dateitypen muss der Browser allerdings immer warten, bis ein Typ fertig geladen ist, bevor er mit dem nächsten beginnen kann. Eine richtige Einbindung von CSS- und Javascript-Befehlen sieht demnach so aus:

<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="style2.css" />
<script src="javascript1.js" type="text/javascript"></script>
<script src="javascript2.js" type="text/javascript"></script>

Dateien kombinieren

Sehr oft spuckt Page Speed auch eine der beiden folgenden Meldungen aus:

- Combine external JavaScript

- Combine external CSS

Damit weist das Tool daraufhin, dass es natürlich schneller ist, wenn ein Browser nur eine Datei übertragen muss, anstatt 2 oder sogar noch mehr. Generell ist es deshalb empfehlenswert, Javascript- und CSS-Dateien soweit wie möglich zusammenzufassen.

Allerdings gibt es auch Fälle, in denen das nicht unbedingt sinnvoll ist. Wenn ich z. B. auf Seite A nur einen einzigen Javascript-Befehl brauche, auf Seite B brauche ich aber mehrere und vielleicht sogar noch eine große JavaScript-Bibliothek wie z. B. jQuery, wäre eine Zusammenlegung kontraproduktiv.

Dateien minimieren

Um den Code übersichtlich und gut lesbar zu machen, werden in Javascript- und CSS-Dateien oftmals viele Zeichenumbrüche und Kommentare verwendet. Während der Entwicklung ist das sicher auch sinnvoll. Wenn der Code allerdings fertig ist, solltet ihr diesen überflüssigen Ballast entfernen. Darauf weisen die beiden Page Speed-Meldungen “Minify CSS” und “Minify JavaScript” hin. Bei großen JavaScript-Bibliotheken wie dem bereits angesprochenen jQuery gibt es meistens bereits eine minimierte (minified) Version. Außerdem bietet Page Speed sowohl für JavaScript als auch für CSS eine minimierte Version an, die ihr nur abspeichern und auf den eigenen Webspace hochladen müsst.

Page Speed bietet auch an, HTML-Dateien zu minimieren. Dies kann ich allerdings nicht empfehlen, da es bei mir bei einigen HTML-Dateien vorkam, dass sie danach nicht mehr richtig dargestellt wurden.

Grafiken richtig einbinden

Im ersten Teil dieser Serie habe ich ja beschrieben, wie ihr Grafiken verkleinern könnt, um Übertragungskapazität zu sparen. Um den Seitenaufbau zu beschleunigen ist aber nicht nur eine geringe Dateigröße der Grafik wichtig, sondern auch die richtige Einbindung in den HTML-Code. So sollte im img-Tag die Breite und Höhe einer Grafik angegeben werden, also z. B. so:

<img src="test.jpg" width="300" height="200" alt="Test-Grafik" />

Wichtig dabei ist aber, dass die im img-Tag angegebenen Größen auch mit der tatsächlichen Bildgröße übereinstimmen. Ist das nicht der Fall, muss der Browser das Bild an die angegebenen Werte anpassen. Das hat 2 große Nachteile: Erstens kostet die Vergrößerung oder Verkleinerung einer Grafik sehr viele Ressourcen und verlangsamt dadurch den Seitenaufbau erheblich.

Und zweitens sind Browser dazu entwickelt worden, Webseiten dazustellen und nicht dazu, die Größe von Grafiken zu verändern. Deshalb sind die vom Browser veränderten Grafiken meistens unscharf und sehen nicht gut aus. Am einfachsten ist es, wenn ihr eure Bilder zuerst in einem Bildbearbeitungsprogramm wie paint.net oder gimp auf die richtige Größe bringt und sie erst danach in eure Webseite einbaut.

Webseiten beschleunigen

Damit ist die Artikelreihe “Webseiten beschleunigen” nun abgeschlossen. Wer all die gegebenen Tipps umsetzt, kann die Ladezeit seiner Webseiten erheblich verkürzen. Ich hatte bei meiner Rätselseite zu Beginn der Optimierung bei Page Speed einen Wert von ungefähr 80, den ich dann durch die von mir beschriebenen Optimierungs-Tipps auf 99 verbessern konnte. Durch den Einbau von Werbebannern, auf deren Code ich leider keinen Einfluss nehmen kann, ist der Wert zwar wieder gesunken, trotzdem hat sich die Ladezeit gegenüber dem Anfang erheblich verkürzt.

Eure Optimierungstipps

Habt ihr noch Fragen dazu, wie ihr eure Webseiten beschleunigen könnt? Liefert euch Page Speed vielleicht eine Meldung, die ihr nicht versteht? Oder habt ihr noch einige Tipps, wie der Aufbau von Webseiten beschleunigt werden kann? Dann schreibt doch bitte etwas in den Kommentaren dazu.

Artikelreihe Webseiten beschleunigen:

1. Dateigröße von Grafiken verkleinern

2. Expires-Header verwenden

3. Parallele Downloads

4. Die gzip-Compression

High Performance Websites

Wenn man seine Website mit Pagespeed überprüft und dabei die Meldung “Enable Compression” (Komprimierung anschalten) erhält, dann ist das ein Hinweis darauf, dass die Daten unkomprimiert vom Server zum User gelangen. Gerade bei größeren Webseiten kann man durch eine gzip-Compression aber einiges an Datenmenge (ca. 70-80 %) und damit auch an Übertragungszeit einsparen.

Generell gibt es 3 Möglichkeiten, wie man die gzip-Compression nutzen kann. Die einfachste ist ein simpler Eintrag in der .htaccess:

1. gzip-Compression über die .htaccess

<IfModule mod_deflate.c>
<FilesMatch "\\.(js|css|html|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

In der ersten Zeile wird geprüft, ob das Modul mod_deflate auf dem Server aktiviert ist. Das ist nämlich Voraussetzung zur Nutzung der gzip-Compression. Danach werden dann alle Dateien mit der Endung .js, .css, .html, .xml komprimiert. Es können natürlich noch weitere Endungen hinzugefügt werden. Allerdings macht eine Kompression von Grafikformaten wie z. B. jpg, gif oder png wenig Sinn, da diese bereits von Haus aus komprimiert sind. Ein Nachteil dieser Methode ist, dass das Modul mod_deflate nicht bei allen Hostern installiert ist. In diesem Fall bietet sich Methode 2 an.

2. gzip-Compression mit PHP

Bei dieser Methode wird einfach bei jeder Seite, die man komprimieren möchte, in der ersten Zeile folgender Code eingefügt:

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

Diese Methode hat 2 Nachteile. Zum einen funktioniert sie nur mit php-Dateien. Die Datei muss also die Endung .php haben (dies kann man zwar auch umgehen, aber darauf will ich jetzt nicht näher eingehen). Außerdem muss der Code in jede Datei, die man komprimieren möchte, extra eingefügt werden. Wenn man viele Dateien hat, ist das natürlich eine Menge Arbeit. Deswegen sollte man zuerst die 1. Möglichkeit (gzip-Compression über die .htaccess) ausprobieren und nur wenn diese nicht funktioniert, die gzip-Compression über php erledigen.

3. Dateien vorkomprimieren

Die beiden ersten Methoden haben das Problem, dass sich dadurch die Serverlast etwas erhöht. Das ist eigentlich nicht weiter tragisch, da die eingesparte Datenmenge diesen Nachteil mehr als nur wettmacht. In einigen Fällen ist es aber trotzdem sinnvoll, die Kompression vorab von Hand zu erledigen. Dies bietet sich vor allem bei Dateien an, die einerseits sehr groß sind und andererseits nur selten geändert werden.

Wem bei dieser Beschreibung spontan Javascript-Bibliotheken wie z. B. jQuery einfallen, der liegt damit vollkommen richtig. In der aktuellen Version 1.4.2 hat jquery.js eine Größe von ca. 80 kb. Durch eine manuelle Kompression lässt sich die Dateigröße auf ca. 25 kb verringern. Nachdem man die Datei mit einem Packer wie z. B. 7zip verkleinert hat, kopiert man sie einfach in das gleiche Verzeichnis wie die Originaldatei. Um Kompatibilitätsprobleme mit dem Safari-Browser zu vermeiden, sollte man die Endung der komprimierten Datei von .gz auf .jgz ändern. Danach fügt man noch folgenden Code, den ich auf tutorialajax.com gefunden haben, in die .htaccess ein:

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.jgz -f
RewriteRule (.*)\.js$ $1\.js.jgz [L]
AddType "text/javascript" .js.jgz
AddEncoding gzip .jgz

Mit diesem Code wird die gepackte Version der Datei anstelle der Originaldatei ausgeliefert.

Nutzung der gzip-Compression mit Wordpress

Wordpress-User können die oben beschriebenen Methoden ebenfalls problemlos einsetzen. Aber wie so oft bei Wordpress, gibt es für diesen Zweck natürlich auch ein Plugin, das einem auch bei der gzip-Compression das Leben erleichtern. Dabei handelt es sich um das Plugin wpCompressor des bekannten Wordpress-Entwicklers Sergej Müller. Das Plugin setzt für die Komprimierung die oben beschriebene Methode 2 (gzip-Compression mit PHP) ein, die allerdings nicht so schnell ist wie die 1. Methode. Deshalb sollten auch Wordpress-User lieber die gzip-Compression über die .htaccess nutzen und nur, wenn der Hoster dies nicht ermöglicht, zum Plugin greifen.

Test der gzip-Compression

Zum Testen, ob die gzip-Compression auch tatsächlich funktioniert, kann man dieses PHP-Skript verwenden. Einfach den Namen der Website eintippen und auf “Check” klicken. Dann kriegt man angezeigt, ob die angegebene Website komprimiert ist und welche Datenmenge eingespart wurde.

Fazit: Die Komprimierung von Webseiten macht auf alle Fälle Sinn und ist mit wenig Aufwand verbunden. Die einfachste und schnellste Methode ist die gzip-Compression über die .htaccess, die man durch eine Vorkomprimierung einzelner Dateien noch ergänzen kann. Falls dies vom Hoster nicht unterstützt wird, sollte man die Daten per PHP-Aufruf komprimieren.

Artikelreihe Webseiten beschleunigen:

Teil 1: Dateigröße von Grafiken verkleinern

Teil 2: Expires-Header verwenden

Teil 3: Parallele Downloads

Teil 5: Code optimieren

High Performance Websites

Wer seine Webseiten mit Page Speed analysieren läßt, kriegt sehr wahrscheinlich die Meldung “Parallelize downloads across hostnames” angezeigt. Das klingt ziemlich kryptisch, weist aber nur auf eine eher wenig bekannte Möglichkeit hin, seine Webseiten zu beschleunigen. Gemeint ist das Parallelisieren von Downloads über verschiedene Domains. Das hört sich im ersten Moment ziemlich kompliziert an und ist auch nicht ganz einfach zu verstehen, aber ich verspreche, dass ich mir Mühe geben werde, es verständlich zu erklären.

Parallele Downloads – die Theorie

Eine typische Webseite besteht aus vielen Ressourcen (Komponenten), die nacheinander vom Browser aufgerufen werden müssen. Dazu zählen z. B. CSS-Dateien, Javascript-Dateien und Bilder. Auf der Startseite meiner Rätselseite werden z. B. 23 Ressourcen geladen, bevor die Seite angezeigt werden kann (die Anzahl der Ressourcen erfährt man wenn man in Page Speed den Tab “Resources” anklickt). Nun ist es so geregelt, dass Browser 2 Ressourcen auf einmal (also parallel) herunterladen sollen. Die modernen Browser laden sogar 4-6 Ressourcen gleichzeitig herunter. Trotzdem ist das immer noch ziemlich wenig, zumal es durchaus auch Webseiten gibt, die aus 50 oder noch mehr Ressourcen bestehen.

Generell ist es so, dass alle Ressourcen von einer Domain heruntergeladen werden. Wenn man jetzt die Ressourcen aber auf 2 Domains verteilt, lädt ein Browser die doppelte Menge an Ressourcen gleichzeitig herunter. Und das Schöne daran ist, man braucht dafür keine zweite Domain, das Ganze funktioniert nämlich auch mit einer Subdomain.

Parallele Downloads – die Praxis

Wer seine Downloads nun parallelisieren möchte, sollte zuerst mal eine Subdomain anlegen, z. B. http://extern.example.com. Auf dieser Subdomain speichert ihr nun z. B. alle Grafiken, aus denen das Layout besteht. Diese bieten sich deshalb an, weil das Layout ja normalerweise von allen Webseiten verwendet wird und damit alle Seiten gleichzeitig davon profitieren. Danach müssen in allen HTML- und CSS-Dateien die Pfade geändert werden, damit die Grafiken auch gefunden werden können. Wer viele Webseiten hat, für die er Pfadänderungen vornehmen muss, dem empfehle ich für diesen Zweck Notepad++ zu verwenden. Dieser Editor bietet die Möglichkeit des Suchens und Ersetzens über mehrere Dateien hinweg.

Und das war’s dann auch schon. Das Ganze hört sich zwar im ersten Moment schwierig an, aber die praktische Umsetzung ist dafür ziemlich unproblematisch. Messungen habe ich keine vorgenommen, aber meine Webseiten sind nach der Parallelisierung spürbar schneller geworden.

Parallele Downloads bei Wordpress

Und allen Blogbetreibern, die wissen wollen, ob das auch mit Wordpress funktioniert, kann ich sagen: Ja, es funktioniert und es macht Wordpress ein gutes Stück schneller. Die Umsetzung ist allerdings ein bisschen komplizierter, deshalb schreibe ich dazu einen extra Artikel, den ihr morgen hier findet Ressourcen verteilen – WordPress schneller machen

Artikelreihe Webseiten beschleunigen:

Teil 1: Dateigröße von Grafiken verkleinern

Teil 2: Expires-Header verwenden

Teil 4: Die gzip-Compression

Teil 5: Code optimieren

High Performance Websites

Im ersten Teil der Reihe “Webseiten beschleunigen” hatte ich beschrieben, wie man mit Hilfe von OptiPNG die Dateigröße von Grafiken verkleinern und damit die Ladezeit verkürzen kann. Im zweiten Teil widme ich mich nun einem etwas komplexeren Thema, nämlich der Verwendung von Expires-Header.

Leverage browser caching

Wenn man mit dem Googletool PageSpeed die eigene Website analysieren lässt, dürfte bei den meisten wohl diese Meldung mit einem roten Ausrufezeichen angezeigt werden: Leverage browser caching. Dies bedeutet soviel wie, dass das Browsercaching nicht optimal eingestellt ist. Doch wie kann ich das Browsercaching meiner Seiten optimieren? Um dies zu erreichen, erkläre ich erst mal, wie so ein Browsercaching überhaupt funktioniert.

Funktionsweise des Browsercaches

Wenn man eine Website besucht, speichert der Browser des Users diese in einem Zwischenspeicher, dem Browsercache. Wenn der User die gleiche Seite ein zweites Mal besucht, fragt der Browser beim Webserver der Webseite nach, ob sich diese geändert hat. Falls ja, fordert der Browser des Users diese Seite nochmal neu an. Falls nein, liest der Browser diese aus seinem Cache. Das geht natürlich wesentlich schneller, da die benötigten Daten ja schon auf dem Rechner des Users liegen und nicht mehr per Internet übertragen werden müssen.

Im ersten Moment hört sich das nach einer optimalen Lösung an. Allerdings verbraucht auch bereits die Abfrage, ob die Seite schon mal besucht wurde oder nicht, eine gewisse Zeit. Für eine Datei ist das nicht viel, aber eine einzige Seite ruft ja oftmals 10-20 Dateien auf, wie z. B. das Logo, das Favicon, CSS-Dateien, Javascript-Dateien usw. Und bei jeder einzelnen Datei fragt der Browser beim Server nach, ob sich diese geändert hat. Diese vielen Abfragen summieren sich dann natürlich und allein dadurch kann sich die Ladezeit einer Seite um 2-3 Sekunden verlängern.

Den richtigen Zeitraum einstellen

Verhindern kann man dies, indem der Server dem Browser eines Users mitteilt, dass er für eine gewisse Zeit auf diese Abfragen verzichten soll. Dies erreicht man durch die Verwendung von Expires-Header. Mit einem Expires-Header gibt man an, für welchen Zeitraum diese Abfragen nicht mehr erfolgen sollen. Wie lange dieser Zeitraum ist, ist von Dateityp zu Dateityp verschieden und über die richtige Einstellung sollte man sich vor der Verwendung von Expires-Header einige Gedanken machen.

Der Nachteil, wenn man Expires-Header verwendet, ist nämlich, dass Änderungen, die man an einer Datei vornimmt, vom Browser des Users nicht erkannt werden. Schließlich fragt er ja nicht mehr nach, ob eine Datei geändert wurde oder nicht. Wenn man also z. B. eine wichtige css-Datei hat, sollte man den Zeitraum nicht zu hoch einstellen, weil der User die Änderungen an dieser Datei ja erst bei der nächsten Abfrage mitbekommt. Bei Bildern ist es dagegen meistens so, dass man diese nachdem man sie in die Website eingebaut hat, nicht mehr ändert. Deshalb kann man hier den Zeitraum ziemlich hoch einstellen.

Expires-Header verwenden

Nach dem langen theoretischen Vorgeplänkel, das aber leider notwendig war, folgt nun die Praxis. Wenn ihr Expires-Header verwenden wollt, müsst ihr folgende Eintragungen in eurer .htaccess machen.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 week"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
</IfModule>

Die If-Abfrage in der ersten Zeile prüft ob das Apache-Modul mod_expires.c verfügbar ist. Falls ja, wird es aktiviert und der Zeitraum für die einzelnen Dateitypen wird eingestellt. ‘ExpiresByType text/css “access plus 1 week”‘ bedeutet z. B. dass nachdem der Browser des Users auf eine css-Datei zugegriffen hat, er eine Woche lang diese Datei aus dem Browsercache holt und sie erst nach Ablauf dieser Frist erneut einliest.

Man kann die Expires-Header natürlich auch noch für andere Dateitypen verwenden. Bei reinen HTML-Dateien macht es allerdings weniger Sinn, da diese ja meist nur wenige kb groß sind. Expires-Header lassen sich auch mit Wordpress nutzen, allerdings sollte man die .htaccess nur ins Hauptverzeichnis bzw. in die Verzeichnisse wp-admin und wp-includes einbauen und nicht in das Verzeichnis wp-content.

Oben habe ich geschrieben, dass Änderungen an den Dateien erst nach Ablauf des eingestellten Zeitraums wirksam werden. Falls man trotzdem wichtige Änderungen vornehmen will, die sofort bei allen Usern sichtbar werden sollen, kann man zu einem kleinen Kniff greifen. Man hängt an die Datei, die man ändern möchte, einfach eine Zahl an, z. B. style2.css und ändert den Aufruf im HTML-Code. Da diese Datei für den Browser ja neu ist, wird er sie neu einlesen. Dieser Trick ist aber nur bei kleinen Websites sinnvoll oder wenn nur wenige Dateien geändert werden müssen, da der Aufwand sonst zu groß wird.

Was bringen Expires-Header?

Ich habe den oben geposteten Code in die .htaccess meiner Rätselseite eingebaut und ich war überrascht über die erhebliche Leistungssteigerung, die der Einsatz der Expires-Header gebracht hat. Ich hatte das Gefühl, als hätte ich einen kleinen Turbo dazugeschaltet

Und das Schöne daran ist, man schlägt 2 Fliegen mit einer Klappe. Erstens verringert sich die Ladezeit beim Besucher der Website und zweitens wird auch der Server weniger beansprucht, da er ja weniger Anfragen bearbeiten muss.

Eigene Erfahrungen mit Expires-Header

Setzt ihr auf euren Websites auch Expires-Header ein? Welche Zeiträume habt ihr für die einzelnen Dateien eingestellt? Schreibt doch in den Kommentaren was zu euren Erfahrungen.

Artikelreihe Webseiten beschleunigen:

Teil 1: Dateigröße von Grafiken verkleinern

Teil 3: Parallele Downloads

Teil 4: Die gzip-Compression

Teil 5: Code optimieren

High Performance Websites

Bei erfolgs-blogging.de habe ich heute einen schönen Artikel darüber gefunden, wie man seine Wordpress-Datenbank optimieren kann. Der Autor empfiehlt z. B. auf die Tabelle mit den Kommentaren den MySQL-Befehl “Optimize” anzuwenden. Ich habe das ausprobiert und es hat auch einwandfrei funktioniert. Dann habe ich mir gedacht, warum nur auf eine Tabelle anwenden, es bringt doch sicher noch mehr, wenn ich die ganze Datenbank optimiere? Und warum sollte ich mich auf Wordpress beschränken, ich verwende doch noch andere Datenbanken, z. B. für mein Rätselforum oder für Piwik?

Also habe ich dann alle Tabellen all meiner Datenbanken der Reihe nach optimiert. Bei den meisten hatte sich die Größe nach der Optimierung zwar etwas verkleinert, aber der Effekt hielt sich doch in Grenzen. Als letztes war dann die Piwik-Datenbank an der Reihe. Diese hatte ich im Dezember 2009 angelegt und bis heute hatte sie die stattliche Größe von 324 MB erreicht. Als ich dann die Optimierung startete, traute ich meinen Augen kaum, denn die Optimierung brachte eine Verkleinerung der Datenbank von satten 50 MB auf 274 MB!

Da die Anleitung auf erfolgsblogging.de doch etwas knapp geraten ist, erkläre ich hier etwas ausführlicher, wie man vorgehen muss, um seine Datenbanken zu optimieren und damit auch zu verkleinern. Ich verwende dafür phpMyAdmin, das eigentlich bei jedem Webhoster installiert sein sollte.

Datenbank optimieren mit phpMyAdmin

Nach dem Start von phpMyAdmin klickt man oben links auf den Namen der Datenbank. Damit stellt man sicher, dass die richtige Datenbank ausgewählt ist. Und was macht man als nächstes, wenn man an seiner Datenbank etwas ändern möchte? Natürlich ein Backup.

Backup erstellen

Dafür klickt man in der oberen Menüleiste auf “Exportieren”. Falls noch nicht voreingestellt, klickt man dann links oben auf “Alle auswählen”, damit man auch sicher ist, dass wirklich alle Daten gesichert sind. Darunter kann man dann ein beliebiges Exportformat wählen. Da es sich um ein Backup handelt, empfiehlt es sich “SQL” zu verwenden. Falls es ein Problem bei der Optimierung geben sollte, kann man die Datenbank in diesem Format am einfachsten über den Menüpunkt “Importieren” wiederherstellen. Weiter unten klickt man dann noch “Senden” und ein Kompressionsverfahren (z. B. ZIP) an, damit das Backup nicht mehr Platz wegnimmt als unbedingt nötig. Nach dem Klick auf “OK” gibt man noch den Dateinamen an, unter dem das Backup gespeichert werden soll.

Datenbank-Backup mit phpMyAdmin

Datenbank optimieren

Nachdem das Backup dann fertig ist (und auch wirklich erst danach), kann man sich an das Optimieren der Datenbank wagen. Dazu klickt man auf in der oberen Menüleiste auf “Struktur”. Dort werden dann alle Tabellen angezeigt, die die Datenbank enthält. Am Ende der Anzeige wird unter “Größe” die Gesamtgröße angezeigt. Links unten sollte man auf “Alle auswählen” klicken und danach in der Schaltfläche rechts daneben “Optimiere Tabelle” anwählen. Dabei bitte sehr genau darauf achten, was man anklickt, denn die Schaltfläche beinhaltet auch solch gefährliche Menüpunkte wie “Leeren” oder “Löschen”. Bei mir wurde der Optimierungsvorgang übrigens sofort nach der Auswahl gestartet, ohne dass ich auf “OK” klicken musste.

Datenbank optimieren mit phpMyAdmin

Wenn alles geklappt hat wird eine Übersicht angezeigt, welche Tabelle optimiert wurde (OK) und welche nicht (Table is already up to date). Wenn man sich jetzt wieder die Struktur anzeigen lässt, sieht man die neue Größe der Datenbank nach der Optimierung.

Achtung! Wie bereits erwähnt sollte man vor der Datenbankoptimierung unbedingt ein Backup erstellen. Es passiert ganz schnell, dass man mit einem falschen Mausklick Daten ungewollt löscht. Ohne Backup kann dann die Arbeit von Wochen oder Monaten mit einem Schlag weg sein!

Eigene Erfahrungen mit der Optimierung von Datenbanken

Welche Erfahrungen habt ihr mit dem Optimieren von Datenbanken gemacht? Um wie viel konntet ihr eure Datenbankgröße reduzieren? Schreibt doch bitte in den Kommentaren etwas dazu.

phpMyAdmin kompakt

Eine Webseite ohne Grafiken ist in den meisten Fällen dröge und langweilig. Deshalb gibt es nur noch wenige Seiten, die keine Bilder verwenden. Die meisten Grafiken haben allerdings eine recht hohe Dateigröße und bremsen dadurch den Seitenaufbau. Hier stelle ich euch ein kleines Freeware-Tool vor, mit dem ihr die Dateigröße eurer Grafiken verkleinern könnt und damit den Seitenaufbau eurer Website beschleunigt.

PNG-Grafiken verkleinern

OptiPNG verkleinert PNG-Grafiken und andere Rastergrafikformate (z. B. gif und bmp). Allerdings gibt es, im Gegensatz zu den meisten anderen Grafikkompressionsprogrammen, keine Qualitätseinbußen. Es gehen nämlich keine Bildinformationen verloren. OptiPNG schafft dies u.a. durch eine Optimierung der Kompression, der Farbpalette und der Bittiefe.

Dass keine Unterschiede festzustellen sind, könnt ihr an der Headergrafik meiner Rätsel-Website sehen, die ich mit OptiPNG bearbeitet und damit um ca. 10 % verkleinert habe.

Original-Grafik

Mit optiPNG verkleinerte Grafik

Normalerweise wird OptiPNG nur über die Konsole bedient, es gibt allerdings auch ein Tool namens OptiPNG-UI, das eine Benutzeroberfläche dafür bereitstellt. Wer damit arbeiten will und nicht des Italienischen mächtig ist, sollte zuerst die Sprache auf Englisch umstellen. Dazu klickt man rechts oben auf den blauen Pfeil und wählt dann in der folgenden Ansicht die britische Flagge aus.

Getestet habe ich OptiPNG-UI mit einem Verzeichnis, das etwa 100 Gif-Grafiken enthielt, die ich in PNG-Grafiken umwandelte. Die Optimierung dieser Grafiken mit der Optimierungsstufe 9 dauerte etwa 10 Minuten und reduzierte die Dateigröße um durchschnittlich 10 %. Allerdings wurden nicht alle Grafiken konvertiert. 10 Grafiken wurden ohne Angabe von Gründen nicht umgewandelt. Auch die aktivierte Report-Funktion lieferte dafür keine Erklärung.

Auch wenn es auf einer Webseite keine Bilder gibt, kann sich der Einsatz von OptiPNG lohnen. Wer seine Headergrafik nämlich damit bearbeitet, hat den Vorteil, dass sich diese Verkleinerung auf allen Seiten seiner Website bemerkbar macht.

OptiPNG ist übrigens auch in Page Speed integriert. Wer dieses Firefox-Addon installiert hat und nur bei einzelnen Grafiken die Dateigröße verkleinern will, kann sich die zusätzliche Installation des Original-Tools sparen.

Artikelreihe Webseiten beschleunigen:

2. Expires-Header verwenden

3. Parallele Downloads

4. Die gzip-Compression

5. Code optimieren

High Performance Websites

Ich habe mich in den letzten Tagen mit der Beschleunigung meiner Webseiten beschäftigt. Ich möchte hier in loser Folge einige Tipps geben, wie man den Seitenaufbau seiner Webseiten mit einfachen Mitteln beschleunigen kann.

Warum ist eine Beschleunigung von Webseiten überhaupt notwendig?

Eine Beschleunigung hat mehrere Vorteile:

1. Die Besucher freuen sich natürlich, wenn der Seitenaufbau schneller geht. Je länger der Aufbau einer Seite dauert, um so größer ist die Gefahr, dass ein Besucher zu einer anderen Website abwandert.

2. Google wird in Zukunft auch die Ladezeit einer Webseite beim Ranking berücksichtigen. Dafür spricht, dass es bei den Webmastertools seit geraumer Zeit im Google-Labs-Menu einen Menüpunkt “Website-Leistung” gibt. Außerdem gibt es von Google ein Firefox-Addon namens Pagespeed, das Tipps zur Website-Optimierung gibt.

3. Der Server wird entlastet und die vorhandene Leistung kann für andere Dinge genutzt werden.

Wie kann ich meine Webseiten beschleunigen?

Dazu gibt es mehrere Möglichkeiten, die ich in den folgenden Artikeln vorstellen werde:

1. Dateigröße von Grafiken verkleinern

2. Expires-Header verwenden

3. Parallele Downloads

4. Die gzip-Compression

5. Code optimieren

Für die Optimierung werde ich unter anderem das bereits oben erwähnte Firefox-Addon “Google Pagespeed” verwenden und auch einige Tipps dazu geben.

Sexy Webdesign