Een snellere website met caching en compressie

Nu Google heeft aangekondigd dat ze misschien rekening gaan houden met de snelheid van je website in de index, hebben enkele van onze klanten hun eigen websites onder de loep genomen, en ons enkele tips gevraagd om hun performantie te verbeteren.

Twee zaken die je gemakkelijk kan inschakelen op onze Shared en Pro hosting is "asset caching" en "compressie". Deze voorbeelden zijn voor de Apache webserver.

Asset Caching

Bij het ophalen van je website gaat de browser kijken welke afbeeldingen, javascript en CSS files hij allemaal moet ophalen om de pagina te laden. Vervolgens kijkt hij in z'n lokale cache om te zien of deze daar aanwezig zijn. Als dit zo is gaat hij die opladen, anders gaat hij ze afhalen van de webserver. Die afbeelding wordt dan in de cache bijgehouden afhankelijk van de setting van de webserver. Standaard is dit niet meegegeven met Apache, en de cache verloopt dus meteen.

Een simpele manier om je assets (afbeeldingen, javascript, css) automatisch een bepaalde "Expire header" te geven is door middel van .htaccess:

ExpiresActive On
<FilesMatch "\.(ico|gif|jpe?g|png|js|css|swf)$">
  ExpiresDefault "access plus 1 month" 
</FilesMatch>

Dit is echter niet optimaal, gezien je waarschijnlijk binnen een maand wel een aanpassing zal willen doen aan je code / css . Daarom gaan veel frameworks automatisch een versie meegeven aan hun assets. Dit is meestal de aanmaak-datum van een afbeelding, of een revisie-nummer uit version control. Dit ziet er dan zo uit:

<img src="/images/rails.png?1251880794">

Als dit nummer verandert, wordt een nieuwe afbeelding uit de cache gehaald in plaats van de oude versie.

Compressie

De meeste recente browsers ondersteunen data-compressie voor het ontvangen van HTML, CSS & Javascript bestanden. Hierdoor wordt het downloaden een pak sneller gezien er minder moet worden gedownload. Apache kan dit automatisch doen dankzij mod_deflate, voor alle bestanden of enkel voor bepaalde types.

Dit is wat wij gebruiken voor de Openminds site, in .htaccess:

# Compress alles van HTML, XML, Javascript en CSS
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml text/javascript text/css application/x-javascript application/xhtml+xml application/javascript 

# Niet compressen voor IE 
BrowserMatch ^Mozilla/4 gzip-only-text/html 
BrowserMatch ^Mozilla/4.0[678] no-gzip 
BrowserMatch bMSIE !no-gzip !gzip-only-text/html

SetEnvIf User-Agent ".*MSIE.*" nokeepalive ssl-unclean-shutdown downgrade-1.0 force

Enkele tips om de compressie zo efficiënt mogelijk te maken vind je bij Google.

Wat nog?

Er zijn nog verschillende zaken die je kan doen om je website sneller te maken voor de bezoekers. Je kan je pagina's analyseren met YSlow of Google's Page speed. Ook het optimaliseren van tijd in code is héél belangrijk (SQL queries, caching, ..).Moet het dan nog sneller gaan, kom er gerust eens met ons over praten!