Wie kann man die Seite beschleunigen?
Ladezeiten verbessern - Teil 2 - Tools für die Analyse
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)
- 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)
Ladezeiten verbessern - Teil 3 - Bilder optimieren
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/stories 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/stories 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.
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. Wicht: 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.
