<LiNE> Tectonics shape the world, tagTONiC shapes the world wide web </LiNE>

De snelheid van uw site verbeteren - 2

Publicatiedatum: 09-12-2011
Categorie: tips, tricks and tragedies
Auteur: Marinka Noordhout

In het vorige artikel ging ik in op de snelheidstest van Pingdom Tools Externe linkEr was echter een onderdeel waar ik niet uitkwam. Na een flinke dag lezen heb ik de oplossing gevonden van het "Leverage browser caching" verhaal.

Na het doorlopen van de snelheidstest wordt er een "Performance grade" berekend. Op het tweede tabblad van de website wordt aangegeven hoe deze score is berekend. Ik zag dat de site een erg lage score had onder het kopje "Leverage browser caching". Als ik op het knopje rechts ervan klikte kreeg ik een lange lijst met afbeeldingen, stylesheets en scripts waarvan ik de cache instellingen zou moeten wijzigen. Ik had reeds het een en ander geprobeerd met <meta> tags, maar dat leek niet te helpen. De score bleef hetzelfde.

Na wat onderzoek op het internet kwam ik het volgende behulpzame artikel Externe link tegen. Het is erg technisch en als u niet weet wat een .htaccess bestand is raad ik u af er aan te beginnen. U kunt met .htaccess namelijk erg veel kapot maken op de server waar uw site draait.

Het volgende is uitsluitend mogelijk als de "mod_expires" module van Apache aanstaat. Bij mijn webhost Externe link was dit gelukkig het geval. Het volgende heb ik in mijn .htaccess bestand geplaats en geupload naar de root van mijn site:

RewriteEngine on

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

RewriteRule (.*)-cbd+.(.*)$ $1.$2 [L]

Dit stukje code doet twee dingen:

Ten eerste geeft het alle bestanden van type ico, jpg, jpeg, png, gif, css en js een expiratie datum van 1 maand in de toekomst. Komt iemand voor het eerst op uw website dan worden alle elementen van de site op uw eigen computer opgeslagen in de map "Tijdelijke Internet Bestanden". Dit zorgt er voor dat volgende pagina's sneller worden geladen. Wat we nu met de .htaccess aangeven is dat de bovengenoemde bestandssoorten voor een maand lang niet van de server gehaald hoeven te worden. Komt de bezoeker na een week weer terug zal de site dus vrijwel in zijn geheel uit de cache van de computer worden gehaald. Dit levert grote tijdswinst op, want deze elementen hoeven niet meer te worden opgehaald!

Dit geeft echter een probleem als je nog aan de site aan het werken bent. Als je als webbouwer bijvoorbeeld de css en js wijzigt, dan zullen de nieuwe bestanden voor een maand lang niet worden ververst. Hernoemen van deze bestanden is een optie, maar de maker van het artikel heeft er een geweldige oplossing voor verzonnen. Plak achter het bestand de unix timestamp van de tijd van wijziging. Na een wijziging zal dus de naam van je stylesheet veranderen waardoor de browser van de sitebezoeker de file opnieuw zal gaan ophalen. Vervolgens komt het brilliante aan zijn oplossing: Hij laat de .htaccess deze timestamp weer weghalen zodat gewoon de standaard file wordt opgehaald. Dit doet het tweede stukje van de code:
RewriteRule (.*)-cbd+.(.*)$ $1.$2 [L]

Een voorbeeld:

Mijn css bestand heet default.style.css en daar heb ik een wijziging in aangebracht. Door de cache instelling in de .htaccess zal een terugkomende bezoeker deze wijzigingen de eerste volgende maand dus niet zien. In mijn index.php bestand werd dit css bestand normaal aangeroepen met:
<link type="text/css" rel="stylesheet" href="/site-inc/css/default.style.css" />

Dit is nu gewijzigd in een dynamische aanroep:
<?php
$root = (isset($_SERVER['DOCUMENT_ROOT']))?$_SERVER['DOCUMENT_ROOT']:substr($_SERVER['SCRIPT_FILENAME'], 0, -strlen($_SERVER['PHP_SELF'])+1);

$file = $root.'/site-inc/css/default.style.css';
echo '<link type="text/css" rel="stylesheet" href="/site-inc/css/default.style-cb'.filemtime($file).'.css" />';
?>

Dit geeft als ik vervolgens na opslag in de broncode kijk:
<link type="text/css" rel="stylesheet" href="/site-inc/css/default.style-cb1323371048.css" />

Let op: het stukje '-cb'. Dit staat voor Cache Busting. Vergeet deze niet anders werkt de .htaccess regel niet meer!

Het bestand default.style-cb1323371048.css bestaat echter niet, hij heet namelijk default.style.css De site zal gaan breken, maar nu komt de de .htaccess regel RewriteRule (.*)-cbd+.(.*)$ $1.$2 [L] in actie. Deze haalt -cb1323371048 weer van het bestand af zodat gewoon default.style.css wordt opgevraagd en gebruikt.

Het zelfde heb ik gedaan voor mijn javascript bestand common.js omdat deze ook geregeld wijzigt. Mijn jQuery library heb ik gelaten voor wat het is. Mocht ik een nieuwe versie gebruiken is de naamswijziging genoeg.

Het resultaat

Na het wijzigen en uploaden van mijn .htaccess bestand en het opslaan van de code voor het dynamisch wijzigen van de bestandsnaam in al mijn website pagina's deed ik nogmaals de snelheidstest. Op een bestand van Google Analytics na waren nu alle bestanden onder het kopje "Leverage browser caching" verdwenen en was mijn performance score verhoogd van 85 naar 96!

« Overzicht nieuws en artikelen