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

© Rainer Sturm / Pixelio

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

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.

© katstep / Pixelio

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.

Eintragungen in der .htaccess

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 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

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

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.

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

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.

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.

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:

Teil 2: Expires-Header verwenden

Teil 3: Parallele Downloads

Teil 4: Die gzip-Compression

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-Optimierung

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