Sie sind hier : sebastian1012.bplaced.net/ homepage-neu / kreuz-und-quer / tutorials-info-neuigkeiten-html / firefox-plugins-zum-verbessern-der-client-performance.php

Firefox-Plugins zum Verbessern der Client-Performance

Der Browser Firefox ist nicht zuletzt aufgrund seiner Pluginfähigkeit immer erfolgreicher geworden. So kann jeder Benutzer seinen Browser mit zahlreichen Zusatzfunktionen ausstatten, die (Hobby-)Programmierer erstellt haben. Diese Plugins helfen auch Webentwicklern bei der täglichen Arbeit sowie der Analyse und Verbesserung der eigenen Webseiten.

Eines der bekanntesten Plugins, das jeder Webentwickler nutzen sollte, ist Firebug. Damit kann jedes HTML-Element der aktuellen Seite analysiert und verändert werden. Außerdem sieht man, welche Regeln die aktuelle Darstellung des Elements durch CSS verursachen. Auch JavaScript lässt sich damit on-the-fly ausführen.
Firebug wurde aber wiederum als Plattform für einige weitere Plugins genutzt, auf die ich etwas näher eingehen möchte, da mit ihnen die clientseitige Performance von Webseiten ermittelt und verbessert werden kann.

Der Klassiker in Richtung Client-Performance-Analyse ist YSlow. Dieses Plugin stammt von Yahoo (das Y hätte es fast vermuten lassen). Es ist mittlerweile in Version 2 erschienen. Mit diesem Tool könnt ihr die Performance einer Webseite messen lassen und es gibt konkrete Tipps, um diese zu verbessern. Dabei besteht es aus 3 Tabs (+1 Tab für einige Tools):

Insbesondere die Best-Practice-Ansätze im Tab Grade helfen die Performance zu verbessern, obgleich sie auch manchmal eher für seeehr große Seiten gedacht sind (Größe von Yahoo eben).
Die gesamte Liste der von YSlow vorgeschlagenen Best Practices ist schon sehr informativ und lehrreich.

Ein zweites Tool, das erst vor Kurzem als Open Source veröffentlicht wurde, heißt Page Speed und ist von Google. Es wurde früher intern von Google dazu verwendet, die Performance der eigenen Webseiten und Applikationen zu verbessern. Prinzipiell geht das Tool recht ähnlich vor wie der Grade-Tab von YSlow. Es gibt also konkrete Empfehlungen zur Verbesserung der Performance. Teilweise überschneiden sich die Hinweise von YSlow und Page Speed, aber teilweise hat Page Speed auch noch zusätzliche Tipps wie zum Beispiel, wenn Grafiken per HTML skaliert werden, dann bietet es gleich eine skalierte Version an, denn per HTML Bilder zu skalieren ist natürlich unschön, weil der Client erstmal das große Bild laden muss.
Außerdem erkennt es schlauerweise JavaScript- und CSS-Code, der von der Seite gar nicht verwendet wird. Insbesondere bei größeren Projekten mit mehreren Entwicklern, Designern und Co blickt ja irgendwann niemand mehr durch die Stylesheets durch. Da ist so eine Funktion doch ganz praktisch.

Zusätzlich bietet Page Speed noch eine Timeline, auf der man visualisiert bekommt, wann auf eine Verbindung gewartet wird, wie lange die DNS-Auflösung dauert, wie lang das Senden dauert, wann JavaScript ausgeführt wird usw. – alle Aufgaben, die ein Browser eben zu erledigen hat. Das ist recht informativ, hat aber wohl eher statistische Zwecke und dient nur der Visualisierung.

Wer diese Plugins noch nicht nutzt, sollte sie sich mal genauer ansehen.
Kennt ihr noch weitere Plugins für den Firefox, die man unbedingt haben sollte, als Webentwickler? Oder wie ist eure Meinung zu oben beschriebenen Plugins? Ich freue mich auf zahlreiche Kommentare.