WordPress speed improvements Ubuntu VPS (Met SSL)

June 18th, 2016

Introductie: Deze tutorial zal een aantal verbeterpunten beschrijven om je wordpress sites sneller te laten werken.

Deze tutorial is geschreven voor een setup met (Maar zal waarschijnlijk voor de meeste gevallen ook voor de oudere versies werken):

  • Ubuntu 16.04
  • Apache 2.4
  • PHP7
  • MySQL 5.7

Een aantal basisinstellingen om wordpress vloeiend te laten werken:

Open de php.ini file:

sudo nano /etc/php/7.0/apache2/php.ini

De maximale tijd dat een script mag gebruiken in seconden:

max_input_time = 60

De maximale hoeveelheid geheugen dat een script mag gebruiken:

memory_limit = 128M

De maximale grote van POST data wat PHP mag accepteren:

post_max_size = 8M

De mogelijkheid om files te uploaden:

file_uploads = On

De maximale grote van de file uploads (Je moet gaan bedenken of je wel grote files nodig hebt. Anders zo laag mogelijk zetten.):

upload_max_filesize = 100M

Maximale aantal files die tegelijkertijd in een keer mogen worden geupload:

max_file_uploads = 100

Timeout voor socket based streams:

default_socket_timeout = 300

Nu nog een kleine aanpassing in de wp-config van je wordpress site:

sudo nano /var/www/vhosts/domein.nl/wp-config.php

Voeg voor de regel “/* That’s all, stop editing! Happy blogging. */” het volgende toe:

define(‘WP_MEMORY_LIMIT’, ‘128M’);


Statiche content laden van een domein zonder coockies:

Stap 1: Maak in je DNS manager een nieuwe A en mogelijk ook AAAA record aan.

static.domein.nl A 123.456.789.123

static.domein.nl AAAA 2001:db8::1

(Verander domein.nl in jouw domein en de ipadressen in de adressen van je VPS)

Stap 2: Pas de Apache configfile aan van je website:

Log in met SSH op je vps.

sudo nano /etc/apache2/sites-available/domein.conf

(Verander je domein.conf in de file die voor jouw site gebruikt wordt)

Plak de volgende config in je .conf:

<VirtualHost *:443>
ServerAdmin jouw@email.nl
ServerName static.domein.nl

DocumentRoot /var/www/vhosts/domein.nl/wp-content/
<Directory /var/www/vhosts/domein.nl/wp-content>
Options +MultiViews
AllowOverride AuthConfig Options FileInfo Limit
</Directory>

SSLCertificateFile /etc/letsencrypt/live/domein.nl/cert.pem
SSLCertificateKeyFile /etc/letsencrypt/live/domein.nl/privkey.pem
SSLCertificateChainFile /etc/letsencrypt/live/domein.nl/chain.pem
</VirtualHost>

(Pas het email adres, de ServerName, de DocumentRoot en Directory aan met jouw domein gegevens)

Als je hierbij ook gebruik maakt van de SSL certificaten van Let’s Encrypt, dan kan je via een extra “-d static.domein.nl” een alias aan je bestaande certificaat toevoegen. (Zie voor de uitleg mijn andere tutorial : https://www.transip.nl/forum/post/prm/4279)

Doe daarna:

sudo apache2ctl configtest

en als het geen fouten opleverd:

sudo apache2ctl restart

Stap 3: Edit de wp-config.php van je wordpress installatie.

Ga dan naar de directory waar je wordpress site staat.

sudo nano /var/www/vhosts/domein.nl/wp-config.php

(Zet hier het pad naar je eigen wordpress installatie in)

Voeg hieraan de volgende regels toe voor /* That’s all, stop editing! Happy blogging. */

define(“WP_CONTENT_URL”, “https://static.domein.nl”);
define(“COOKIE_DOMAIN”, “domein.nl”);
define(“WP_PLUGIN_URL”, “https://static.domein.nl/plugins”);

Stap 4: Log in op phpmyadmin om de bestaande statische contens op het nieuwe url te zetten.

Klik in de linker lijst op de database van je wordpress site. Ga daarna naar “Query opbouwen” bovenin.

Scroll naar beneden tot je het vak met “SQL-query op database jouwdatabase” ziet.

Plak dan de volgende code in dat vak en verander domein.nl in je eigen domein.

UPDATE wp_posts SET post_content = REPLACE(post_content, ‘https://www.domein.nl/wp-content/uploads/’,’https://static.domein.nl/uploads/’)

Vanaf dit moment zal je site alle statische content vanaf de static.domein.nl laden. De browser kan op deze manier meer connecties tegelijk naar de server maken en de coockies worden niet meer voor deze content geladen.


Gebruik maken van browser cache:

Zet in je .htaccess file de volgende regels:

# 1 Maand voor de volgende file types
<filesMatch “.(css|jpg|jpeg|png|gif|js|ico)$”>
Header set Cache-Control “max-age=2592000, public”
</filesMatch>

De 2592000 staat voor het aantal seconden dat het vanaf de browser cache geladen moet worden in plaats van opnieuw op te halen van de server. In dit geval is dat 1 maand.

Voor de static.domein.nl data moeten we ook een .htaccess file aanmaken om dit voor elkaar te krijgen.

sudo nano /var/www/vhosts/domein.nl/wp-content/.htaccess

(vervang het pad voor het pad naar je eigen wordpress installatie)

Plak daar de volgende code in:

# 1 Month for most static assets
<filesMatch “.(css|jpg|jpeg|png|gif|js|ico)$”>
Header set Cache-Control “max-age=2592000, public”
</filesMatch>

Nu staat het voor de hierboven geconfigureerde statische content ook ingesteld.


Zend OPcache instellen voor PHP7:

Zend OPcache zorgt ervoor dat PHP scripts sneller uitgevoerd kunnen worden doormiddel van caching van de uitgevoerde code en optimalisatie daarvan.

Ik zal een aantal dingen kort uitleggen. Voor uitgebreide uitleg verwijs ik door naar bijvoorbeeld:

http://uk3.php.net/manual/en/opcache.configuration.php

We gaan beginnen met het configureren:

sudo nano /etv/php/7.0/apache2/php.ini

Hier zoeken we de regel:

;opcache.enable=0

Deze veranderen we in:

opcache.enable=1

Hiermee schakelen we de OPcache funtie in.

Daarna door naar de volgende regel:

;opcache.enable_cli=0

Ook deze schakelen we in:

opcache.enable_cli=1

Nu gaan we het gereserveerde geheugen instellen:

;opcache.memory_consumption=64

Verander deze in een ruimer getal als je meerdere php sites draait.

opcache.memory_consumption=128

De volgende regel is voor de gereserveerde ruimte voor interned strings:

;opcache.interned_strings_buffer=4

Zet deze iets hoger.

opcache.interned_strings_buffer=16

Nu zetten we de maximale hoeveelheid scripts in het geheugen.

;opcache.max_accelerated_files=200

Zet dit naar een hoger getal .

opcache.max_accelerated_files=10000

Nu zetten we nog het maximale verspilde geheugen, waarna de cache word herstart.

;opcache.max_wasted_percentage=5

Haal de ; weg.

opcache.save_comments=1

Herstart apache om de nieuwe instellingen actief te maken.

sudo apache2ctl restart

Je kan verder weinig zien of deze waarden goed zijn. Met de volgende plugin krijg je wat meer inzicht en kan je ook een herstart forceren: https://nl.wordpress.org/plugins/opcache/


Gzip gebruiken om de files te comprimeren:

Edit de .htaccess file:

sudo nano /var/www/vhosts/domein.nl/.htaccess

(Pas het pad aan voor de instellingen van jouw VPS)

Voeg dan de volgende code toe:

<IfModule mod_deflate.c>

# Compress HTML, CSS, JavaScript, Text, XML and fonts

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/javascript

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no-gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Header append Vary User-Agent

</IfModule>

Doe dit ook in de volgende .htaccess file voor de static content:

sudo nano /var/www/vhosts/domein.nl/wp-content


Javascript defered of asynchroon laden:

Dit is het makkelijkste te doen met een van de onderstaande plugins. Houdt er rekening mee dat niet alle themes en of plugins hier mee overweg kunnen. Mijn ervaring is dat sommige sliders er moeite mee hebben.

Probeer het een uit. Als het geen problemen opleverd, dan lekker aan laten staan. En anders gewoon weer verwijderen.

De beste optie is het asynchroon laden van de javascripts. Deze kan je instellen met de volgende plugin:

https://wordpress.org/plugins/asynchronous-javascript/

Mocht dit niet helemaal lekker werken, probeer dan de javascripts defered te laden:

https://wordpress.org/plugins/wp-deferred-javascripts/


Optimaliseren van plaatjes:

Dit kan je prima doen met een plugin, als je niet weet hoe je dit precies vooraf moet doen.

WP Smush kan dit bijvoorbeeld prima voor je doen. Je kan de al bestaande plaatjes door het pakket alsnog laten optimaliseren (De gratis versie kan er 50 per keer, dus als je er meer hebt, dan een aantal keer de optimalisatie draaien.)

Deze plugin kan het verder automatiseren, door het automatisch bij upload al voor je te doen.

https://nl.wordpress.org/plugins/wp-smushit/

De betaalde variant kan nog beter comprimeren, maar ik zou eerst eens lekker met de gratis versie gaan werken.


Preventie van hot linking van plaatjes en andere files:

Om ervoor te zorgen dat andere sites niet jouw plaatsjes en/of andere files laden vanaf jouw VPS, kan je wat aanpassingen doen in je .htacces files.

sudo nano /var/www/vhosts/domein.nl/.htaccess

en

sudo nano /var/www/vhosts/domein.nl/wp-content/.htaccess (Voor de statische content)

Wil je gewoon tegengaan dat deze worden geladen, voeg dan de volgende code toe aan de bovenstaande .htaccess files.

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^https://(www\.)?domein.nl/.*$ [NC]

RewriteRule \.(gif|jpg|js|css)$ – [F]

Wil je dat bij de linkende partij een ander plaatje komt te staan, voeg dan aan de bovenstaande .htaccess files de volgende code toe:

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^https://(www\.)?domein.nl/.*$ [NC]

RewriteRule \.(gif|jpg)$ https://domein.nl/boosmannetje.gif [R,L]

Comments are closed.