Die Gzip Komprimierung ist ein Kompressionsprogramm mit dem fast alle Dateien auf dem Webhost komprimiert an den Browser senden kann. Um seine Webseiten schneller zu bekommen sollte es auch immer eingesetzt werden. Im Internet gibt es hierzu viele Anleitungen und Beschreibungen die zum Teil verwirrend sind. Daher möchte ich euch an dieser Stelle eine Übersicht geben, welche Wege es gibt um die Gzip Komprimierung zu aktivieren und welche Ressourcen man sich hierzu merken sollte.
Grundsätzlich sollte man wissen: Gzip komprimiert alle Dateien einzeln und “packt” diese mittels dem Archivierungsprogramm tar in einen sogenannten Tarball. Daher gibt es am Ende zwei Endungen: Zum einen .gz für eine einzeln komprimierte Datei und zum anderen tar.gz oder einfach nur .tgz für eine Sammlung an Dateien.
Es gibt 2 Wege um Gzip zu nutzen. Serverseitig – also man benutzt das Programm, dass auf dem Webserver liegt, oder man bereitet alles selbst vor und stellt es auf dem Webhost zur Verfügung.
Leider ist nicht auf jedem Hostserver Gzip von Anfang an installiert bzw. zur Nutzung freigegeben, denn die Nutzung von Gzip auf einem Webhost führt zur einer erhöhten Last des Webservers. Zwar macht die Mehrbelastung (CPU | Prozessor) des Servers nur ca. ein Zehntel aus, aber wenn sich 1000 oder mehr Kunden einen Server teilen, dann kann ein Zehntel einige Kunden kosten. Daher sollte man zuerst überprüfen ob Gzip auf dem Webhost verfügbar ist. Am besten bei eurem Service-Provider nachfragen, in den Vertrag nachschauen oder ggf. im Netz suchen. Wenn Gzip nicht auf eurem Webhost verfügbar ist dann bleibt euch nur der zweite Weg offen: Alles selbst machen und zur Verfügung stellen.
Wenn bei euch Gzip verfügbar ist, dann gibt es wiederum mehrere Wege: Zum einen über die Konfigurationsdatei “.htaccess”, mit Hilfe von PlugIns oder mittels Skripts bzw. Skriptsprachen (PHP). Am besten finde ich, man nutzt die Konfigurationsdatei “.htaccess”. Leider setzt aber die einfachste Art auch gewisse Dinge voraus. Mehr dazu in der entsprechenden Anleitung:
Gzip Komprimierung mittels der Konfigurationsdatei .htaccess installieren
Mittels der Konfigurationsdatei .htaccess kann man, wie angedeutet, am einfachsten die Gzip Kompression auf dem Webserver nutzen. Voraussetzung ist jedoch, dass das Modul “mod_deflate” auf dem Webserver aktiviert ist. Wenn dieser Weg erstmal nicht funktioniert, müsst Ihr klären ob bei euch das Server-Modul aktiviert ist, bzw. ob man es noch aktivieren kann. Ist die Sache geklärt und das Modul aktiviert, dann müsst Ihr diesen Abschnitt in eure “.htaccess” Datei einfügen. Erst dann werden alle Dateien, welche Ihr mittels Dateiendungen in der Zeile “<FilesMatch ”\.(js|css|html|xml)$”>” angibt, komprimiert. Wollt Ihr mehr Dateiendungen komprimieren oder müsst Ihr es, dann einfach wie folgt einfügen:
“<FilesMatch ”\.(Endung1|Endung2|Endung3|Endung4|Endung5|Endung6|usw)$”>”.
Wichtig ist das nach der letzen Endung kein vertikaler Strich mehr kommt. Also das “|”. Manchmal macht es auch kein Sinn schon komprimierte Formate weiter zu komprimieren. Zum Beispiel PDF, JPG, GIF oder PNG. Das merkt Ihr wenn die Ersparnis zwischen der erstellten Gzip Datei und der Originaldatei kaum ein Unterschied ergibt.
Hier die Code Zeilen für eure .htaccess:
<IfModule mod_deflate.c>
<FilesMatch “\\.(js|css|html|xml)$”>
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
Gzip Komprimierung mittels der Skriptsprache PHP
Mit der Skriptsprache PHP kann man durch ein paar Zeilen Code ebenfalls eine Gzip Komprimierung durchführen. Man muss hierzu in jeder einzelnen PHP Datei folgenden Code in die erste Zeile schreiben:
<?php
ob_start(“ob_gzhandler”);
?>
Der Hacken ist nur, dass dies nur mit PHP Dateien funktioniert.
Gzip Komprimierung mittels manueller Arbeit
Eine weitere Variante ist die manuelle Vorbereitung verbunden mit der Eingabe von ein paar Zeilen Code in die “.htaccess” Datei. Hierzu ladet Ihr euch zuerst das Programm 7Zip runter und geht dann folgende Schritte durch:
1. Jede einzelne Datei in eine Gzip packen.
Wichtig: Heißt eine Datei z.B.: impressum.html so muss die Gzip Datei impressum.html.gz heißen.
2. Alle Gzip Dateien in .jgz umbennenen
Also: Aus impressum.html.gz wird impressum.html.jgz
3. Alle Dateien hochladen
4. Folgenden Code in die .htaccess einfügen:
RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.jgz -f
RewriteRule (.*)\.js$ $1\.js.jgz [L]
AddType “text/javascript” .js.jgz
AddEncodig gzip .jgzNun sollte die Gzip Komprimierung bei euch funktionieren.
Gzip Komprimierung mittels Plugins
Je nach dem was Ihr für ein System einsetzt um Webseiten, Blogs oder Shop zu kreieren bzw. zu pflegen, wird es bestimmt viele Plugins geben, die diese Aufgabe für euch übernehmen. Meistens basieren aber alle auf PHP und fügen, wie oben beschrieben, die PHP Zeile ein.
Bei WordPress kann ich euch das Gzip Komprimierung WordPress Plugin von Sergej Müller empfehlen. Bei anderen Systemen müsst Ihr einfach mal Googeln. Aber ich rate euch so oder so entweder zur ersten Variante oder zur manuellen Vorbereitung. Ist minimal schneller als wie die PHP Variante.
Gzip Komprimierung testen
Ob die Gzip Komprimierung bei euch funktioniert, könnt Ihr auf diesen beiden Seiten testen. Einfach eure URL (Webseite) eingeben und schon bekommt Ihr eine Antwort.
http://www.gidnetwork.com/tools/gzip-test.php oder http://www.whatsmyip.org/http-compression-test/
Ressourcen
Das Programm 7Zip findet Ihr unter http://www.7-zip.org/
Das WordPress Plugin von Sergej findet Ihr unter http://playground.ebiene.de/plugin-fuer-gzip-komprimierung-der-beitraege-in-wordpress-25/
Die Website von Gzip findet Ihr unter http://www.gzip.org/
Tiefgehendere Erklärungen findet Ihr unter http://de.wikipedia.org/wiki/Gzip
Nicht zu verachten ist der Artikel über die Einrichtung mittels Apache oder MS Dienste. Findet Ihr hier: http://www.sysadminslife.com/allgemein/webseiten-optimierung-mit-gzip-komprimierung-in-apache2-und-iis6/
Fazit
Auch wenn immer mehr Leute DSL haben und schnelle Rechner, so bleibt die Ladezeit ein signifikanter Bestandteil einer Seite. Zumal mobile Internetzugänge noch nicht sehr schnell sind und die Datenmengen immer größer werden. Außerdem beachtet bekanntlich Google den Aspekt der Ladezeit als ein gewichtigen Faktor. Aber der wichtigste Grund ist die Zufriedenheit der Nutzer, die nachweislich bei schnelleren Seiten steigt. Ein bis Zwei Sekunden können gefühlt sehr langsam wirken und somit altbacken. Und schließlich macht im Idealfall die Aktivierung kaum Arbeit.
GZIP bei Strato
Inhalte komprimiert übertragen
Je größer eine Webseite ist, desto mehr Dateien gehören dazu – entsprechend steigt auch die Gesamtgröße in KB/MB, die von Besuchern Ihrer Seite geladen werden muss. Um möglichst geringe Ladezeiten zu erreichen, ist es sinnvoll die Dateien vor der Übertragung durch den Server komprimieren zu lassen. Hierbei kommt das Apache-Modul „mod_gzip“ zum Einsatz.
Ab dem Paket STRATO PowerWeb Basic können Sie die Komprimierung wie folgt einschalten:
Öffnen Sie die .htaccess-Datei im Hauptverzeichnis Ihrer Web-Anwendung und ergänzen die Zeile: mod_gzip_on Yes
Den Browser-Cache nutzen
Eine weitere Optimierungsmöglichkeit besteht darin, Dateien, die sich nur selten ändern, durch den Browser Ihrer Besucher zwischenspeichern zu lassen (cachen). Gelangt ein Besucher das erste Mal auf Ihre Webseite, wird diese vollständig geladen. Bei einem erneuten Aufruf prüft der Browser, ob beispielsweise ein Bild bereits im Zwischenspeicher abgelegt wurde und lädt dieses dann von dort. Der Seitenaufbau wird so deutlich schneller.
Beispiel
Die hierfür notwendigen Einträge in der .htaccess-Datei können etwa wie folgt aussehen:
# Caching einrichtenFileETag MTime Size
ExpiresActive On
ExpiresByType text/css „access plus 1 weeks“
ExpiresByType application/javascript „access plus 1 weeks“
ExpiresByType application/x-javascript „access plus 1 weeks“
ExpiresByType image/gif „access plus 1 months“
ExpiresByType image/jpeg „access plus 1 months“
ExpiresByType image/png „access plus 1 months“
ExpiresByType image/x-icon „access plus 1 months“ |
Kurz eine Erläuterung dazu:
FileETag MTime Size bildet einen für jede Datei Ihrer Webseite einmalige Kennung aus dem letzten Änderungsdatum sowie der Größe der Datei.
Die Abfrage <IfModule mod_expires.c> prüft, ob das notwendige Servermodul installiert ist – das ist in allen STRATO Paketen der Fall.
ExpiresActive On schaltet das Modul für Ihre Webseite ein, anschließend folgen die Angaben, welche Dateitypen gecached werden sollen und für welchen Zeitraum. Die Zeitangabe erfolgt dabei in der Form „ab letztem Zugriff für Zeitraum X“, im Beispiel „access plus 1 weeks“ also „ab Zugriff für eine Woche“. Ist der gesetzte Zeitraum abgelaufen, wird die Datei im Browser-Cache durch die aktuelle Version von Ihrer Webseite ersetzt.
Im Beispiel werden CSS- und JavaScript (JS) -Dateien für eine Woche gecached, Bilder und das Favoriten-Icon hingegen für einen Monat. Achten Sie bitte darauf, dass die Zeitangabe immer in der Mehrzahl definiert wird, also ein „s“ am Ende steht (weeks, months, …). Welche Werte als Zeitangabe möglich sind, entnehmen Sie bitte der offiziellen Dokumentation des Apache Webservers: http://httpd.apache.org/docs/2.0/mod/mod_expires.html#AltSyn
Den Zeitraum können Sie selbst festlegen. In der nachfolgenden Tabelle finden Sie einige Tipps:
| Dateityp | Cache Zeitraum | Details |
| Bilder (jpg/png/gif) | access plus 1 months | Bei statischen Webseiten, Blogs, Bildergalerien, etc. |
| access plus 1 weeks | Für Onlineshops mit häufigem Wechsel der Produktbilder |
| CSS-Dateien | access plus 1 months | Sollten Sie öfter Änderungen am Layout Ihrer Webseite vornehmen, wählen Sie einen passenden kürzeren Zeitraum, etwa 1-2 Wochen. |
| JavaScript (JS) Dateien | access plus 1 months | |
Damit Besucher Ihrer Webseite auch Änderungen sehen, die mitten in einem Cache-Zeitraum erfolgen (Cache für 1 Monat – Änderung z. B. nach 14 Tagen), setzen Sie einfach in der .htaccess-Datei den Wert für den Cache-Zeitraum des entsprechenden Dateityps herab. Lassen Sie die Einstellung für beispielsweise eine Woche aktiv und setzen dann wieder die ursprünglichen Werte ein.
Beispiel:
Aus access plus 1 months wird dann access plus 1 hours.
Hinweis: Sofern Sie die Komprimierung (siehe oben) nicht nutzen, ergänzen Sie bitte für eine optimale Nutzung des Caching in der .htaccess-Datei manuell die Zeile Header append Vary Accept-Encoding. Ist die Komprimierung aktiv, wird der Header automatisch gesetzt, die oben genannte Zeile muss dann nicht eingetragen werden.
In Abhängigkeit vom verwendetem CMS gibt es meist noch weitere Möglichkeiten die Performance zu verbessern. Hierzu gehören beispielsweise:
- CDN (Content Delivery Network) aufsetzen
- Bilder in CSS-Sprites auslagern
- CSS/JS Skripte komprimiert auf dem Webspace ablegen
- Falls nicht genutzt: mootools im Frontend deaktivieren (Joomla)
Ausführliche Anleitungen wie dies speziell bei dem von Ihnen verwendetem Content Management System vorzunehmen ist, finden Sie in der Regel im Supportforum Ihres Content Management System.
Javascript und CSS mit Gzip komprimieren
Ein großes Interesse fürs Web ist es, dass ihre Seiten schnell laden. Die kann unter anderem durch die Komprimierung von Javascripten und CSS-Code erreicht werden.
Javascriptdateien und auch Stylesheets sind oft sehr groß. Als Beispiel verwende ich die Javascript Bibliothek jQuery. Diese hat unkomprimiert ca. 167 kb. Komprimiert kommt man auf eine Größe von nur 44 kb. Dies sind nur noch 26% der ursprünglichen Größe. Durch dieses Verfahren laden die Homepages um ein vielfaches schneller als zuvor.
Was ist nun wenn ein Browser oder ein Gerät nicht mit der Komprimierung zurechtkommt?
Für diesen Fall liegen immernoch die unkomprimierten Dateien auf dem Server.
Dateien komprimieren
An der Einbindung der Dateien in Ihre Homepage ändert sich rein gar nichts. Sie erfolgt wie üblich mit
<link type=„text/css“ rel=„stylesheet“ href=„css/styles.css“ /><script type=„text/javascript“ src=„js/jquery-latest.js“></script> Nun müssen Sie die Scripte komprimieren und auf den Server laden. Die Scipte müssen in diesem Fall styles.css.gz und jquery-latest.js.gz heißen und im gleichen Ordner liegen wie die unkomprimierte Version.
Wie komprimiere ich ein Script?
Das Freeware Tool 7zip (Download hier) beherrscht diesen Komprimierungsformat. Oder für Mac OSX Ez7z
.htaccess bearbeiten
Als zweiten Schritt müssen Sie nun folgenden Code in die Datei .htaccess einfügen:
# BEGIN Gzip Compression
AddEncoding gzip .gz
<filesmatch "\.js\.gz$">
AddType "text/javascript" .gz
</filesmatch>
<filesmatch "\.css\.gz$">
AddType "text/css" .gz
</filesmatch>
<ifmodule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME} \.(js|css)$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]
</ifmodule>
# END Gzip CompressionDamit wählt der Server aus, ob Gzip verwendet wird, oder nicht. Wenn ein Gerät die Komprimierung nicht unterstützt, wird die unkomprimierte Version genommen.
Leeren Sie nun Ihren Cache und laden Sie Ihre Seite neu. Die Ladezeiten sind nun erheblich geringer.
Komprimierung mittels Software
Smaller is a powerful HTML, CSS and JavaScript compressor on OS X which also has the ability to combine several files into one. Compress your files and make your websites load faster.
How to use it?
Drop files. Or drop a folder, Smaller can intelligently add all the HTML/CSS/JS files under it to the minify queue.
Combining several files into one is easy, ⌘ click to select multiple files, right click and choose „Combine“.
As a professional, you definitely need more control. Smaller is aware of your needs and provides this for you.
You can also drop files directly on to the Dock icon, Smaller will do the rest for you, quite handy, isn’t it?
TIPP: TinyPNG zum Komprimieren von PNG und JPEG´s
