Snelheid, YSlow, Gzip, E-tags, en Joomla! caching

• Webdesign

• zondag, 31 mei 2009 15:00
• Laatst aangepast op zaterdag, 07 november 2009 21:45

Update 6 juni 2009: nu hebben we sinds kort ook Google Page Speed. Einde update

Ik zat laatst wat in de Automatiseringsgids te lezen:

Bij Google is vastgesteld dat verhoging van de laadtijd van een webpagina met 500 milliseconde het bezoek met 20 procent reduceert.

bron: Automatiseringsgids

Verderop in het artikel:

[...] de laadtijd van een pagina maar voor 10 tot 20 procent veroorzaakt wordt door activiteiten op de webserver. Veel meer winst is te behalen door naar de front-end te kijken, en met name ook naar de hoeveelheid JavaScript.

Omdat Dwarshuis niet zo tuk is op omzetdaling, en omdat hij zich toevallig bezig houdt met het front-end is hij direct bezig gegaan met de het sneller maken van zijn website, ondanks het mooie weer.

Dwarshuis zou ook een duurder hosting pakket kunnen nemen, zodat hij waarschijnlijk wat meer performance toebedeeld krijgt, maar hij zoekt het liever in het front-end.

Goed, ik had dus net leuk Cufon geïmplementeerd op mijn website. Maar dat maakt de site, vooral in IE7, toch wel erg veel trager. Weg ermee dus. Al die opsmuk is toch alleen maar ijdelheid.

Ook die leuke animatie in het menu is gesneuveld; alleen de meebewegende pijltjes mochten blijven.

Verder had mijn website al een goeie score in YSlow (waaai slow, "waarom langzaam", met dank aan Krijn Hoetmer voor de uitspraak :-) maar dat kon beter. Als fronteers.nl een score van 83 in YSlow weet te halen, moet mij dat toch ook lukken, al heb ik geen volledige toegang tot de webserver.

Ik ben tot score 82 gekomen (op de homepage).

Als je zelf websites bouwt en je hebt nog geen YSlow geinstalleerd: direct doen!

Ik beschrijf hier vier aanpassingen die ik gemaakt heb, en ik beschrijf niet wat ik in het verleden al gedaan had.

• Aanpassing 1: gebruik maken van Gzip voor de css- en javascript-bestanden
• Aanpassing 2: Etags configuratie aanpassen
• Aanpassing 3: Joomla!-caching aanzetten
• Aanpassing 4: css-bestanden combineren

Ad aanpassing 1: Gzip

Gzip comprimeert. De html werd reeds gecomprimeerd. Maar de css en de javascript niet. Ik comprimeerde de javascript en css handmatig al middels yuicompressor (ook al weer van het Yahoo Developer Network), maar als je daarna nog eens Gzipt scheelt dat weer (ons bent zuunig):

Als voorbeeld neem ik mijn css bestand:

• Als ik Gzip (op de server) zónder dat ik yuicompressor gebruik, dan ga ik van 18kB naar 5kB
• Als ik Gzip (server) nadat ik eerst zelf yuicompress, dan ga ik van 10kB naar 3kB

Hoera, in totaal 7kB op de css bespaard op de situatie voorheen, en ruim 15 als ik helemaal niet zou comprimeren.

Hoe?

• Ik heb via het Control Panel van Byte (mijn web hosting provider) zlib.output_compression op ongezet
• Ik heb aan de .htaccess file het volgende toegevoegd (update 7nov2009):

   
   
  AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css text/javascript
  AddOutputFilterByType DEFLATE application/xml application/xhtml+xml application/rss+xml
  AddOutputFilterByType DEFLATE application/javascript application/x-javascript
  AddOutputFilterByType DEFLATE opplication/x-httpd-php
   
  #incompatible browsers
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
   
  # Make sure proxies don't deliver the wrong content
  Header append Vary User-Agent env=!dont-vary
   
   

  (dit dien je te gebruiken in geval als je Apache 2.x gebruikt)

Ik verlies hiermee 1% van de bezoekers wier systeem niet met Gzip om kunnen gaan zo zegt Yahoo. Dat getal is snel dalende.

Ad aanpassing 2: E-tags

Omdat Byte met server clusters werkt (een goeie zaak), heeft het gebruiken van E-tags geen zin. (Als je YSlow gebruikt wordt dit in het YSlow panel prachtig uitgelegd). Weg ermee dus.

Hoe?

• Ik heb aan de .htaccess file het volgende toegevoegd: FileETag none

Ad aanpassing 3: Joomla!-caching aanzetten

Ik heb via de Joomla! Global Configuration de caching aangezet. (Ik had ook voor de menu's de caching op "use global" gezet, maar dan werkte de active menu items niet meer. Niet aan te bevelen dus.)

Ik vermoed dat er wel het een en ander is te zeggen over de caching in Joomla, en dat het allemaal optimaler kan. Maar dat is van latere zorg.

Ad aanpassing 4: css-bestanden combineren

Er was toch zo'n beetje ongemerkt weer een extra css-bestand ingeslopen. Direct maar gecombineerd met het hoofd-css-bestand. Weer een http-request minder. Daarmee weer een besparinkje. En wat minder CO2-uitstoot.

Het combineren van css- en javascript-bestanden kan vast ook door de server gedaan worden met wat slim programmeerwerk. Hier ben ik niet echt bekend mee. Je kunt het altijd handmatig doen al zal dit in het geval dat je allerlei Joomla-extensies gebruikt, die hun eigen bestanden invoegen wel niet mogelijk zijn.

Tot zover. Ik hoop dat je er ook wat aan hebt!