Bildoptimierung für Webseiten mit Firebug und Google Pagespeed

[sam id=“2″ codes=“true“]Seit einigen Jahren ist  bereits bekannt, dass Google bei seinen Rankings Wert auf den Pagespeed einer Webseite  legt. Auch für die Erfahrung eines Nutzers auf der Webseite ist es besonders wichtig, dass die Webseite schnell und fehlerfrei lädt.

Tests zeigen, dass bei langsam ladenden Webseiten eine erhöhte Absprungsrate der Nutzer zu verzeichnen ist. Im Folgenden möchte ich einige nützliche Tipps geben, die zeigen, wie Webmaster ihre Bilder optimieren können um den Pagespeed zu steigern.

Firebug und Page Speed

Firebug ist ein tolles Tool, welches die meisten von euch sicherlich schon kennen. Für diejenigen, die es nicht kennen, gibt es jetzt einen kurzen Überblick. Firebug ist ein Plugin für den Mozilla Firefox Browser. Über das Firefox Plugin Menü lässt sich Firebug installieren. Danach steht eine große Auswahl an Webwork Tools bereit.

Mit Firebug lassen sich zum Beispiel die CSS Dateien anschauen und einzelne Html-Elemente der Webseite untersuchen. CSS Codes lassen sich „on the fly“ ändern und die Veränderung kann man live im Browser verfolgen. Natürlich wird das Ganze nicht gespeichert.  So kann man jedoch, selbst als Leihe, sehr schnell Änderungen im Code vornehmen.  Auf Details hierzu werde ich in einem anderen Artikel noch genauer eingehen.

Um das Google Pagespeed Tool mit Firebug nutzen zu können, muss die Erweiterung „Page Speed“ für Firebug installiert werden. Das Page Speed Tool kann man auf der Google Page Speed Webseite herunterladen. Dort muss man einfach die Firefox Erweiterung herunterladen und dann die Datei manuell in Firefox als Add-On installieren.

Wichtig für Chrome Nutzer: Page Speed ist auch für Chrome zugänglich und kann auf der gleichen Webseite als Chrome Extension heruntergeladen werden. Die Extension kann man dann im Browser mit der Taste „F12“ aufrufen.

Firebug und Page Speed nutzen

Nach der Installation über den Plugin Manager von Firefox muss der Browser einmal neu gestartet werden. Danach sind beide Plugins einsatzbereit. In der oberen rechten Ecke von Firefox findet sich nach der Installation das Firebug Symbol. Wenn man das Plugin startet, öffnet sich – je nach Einstellung meist am unteren Rand vom Browser – eine Übersicht über alle Funktionen von Firebug. Dort findet sich neben „Html“, „CSS“ oder „Skript“ nun auch die Option „Page Speed“.

Wichtig ist hierbei: Die Optionen und Auswertungen von Firebug beziehen sich immer auf die gerade geöffnete Webseite.

Mit einem Klick auf den „Page Speed“ Button in der Menüleiste wird der Service gestartet. Danach kann über einen Klick auf „Analyse Performance“ die Auswertung der Optimierungsergebnisse gestartet werden. Hier wird nun alles aufgeführt, was Webmaster hinsichtlich der Ladegeschwindigkeit verbessern können.

Die rot markierten Elemente sind kritisch, während die gelben Elemente nur mittlere Priorität haben. Die grünen Elemente bewertet Google mit „Gut“.

Wer statt Firefox den Google Chrome Browser nutzt, kann Google Pagespeed mit der „F12“ Taste aktivieren und nutzen.

Bildoptimierung mit Page Speed

Ist die Analyse einmal durchgeführt, können zu den einzelnen Punkten auch Details eingesehen werden. Dazu muss nur auf den kleinen Pfeil links neben den einzelnen Punkten geklickt werden. Klickt man anschließend auf den kleinen Pfeil neben „Bilder optimieren“, öffnet sich eine Liste mit allen Bildern der gerade ausgeführten Webseite.

Hier kann man einsehen, welche Bilder wie groß sind und um wie viel Prozent und Kilobyte die einzelnen Bilder noch reduziert werden können. Und jetzt kommt der wirklich interessante Punkt. Firebug bietet für die reduzierte Version des Bildes bereits einen Downloadlink an. Das optimierte Bild kann, mit einem Klick auf „Save as“, heruntergeladen und genutzt werden.

Nachdem man die optimierte Version des Bildes heruntergeladen hat, kann man es wieder auf den Webserver hochladen. Das Bild ist dann wieder verfügbar und zwar in der reduzierten und optimierten Version.

Dabei ist es erstaunlich, wie viel Potenzial bei der Optimierung von Bildern oft verschenkt wird. Und dabei spreche ich nicht von Bildern in Artikeln, sondern von Bildern des Themes oder in Widgets. Denn selbst Theme Anbieter arbeiten hier nicht optimal.

Nur mal zum Vergleich: Auf Websitestartup lassen sich mit dieser einfachen Methode 20% des gesamten Volumens der Webseite einsparen. Das ist eine beachtliche Menge. Bei meinem vorherigen Theme ließ sich dadurch sogar noch mehr einsparen. Die Möglichkeiten zu einer effektiven Optimierung hinsichtlich des Pagespeeds einer Webseite sind also durchaus gegeben.

Fazit

Jeder Webmaster sollte seine Webseite gründlich kontrollieren. Page Speed ist ein Ranking Faktor in den Suchmaschinen und kann nicht hoch genug bewertet werden. Auch für die User einer Webseite ist es wichtig, so geringe Ladezeiten wie möglich zu produzieren. Mit dieser einfach Methode lassen sich schnell gute und spürbare Effekte erzielen.

Wer an tiefergehenden technischen Details zu Optimierung von Webseiten hinsichtlich des Pagespeeds interessiert ist, dem kann ich den Artikel „PageSpeed: So machst du deine Webseite schneller“ von Torben Leuschner ans Herz legen.