Anzeige
Tutorialbeschreibung

Tuning: Kompression für Besucher

Tuning: Kompression für Besucher

Im Zeitalter von Mobilgeräten ist wenig Traffic und hohe Geschwindigkeit alles. Ich zeige, wie man mit wenigen Handgriffen auszuliefernde Datenmengen drastisch reduziert und somit seinen Besuchern deutlich mehr Performance bietet.


Das Internet ist überall: in Computern, Mobilgeräten, Autos, Kühlschränken und Fernsehern. Es wird also Zeit, dass man genau diese Mobilität unter die Lupe nimmt und Besuchern die bestmögliche Performance während des Besuches anbietet.

Dieses Tutorial (mein erstes!) richtet sich an Website-Betreiber (in der Folge mit "du" angesprochen), die nicht mit einem CMS (Content-Management-System; bspw. Joomla!, Drupal o. Ä.) arbeiten. Und vielleicht ist es auch nichts für Foren-Betreiber. "Warum?" fragt sich nun vielleicht der/die eine oder andere, und die Antwort ist simpel: Das eine oder andere CMS oder auch Forensoftware (bspw. Woltlab) übernehmen dies (Kompression) häufig bereits via Software-Lösung.

Na, ist es dir aufgefallen? Ich denke nicht ... doch bevor ich die Katze hierzu aus dem Sack lasse, fangen wir ganz vorne an!

Zunächst: Vielen Dank für dein Interesse und den Download dieses Tutorials.

An wen richtet sich dieses Tutorial?
Grundsätzlich ist das Tutorial für jeden geeignet. Der Schwerpunkt liegt jedoch direkt bei Website-Betreibern, die mehr Performance aus dem eigenen Projekt ungeahnt herauskitzeln wollen.

Schwierigkeit?
"Leicht" bis "mittel".

Verständnis?
In der Folge rede ich von "Dateien", welche die Dateien meinen, die auf deinem Server/Webspace liegen. Mir ist bewusst, dass man bspw. Frameworks auch über Google beziehen/einbinden kann. Zur Veranschaulichung gehe ich in diesem Tutorial davon aus, dass alles zentral bei dir liegt.

Was benötigst du für dieses Tutorial?
• einen Text-Editor deiner Wahl (Notepad(++), Dreamweaver, Ecplipse, Aptana, ... ganz egal!)
7zip (ein Programm ähnlich WinRar, WinZip etc.; also für "Kompression" erforderlich - ja, bewusst dieses!!) in deinem System installiert (da es später bequemer ist)
• FTP-Tool deiner Wahl zum Upload auf deinen Server (optional)
• "Web-Developer Toolbar" als Extension in Firefox (optional)

... und natürlich gehe ich davon aus, dass du irgendwo einen verfügbaren Webspace mit Domain hast.

Welche Anforderungen musst du selbst erfüllen?
Ich gehe nur rudimentär auf die verwendete Datei namens "htaccess" ein - auch erkläre ich die verwendeten "regulären Ausdrücke" nur sporadisch, halte diese dafür aber sauber und getrennt auseinander. Dadurch - so mein Eindruck - kannst du besser erkennen, was da passiert ... ein Profi musst du dafür hingegen aber nicht sein!

Ziel des Tutorials?
Ich zeige dir, wie du den Traffic für alle Besucher deiner Seite eindampfst. Dadurch ist die Seite schneller im Zielgerät (Browser) und zügiger dargestellt. Dadurch wird die Wartezeit des Users verkürzt - und nicht nur beim Erstaufruf der Seite.

Wo fangen wir an?
Die Ausgangssituation ist folgende: Du hast dein Web-Projekt fertig, das Release ist erfolgt und erste Besucher trudeln über die Top-Domain ein. Erste Rückmeldungen via Kontaktformular sind toll, doch wenige User finden die Performance der Seite blöd - man surft von unterwegs und die Seite braucht eine kleine Ewigkeit zum Laden ... das sollten wir jetzt mal prüfen!


Los geht's ...

Mit der besagten Firefox-Extension (o. Ä.) schaust du dir dein Web-Projekt an - schnell auf Information [ 1. ] geklickt und View Document Size [ 2. ] angewählt ...

Bilder



 
... du sieht ein Ergebnis ähnlich diesem:

Bilder



Analyse so einer Ansicht:

Jeder Aufruf einer Seite verschickt 100 Dateien an den Besucher - davon die Basis-Seite (index.php o. Ä.), 79 Bilder, 15 JavaScripts und 5 Style-Sheets (CSS). In der Summe unschlagbare 544 KB. 100 Dateien bedeuten aber auch 100 Requests (Anforderungen) an den Server.

Was sind schon 544 KB?
Leitungstyp Geschwindigkeit (opt./wahrscheinlich) Dauer in Sekunden
ISDN 6 KB/5 KB ~ 108
Dual-ISDN 12 KB/10 KB ~ 54
DSL "light" 48 KB/35 KB ~ 16
DSL 16'er 2.000 KB/1.500 KB ~ 1


Ist doch eigentlich nichts?! Wer verwendet schon noch ISDN? Aber der Flaschenhals kommt jetzt ...

Nicht jeder verfügt über eine "Flat" - schon gar nicht im (immer noch zu) teuren Mobilfunkbereich. Dort gibt es Datenvolumen, und wenn diese verbraucht sind, wird man auf eine deutlich langsamere Leitung zurückgestuft. Und wie schnell ist diese Leitung dann? Schau mal in deinen eigenen Vertrag (sofern abgeschlossen) ... ;)

Natürlich wirst du sagen können als Website-Betreiber, dass dies gar nicht dein Problem ist. Du bist schließlich nicht verantwortlich für die Hardware oder Peripherie (inkl. Leitung also) eines Besuchers. Das ist alles korrekt. Aber Besucher sind "grausam", und zügig erzählt ein Besucher "family, friends & foes", wie mies deine Seite doch wäre, total langsam etc. (dies sei jetzt nur am Rand erwähnt). Dass der (Denk-)Fehler beim User liegt, schreibst du ihm lieber nicht als Antwort auf deine erhaltene Kontaktformular-Beschwerde.

Selbsteinschätzung "on-the-fly": Wie lange wartest du auf eine Website, bis du "noch mal klickst", "refresh drückst" oder gleich direkt wieder gehst?

Kommen wir weg von der Theorie, zurück zum Lösungsweg: Nun wartet der User wirklich so lange, bis alles auf seinem Gerät angekommen ist - uff. Und dann macht er den Wahnsinn perfekt und kommt am nächsten Tag erneut. Was passiert? Er wartet wieder ... 544 KB lang.

CACHING schreit da gerade jemand aus der hinteren Reihe ... joar, nicht schlecht - fast sogar "gut". Allerdings "cached" ein Gerät mit einem Apfel drauf nur Dateien, die kleiner sind als 25 KB - alles, was darüber geht, wird verworfen und muss neu geladen werden. Ein Beispiel? "jQuery" ... eine Größe von ~ 100 KB und lässt sich daher nicht für den "Apfel" dauerhaft festhalten. Frameworks (Funktionssammlungen) sind als "Eierlegendewollmilchsau" eben immer größer - egal, ob jQuery mitsamt "UI", Prototype, Scriptaculous usw.

Wir brauchen eine Lösung unabhängig vom verwendeten Gerät, Vorlieben (ich habe bspw. Caching selbst immer aus) und Leitungen - hier müssen wir es Besuchern so bequem und schnell wie möglich "besorgen" (den Content, wohlgemerkt).


Kompression

Du wirst als Projektbetreiber schon mit Kompression zu tun gehabt haben. Wenn du Youtube verwendet hast oder Online-Spiele (Browsergames wie bspw. fussball:xxl) spielst: Bilder als JPG, Audio als MP3, Videos als "Matroska" (.mkv), Rechnungen als PDF usw.


ACHTUNG:

Genau diese Dateien, die bereits bearbeitet sind, müssen nicht noch einmal komprimiert werden - noch kleiner als derartig klein geht eben nicht.

Was eignet sich daher? "plain text"-Dateien: Content, JavaScript und natürlich CSS. Da "Content" nicht bei jedem "separat" liegt, gehe ich ausnahmslos auf "JavaScript" und "CSS" ein - die besagten Brocken (s. Screener oben).


Grundsätzliche Theorie

Jeder (!) moderne Browser in üblichen Betriebssystemen (sogar Mac) unterstützt als Datentransport "gzip". Hierbei sendet der Browser diese Fähigkeit an den Server mit. Die Übertragung dieser "Fähigkeit" erfolgt im "Request-Header", und den musst du nicht extra einstellen.

Der Server (meist wohl Apache) empfängt nun diesen "Request-Header" und liest "oh, der Browser kann 'gzip' - also verschicke ich gzip-Dateien!"

Du ahnst es, denn es gibt zwei Möglichkeiten:

[ 1. ] Der Server erstellt aus der angeforderten Datei eine gzip-Datei und liefert diese aus.
[ 2. ] Der Server liefert eine bereits bestehende Datei an den Browser aus.

Nun, wenn immer möglich, vermeide ich Extra-Last auf meinen Servern - demnach ist es zwar möglich, dass man Punkt 1 "mal eben" einstellen kann, doch bei Punkt habe ich deutlich mehr Last-Kontrolle über den Server.

Fangen wir also nun richtig an: ...


Pre-Schritt: 7zip installieren

(Damit erstellen wir gzip-Dateien)

• Obige Datei herunterladen
• Installieren
• Hinweis: Den Eintrag ins Alternativmenü (rechte Maus) bei Installation bestätigen bzw. bestehen lassen - hilfreich später (s. u.)!!


Schritt 1: htaccess erstellen

Die Datei "htaccess" regelt den Zugriff und die Abläufe auf deinem Webserver - sprich: Du kannst Dinge wie Verzeichnisschutz o. Ä. erstellen. Sie dient also dazu, nachträglich - und ohne in die eigentlichen Konfiguration des Servers zu greifen - Änderungen vorzunehmen, die beim Besuch deiner Seite greifen. Und genau das haben wir ja auch vor ...

Also verbinden wir uns mit unserem Server/Webspace und prüfen die Existenz einer ".htaccess":


WICHTIG:

Stelle sicher, dass du sie sehen könntest (wird gern unsichtbar dargestellt in einigen Tools)!! Wir wollen schließlich keine Bestehende überschreiben oder unbrauchbar machen!!

Ich habe schon eine htaccess!
Sollte auf deinem Server schon eine vorhanden sein, hole dir diese auf deinen Client - und damit in deinen Editor.

Ich habe meinem FTP-Tool gesagt, er soll "unsichtbare Dateien" zeigen, aber da ist nichts!
Erstelle dir eine Datei namens "htaccess.txt". Öffne diese nun im Editor und schreibe ein "#" (ohne "). Diese lädst du hoch. Anschließend benennst du diese auf ".htaccess" (ohne ") um - und ja, der Punkt vor dem Namen ist wichtig.

# Folgendes funktioniert nur, wenn das Modul "mod_rewrite" im Apache vorhanden ist
# ... falls nicht, wird es ignoriert und das System wird nicht gestört!
<ifmodule mod_rewrite.c>


# ... damit sagen wir dem Apache, dass wir was ändern wollen - PFLICHT!
RewriteEngine On


# ... ausgehend vom Root der Domain ...
RewriteBase /


# ... aktiviere GZIP (Kompression) mit der Endung ".gz" im Apache ...
AddEncoding gzip .gz


# ... es folgen die zwei (oder mehr) relevanten Verzeichnisse, 
# die für Kompression infrage kommen
<filesmatch "\.js\.gz$">
AddType "text/javascript" .gz
</filesmatch>

<filesmatch "\.css\.gz$">
AddType "text/css" .gz
</filesmatch>


# ... damit signalisiert der Server, dass er GZIP ausliefern kann und wird
RewriteCond %{HTTP:Accept-encoding} gzip

# ... sollte der Browser GZIP empfangen (und interpretieren) können, wird 
# hier das GZIP-File anstelle der Originaldatei ausgeliefert - hier 
# nichts dran ändern!
RewriteCond %{REQUEST_FILENAME} \.(js|css)$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]

</ifmodule>

Den Cracks unter euch sei gesagt, dass ich bewusst auf unnötige RegExp-Zusammenlegungen verzichtet habe. So kann auch ein unbedarfter User die Schritte nachvollziehen, als wenn alles mit vielen "UND" bzw. "ODER"-Verbindungen zusammensteckt wäre.

Wer die ".htaccess" nun hochlädt (oder direkt auf dem Server arbeitet und speichert) und die Seite neu aufruft, wird feststellen, dass sich gar nichts getan hat. Das ist auch korrekt!! Denn es fehlt noch der zweite Teil der Arbeit ...

Der Server soll die Kompression für uns nicht übernehmen - und wenn, so wäre das wieder einer dieser Performance-Killer, die wir doch eigentlich gerade beheben wollen. Nun kommt das zuvor installierte Tool 7zip ins Spiel - damit lässt sich mit zwei Klicks das gewünschte Format erstellen, das Apache und Linux handlen können ...

Noch mal: Eigentlich installiert sich 7zip automatisch mit ins Alternativmenü der rechten Maus - dies wird auch empfohlen (lässt sich später von dort auch wieder entnehmen, wenn man sich daran stört)! Für die Abläufe im späteren Windows-Explorer ist es aber in diesem Alternativ-Menü deutlich schneller.


Schritt 2:

Starte bitte deinen Windows-Explorer und gehe in ein Verzeichnis - bspw. das des "JavaScripts". Dort sieht es als Beispiel nun wie hier aus:

Bilder



 

Schritt 3:

Mit der rechten Maustaste auf eine dieser Dateien klicken und im Submenü von 7zip Folgendes auswählen:

Bilder



Schritt 4:

• Unter Archivformat: "gzip" wählen (Name etc. wird autom. übernommen)
• Unter Kompressionsformat: "ultra" einstellen

Bilder



 

Schritt 5:

Nach dem Klick auf OK entsteht eine neue Datei im Verzeichnis - beachte schon direkt die Größe!!

Bilder



Nun wiederholst du diese Schritte - für alle Dateien mit der Endung ".js" und natürlich für alle Dateien im Verzeichnis "css" mit der Endung ".css". Noch mal ohne Bilder:

Rechte Maus auf einer Datei
• Auf den dortigen Eintrag 7-zip und im sich öffnenden Untermenü Zu einem Archiv hinzufügen
• Es öffnet sich ein Fenster ...
• Unter Archivformat: die Option gzip wählen (Name etc. wird autom. übernommen)
• Unter Kompressionsformat: die Option Ultra einstellen
OK klicken

Usability: Die Einstellungen bleiben nach der ersten Verwendung erhalten (und sind später auch noch drin) ... demnach nur noch rechte Maus, 7zip>Zu Archiv und direkt Enter ...


 

Schritt 6:

Uploade nun diese Dateien in die jeweiligen Verzeichnisse - und das war's eigentlich auch schon.

Nach diesen Maßnahmen sieht meine 544-KB-Seite nur noch so aus:

Bilder



Rechne dir selbst aus, wie schnell nun eine Seite auf einem Mobilgerät ankommt ... :D

So ganz ohne Randnotizen gehen wir hier aber nicht auseinander. Es sei erwähnt:

[ 1. ] Sollte ein Browser oder der Server selbst kein GZIP verstehen, wird weiterhin die Original-Datei im Rohformat ".js" oder ".css" verwendet!! Die Browser, die das unterstützen - und der Server eben auch -, benutzen die deutlich kleinere Variante!!

[ 2. ] Die obige Aktion macht dann Sinn, wenn du mit allen Dingen fertig bist und keine Modifikationen an eben CSS oder JS mehr vornimmst. Sobald du etwas änderst, musst du "zwei Dateien" hochladen (bspw. ".js" und die Kompression). Vergiss das nicht! Denn sonst liefert GZIP die alte Version weiterhin aus und du wunderst dich, warum Anzeigen oder Funktionen nicht stimmen.

[ 3. ] Man benötigt minimal etwas mehr Speicherplatz auf dem Server/Webspace und am Anfang ist es wirklich Arbeit (also aufwendig). Aber der Preis ist nicht unerheblich ...

[ 4. ] Ja, mit gzip "belastest" du den Besucher - denn der muss auf seiner Seite diese gzip-Datei entpacken lassen (macht der Browser ganz allein). Aber genau da liegt Rechenleistung ungenutzt - ähnlich des Modells eines "fat clients" habe ich hier verfolgt: "Last zum Besucher statt auf dem Server!"


Dir müsste jetzt ziemlich klar sein, dass Zeit nicht nur im "real life" teuer sein kann. Aber das, was du mit diesem Tutorial nun vielleicht gelernt hast, geht noch über den Performance-Traffic-Vorteil für deine User hinaus:

• Suchmaschinen indexieren dich deutlich schneller (nehmen mehr Content mit; die kommen mit gzip!!)
• Bessere Gewichtung bei bspw. Google (ja, die machen Zeitmessungen; ebenfalls wg. gzip!!)
• Skalierbarkeit von Server-Ressourcen
• Speed-Vorteil auch für asynchrone (AJAX) Abfragen und Abläufe

Du brauchst noch mehr Performance? Schneller und richtig schnell? Vielleicht erzähle ich dir im nächsten Tutorial, wie du den Flaschenhals im Browser löst und warum das eine oder andere JavaScript von dir die wahre Bremse ist ... und wie du aus den oben gezeigten 169 KB (statt 544 KB) noch weniger machen kannst!!

Zu guter Letzt noch ein wenig Troubleshooting:

Ich habe alles genau so gemacht, aber ich habe mit der Web-Developer Toolbar immer auf beiden Seiten die gleiche Größe - was ist da falsch?
Da muss nicht unbedingt was falsch sein. Schalte einfach für den Moment den Cache aus - auch über die Toolbar: Disable>Disable Cache>Disable entire cache ... und noch einmal messen.

Ich bekomme eine Fehlermeldung, wenn die htaccess online ist.
Häufig ist ein Tippfehler schuld, der vom Server nicht interpretiert werden kann - prüfe in aller Ruhe!! So umfangreich sind die hier vorgestellten Erweiterungen nicht. Nimm diese einfach noch mal raus - immer noch da? Dann kommt es nicht aus diesem Tutorial.

Es wird nicht kleiner - alles richtig, alles oben, aber nichts!
Wie in der htaccess zu lesen ist, muss "mod_rewrite" für dich verfügbar sein - das ist schließlich eine if-Bedingung. Wie im Tutorial erwähnt, passiert aber für Besucher gar nichts - diese erhalten weiterhin deine "Großpackung". Ob es an "mod_rewrite" liegt, erfährst du bspw. mit "phpinfo()" in einer .php-Datei ganz einfach ...

Vielen Dank für dein Interesse an meinem Tutorial.

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von rabbitdesign
  • 22.12.2013 - 12:53

Spitze, werde ich sofort für meinen relaunch einplanen!

Portrait von CCMan
  • 13.04.2013 - 15:27

Vielen Dank für das ausführliche Tutorial.

Portrait von cythux
  • 17.03.2013 - 16:33

sehr schöne info bis auf die toolbar, ich benutze seit längerm inzwischen firebug oder die toolbar von Chrome zudem schaut euch auch mal die .htacces von HTML5Boilerplate an.
zudem Bilder komprimiert man auch noch gut mittels http://www.smushit.com/ysmush.it/ oder eventuell auch mit dem Photoshop Plugin http://www.fnordware.com/superpng/

Portrait von teste123
  • 10.03.2013 - 22:05

herzlich Danke
MfG

Portrait von Curanai
  • 10.03.2013 - 19:37

Oh, ganz schön viele (positive) Kommentare - vielen Dank dafür.

@lachender_engel: http://chrispederick.com/work/web-developer/ ... das ist der Link zur von mir verwendeten Toolbar. Der Link ist leider - da ich nochmal anfangen durfte - verlustig gegangen. Sorry, dass es mir beim Fehlerlesen nicht aufgefallen ist. Notiz ist gemacht, falls ein nächstes Tutorial wieder Links enthalten sollte. ;)

@NiAlMa: Das Tutorial dreht sich auch nicht um die htaccess und ihre Möglichkeiten. Eine komplette Beschreibung hätte dieses Tut deutlich gesprengt und wäre an meinem eigentlichen Ziel voll vorbei gegangen.

Portrait von Hanno_Hauser
  • 10.03.2013 - 13:59

Hi,
danke für das Tutorial.
LG

Portrait von NiAlMa
  • 10.03.2013 - 13:38

Sehr gutes Tut aber leider ist im pdf der Aufbau der htaccess nicht komplett drin. Dieser ist nur über die Seite hier auffindbar.

Portrait von vtech
  • 10.03.2013 - 13:36

Hab mir nie wirklich Gedanke über Komprimierung gemacht. Super Tutorial.

Portrait von topflip
  • 10.03.2013 - 13:21

Klappt auch wunderbar mit Developer Tools und PageSpeed von google. Danke

Portrait von leveler
  • 10.03.2013 - 12:44

Ein sehr informatives Tutorial. Kommt mir grad ganz gelegen. Vielen Dank dafür!

Portrait von Steve007
  • 10.03.2013 - 12:30

Vielen Dank für das interessante Tutorial.

Portrait von MicroSmurf
Portrait von dn3d_fanboy
  • 10.03.2013 - 12:27

Danke für das Tutorial. Ich beschäftige mich seit einiger Zeit mit dem Thema Webdesign, aber die Komprimierung war mir neu.

Da kann ich meine Seiten deutlich "leichter" machen.

Portrait von ninafee
  • 10.03.2013 - 12:18

Vielen Dank für das Tutorial.

Portrait von johanna52
  • 10.03.2013 - 12:16

danke für das sehr gute und informative Tutorial, kann man sicher in Zukunft gut gebrauchen und einsetzten

Portrait von MaoMao
  • 10.03.2013 - 12:15

Vielen Dank für das Tutorial.

Portrait von Dineria
  • 10.03.2013 - 12:08

Danke für das gut geschriebene Tutorial! :-) Habe zwar nicht soo viel mit Webdesign am Hut, aber kann man vielleicht ja doch mal gebrauchen! ;-)

Portrait von lachender_engel
  • 10.03.2013 - 11:31

Liest sich gut. Du solltest nur die verwendete Web-Developer Toolbar genauer definieren, da es einige Add-Ons mit dieser Bezeichnung gibt. Vielleicht direkt mit einem Link oder zumindest dem Namen des Autors?!

x
×
×