Nieuwe UX verbeter tool: Google Page Speed

Het optimaliseren van een website staat gelukkig al langere tijd niet meer (grotendeels) in het teken van de technische opmaak van de HTML uitvoer. Ontwikkelaars en opdrachtgevers beginnen steeds meer te beseffen dat er alleen onderscheidend vermogen en lange termijn succes zit in het verleggen van de focus naar de (veeleisende) bezoeker. Ook Google probeert natuurlijk al jaren de bewustwording te creëren dat ontwikkelaars niet moeten optimaliseren voor Google maar voor de gebruikers van de websites die diezelfde ontwikkelaars maken. Google doet dat op twee manieren:

1. Straffen uitdelen wanneer het beleid wordt overtreden.
2. Diensten, kennis en tools beschikbaar stellen om websites te verbeteren.

Dat laatste vertaald zich in bijvoorbeeld Google Analytics, Google Webmaster Tools, diverse kennisdelende Google Blogs, Google certificerende trainingen, etcetera.

Google Page Speed

En in het rijtje tools is er nu een nieuwe bijgekomen: Google Page Speed. Het gaat hier om een FireFox en FireBug plugin. Page Speed kun je uitvoeren vanuit het FireBug menu in FireFox en zal dan de client-side code analyseren en vervolgens een aanbevelingsrapportje presenteren ter verbetering van:

• Cache optimalisatie (het cachen van CSS, JavaScript, etcetera).
• Beperking van het aantal requests aan de server (bijvoorbeeld samenvoegen van externe JavaScript bestanden).
• Beperking de grootte van requests (vermijd teveel cookie data bijvoorbeeld).
• Beperking  de totale grootte van de pagina inclusief alle beelden, CSS, JavaScript, etcetera.
• Optimalisatie van layout van de pagina voor browsers.

Hoewel dit natuurlijk allemaal erg technisch klinkt is het einddoel dat zeker niet. Het snel inladen van een webpagina draagt in positieve mate bij aan de user experience van de website. De Page Speed tool is door Google al langere tijd in ontwikkeling en werd voornamelijk intern gebruikt voor het testen van prestaties van individuele webpagina’s.

Afbeeldingen comprimeren

Google Page Speed geeft niet alleen aan waar de problemen liggen. De tool heeft vaak ook al de oplossingen! Bijvoorbeeld wanneer een redirect wordt gedetecteerd naar een pagina die ook rechtstreeks opgeroepen kan worden zal de applicatie de eindbestemming tonen en adviseren. Maar nog mooier is de tool die afbeeldingen controleert op gzip compressie (dus niet JPG compressie):

Een analyse met Page Speed van de homepage van NU.nl laat zien dat er behoorlijk wat te winnen is. In totaal detecteert Page Speed bijna 60% winst (164kb) op de afbeeldingen door ze te comprimeren. De gecomprimeerde versies zijn zelfs direct vanuit de tool te downloaden en klaar voor gebruik op de webpagina!

Complete request in een tijdlijn

Voor ontwikkelaars is er nog een extra tab aan Google Page Speed toegevoegd: Activity. Met deze extra tool kan de volledige request worden ingezien. De tool zet alle activiteiten in een tijdlijn waardoor het in 1 overzicht direct duidelijk is waar de bottlenecks zich bevinden. Netwerk activiteit (dus puur inladen van data) maar ook het verwerken van JavaScript wordt getoond.

Conclusie

Google Webmaster Tools en Google Page Speed zijn beide tools die niet mogen ontbreken in de toolbox van een ontwikkelaar. Deze tools maken het leven simpelweg een stuk gemakkelijker en zorgen ervoor dat jij eerder op de hoogte bent van door pagina prestaties veroorzaakte usability problemen, dan je bezoekers.

Downloaden en verder lezen: Google Page Speed

Download FireBug plugin (heb je nodig): GetFireBug