WordPress sneller maken met .htaccess

Hoe sneller je website laadt, hoe prettiger bezoekers en zoekmachines dat vinden. Maar hoe maak je WordPress merkbaar sneller? Wij geven een paar tips voor gevorderde gebruikers.

Plug-ins, thema’s, codefragmenten – het zijn zaken die het bloggen elke dag weer gemakkelijker maken. Maar WordPress wordt er wel traag van. Met als gevolg dat bezoekers voortijdig je blog verlaten en dat zoekmachines je website bestraffen met een slechtere positie in de ranking. Gelukkig kun je veel van deze problemen met eenvoudige middelen oplossen. In dit artikel voor ervaren gebruikers gaan we nog een stap verder en laten we je zien hoe je de prestaties van WordPress via het .htaccess-bestand kunt verbeteren. We hebben deze optimalisaties overigens getest met een STRATO hostingpakket.

1. Het bestand .htaccess downloaden

Het .htaccess-bestand is een configuratiebestand voor webservers. Je kunt het onder andere gebruiken om browsercaching te configureren en compressie in te schakelen. WordPress maakt .htaccess automatisch aan tijdens de installatie en zet het bestand vervolgens in de hoofdmap. Je downloadt het bestand vervolgens gewoon met je FTP-programma en opent het met een tekst-editor.

Let op: bewaar een kopie van de originele bestandsversie, zodat je altijd de oude toestand kunt herstellen als er iets misgaat.

2. Browsercaching gebruiken

Bij het cachen slaat de browser in het lokale geheugen kopieën op van CSS-bestanden, Javascript-bestanden en afbeeldingen. Wanneer een bezoeker de pagina opnieuw laadt, hoeft zijn browser deze bestanden dus niet opnieuw van de server te downloaden. Dit bespaart dataverkeer en verkort de laadtijd. Maar het betekent ook dat de browser van een terugkerende bezoeker eventueel gewijzigde bestanden niet bijwerkt totdat het ingestelde tijdslimiet is verstreken. In de meeste gevallen is dit geen probleem, zodat je ruime waarden kunt gebruiken (bijvoorbeeld een maand).

De configuratie van de browsercaching staat in het .htaccess-bestand. Meestal gaat dit met de volgende code:

# BEGIN WordPress
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.php$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Je kunt je eigen vervolgens eronder plaatsen. Met de instructie ExpiresByType geef je voor de verschillende bestandstypen aan hoe lang lokale cache-kopieën worden opgeslagen. In het volgende codevoorbeeld is de duur één maand.

# Browser Caching
<IfModule mod_expires.c>
    ExpiresActive On 
    ExpiresByType image/gif "access plus 1 months"
    ExpiresByType image/ico "access plus 1 months"
    ExpiresByType image/jpeg "access plus 1 months"
    ExpiresByType image/jpg "access plus 1 months"
    ExpiresByType image/png "access plus 1 months"
    ExpiresByType text/css "access plus 1 months"
    ExpiresByType text/javascript "access plus 1 months"
    ExpiresByType application/x-javascript "access plus 1 months" 
    ExpiresByType application/javascript "access plus 1 months"
</IfModule>

Na het uploaden van .htaccess kun je met Google Page Speed Insights controleren of je nieuwe code werkt. In dit geval geeft de tool namelijk niet langer het advies om browsercaching te gebruiken.

3. Compressie activeren

Ook het inschakelen van bestandscompressie kun je gemakkelijk doen. Het werkt als volgt: het programma Gzip comprimeert HTML en CSS-bestanden. Daardoor is de hoeveelheid gegevens die van een website moet worden verstuurd, kleiner. Zodra de browser de bestanden heeft ontvangen, worden ze opnieuw uitgepakt. Dit maakt de dataoverdracht natuurlijk sneller en daarom raden we je aan om deze technologie voor je website te gebruiken. Dit doe je door de volgende regels toe te voegen aan .htaccess:

# Gzip Compression
<IfModule mod_deflate.c>
	AddOutputFilterByType DEFLATE application/javascript
	AddOutputFilterByType DEFLATE application/rss+xml
	AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
	AddOutputFilterByType DEFLATE application/x-font
	AddOutputFilterByType DEFLATE application/x-font-opentype
	AddOutputFilterByType DEFLATE application/x-font-otf
	AddOutputFilterByType DEFLATE application/x-font-truetype
	AddOutputFilterByType DEFLATE application/x-font-ttf
	AddOutputFilterByType DEFLATE application/x-javascript
	AddOutputFilterByType DEFLATE application/xhtml+xml
	AddOutputFilterByType DEFLATE application/xml
	AddOutputFilterByType DEFLATE font/opentype
	AddOutputFilterByType DEFLATE font/otf
	AddOutputFilterByType DEFLATE font/ttf
	AddOutputFilterByType DEFLATE image/svg+xml
	AddOutputFilterByType DEFLATE image/x-icon
	AddOutputFilterByType DEFLATE text/css
	AddOutputFilterByType DEFLATE text/html
	AddOutputFilterByType DEFLATE text/shtml
	AddOutputFilterByType DEFLATE text/javascript
	AddOutputFilterByType DEFLATE text/plain
	AddOutputFilterByType DEFLATE text/xml
</IfModule>

Na het uploaden gebruik je wederom Page Speed Insights om te controleren of de server de opgegeven bestandstypen daadwerkelijk comprimeert.

Gewoon sneller

Het wachten is voorbij! Met de basistips in dit artikel en de twee hierboven genoemde methoden zijn korte laadtijden gegarandeerd. En bezoekers die je site mobiel raadplegen, vinden niet alleen de hogere snelheid prettig, maar ook het feit dat er minder data wordt verbruikt.

Veel succes met de optimalisatie!

WordPress uitproberen?