Optimaliseer website en webserver met Firebug, YSlow en Page Speed
Yahoo! YSlow, Google Page Speed en Firebug zijn 3 extensies voor Firefox die gebruikt kunnen worden om een website en webserver te analyseren en te optimaliseren. YSlow en Page Speed analyseren een website aan de hand van "Best-Practices", welke vastgesteld zijn door Yahoo! en Google.
Firebug
Wat is Firebug?
Firebug is een web development tool. Het biedt ontwikkelaars de mogelijkheid een website te analyseren en te optimaliseren. Door het inspecteren van HTML, CSS en Javascript is het mogelijk om verbeteringen aan te brengen.
Installatie
- Download Firebug deze vanaf de website.
- Installeer de extensie en herstart Firefox door op "Restart Firefox" te klikken.
- Klik na het herstarten van Firefox op Tools > Add-ons en selecteer Firebug uit het rijtje met Add-ons.
- Klik op Enable om Firebug in te schakelen. Klik wederom op "Restart Firefox".
- Klik na de herstart met de rechtermuisknop op een webpagina, de optie "Inspect Element" is toegevoegd.
Werking
Open een webpagina in Firefox, bijvoorbeeld http://www.ihavetheknowledge.nl, en klik met de rechtermuisknop op de pagina en kies Inspect Element.
Een nieuw venster opent en laat de HTML code van de geopende website zien. Daarnaast zijn er nog een aantal andere tabs beschikbaar:
- Console
- HTML
- CSS
- Script
- DOM
- Net
Console
De console geeft berichten weer van Firebug. Ook geeft het een command-line interface weer voor Javascript.
HTML
Deze tab geeft de gedownloade HTML/XML code weer. Aan de linkerkant wordt de bijbehorende CSS weergegeven.
CSS
Geeft de verschillende CSS bestanden weer. De inhoud kan worden bekeken en worden aangepast om te testen of een kleine wijziging een ander resultaat geeft. Deze aanpassing wordt lokaal in een css-bestand opgeslagen.
Script
Geeft de scripts weer die in een pagina geladen zijn. Scripts kan ook gebruikt worden voor het debuggen van Javascripts.
DOM
Bekijk DOM-functies op de pagina
Net
Geeft de netwerkactiviteiten weer tijdens het laden van een pagina, inclusief laadtijden, URL's en HTTP-statussen.
YSlow
Wat is YSlow?
YSlow is een add-on voor Firebug, een analysetool voor Firefox. Het analyseert websites aan de hand van eigenschappen waaraan een website volgens Yahoo moet voldoen.
Installatie
Zorg ervoor dat Firebug geïnstalleerd is!
- Download YSlow van de website.
- Installeer de extensie en herstart Firefox door op "Restart Firefox" te klikken.
- Klik na de herstart op Tools > Add-ons en selecteer YSlow.
- Klik op Enable om YSlow in te schakelen. Klik wederom op "Restart Firefox".
- Klik na de herstart met de rechtermuisknop op een webpagina, en klik op "Inspect Element".
- Klik op het tabblad YSlow om deze te openen.
Werking
Open een webpagina in Firefox, bijvoorbeeld http://www.ihavetheknowledge.nl, en klik met de rechtermuisknop op de pagina en kies Inspect Element. Klik op het tabblad YSlow en klik op de knop "Run Test".
YSlow zal nu de website analyseren en waar mogelijk verbeteringen voorstellen. Al deze punten staan ook op de website van YSlow.
A t/m F
YSlow geeft elke geanalyseerde website een gradatie, van A tot en met F, waar A de hoogste gradatie is. Verder wordt er ook een score aan de website gegeven, maar de gradatie is doorslaggevend.
Page Speed
Wat is Page Speed?
Google's Page Speed analyseert websites aan de hand van best-practices, vastgesteld door Google. Het maakt ook gebruik van Firebug, dus zorg dat deze geïnstalleerd is voordat Page Speed geïnstalleerd wordt!
Installatie
- Download Page Speed van de website.
- Installeer de extensie en herstart Firefox door op "Restart Firefox" te klikken.
- Klik na de herstart op Tools > Add-ons en selecteer Page Speed.
- Klik op Enable om Page Speed in te schakelen. Klik wederom op "Restart Firefox".
- Klik na de herstart met de rechtermuisknop op een webpagina, en klik op "Inspect Element".
- Klik op het tabblad Page Speed om deze te openen.
Werking
Open een webpagina in Firefox, bijvoorbeeld http://www.ihavetheknowledge.nl, en klik met de rechtermuisknop op de pagina en kies Inspect Element. Klik op het tabblad Page Speed en klik op de knop "Analyze Performance".
Page Speed geeft de website een score op een schaal van 1 tot 100 waar 100 de maximale score is. Daarnaast geeft Page Speed optimalisaties aan, zoals het "minifyen" van CSS en Javascript-bestanden.
Prioriteiten
Page Speed geeft 3 verschillende prioriteiten aan de analyse:
- High priority: Door middel van een klein aanpassing kan het een groot effect hebben op de prestaties van een website.
- Medium priority: Meer werk om aan te passen maar hebben een minder groot effect op de prestaties.
- Working fine of Low priority: Kleine prestatieverschillen, maar niet altijd de moeite waard.
