Zwei Plugins, die die Ladezeiten Ihrer Webseite beschleunigen wollen, sind der CssJsCompressor von JoomlaTags und der RokGZipper von RocketTheme. Beide Arbeiten nach dem selben Prinzip: Zusammenfassen der CSS- und JavaScript-Dateien, komprimieren der Seiten mit Hilfe von GZip, usw.

Ladezeiten durch CssJsCompress reduzieren

Die Ergebnisse der Plugins lassen sich wirklich sehen, doch läuft nach der Aktivierung der Plugins noch alles? Hier ein Beitrag, der die beiden mal gegenüber stellt und auf evtl. Probleme hinweist.

Die URL wird eingegeben, der Benutzer bestätigt die Adresse mir der ENTER-Taste und dann läuft die Zeit. Wie lange dauert es, bis die Startseite - das erst Mal - komplett geladen ist? Wie lange dauert es, um von einer auf die andere Seite zu kommen?

Loading © asiln - Fotolia.com

Seitenladezeiten - "page load time" - nerven nicht nur die Besucher, nun will Google ab dem Jahr 2010 die "page laod time" beim Ranking berücksichtigen (siehe Interview mit Matt Cutts bei der PubCon in Las Vegas in 2009).

Die ...

  • Dateigröße des Seitenquelltextes
  • Dateigröße der Bilder auf der Seite
  • Die Anzahl der Anforderungen anderer Objekte, die von der Seite noch geladen werden (z. B. CSS / JavaScript / Feeds usw.).

... sollen sich auf das Ranking auswirken. 

Dieser Artikel beschreibt, wie man CSS und JavaScripts Code komprimieren kann und was Sie noch tun können, um die Ladezeit Ihrer Seite zu optimieren.

Der Artikel wurde parallel zur Präsentation "Ladezeiten Verbessern - CSS und JavaScript Komprimierung" für das Treffen der WebDevFulda im April 2010 entwickelt. Der Spaß an diesem Thema lässt einen nicht mehr los und so hoffe ich, damit einige "angesteckt" zu haben bzw. auch zukünftig noch einige damit zu "infizieren".

Bitte beachtet, dass ich bei diesem Artikel das Hauptaugenmerk auf die Optimierung von Joomla!-Seiten lege. Ihr werdet einiges aus den Artikeln auf andere Content Management Systeme und "normale" Seiten anwenden können.

Sie benötigen für die Analyse ein paar nützliche Werkzeuge. Folgende Tools sollten Sie kennen lernen:

  • Den Onlinedienst Webpagetest,
  • die Firefox Erweiterungen Firebug, YSlow und Google Page Speed und
  • den Sniffer Wireshark.

Alle Tools sind kostenlos erhältlich und bieten alle Informartionen, die Sie für die Auswertung in diesem Bereich benötigen.

Onlinedienst Webpagetest

Unter www.webpagetest.org erreichen Sie einen guten Helfer, wenn es um die Websiteanalyse geht.

Tools Webpagetest

Firefox mit Firebug und YSlow

Der Firefox bietet hundertte Erweiterungen. Einige davon sind wirklich gut. Hierzu gehören z. B. der Firebug und YSlow. Mit dem Firebug kann man das "Page Load" Verhalten der Webseiten testen. YSlow von Yahoo liefert die Tipps, mit denen man dann die Performance erhöhen kann.

Tools - Firefox mit Firebug und YSlow

Firefox mit Google Page Speed

Google Page Speed setzt ebenfalls da an, wo YSlow angefangen hat. Hier kommen Tipps, wie z. B. Bildgrößen nicht gesetzt, unbenutzte CSS Formatierungen entfernen, usw.

Tools - Google Page Speed

Wireshark

Was läuft wirklich zwischen Browser und Webserver. Der Sniffer Wireshark gehört mittlerweile in jede Werkzeugkiste.

Tools - Sniffer Wireshark

Hunderte von Pakten rasen an der Netzwerkkarte vorbei. Mit "Follow Stream" lässt sich die Kommunikation zwischen dem Browser und dem Webserver sehr gut nachvollziehen.

Wireshark - Follow Stream

Es gibt noch einige Tools mehr, die bei der Analyse und bei Performanceproblemen helfen. Würde mich freuen, wenn Ihr da ein paar Links für uns hättet.

Weitere Infos im Web

Werkzeuge zur Messung der Ladezeiten und sonstige Tools zum Debuggen

  • AOL Pagetest - Prima Übersicht über die ausgelieferten Seiten (http://www.webpagetest.org)
  • Firefox Erweiterung Firebug (https://addons.mozilla.org/de/firefox/addon/1843)
  • Firefox Erweiterung YSlow prüft anhand der Yahoo Performance Tipps, warum ihre Seite so schleicht (https://addons.mozilla.org/de/firefox/addon/5369)
  • Google Page Speed (http://code.google.com/intl/de-DE/speed/page-speed/)

Artikel zum Thema Web Site Analyse Tools

  • Internet Explorer Werkzeuge für Website-Analyse (matthiasschuetz.com)
  • 6 Tools To Find Out Website Load Speed (http://www.cyberciti.biz/tips/website-load-speed-performace-testing-tools.html)

Bilder sind in der Regel die ersten Dateien, die man von der Dateigröße reduzieren kann. PNG ist natürlich ein gutes Format, doch hätte das Bild als JPEG oder die Grafik als GIF nicht wesentlich weniger Speicherplatz benötigt? Das Optimieren der Grafiken / Bilder kostet Zeit, doch die ist hier ggf. gut Investiert.

Wo kommen die Bilder her?

Hier stellt sich die Frage, wo soll ich die Bilder speichern. In der Regel wird das einfach der selbse Server sein, der auch den rest des Contents liefert. Unter Joomla! gibt es den Ordner /images und dort gehören die Bilder rein. Gallerien und andere Erweiterungen bauen auf dieser Idee auf. Doch gibt es hier auch verschiedene Ideen zur Performanceoptimierung:

"Bilder sollen vom selben Server kommen, um DNS Auflösung, Verbindungsaufbauten zu minimieren."

Die Anforderung der Bilder von flickr & Co. kostet wieder Zeit für den Zugriff auf die externen Server. So die eine Theorie.

"Die Inhalte sollten von verschiedenen Servern kommen, um gleichzeitig mehrere Verbidnungen nutzen zu können".

So die anderen Theorie.

Bleiben wir erst mal dabei: Wir speichern die Bilder im Verzeichnis /images und optimieren lieber die Bilder selbst, als einen tollen Ort für die Speicherung zu finden.

Breite und Höhe immer angeben

Die Bilder sollten immer mit Breite und Höhe eingebunden werden, ...

<img src="/images/bild.jpg" width="100" height="75" alt="Alternativer Text" />

... damit der Browser die Seite nicht ständig neu Rendern muss (jede Tabelle sollte ebenfalls in der Breite festgelegt werden, um den Seitenaufbau zu beschleunigen).

Natürlich nutze ich selbst auch flickr und speichere Screenshots am liebsten als PNG, gerade, wenn ich noch Kommentare eingefügt oder Pfeile gezeichnet habe. Doch gerade hier liegt eine Möglichkeit die Seite durch GIFs und JPEGs zu beschleunigen. Speichern Sie doch eine "Arbeitsdatei" für Ihre Bedürfnisse und eine optimierte Bilddatei, die Sie in die Seite einbinden.

Yahoo! Smush.it™

Yahoo! hat mit dem Firefox Add-On YSlow (zuvor das Firebug Add-On installieren) ein nettes Werkzeug zur Bildoptimierung mitgeliefert. Mit Smush.it werden Bilder untersucht und - ohne Qualitätsverlust - weiter verkleinert. Unter www.smushit.com/ysmush.it könnt Ihr Smush.it auch direkt nutzen.

YSlow Smush.it von Yahoo!

Im Beispiel oben, ist das Bild "Loading" zu sehen. Die ursprüngliche Größe von 33 KB kann mit einem Klick auf "smushit" ...

YSlow Smush.it von Yahoo!

... auf 19 KB reduzieren. Wichtig: Smush.it entfernt alle Metadaten (z. B. EXIF und IPTC Informationen). Achtet auf Lizenzbestimmungen. Ggf. müssen einige Infos in den Bildern erhalten bleiben bzw. im Nachhinein wieder integriert werden.

Das so reduzierte Bild könnt Ihr dann herunterladen und nutzen.

Alternativ könnt Ihr Smush.it auch direkt über www.smushit.com/ysmush.it aufrufen.

Yahoo! Smush.it

Testet doch glein ein paar von euren Bildern, die - eurer Meinung nach - für das Web bereits optimiert sind und vergleicht die Ergebnisse. Smush.it holt wirklich noch einiges aus den meisten Bildern heraus und das ganze ohne Qualitätsverlust.

Die Anforderung der Bilder von flickr & Co. kostet wieder 1-2 Sekunden für den Zugriff auf die externen Server.

Neben dem HTML-Code hat der Webserver heute noch einiges an CSS- und JavaScript Code zum Browser zu übertragen. Um die Ladezeit der Webseiten zu verbessern, kann man zur Optimierung und Komprimierung von CSS Formatierungen greifen. Doch, wie funktioniert sowas?

Schauen Sie sich folgenden CSS Code an (216 Byte ANSI):

.button {
   border-left-width: 6px;
   border-left-style: solid;
   border-left-color: rgb(153,153,153);
   border-bottom-width: 2px;
   border-bottom-style: solid;
   border-bottom-color: rgb(153,153,153);
}

Dieser CSS Code lässt sich zunächst - um die Hälfte - auf 106 Bytes verkürzen in dem man die border-Styles zusammenfasst:

.button {
    border-left: 6px solid rgb(153,153,153);
    border-bottom: 2px solid rgb(153,153,153);
}

Weiterhin lässt sich die Farbe ebenfalls um einiges verkürzen, wenn man statt der RGB-Notation die Hex-Schreibweise nutzt (wir kommen auf 88 Byte):

.button {
    border-left: 6px solid #999999;
    border-bottom: 2px solid #999999;
}

In diesem Fall könnte man die #999999 auch noch auf #999 zusammenfassen, wir kommen dann auf 82 Byte.

.button {
    border-left: 6px solid #999;
    border-bottom: 2px solid #999;
}

Lässt man dann noch die Zeilenumbrüche, Tabulatoren, unnötigen Leerzeichen und das letzte Semikolon weg, sieht der Code so aus:

.button{border-left: 6px solid #999;border-bottom: 2px solid #999}

Wir haben den Code in diesem kleinen Beispiel durch das Nutzen von Kurzschreibweisen, HEX statt RGB Farben, entfernen von unnötigen Leerzeichen, Tabulatoren und Zeilenumbrüchen von 212 Byte auf 66 Byte "komprimiert". Setzt man diese Vorgehensweise konsequent ein, so kann man einige CSS-Dateien (auf dem selben Wege auch JavaScript-Dateien) stark komprimieren.

Das was man benötigt, ist eine CSS Formatierung, die von den Browsern noch einwandfrei interpretiert werden, von den Menschen aber nicht unbedingt gut gelesen werden muss.

Speichern Sie Ihre CSS Formatierungen in einer externen Datei ab. Sie sollten zwei Dateien haben: Die Eine, in der Sie arbeiten, die auch schön mit Zeilenumbrüchen und Tabulatoren formatiert ist. Die Andere, die im Web per <link>-Tag eingebunden ist und stark komprimiert wurde.

Online Tools für die CSS Komprimierung

Zur Komprimierung von solchen Dateien müssen Sie nicht unbedingt selbst hinsetzten und alles durchsehen. Gerade für diese Aufgabe gibt es einige Tools, die auch Online zur Verfügung stehen.

Online Tool "compressor" von eBiene

Versuchen Sie es selbst einmal. Nutzen Sie den obigen Code (kopieren Sie ihn in die Zwischenablage) und fügen Sie den ihn bei dem "Compressor von ebiene" ein.

compressor von ebiene.de

Ein Klick auf "powerfull compress" genügt und es kommt ein Ergebnis heraus. OK er ist nicht ganz so mächtig, aber besser als nix. Leerzeichen, Tabulatoren und Zeilenumbrüche wurden korrekt entfernt. Die CSS Formatierungen sind immer noch Einsatzbereit.

CSS Compressor auf tools.pingates.com

Eine bessere Figur hat mit dem obigen Bespiel der CSS Compressor auf pingates.com gemacht.

CSS Compressor auf tools.pingates.com

Alle oben genannten Punkte wurden berücksichtigt. Vorbildlich, wie ich meine. Aber testet doch mal selbst ein wenig. Über weitere Hinweise auf solche Komprimierer würde ich mich freuen.

Applikationen für die CSS Komprimierung

Neben den "Online-Tools" gibt es da auch direkte Windows / UNIX / MAC Applikationen, die offline ausführbar sind.

YUI Compressor

Yahoo hat den YUI Compressor entwickelt, der sowohl CSS als auch JavaScript komprimiert. Was benötigen Sie? Java und den YUI Compressor.

Im Beispiel hab ich den YUI Compressor direkt in "c:\" entpackt. Die Datei "screen.css" - mit dem Inhalt der obigen Beispiels -  hab ich dann ins das Verzeichnis "c:\yuicompressor-2.4.2\build" gelegt.

Der Aufruf des YUI Compressors geschieht direkt an der Kommandozeile (Start - Alle Programme - Zubehör - Eingabeaufforderung). Die "alten" DOS Befehle "cd \" und "cd yuicompressor-2.4.2\build" muss man dann schon noch kennen ;-)

YUI Compressor - CSS komprimieren

Die YUI Compressor Dokumentation beschreibt, was man so machen kann. In der obigen Abbildung hab ich das Script einfach durchlaufen lassen und in die Datei "src.css" ausgeben lassen. Der Befehl lautet:

java -jar yuicompressor-2.4.2.jar --type css --charset ansi screen.css -o src.css

Heraus kam folgendes:

.button{border-left-width:6px;border-left-style:solid;border-left-color:#999;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:#999;}

Leerzeichen, Tabulatoren und Zeilenumbrüche wurden korrekt entfernt und die RGB-Schreibweise wurde in HEX (Kurzform) umgewandelt. Ergebnis hier: 153 Byte.

Soweit zum YUI Compressor.

Free CSS Toolbox

Die Free CSS Toolbox geht ein wenig weiter. Sie ist CSS Formatierer, Validator und Komprimierer.

Free CSS Toolbox

Ein Klick auf "Re-Format Now" und los geht es. Das Ergebnis ist fast das gleiche wie beim "YUI Compressor". Hier wurde noch das letzte Semikolon entfernt. Der Umgang mit diesem Tool fällt allerdings etwas leichter.

.button{border-left-width:6px;border-left-style:solid;border-left-color:#999;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:#999}

Wir haben den Code von 216 auf 152 Byte komprimiert. Über die Schaltfläche "Other Tools" kann man die so komprimierten CSS Formatierungen direkt beim W3C CSS Validator prüfen lassen.

Noch ein Hinweis: Manche Erweiterungen bringen ihre eigenen CSS Dateien mit. Hier könnt Ihr ggf. auch mal danach schauen, ob die nicht komprimiert werden können. Nach jedem Update der Erweiterung ist dass dann ggf. zu wiederholen.

Wenn Ihr noch ein paar Tools kennt, die hier gute Arbeit leisten, schreibt doch kurz einen Kommentar hierzu. Danke, Eure JUG Fulda.

Weitere Infos im Web

Artikel zum Thema CSS

  • 18 CSS Komprimierer (http://designshack.co.uk/articles/css/18-css-compression-tools-and-techniques)
  • CSS Code organisieren und Ladegeschwindigkeit optimieren (webstandard.kulando.de)
  • CSS Dateien komprimieren (http://mrfoo.de/archiv/138-CSS-Dateien-komprimieren.html)
  • CSS Spritest verringern die Ladezeit - Weniger Bilder für Hovereffekte nötig (http://bueltge.de/css-sprites-einfach-erklaert/675/)
  • CSS Dateien komprimieren (http://mrfoo.de/archiv/138-CSS-Dateien-komprimieren.html)
  • Serverseitige Komprimierung (http://www.cekay.de/2008-01-30-seitenaufbau-beschleunigen-teil-1-css-komprimierung)
  • Serverseitige Komprimierung (http://www.phpblogger.net/2007/04/14/javascript-und-css-komprimieren/)

Offline Tools zur CSS Komprimierung

  • http://linux.softpedia.com/get/Internet/HTTP-WWW-/django-compress-43526.shtml
  • Free CSS Toolbox (www.blumentals.de/csstool)

Online kann man die CSS Formatierung z. B. über

  • TOP! CSS Compressor auf pingates.com ... (tools.pingates.com)
  • CSS Compressor (www.csscompressor.com)
  • YUI CSS und JavaScript Komprimierer (http://yui.2clics.net/)
  • CSS und JavaScript Komprimierer (http://compressor.ebiene.de/)
  • CSS formatter (http://teenage.cz/acidofil/tools/cssformat.php)
  • CSS Cruncher (www.csscruncher.com/de/)
  • CSS und JavaScript Compressor (http://www.creativyst.com/Prod/3/)

komprimieren lassen.