Wer die eigenen Besucher und die Suchmaschine glücklich machen möchte, wird um eine Optimierung der Webseite nicht herumkommen.

Die Geschwindigkeit einer Internetseite wird ein immer wichtigerer Faktor unserer Zeit. Muss ein Besucher zu lange auf den Content einer Seite warten, sucht er sich einfach die Nächste. Das Internet mag zwar ein paar Schwächen haben, aber der Mangel an Informationen gehört sicherlich nicht dazu.

Doch wo findet man die Bremsen der eigenen Seite? Zum einen kann man das sicherlich gut mit den Webmaster Tools von Google herausfinden und zum anderen bietet sich die Browser Extension YSlow an.

Downloadlinks:

YSlow für Firefox
YSlow für Chrome

Mit YSlow wird ein Qualitätscheck der aufgerufenen Seite durchgeführt. Einfach auf das YSlow-Symbol im Browser klicken und mit Run Test wird auch schon die Seite analysiert.

Im Anschluss seht ihr oben links eine Art Gesamtnote der analysierten Page und darunter findet ihr tabellarisch die getesteten Punkte, samt ihrer Notenvergabe, aufgelistet.

Bisher hat man sicherlich schon einige Verbesserungsmöglichkeiten gefunden. Aber YSlow bietet noch mehr, unter dem Tab Components findet man eine weitere Auflistung aller Seiten-Komponenten mit der dazugehörigen Größe (KB).

Viele Webseiten haben einfach viel zu speicherlastige Bilder und könnten ruhig mal einen Test wagen, diese zu komprimieren. Denn, je größer eine Seite ist, umso länger benötigt sie, um geladen zu werden.

Soviel an dieser Stelle zu der Browser-Extension YSlow, viel Spaß beim Experimentieren und Optimieren.

Wer von euch eine Webseite schon mal entwickelt oder geändert hat, wird das Problem vielleicht kennen. Nach jeder Änderung in der HTML- oder CSS-Datei, muss der Browser aktualisiert werden. Eine sehr lästige und zeitaufwendige Angelegenheit, gerade wenn man auf der Suche nach einem Bug ist oder etwas nicht so funktioniert, wie es eigentlich müsste.

Eine große Erleichterung bietet das Tool: LiveReload.

Wie der Name vielleicht verrät, wird nach einer Änderung der Browser automatisch aktualisiert. CSS- und Bild-Änderungen werden sogar ohne einen Refresh angezeigt.

Und so installiert ihr LiveReload (Mac OS):

Schritt 1: Ihr ladet LiveReload herunter, schiebt die App in euren Programmordner und startet sie, hier der Link zum Download.

Schritt 2: Nachdem Start von LiveReload installiert ihr euch die passende Browser Extension. Wer darauf keine Lust hat oder einen nicht unterstützten Browser nutzt, kann auch den JavaScript Snippet nutzen, nähere Informationen dazu findet ihr hier.

Falls ihr euch für die Extension entschieden habt, achtet darauf, dass ihr sie mit einem Klick auf das Logo aktivieren bzw. deaktivieren könnt und dass in den Extension-Einstellungen der Punkt Allow access to file URLs aktiviert ist.

Im Anschluss fügt ihr mit einem Klick auf das Plus-Symbol, noch euren Projektordner hinzu:

Von nun an wird nachdem Speichern der jeweiligen Datei auch der Browser automatisch mit aktualisiert. Einziger Nachteil: LiveReload gibt es nur für den Mac, alle Windows-Anhänger finden ihre Alternative vielleicht mit dem Tool xRefresh.

Eine berechtigte Frage, gerade wenn man an die doch recht schnellen Release-Zyklen der einzelnen Browser-Hersteller denkt.

Jemand, der da Licht ins dunkle bringt will, ist Philipp Bosch, Gründer der Webseite http://www.haz.io.

Auf haz.io wird der eigene Browser in den Bereichen HTML5, CSS3 und Javascript geprüft. Der Nutzer erhält dadurch sehr schnell einen Einblick darüber, welche Eigenschaften aus den Technologien unterstützt werden oder eben nicht.

Das Ganze mal veranschaulicht an einem Beispiel des Browsers Chrome mit der Version 14.