De prestaties van je website per .htaccess-bestand verbeteren
Websites gebruiken vaak vele afbeeldingen, uitgebreide designs en extra’s zoals JavaScript-toepassingen. Des te omvangrijker de website is, des te langer duurt het voor de pagina geladen is. Je bezoekers moeten dus langer wachten.
In dit artikel lees je hoe je de prestaties van je website kunt optimaliseren. We gebruiken hiervoor diverse instellingen in een .htaccess-bestand.
Webpagina’s gecomprimeerd versturen
Des te groter een website, des te meer data er worden verstuurd. Bezoekers moeten dus meer data laden voordat de webpagina zichtbaar wordt. Het is mogelijk de laadtijd te verminderen door deze data vóór het versturen vanaf de server te comprimeren. Dit kan met de Apache-module mod_gzip.
Om deze compressie in te schakelen, leg je een .htaccess-bestand in de hoofdmap van je website aan, en plaats een regel mod_gzip_on Yes in dit bestand. Met deze optie wordt de comprimeringsmodule ingeschakeld. Daarna kun je alle mod_deflate-opties, zoals AddOutputFilterByType DEFLATE text/html text/plain gebruiken.
Kijk hier voor meer informatie: http://httpd.apache.org/docs/2.2/mod/mod_deflate.html
De browsercache gebruiken
Bestanden en webpagina’s die slechts zelden worden gewijzigd, kunnen worden opgeslagen in het geheugen van de browser (de cache). Als de bezoeker de website voor de eerste keer bezoekt, wordt deze volledig geladen. Bij een volgend bezoek controleert de browser of bijvoorbeeld een eerder geladen foto nog in de cache staat. Zo ja, wordt deze geladen, in plaats van de foto opnieuw van jouw webserver te downloaden. De pagina wordt daardoor veel sneller opgebouwd.
Voorbeeld
De instellingen in het .htaccess-bestand zien er bijvoorbeeld zo uit:
# Caching inschakelen FileETag MTime Size ExpiresActive On ExpiresByType text/css "access plus 1 weeks" ExpiresByType application/javascript "access plus 1 weeks" ExpiresByType application/x-javascript "access plus 1 weeks" ExpiresByType image/gif "access plus 1 months" ExpiresByType image/jpeg "access plus 1 months" ExpiresByType image/png "access plus 1 months" ExpiresByType image/x-icon "access plus 1 months" |
Een korte uitleg hierbij:
FileETag MTime Size geeft elk bestand op je website een label met de laatste wijzigingsdatum en de bestandsgrootte.
De functie <IfModule mod_expires.c> controleert of de benodigde servermodule is geïnstalleerd – dat is bij alle STRATO-pakketten het geval.
ExpiresActive On schakelt deze module voor jouw website in. Daarna volgt de informatie over de bestanden die in de cache geplaatst moeten worden en de tijd waarin ze in de cache blijven. Deze tijd wordt aangegeven in de vorm van ‘tijd x sinds de laatste access’ (access = de laatste keer dat het bestand is gedownload vanaf de website). Als deze duur is verstreken, downloadt de browser het bestand opnieuw vanaf je webserver naar de cache.
In het bovenstaande voorbeeld worden CSS- en JavaScript (JS) –bestanden een week lang in de cache bewaard. Foto’s en het bladwijzer-icoontje blijven een maand in de cache. Let erop dat de duur altijd in meervoud wordt aangegeven, dus met een ‘s’ aan het einde (weeks, months). Om te zien welke waarden zoal mogelijk zijn, kun je de officiële documentatie van Apache raadplegen: http://httpd.apache.org/docs/2.0/mod/mod_expires.html#AltSyn
Je kunt de tijd helemaal zelf bepalen. In deze tabel vind je enkele tips:
Bestandstype | Cacheduur | Details |
Afbeeldingen (jpg/png/gif) | access plus 1 months | Bij statische websites, blogs, fotoalbums enz. |
access plus 1 weeks | Voor webshops met vaak wijzigende productfoto’s | |
CSS-bestanden | access plus 1 months | Als je de layout van je website vaak wijzigt, kun je hier een kortere duur instellen, bijvoorbeeld 1 of 2 weken. |
JavaScript (JS)-bestanden | access plus 1 months |
Voer je tussentijdse wijzigingen door binnen de cacheduur (bijvoorbeeld een wijziging na 14 dagen, terwijl de cacheduur op 1 maand is ingesteld)? Dan zet je voor desbetreffend bestandstype een lagere cacheduur in het .htaccess-bestand. Deze instelling laat je dan gedurende één week geactiveerd. Daarna kun je de oorspronkelijke waarde weer instellen.
Voorbeeld
Je verandert access plus 1 months in access plus 1 hours.
Afhankelijk van het gebruikte CMS heb je andere mogelijkheden om de prestatie te verbeteren. Voorbeelden hiervan zijn:
- CDN (Content Delivery Network) opzetten;
- afbeeldingen in CSS-sprites onderbrengen;
- CSS/JS-scripts gecomprimeerd opslaan in je webspace;
- mootools in de frontend deactiveren (Joomla), als je deze niet gebruikt.
Wat deze mogelijkheden precies betekenen en hoe je ze gebruikt, lees je in het supportforum van je contentmanagementsysteem.