Tag Cache

Website optimalisatietips: de serverconfiguratie

In dit artikel uit de reeks met website optimalisatietips, ga ik toelichten welke aanpassingen je kan voorzien in de Apache serverconfiguratie, om een betere performantie te bekomen.

Cachen van componenten

Het cachen van componenten, is het tijdelijk opslaan van vaak geraadpleegde website elementen, op de lokale harde schijf van de persoon die de website bezoekt of op een proxyserver van een bedrijf of ISP. Het gaat dan in de eerste plaats om afbeeldingen, CSS en Javascript files.

Doordat deze files niet opnieuw van de server moeten gedownload worden, kunnen het aantal HTTP requests beperkt worden en moeten er minder DNS Lookups gebeuren (die typisch 20-120 milliseconden in beslag nemen).

Empty Cache en Primed Cache

We maken een onderscheid tussen een empty cache en een primed cache. Empty cache slaat op een lege cache, relatief tegenover jouw website. De bezoeker heeft dus van jouw pagina’s geen componenten in cache.

Bij een primed cache zitten al jouw componenten in de cache van de gebruiker.

Volgens onderzoek van Yahoo! wordt 62% tot 95% van de tijd gespendeerd aan het maken van HTTP requests. Als je dus een druk bezochte website hebt, met veel terugkerende bezoekers, dan haal je veel voordeel uit caching.

Er bestaan 3 manieren om te cachen:

Wij richten ons in dit artikel tot de 3de manier.

Expires Header en mod_deflate

Als je een Expires Header gebruikt die ver in de toekomst ligt, dan kan je verzekeren dat het element gecached wordt door browsers. Een Expire Header vertelt de browser namelijk vanaf wanneer het element opnieuw van op de server ingeladen moet worden.

Om caching te activeren op een Apache 2.0 server, moet je volgende modules inschakelen:

LoadModule expires_module modules/mod_expires.so
LoadModule headers_module modules/mod_headers.so

Cachen aan de hand van extensie

Een snelle manier om bestanden te cachen, is aan de hand van de extensie. Eerst dien je mod_expires aan te zetten:

ExpiresActive On

Caching voor je site inschakelen:

<Directory "/var/www/htdocs" />
   Options FollowSymLinks MultiViews
   AllowOverride All
   Order allow,deny
   Allow from all
   ExpiresDefault A3600
   <FilesMatch "\.html$">
      ExpiresDefault A86400
   </FilesMatch>
   <FilesMatch "\.(gif|jpg|png|js|css)$">
      ExpiresDefault A31536000
   </FilesMatch>
</Directory>

ExpiresDefault A3600 zet de default expiry time op 3600 seconden (of 1 uur) na toegang tot de file. De HTML files zullen maximum 1 dag (86400 seconden) gecached worden, en de assets uit de 2de FileMatch maximum 1 jaar (31536000 seconden).

Cachen aan de hand van MIME type

Je kan de caching voor files ook specifiëren aan de hand van het MIME type.

<VirtualHost *>
...
ExpiresActive On
ExpiresDefault "access plus 3600 seconds"
<Directory "/var/www/htdocs" />
   Options FollowSymLinks MultiViews
   AllowOverride All
   Order allow,deny
   Allow from all
   ExpiresByType text/html "access plus 1 day"
   ExpiresByType text/css "access plus 1 year"
   ExpiresByType text/javascript "access plus 1 year"
</Directory>
</VirtualHost>

Dankzij de AllowOverride All kan je de caching ook bepalen op mapniveau, via een .htaccess file:

<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

Meer details kan je lezen op:
http://httpd.apache.org/docs/2.2/mod/mod_expires.html

Versioneren van componenten

Als de componenten een lange tijd in de cache van de browser kunnen zitten, dan moet je ook een manier voorzien om toch een download van bepaalde assets te forceren. Je kan een versienummer voorzien in de bestandsnaam (bv all.min.1.0.2.js) of in de mappenstructuur (bv /js/1.0.2/all.min.js).

Caching uitzondering: browserhomepages

Als je het voorrecht hebt dat jouw site ingesteld staat als homepage in de browser van een gebruiker, dan worden alle assets die worden ingeladen, niet gecached !

In die uitzonderlijke gevallen is het te verantwoorden om de CSS en Javascript inline te plaatsen, om zo het aantal HTTP requests te beperken en de reactiesnelheid van de site te verhogen.

Gzip componenten

Een handige manier op je pagina sneller te doen laden, is door HTTP compressie toe te passen op tekstuele content (HTML, CSS, Javascript, XML, …). Dit wordt in vrijwel alle browsers ondersteund, meerbepaald in diegene die HTTP 1.1 en PNG files ondersteunen. (Internet Explorer 4 en later, Firefox, Opera 5.12+).

In Apache bestaat een module om content on fhe fly te comprimeren (mod_gzip – voor Apache 1.3+, mod_deflate – voor Apache 2+)

De module activeren in Apache 2 is eenvoudig:

LoadModule deflate_module modules/mod_deflate.so

Configureren kan via:

AddOutputFilterByType DEFLATE text/html text/plain
text/xml text/css application/javascript

Hiermee zeg je dus: comprimeer alle html, plain text, xml, css en javascript files.

Meer details kan je lezen op:
http://httpd.apache.org/docs/2.0/mod/mod_deflate.html

ETags

ETags zijn ontworpen om beter te kunnen achterhalen wanneer een component in cache hetzelfde is als op de server. Een ETag id is uniek voor een specifieke resource op een specifieke server. Op drukke websites met meerdere servers kan dit dus problemen opleveren bij het cachen.

De Etag bestaat uit 3 componenten: INode, MTime en Size. Een optie is dus om de Etag zo te configureren, dat het de server niet vermeld bij de Etag.

<Directory /usr/local/httpd/htdocs>
   FileETag MTime Size
</Directory>

Een andere optie is om ETags gewoon uit te schakelen en je volledig te baseren op Expires of Cache-Control headers.

Header unset Etag
FileETag none

Meer details kan je lezen op:
http://httpd.apache.org/docs/2.2/mod/core.html#fileetag

Cookies

Cookies worden meegestuurd met elke request. Dus ook wanneer je statische content, zoals afbeeldingen inlaadt.

Bij de meeste websites staan de cookies gewoon op de root (/), wat die cookie dan voor elk object zet. Daarom is het aan te raden om je statische content op een aparte domein, of subdomein te plaatsen, waarop dan geen cookies worden geplaatst. Een andere manier om overhead te vermijden is om het pad van je cookies beter te specifiëren.

Verwijder ook de overbodige cookies, zodat deze niet telkens meegestuurd worden met iedere request.

Je kan beter ook een kortere of zelfs geen Expiry date zetten. Zo wordt de cookie sneller opnieuw verwijderd, en verbetert de responsetijd voor de gebruiker weer.

Let ook op: sommige proxy servers weigeren files te cachen waaraan cookies gekoppeld zijn.

Dit artikel richtte zich voornamelijk toch de Apache configuratie. Je kan de technieken echter ook toepassen in andere serveromgevingen. In een later artikel zullen we dan toelichten hoe je het kan configureren in een Internet Information Services (IIS) omgeving.

Wil je weten (en meten) hoe het gesteld is met de performantie van je website: lees dan zeker ook het artikel met een overzicht van de tools om performantie te meten.