Je e-mail is verstuurd.

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.

Veel contentmanagementsystemen (CMS) als Joomla, WordPress en webshops als xt:Commerce, gebruiken een eigen .htaccess-bestand. Controleer daarom of er in de hoofdmap van je website al een .htaccess-bestand staat. Maak hiervan een back-up. Zie je geen .htaccess-bestand? Dan maak je een nieuw bestand met de naam .htaccess aan (vergeet de punt aan het begin van de bestandsnaam niet). Het aanmaken of bewerken van dit bestand doe je eenvoudig met een tekst-editor.

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:

BestandstypeCacheduurDetails
Afbeeldingen (jpg/png/gif)access plus 1 monthsBij statische websites, blogs, fotoalbums enz.
access plus 1 weeksVoor webshops met vaak wijzigende productfoto’s
CSS-bestandenaccess plus 1 monthsAls je de layout van je website vaak wijzigt, kun je hier een kortere duur instellen, bijvoorbeeld 1 of 2 weken.
JavaScript (JS)-bestandenaccess 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.

Als je de hierboven genoemde datacompressie niet gebruikt, raden we je aan in het .htaccess-bestand handmatig de regel Header append Vary Accept-Encoding in te voeren. Deze instelling optimaliseert de caching. Als datacompressie actief is, wordt de header automatisch ingesteld en hoef je de hierboven genoemde regel niet in te voeren.

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.

JavaScript (JS)-bestanden
Als je de layout van je website vaak wijzigt, kun je hier een kortere duur instellen, bijvoorbeeld 1 of 2 weken.
Heeft dit artikel je geholpen?
Info: d5487a65fe234f647fb19327d0e999f8dbeb3f2c