Pagespeed

Pagespeed: snel, sneller, snelst!

Naast de normale optimaliseermethoden wordt de snelheid waarmee een internetpagina wordt weergegeven steeds belangrijker. De bovenstaande afbeelding geeft een voorbeeld van het verloop van laadtijden van onze homepagina. Je ziet dat er gedurende de tijd steeds meer optimalisaties voor wat betreft de snelheid zijn gedaan en dat dit zijn vruchten afwerpt. Op dit moment schommelen we rond de 1.2 en 0.8 seconde gemiddeld en dat is voor ons een redelijk aanvaardbare tijd.

Hoe hebben we dit gedaan?

Heel simpel: door gebruik te maken van analyse programma's. Er zijn bedrijven die dit voor jou willen doen, maar met onderstaande programma's kan je het gewoon zelf zonder dat het wat kost (behalve tijd).

Het allereerste programma dat is gebruikt, is de extentie PageSpeed voor FireFox . Deze extentie analyseert een pagina en geeft zoveel mogelijk verbetertips. De tips die het meest hebben bijgedragen aan snellere laadtijden waren:

• Afbeeldingen, javascript en css comprimeren
• Samenvoegen javascript bestanden en afbeeldingen
• Gebruik maken van css-sprites
• Caching parameters verbeteren (op Apache niveau)
• Gebruik apps van derden met mate (Google Analytics, Facebook, Twitter). Deze kunnen je website vertragen zonder dat je er zelf invloed op hebt!
• Zorg ervoor dat de javascripts zo veel mogelijk asynchroon worden geladen. Op die manier staat je webpagina eral en worden daarna pas de scripts van die apps uitgevoerd.
  De laatste optimalisatie die aan deze website is gedaan, is het laden van de scripts na het onload-event. Daarvoor zijn diverse manier te bedenken en ééntje vind je in de broncode van deze pagina.
• Vervangen van afbeeldingsURL's naar 'Data URIs'.

Tegenwoordig is deze pagespeed-tool ook online beschikbaar op http://pagespeed.googlelabs.com/.

Daarnaast is ook Google Webmasterhulpprogramma's gebruikt. Hierbij zie je wat er allemaal binnen je website gebeurt en vooral wat er mis gaat. Je kunt ook Google Analytics gebruiken. Daarvoor moet je een '_trackPageLoadTime' parameter toevoegen aan je analytics code. Het resultaat van de metingen zie je terug in Analytics.

Derde tool is Webpagetest. Deze tool werkt op paginabasis en geeft weer hoe jou pagina wordt geladen en hoe lang jouw pagina daar over doet. Heel erg leerzaam!

In het begin was het vooral trial-on-error. Wijzigingen uitproberen en dan kijken in hoeverre dit voor- of nadelig werkt voor de snelheid. Niet elke tool geeft eensluidende resultaten, maar het is wel een indicatie of je op de goede weg bent.

Voor een gebruiker is het belangrijk dat de opgevraagde informatie er snel staat. De overige toeters en bellen aan extraatjes wordt tegenwoordig (al of niet asynchroon) geladen nadat de basispagina is geladen (kijk maar in het laatste stuk van de broncode van deze pagina bijvoorbeeld).

Lees ook 'Best Practices for Speeding Up Your Web Site' door Yahoo.

Status per oktober 2011

In het onderstaande schema zie je dat de hoofdpagina van deze website na 1.112 seconden wordt weergegeven. Daarna gebeurt er nog van alles (facebook, twitter, google, hyves etc), dat op zich niet noodzakelijk voor de pagina is, en dat alles bij elkaar duurt nog zo'n 5.6 seconden. Zónder deze stapsgewijze manier van het laden zit de gebruiker 6.715 seconden te wachten op beeld, terwijl hij/zij dit nu al met één seconde heeft. En dat is prettig voor de gebruiker.

Inmiddels zit deze website op gemiddeld 0.8 seconden laadtijd. Rond mei 2011 zijn we begonnen met het toevoegen van Facebook, Twitter en Google Analytics scripts en de laadtijden lopen direct op. Vanaf augustus 2011 zijn de asynchrone scripts toegepast en het laden na het onload-event van de pagina. Samen met nog een paar kleine optimalisaties resulteert dit in de huidige laadtijd.

Hoe nu verder?

Aan de snelheid gaan we op dit moment niet zoveel meer doen. Wél willen we ons gaan richten op het optimaliseren van de website voor mobiele apparaten en smartphones. Er gaat behoorlijk wat data de lijn over en we gaan nog onderzoeken of dit ook minder kan voor deze apparaten.