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):

  • Grade: Hier führt YSlow verschiedene Tests durch und vergibt eine Note (Grade, von A bis F), wie gut oder schlecht die jeweilige Webseite aus Performancesicht ist und gibt zusätzlich Hinweise, wie die Performance verbessert werden kann.
  • Components: Hier kann man sich anzeigen lassen, welche Bestandteile der Webseite wie groß sind (HTML, CSS, JS, Bilder usw.). So kann man auch leicht die Gesamtgröße einer Seite ermitteln.
  • Statistics: Hier kann man in einem Kreisdiagramm sehr schön vergleichen, in welchem Verhältnis sich die einzelnen Bestandteiltypen auf die Gesamtgröße auswirken. Viel wichtiger an dieser Funktion ist aber, dass man die Unterschiede bei leerem und gefülltem Browser-Cache sieht. Je weiter beide Werte auseinander liegen, desto besser funktioniert das clientseitige Caching (das natürlich serverseitig gesteuert werden kann).

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.

Jan hat 152 Beiträge geschrieben

5 Kommentare zu “Firefox-Plugins zum Verbessern der Client-Performance

  1. SeeeD sagt:

    Es gibt ein paar Plugins auf die ich nicht verzichten möchte:

    – Webdeveloper Toolbar
    Bietet einem diverse Tools für die Analyse und Erstellung einer Webseite an.
    – Autopager
    Das Programm erkennt anhand XPath Regeln mehrere Seiten und lädt diese automatisch nach. Wenn man sich dem Ende einer Seite nähert, so merkt dies Autopager und hängt am Ende der Webseite die nächste Seite an. Das klingt im Moment nach frickelei, funktioniert aber sehr gut und in der Regel wird auch nur der Bereich mit dem Inhalt nachgeladen 😉
    – Adblock Plus
    Wird wohl fast jeder nutzen.. Adblock Plus ist ein Werbeblocker, mit welchem man Werbung und andere Elemente blockieren kann(Google Analytics!)

    Mehr Plugins fallen mir spontan nicht ein…
    sobald ich wieder an meinem PC sein sollte schaue ich nach, welche Plugins ich noch für die Entwicklung verwende

  2. Zum Testen der Webseite auf Sicherheitslücken empfiehlt sich noch „Tamper Data“. Damit lassen sich unter anderem POST-Variablen bzw. deren Inhalt beim „versenden“ ändern.

  3. SeeeD sagt:

    Stichwort Sicherheitslücken..
    Wenn ich mich recht erinnere gibt es das Plugin „xss me“..
    Das Plugin testet eine Webseite auf XSS-Lücken 😉

  4. deos sagt:

    Zuerst mal eine Anmerkung:
    Alles genannte sind „Addons“, keine „Plugins“!!
    Plugins sind Erweiterungen des Browsers intern für die Unterstützung bestimmter Formate usw.
    Bitte nicht verwechseln!!

    Und jetzt ein paar sehr nützliche addons:

    Da ich validität für absolut elementar halte
    – Html Validator (https://addons.mozilla.org/firefox/addon/249)
    Man bekommt immer angezeigt ob der aktuell angezeigte Quellcode valide ist oder wo Fehler sind, ohne ihn irgendwo extra hochladen zu müssen

    Das hier sollte wohl jeder kennen
    – IE Tab (https://addons.mozilla.org/firefox/addon/1419)
    Ich benutze inzwischen aber eher IETester (http://www.my-debugbar.com/wiki/IETester/) damit kann man auf mehreren IE-Versionen gleichzeitig testen
    ps: Das addon IE Tab hat bekanntermaßen ein riesiges Speicherleck…

    Wer viel mit Farben hantiert hat hier einen nützlichen Helfer
    – ColorZilla (https://addons.mozilla.org/firefox/addon/271)
    Findet raus welche Farbe an einer beliebigen Position einer Webseite verwendet wird. Funktioniert auch bei Bildern.

    Auch für RegEx gibt es was nettes
    – Regular Expressions Tester (https://addons.mozilla.org/firefox/addon/2077)
    Javascript-RegEx testen leicht gemacht

    Und dann ist da noch eine nette Sache die ich erst vor ein paar Tagen entdeckt habe
    – FirePHP (https://addons.mozilla.org/firefox/addon/6149)
    Hab mich noch nicht richtig eingearbeitet aber zum debuggen besonserst bei großen Projekten sicher nützlich. Man kann damit Debug-Meldungen und ähnliches von PHP im Firebug ausgeben lassen ohne dass sie auf der Seite erscheinen
    ps: benötigt eine PHP-bibliotek

Eine Antwort schreiben

Ihre E-Mail-Adresse wird nicht veröffentlicht. Benötigte Felder sind markiert mit *

You may use these HTML tags and attributes: <a href=""> <blockquote cite=""> <pre lang=""> <b> <strong> <i> <em>