WordPress Optimalisatie

WordPress wordt gebruikt door circa 25% van alle websites en is daarmee het meest gebruikte CMS. Het wordt veel gebruikt voor kleinere projecten omdat er snel een eigen look en feel aan het CMS gegeven kan worden. Zodra het project groter of populairder wordt, blijkt al snel dat een volledig dynamisch CMS als WordPress ook nadelen heeft; het verwerken van veel bezoekers zorgt voor een relatief hoge belasting en de laadtijden van pagina’s nemen snel toe.

Optimalisatie

Het optimaliseren van de belasting van de server en daarmee de hoeveelheid bezoekers welke tegelijkertijd kunnen worden afgehandeld is relatief eenvoudig.

 

Belangrijk is dat zowel aan de voorkant (waar de bezoeker binnen komt) als aan de achterkant (waar de data van de database naar de webserver gaat) caching wordt toegepast. Ook is het belangrijk relatief nieuwe versies van applicaties te gebruiken zodat de optimalisaties op dat gebied ook op niveau zijn. Te denken valt aan recente versies van je besturingssysteem, PHP en MySQL.

 

Zeker ook belangrijk zijn het gebruik van zo min mogelijk plugins en een zo efficiënt mogelijk opgezette theme.

 

Om het effect van de optimalisaties weer te geven hebben we een standaard WordPress installatie gemaakt, op een bijgewerkte Ubuntu 14.04 LTS Virtuele machine met PHP 5.6 en MySQL 5.7, in totaal 8GB geheugen en 4 CPU cores. De machine maakt gebruik van All-flash (SSD) storage.

 

We hebben een AB test uitgevoerd met 50 concurrent request en 1000 requests totaal. Het resultaat: 118,10 requests per second met een time per request van 423,367 ms.

 

Nu gaan we de W3 Total Cache module installeren, in combinatie met Memcached en Varnish:

root@test:~# aptitude install memcached php5-memcache varnish

Verander /etc/apache2/ports.conf

Listen 80
Naar:
Listen 8080

En pas de vhost /etc/apache2/sites-enabled/000-default.conf aan zodat deze ook luistert op port 8080 en plak deze code in de vhost container:

##for gzip
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/html

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.avi$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.swf$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.mov$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.mp3$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.mp4$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.rm$ no-gzip dont-vary
ExpiresActive on
ExpiresByType image/gif "access plus 24 hours"
ExpiresByType image/jpg "access plus 24 hours"
ExpiresByType text/css "access plus 6 hours"
ExpiresByType text/javascript/js "access plus 12 hours"
ExpiresByType application/javascript "access plus 12 hours"
ExpiresByType application/x-javascript "access plus 12 hours"
ExpiresByType image/png "access plus 24 hours"
ExpiresByType text/html "access plus 5 minutes"
ExpiresByType text/htm "access plus 5 minutes"
ExpiresDefault "access plus 5 minutes"
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico

Herstart Apache:

Service apache2 restart

Pas de Varnish configuratie aan in /etc/default/varnish

Verander poort 6081 naar 80.

En vervang de /etc/varnish/default.vcl door deze tekst:


backend default {
.host = "127.0.0.1";
.port = "8080";
}

acl purge {
"127.0.0.1";
}

sub vcl_recv {
if (req.request == "PURGE") {
if (!client.ip ~ purge) {
error 405 "Not allowed.";
}
return (lookup);
}

if (req.url ~ "\.(gif|jpg|jpeg|swf|css|js|flv|mp3|mp4|pdf|ico|png)(\?.*|)$") {
unset req.http.cookie;
set req.url = regsub(req.url, "\?.*$", "");
}

if (req.url ~ "\?(utm_(campaign|medium|source|term)|adParams|client|cx|eid|fbid|feed|ref(id|src)?|v(er|iew))=") {
set req.url = regsub(req.url, "\?.*$","");
}

if (req.url ~ "wp-(login|admin)" || req.url ~ "preview=true" || req.url ~ "xmlrpc.php") {
return (pass);
}

if (req.http.cookie) {
if (req.http.cookie ~ "(wordpress_|wp-settings-)") {
return(pass);
} else {
unset req.http.cookie;
}
}
}

sub vcl_fetch {
if ( (!(req.url ~ "(wp-(login|admin)|login)")) || (req.request == "GET") ) {
unset beresp.http.set-cookie;
set beresp.ttl = 1h;
}

if (req.url ~ "\.(gif|jpg|jpeg|swf|css|js|flv|mp3|mp4|pdf|ico|png)(\?.*|)$") {
set beresp.ttl = 365d;
}
}

sub vcl_deliver {
# multi-server webfarm? set a variable here so you can check
# the headers to see which frontend served the request
# set resp.http.X-Server = "server-01";
if (obj.hits > 0) {
set resp.http.X-Cache = "HIT";
} else {
set resp.http.X-Cache = "MISS";
}
}
sub vcl_hit {
if (req.request == "PURGE") {
purge;
error 200 "OK";
}
}

sub vcl_miss {
if (req.request == "PURGE") {
purge;
error 404 "Not cached";
}
}

Zet vervolgens de volgende Apache modules aan:

A2enmod rewrite
A2enmod headers
A2enmod expires
Pas nu php.ini aan, zodat opcache wordt geactiveerd:
opcache.enable=1
opcache.enable_cli=1
opcache.memory_consumption=64
opcache.interned_strings_buffer=4
opcache.max_accelerated_files=2000
opcache.max_wasted_percentage=5

En herstart Apache:

Service apache2 restart

Dashboard

Log weer in op je WordPress dashboard. Je ziet nu het veld “Performance” terug in de linker kolom:

Vink Memcached aan onder de Performace/general settings voor:

  • Pagina cache
  • Database cache
  • Object cache
  • Browser cache

De standaard instellingen zijn voldoende voor dit moment. Pagina cache laten we op gedeactiveerd staan omdat Varnish een beter resultaat geeft voor het cachen van de pagina’s.

 

Onder Reverse Proxy zet je “Enable Varnish cache purging” aan en vul bij Varnish servers in: 127.0.0.1
Overigens ligt de focus bij het configureren van W3 Total Cache nu geheel bij het activeren van Memcached en Varnish. W3 Total Cache biedt nog veel meer mogelijkheden tot optimalisatie van, bijvoorbeeld, stylesheets en JS files.

 

Resultaat
Nu gaan we opnieuw benchmarken, met behulp van een AB test met 50 concurrent requests en totaal 1000 requests.

 

Resultaat: 10301,00 requests per seconde met een time per request van gemiddeld 4,854 ms.
Met een paar eenvoudige aanpassingen bereiken we dus een versnelling van factor 100!
Belangrijker nog: de pagina komt volledig uit Varnish en de load op de machine stijgt niet, terwijl dat bij de vorige benchmark wel degelijk het geval was.

 

Hieronder een schematisch overzicht:

Aantal request Request per seconde Time per request
Zonder Varnish- Memcached
1000 118,10 423,367 ms
W3 Total Cache – met Varnish/ Memcached
1000 10301,00 4,853 ms

 

Zoals je ziet kan je met deze aanpassingen op een eenvoudige manier resources besparen en snellere laadtijden realiseren. Met andere woorden: betere gebruikservaring, zoekmachine-scores en lagere kosten iedere maand.

 

Natuurlijk geeft deze blogpost maar een beperkt inzicht in alle tunables en zijn er nog meer optimalisaties denkbaar aan de database en Varnish. Ook zouden we Apache kunnen vervangen door Nginx met PHP-fpm. Veelal wordt er echter toch voor Apache gekozen wegens de beschikbare kennis.

 

Wil je meer weten over deze WordPress optimalisatie met Varnish of wil je dat Denit deze voor je uitvoert, neem dan vrijblijvend contact met ons op via telefoonnummer 020 337 1801.

 

Referentie:
cambuur.nl (zie ook http://www.friks.frl/blog/beste-sportwebsite-2015/)

Recent Posts