spritemap

Webseiten komprimieren

closeDieser Beitrag wurde vor mehr als drei Monaten veröffentlicht. Bedenke bitte, dass die hier angebotene Information nicht mehr aktuell und gültig sein könnte. Informiere dich daher bitte auch an anderer Stelle über dieses Thema. Sollten sich neue Informationen ergeben haben, so kannst du mich auch gerne auf diese über einen Kommentar hinweisen. Vielen Dank!

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


spritemap
spritemap



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

VOR DER ÄNDERUNG/OPTIMIERUNG AN IRGENDWELCHEN BILDERN, BITTE EIN BACKUP ERSTELLEN!!!

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

VOR DER ÄNDERUNG/OPTIMIERUNG AN IRGENDWELCHEN BILDERN, BITTE EIN BACKUP ERSTELLEN!!!

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…

developer.yahoo.com

… der nachfolgende Link ist nur für PNG-Bilder geeignet …

gracepointafterfive.com/punypng/



example
example



… und hier noch ein Link, wobei hier größtenteils an der Qualität der Bilder geschraubt wird…

tools.dynamicdrive.com


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


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

shrinksafe.dojotoolkit.org

javascriptcompressor.com

ggf. kann man seine JS-Datei auch vorher überprüfen lassen um Fehler auszuschließen

www.jslint.com


z.B.: für CSS

www.cleancss.com

www.cssoptimiser.com

www.cssdrive.com


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:


http_request
http_request



mit gzip-Kompression:


http_request_compressed
http_request_compressed



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


  • http://suckup.de/ Lars Moelleken

    Hi, dieses CMS (WordPress) entfernt bei der Erstellung der Beiträge einige Zeichen aus meinen Shell-Befehlen… :-( hier ein korrektes Beispiel:

    find . -iname ‘*.png’ -exec optipng -o7 {} ;

  • http://www.321tux.de/ JaiBee

    Hallo voku,
    danke für diesen Artikel. optipng kannte ich noch nicht und es ist wirklich sehr praktisch (und komfortabler als “Page Speed”).
    Einen guten CSS-Komprimierer möchte ich noch ergänzen: http://csstidyonline.com/. Mir gefällt daran besonders, dass eine Übersicht der Optimierungen angezeigt wird. Dadurch kann man die CSS-Datei auch recht einfach manuell anpassen, ohne einem Tool blind vertrauen zu müssen.

    Gruß

  • http://suckup.de/ Lars Moelleken

    …wird direkt ausprobiert. “csstidy” auf der Konsole zeigt auch ein “Compression Log” an … :-)

  • http://openid-provider.appspot.com/SimonSimCity@googlemail.com SimonSimCity

    Ich hab’ einen kleinen Fehler in der Konfiguration des mod_deflate gefunden.Bitte setzt alle Header-Anweisungen in die condition, die aufgerufen wird, wenn die Erweiterung Header installiert ist.Hier ist der korrekte Part: Header append Vary User-Agent env=!dont-vary Header append Vary User-Agent Header set Vary * EDIT:Auch wenn ich dieses Modul nur empfehlen kann würd’ ich die Konfiguration der Vollständigkeit halber anpassen.Hier noch eine Beispielkonfiguration von 2004: http://www.tecchannel.de/server/linux/402259/erweiterte_apache_konfiguration/index3.htmlDie erste von dir auskommentierte Zeile muss aber zwingend drin bleiben – sonst wird der OutputFilter zwar konfiguriert aber nicht aktiviert.
    SetOutputFilter DEFLATE

  • http://suckup.de/ Lars Moelleken

    Danke für den Tipp… habe es im Post korrigiert… :-)

  • Pingback: Spriting mit Compass | SUCKUP.de