Zurück zur “Webseiten beschleunigen” – Übersicht
2.) Komprimierung
So langsam möchte ich auf die Fragen, welche bisher aufgetaucht sein könnten eingehen und mit der Beschleunigung der Webseite anfangen, daher starten wir mit der Komprimierung.
Alle neuen Browser (ab IE6) unterstützen komprimierte Dateien, man kann sich dies so ähnlich vorstellen, wie in dem diesem Proxy-Beispiel, wo die Dateien serverseitig komprimiert werden und vom Client, in unserm Fall nun der Browser wieder dekomprimiert werden. Aber dazu kommen wir gleich. Das Problem ist, dass Bilder bereits komprimiert sind und falls diese im Nachhinein noch einmal passiert, diese sogar größer werden können als zuvor, daher versucht man diese bereits bei der Bereitstellung in der optimalen Dateigröße anzubieten, zudem sollte man vermeiden, dass zu viele kleine Dateien vom Server geladen werden müssen, da zu viele Verbindungen bzw. Anfragen sich auch seht negativ auf die Performance einer Webseite auswirken.
2.1) Bilder komprimieren
2.1.1) Bilder Sprites
Durch viele kleine Icons / Menü-Bildern kommen viele Serveranfragen zustande, welche man durch ein größeres Bild, welches dann wiederum mit css so bearbeitet werden kann, dass man bestimmte Bildabschnitte ansprechen kann, ersetzten könnte.
Nun noch ein kleines Beispiel zur Verdeutlichung:
www.websiteoptimization.com/speed/tweak/css-sprites
Es folgt noch ein Beispiel, um das Prinzip zu verstehen…
alte CSS-Regeln:
#header {background: url(bild1.jpg) top left repeat-x; height:80px;}
ul.menu li {background: url(bild2.jpg) top left repeat-x; height:15px;}
bild1.jpg und bild2.jpg sind jeweils 1px breit. Waf der folgenden Webseite → Sprite-Generator ← kann man diese beiden Dateien nun zu einer Sprite-Datei zusammenfassen und herunterladen bzw. auf Webserver hochladen.
Dieses Sprite-Bild wird nun für alle Elemente, die einen im Sprite enthaltenen Hintergrund haben eingefügt:
#header, ul.menu li {background-image:url(bg_sprite.png);}
Mithilfe der im Generator angegebenen Regeln, werden die alten CSS-Regeln ersetzen:
.sprite-bild1 { background-position: 0 -30px; }
.sprite-bild2 { background-position: 0 -110px; }
…wird zu…
#header {background-position: 0 -30px; background-repeat: repeat-x;}
ul.menu li {background-position: 0 -110px; background-repeat: repeat-x;}
Mit zwei Bildern macht dies noch nicht so viel Sinn, aber ich denke das reicht zum Verdeutlichen des Prinzipes.
2.1.2) PNG-Bilder komprimieren
[stextbox id=”warning”]VOR DER ÄNDERUNG/OPTIMIERUNG AN IRGENDWELCHEN BILDERN, BITTE EIN BACKUP ERSTELLEN!!![/stextbox]
Das folgende HowTo zeigt wie man png-Bilder direkt auf dem Server verkleinern kann, ohne dessen Qualität zu verringern.
sudo bash
aptitude install optipng
optipng -o7 bild.png -out bild_new.png
z.B.:
2673 24. Jun 15:50 free-source_bottom.png
1297 27. Jul 01:55 free-source_bottom_new.png
folgender Befehl komprimiert alle Bilder im Verzeichnis, welche auf .png enden ->
optipng -o7 *.png
oder man sucht mittels “find” die entsprechenden Bilder rekursive aus der gesamten Verzeichnisstruktur heraus
find . -iname '*.png' -exec optipng -o7 {} \;
Wichtig: um noch ein Backup der original Datei zu behalten kannst du den Parameter “-k” verwenden
Alternativ kann man die Größe von png-Bildern auch mit pngcrush optimieren, welches auf die selbe einfache Weise installiert werden kann.
sudo bash
aptitude install pngcrush
pngcrush -rem alla -reduce -brute original.png optimized.png
Alternativ kann man dies auch wieder rekursiv im aktuellen Verzeichnis alle png-Bilder mittels “pngcrush” bearbeiten lassen.
for file in `find . -name "*.png"`;do
echo $file;
pngcrush -rem alla -reduce -brute "$file" tmp_img_file.png;
mv -f tmp_img_file.png $file;
done;
z.B.
Original: 8,9K
Optipng: 7.6K
Optipng + PNGcrush: 7.4K
Dies fällt bei größeren Bildern mehr ins Gewicht, jedoch kann auch die Komprimierung von solchen Logos etc. schon einige hundert MB im Monat einsparen, zumal PNG in Gegensatz zu JPEG eine verlustfreie Neukomprimierung unterstützt.
Link:
optipng.sourceforge.net
pmt.sourceforge.net
weitere Optimierungsmöglichkeiten für PNG-Bilder:
www.smashingmagazine.com
2.1.3) JPEG-Bilder komprimieren
[stextbox id=”warning”]VOR DER ÄNDERUNG/OPTIMIERUNG AN IRGENDWELCHEN BILDERN, BITTE EIN BACKUP ERSTELLEN!!![/stextbox]
Wie bereits zuvor beschrieben, können auch jpg-Bilder verkleinert werden.
aptitude install jpegoptim
jpegoptim --force logo.jpg
z.B.:
24640 24. Jun 14:28 logo.jpg
22448 27. Jul 02:20 logo.jpg
Hier könnte man, wie bereits zuvor beschrieben, mittels “find” die entsprechenden Bilder heraussuchen und diese verkleinern lassen.
find . -iname '*.jpg' -exec jpegoptim --force {} \;
Link:
jpegoptim.sourceforge.net
Eine weitere Möglichkeit jpg-Dateien unter Debian/Ubuntu zu optimieren, welche nach meinen ersten Tests jedoch genauso gut funktioniert wie jpegoptim.
sudo bash
aptitude install libjpeg-progs
jpegtran -copy none -optimize -perfect logo.jpg > logo_jpegtran.jpg
weitere Optimierungsmöglichkeiten für JPEG-Bilder:
www.smashingmagazine.com
2.1.4) Bilder komprimieren – Online
Auf der folgenden Webseite, kannst du deine Bilder auch online verkleinern lassen…
… der nachfolgende Link ist nur für PNG-Bilder geeignet …
gracepointafterfive.com/punypng/
… und hier noch ein Link, wobei hier größtenteils an der Qualität der Bilder geschraubt wird…
Als alternative zu all dieses serverseitigen Möglichkeiten kannst du deiner Bilder natürlich auch mit einem Bildbearbeitungsprogramm (z.B. Paint.NET) öffnen und z.B. optimiert für Webseiten abspeichern.
2.2) JavaScript/CSS komprimieren
2.2.1) JavaScript/CSS komprimieren – serverseitig
Hier werde ich kurz zeigen wir du deine JS- und CSS-Dateien nicht nur komprimieren kannst, um die Ladegeschwindigkeit deiner Webseite zu verbessern, sondern auch noch optimierst, so dass diese schneller ausgeführt werden. Der CSS-Kompressions-Algorithmus verwendet zudem einen Satz von fein aufeinander abgestimmten reguläre Ausdrücke, um die CSS-Datei zu komprimieren.
Dateien kombinieren: (optional)
cat datei1.js > alle_dateien.js
cat datei2.js >> alle_dateien.js
cat datei3.js >> alle_dateien.js
cd /usr/src/
wget http://yuilibrary.com/downloads/yuicompressor/yuicompressor-2.4.2.zip
unzip yuicompressor-2.4.2.zip
rm yuicompressor-2.4.2.zip
cd yuicompressor-2.4.2build
sudo aptitude install sun-java6-bin
java -jar yuicompressor-2.4.2.jar --type js -o combined.js alle_dateien.js alle_dateien_klein.js
dies kann man übrigens auch mit CSS-Daten machen…
java -jar yuicompressor-2.4.2.jar --type css -o combined.css alle_dateien.css alle_dateien_klein.css
[stextbox id=”info”]Bei mir hat das kombinieren von einigen JS- und CSS-Dateien negative Auswirkungen gehabt, so haben einige JS nicht mehr funktioniert, zudem sollte man bedenken, dass einige Dateien nicht auf jeder Webseite benötigt werden und daher auch ruhig später geladen werden können, sobald ein Besucher z.B. auf Kommentare klickt.[/stextbox]
Download:
Download – yuilibrary.com
Link:
How does it work? – developer.yahoo.com
Alternativ kann man CSS-Dateien auch sehr bequem mit “csstidy” komprimieren.
sudo aptitude install csstidy
csstidy mycssfile.css myoutputfile.css
oder man lässt sich das Ergebnis erstmal auf dem Bildschirm ausgeben
csstidy mycssfile.css
z.B.:
border-width: 1px;
border-style: solid;
/*Dies ist ein Kommentar*/
border-color: gray;
… wird zu …
border: 1px solid gray;
Link:
csstidy.sourceforge.net
2.2.2) JavaScript/CSS komprimieren – Online
Alternativ kann man, wenn man z.B. keinen V- oder Root-Server hat um zusätzliche Software zu installieren, die Dateien Online komprimieren zu lassen.
z.B.: für Javascript
Online Komprimierung – yui.2clics.net
ggf. kann man seine JS-Datei auch vorher überprüfen lassen um Fehler auszuschließen
z.B.: für CSS
Eine weitere Methode besteht darin, die Daten selber gar nicht zu verändern, sondern diese direkt und nach einer bestimmten Zeit neu von einem Server komprimieren zu lassen, diese Methode hat daher auch wieder nachteiligen Einfluss auf die Ladegeschwindigkeit, da ein weitere Request, DNS-Lookup usw. hinzukommt. Jedoch kann man an diesen Online-Dienst auch mehrere CSS- bzw. JS-Dateien gleichzeitig übergeben. Ob dies wirklich die Performance steigern kann müsste man im Einzellfall ausprobieren.
z.B.:
http://reducisaurus.appspot.com/css?url1={{erste_URL}}&url2={{zweite_URL}}&url3={{dritte_URL}}&max-age={{cach_in_sekunden}}
Link:
code.google.com/p/reducisaurus/
2.3) Apache gzip-Kompression
Serverseitige Komprimierung und somit eine Reduzierung der zu Übertragungen Datenmengen von 40 – 70 % sind hier zu erreichen, zudem kannst du mithilfe der folgenden Konfigurationen gleich mehrere Webseiten, welche auf dem selben Server laufen optimieren.
ohne gzip-Kompression:
mit gzip-Kompression:
Aktiviere mod_deflate (gzip) – serverseitig
Diese Art der Komprimierung macht natürlich nur bei Dateien Sinn, welche auch komprimiert werden können z.B. HTML, CSS oder Javascript …
a2enmod deflate
… dieser Befehl kann unter anderen Distributionen anders aussehen z.B.: BSD
LoadModule deflate_module /usr/lib/apache2/modules/mod_deflate.so
Kommen wir zur Konfiguration des Modules, wir können “mod_deflate” in folgender Datei bearbeiten ->
vim /etc/apache2/mods-enabled/deflate.conf
#SetInputFilter DEFLATE
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|jpg|ico|png|pdf|ipk|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:mpg|mpeg|flv|wmv|wma|ogg|avi|mov|mp3|mp4|swf)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:exe|tar|t?gz|cab|zip|t?bz2|iso|bz2|sit|jar|rar|rm|rpm|deb)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
Header append Vary User-Agent
Header set Vary *
DeflateCompressionLevel 6
Mithilfe von gzip (DeflateCompressionLevel) kann man verschneide Kompressions-Level einstellen, wobei 1 die schnellsten Komprimierung (weniger Kompression) und 9 die langsamste Komprimierung (beste Kompression) ist. Die Standard-Kompressions-Level ist 6. da eine zu hohe Kompression auf Kosten der der Systemleistung geht, ggf. kann man diesen Wert anpassen, wenn man noch genügend Ressourcen frei hat.
Nun müssen wir unsern Webserver neu-starten, um die Konfiguration zu übernehmen.
/etc/init.d/apache2 restart
und test…
gidnetwork.com/tools/gzip-test
Ausgabe: http://gedichte.voku-online.de/news.php
Web page compressed? → Yes
Compression type? → gzip
Size, Markup (bytes) → 52,039
Size, Compressed (bytes) → 9,934
Compression → % 80.9
Link:
httpd.apache.org/docs/2.0/mod/mod_deflate
2.3.2) Aktiviere mod_gzip – serverseitig
Wer noch apache und nicht apache2 verwendet sollte “mod_gzip” anstelle von “deflate” ansehen, jedoch werde ich nicht weiter auf die veraltete Apache-Version eingehen, wenn noch jemand den alten “Apache Web-Server” einsetzt, soll man ggf. ein Update auf apache2 durchführen…
“Nur unter Apache 1.3 ist “mod_gzip” effektiver ab “Apache 2.x” sollte man “mod_deflate” verwenden.”
www.howtoforge.com/linux_apache_mod_gzip
2.3.3) Aktiviere gzip – manuell
Es gibt auch noch die Möglichkeit Dateien serverseitig im Vorhinein zu komprimieren und in einer .htaccess anzugeben, welche Dateien bzw. Dateiendungen vom Browser wieder dekomprimiert werden müssen. Ich selber habe auch eine Mischung aus den verschienden Komprimierungsverfahren gewählt, so habe ich sehr große JS-Dateien im Vorhinein folgendermaßen komprimiert, so dass der Server dies nicht jedes mal machen muss, zudem hat dieses Verfahren den großen Vorteil, dass man die negative Auswirkung des hohen Komprimierungslevel, auf die Systemauslastung umgeht.
gzip -9 test.js
mv test.js.gz test.js.jgz
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
Link:
tutorialajax.com/compress-javascript-with-gzip
