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.
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?
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.
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.
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.
Wireshark
Was läuft wirklich zwischen Browser und Webserver. Der Sniffer Wireshark gehört mittlerweile in jede Werkzeugkiste.
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.
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)
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, ...
... 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.
Im Beispiel oben, ist das Bild "Loading" zu sehen. Die ursprüngliche Größe von 33 KB kann mit einem Klick auf "smushit" ...
... 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.
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):
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.
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.
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 ;-)
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:
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.
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.
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.
