Talk about techniques to optimize the loading speed and overall performance of your WordPress website. This talk was presented at WP Meetup Antwerp.

1. Speeding up WordPress
@BRECHTRYCKAERT

2. Brecht Ryckaert
• WORKS @ COMBELL.COM
• WP USER SINCE 1.5
• SPECIALIZED IN SECURITY &
OPTIMIZATION
• WROTE A BOOK

3. Coming SOON!
 Laat uw e-mailadres na op
wpsecurity101.com en krijg een
kortingscode (-50%) in de
lanceringsweek!

4. FEIT!
De gemiddelde bezoeker verlaat
je website als deze binnen de 3
seconden niet geladen is !!!

5. Wanneer we een
nieuwe site lanceren
of publiceren,
verwachten we dus dit...

7. Maar occasioneel krijgen
we dit...

10. WAAROM ?!?

11. STAP 1
MET FIREBUG & PAGESPEED
ANALYSE

12. Firebug voor Mozilla Firefox

13. Tabblad “Net”

14. Tabblad “Net”

15. Tabblad “Net”

16. Tabblad “Net”

17. Tabblad “Net”

18. Tabblad “Net”

19. Idealiter...
 30 tot 50 elementen
(concurrent browser connections)

20. Concurrent Browser Connections
 Beperkende factor in
laadtijd bij mobiele en
oudere browsers
 Bepaalt het maximum
aantal elementen dat
simultaan geladen kan
worden

21. Concurrent Browser Connections
Te veel requests!

22. Idealiter...
 30 tot 50 elementen (concurrent browser
connections)
 0.5 tot 1.5 MB

23. Concurrent Browser Connections
Te groot!

24. Grootte afbeeldingen

25. Grootte afbeeldingen

26. Grootte afbeeldingen

27. Pagespeed Insights

28. Pagespeed Insights

29. Grootte afbeeldingen

30. Concurrent Browser Connections
Te groot javascript!

31. STAP 2 OPTIMALISATIE

32. Concurrent Browser Connections
 Beperkende factor in
laadtijd bij mobiele en
oudere browsers
 Bepaalt het maximum
aantal elementen dat
simultaan geladen kan
worden

33. Concurrent Browser Connections
 Domain Sharding
images => img.domain.extension
js => js.domain.extension
css => css.domain.extension
 Elk domein/subdomein krijgt x-aantal concurrent
connections => sneller inladen alle elementen

34. Performance over functionality!
 Evalueer functionaliteiten of ze echt wel noodzakelijk zijn voor de werking
van je website.
 Is de extra gimmick ook de extra laadtijd waard?
 Verzwarende factoren:
- Video background
- Multimedia sliders
- ...

35. Optimaliseer foto’s vooraf
 Verklein de resolutie zo sterk mogelijk (upload nooit foto’s die rechtstreeks
van de camera komen!!!)
 Pas een sterke compressie toe (30% bij jpg)

36. Optimaliseer foto’s vooraf

37. Optimaliseer Database
 Kleinere database = snellere responstijden
 WordPress zorgt echter standaard voor een nogal “vervuilde database”.
=> bijhouden revisies, posts/pagina’s in trash, spam comments, ...

38. Optimaliseer Database
 https://wordpress.org/plugins/rvg-optimize-database/

39. Caching plugins
 Houden bepaalde zaken in RAM of op DISK
 Geen nieuwe database query nodig.
 Serveren meestal vooraf gegenereerde HTML output = SNEL!
 Heel wat keuze binnen de WordPress plugin repository!

40. Caching plugins
 WP Super Cache
 W3 Total Cache
 WP Fastest Cache
 Gator Cache
 Blunt Cache
 Next Level Cache
 ....

41. Caching Plugins
Ik gebruik geen van deze!

42. My preferred caching plugin!
 For small sites:
Wordfence!

43. Wordfence’s Falcon Engine
https://ma.ttias.be/benchmarking-the-performance-of-wordfence-a-wordpress-plugin/

44. STAP 3 SERVER SIDE

45. Beperkende Server Settings
 MAX CLIENTS
Apache server setting – Definieert harde limiet aantal simultane
bezoekers.
Overschrijven van deze limiet = ontstaan wachtrij!

46. Beperkende Server Settings
 MAX CONNECTIONS
MYSQL server setting – Definieert harde limiet aantal simultane database-
verbindingen.
Overschrijven van deze limiet = “Unable to connect to database”!

47. STAP 4
SERVER SIDE
OPTIMALISATIE

48. GZIP Compression

49. GZIP Compression

50. GZIP Compression

51. Enable GZIP compression
 Toevoegen aan .htaccess:
#ENABLE GZIP COMPRESSION
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

52. Entity Tags
 Entity Tags zijn een mechanisme waarmee gecontroleerd kan worden als
de zaken in de browsercache overeen komen met deze op de server. Het
uitschakelen van deze entity tags kan zorgen voor een lagere laadtijd,
betere performantie én een lagere serverload.
 Toevoegen aan .htacces:
#Disable Entity Tags
Header unset Etag
FileETag None

53. Mod_Expires
 Hiermee kunnen we controle nemen over de browsercache en stipuleren hoelang iets in cache moet blijven.
Voeg hiervoor volgende toe aan de .htaccess:
# BEGIN Expire headers
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 seconds“
ExpiresByType image/x-icon "access plus 2500000 seconds“
ExpiresByType image/jpeg "access plus 2500000 seconds“
ExpiresByType image/png "access plus 2500000 seconds“
ExpiresByType image/gif "access plus 2500000 seconds“
ExpiresByType application/x-shockwave-flash "access plus 2500000 seconds“
ExpiresByType text/css "access plus 600000 seconds“
ExpiresByType text/javascript "access plus 200000 seconds“
ExpiresByType application/javascript "access plus 200000 seconds“
ExpiresByType application/x-javascript "access plus 200000 seconds“
ExpiresByType text/html "access plus 600 seconds“
ExpiresByType application/xhtml+xml "access plus 600 seconds“
</IfModule>

54. Hotlinking tegengaan
 Hotlinking zorgt niet voor traffiek op uw site, maar wel voor verhoogde load op de webserver.
 Dit heeft dus wel een impact op de laadtijd van uw website!
 Toevoegen aan .htaccess:
#Disable Hotlinking
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?sparringmind.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?feeds2.feedburner.com/sparringmind [NC]
RewriteRule .(jpg|jpeg|png|gif)$ – [NC,F,L]

55. Caching
 APC
 REDIS
 Beschikbaarheid verschilt per server/hostingbedrijf.
Informeer bij uw hoster!

56. APC
 Alternative PHP Cache (=APC)
 Draait op de server zelf (local) & “just works”!
 Cache opgeslagen in RAM
 In te schakelen via PHP configuratie
 Vervolgens “APC” selecteren in je caching plugin (indien vereist)

57. REDIS
 Vereist afzonderlijke REDIS instance
 REmote DIctionary Server (=REDIS)
 In-memory, key-value based cache
 Vereist aanpassing aan de WordPress core files om werkend te krijgen (bij
handmatige setup).
 Makkelijker te implementeren via plugin:
https://wordpress.org/plugins/redis-cache/

58. STAP 5
OFF SERVER
OPTIMALISATIE

59. Localisatie bezoekers
 Hou rekening met je bezoekers
 Neem hosting af met datacenter in het beoogde doelgebied

60. Implementeer een CDN

61. Implementeer een CDN
 CDN / Content Delivery
Network
 Lokale kopie van je site in
verschillende datacentra
wereldwijd.
Altijd wel één in de buurt van
je bezoeker => lagere laadtijd!
 Cloudflare heeft een gratis
plan (met inbegrepen security
measures)!

62. ”
“
Zijn er nog vragen?

63. Bedankt!
Twitter: @brechtryckaert
Mail: brecht@mediagraaf.be
Blog: brechtryckaert.be