The slides from my WordPress Performance Optimization talk at WordCamp Antwerp (04/06/16)

1. WORDPRESS
PERFORMANCE TWEAKING
BRECHT RYCKAERT

2. “WordPress Expert” @ combell.com
I blog at brechtryckaert.com
Author “WordPress Security 101”
Proud dad of Fleur!
BRECHT RYCKAERT

3. LET ME TELL YOU A STORY ABOUT
A CRICKET AND AN ANT…

5. IN MANY WAYS… WE’RE THE
CRICKET WHEN LAUNCHING A NEW
WORDPRESS SITE…

6. MORE RAM & CPU
=/= A MUCH FASTER SITE
MISCONCEPTION:

7. PUT IN THE WORK AND YOU
WILL GET YOU A FAST SITE!
BE THE ANT…

8. ANALYZE THE SITE
STEP ONE

9. “YES… THIS SEEMS TO BE AN ACUTE CASE OF
SLUGGISHNESS IN YOUR WORDPRESS”

10. ANALYZE THE SITE
MY ANALYSIS TOOLS OF CHOICE
▸ Firebug in Mozilla Firefox (don’t use it in Chrome)
▸ gtmetrix.com (combines Google Pagespeed, Yahoo YSlow,
…)

14. ANALYZE THE SITE
IDEAL VALUES
▸ 30 to 50 elements -> concurrent browser connections
▸ 0 to 1.5 MB in size
▸ Less is more

19. ANALYZE THE SITE
WAYS TO IMPROVE LOADING SPEED
▸ Domain sharding
▸ CSS-sprites (http://css-tricks.com/css-sprites/)

20. OPTIMIZE WORDPRESS
STEP TWO

21. OPTIMIZE WORDPRESS
SLOW INITIAL GET?
▸ Usually points towards too many queries
▸ Fix: limit or reduce the number of queries

22. OPTIMIZE WORDPRESS
SLOW INITIAL GET?
▸ Usually points towards too many queries
▸ Fix: limit or reduce the number of queries
Reduce your plugins to the bare minimum!

23. OPTIMIZE WORDPRESS
OPTIMIZE IMAGES
▸ wp smush it
▸ Reduce the size of images (new and already added
images)

24. OPTIMIZE WORDPRESS
CACHING PLUGINS
▸ W3 Total Cache
▸ WP Super Cache
▸ WP Rocket
▸ WP Faster Cache
▸ …

25. OPTIMIZE WORDPRESS
MY PLUGIN OF CHOICE

26. “YOU KNOW THAT’S A
SECURITY PLUGIN, RIGHT?”

28. OPTIMIZE WORDPRESS
MY PLUGIN OF CHOICE
▸ Proof by Mattias Geniar:
https://ma.ttias.be/benchmarking-the-performance-of-
wordfence-a-wordpress-plugin/

29. SERVER SIDE TWEAKS
STEP THREE

30. SERVER SIDE TWEAKS
GZIP
▸ Compresses the data sent from server to browser
▸ add to your .htaccess:
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

31. SERVER SIDE TWEAKS
DISABLE ENTITY TAGS
▸ Mechanism to verify if browsercache items correspond to
current server version
▸ disable by adding this to .htaccess:
Header unset ETag
FileETag None

32. SERVER SIDE TWEAKS
MOD_EXPIRES
▸ Allows us to take control of the browsercache without a caching plugin
▸ add to your .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>

33. SERVER SIDE TWEAKS
MOD_EXPIRES
▸ add to your .htaccess (second part):
# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
<filesMatch ".(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch ".(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch ".(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch ".(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</IfModule>
# END Cache-Control Headers

34. CACHING STRATEGIES
STEP FOUR

35. CACHING STRATEGIES
CONTENT DELIVERY NETWORK
▸ Cloudflare
▸ …

36. CACHING STRATEGIES
CACHING TECHNIQUES
▸ Memcached
▸ Redis
▸ Varnish

37. CACHING STRATEGIES
CACHING TECHNIQUES
▸ Memcached
▸ Redis
▸ Varnish
OBJECT CACHE
REVERSE PROXY

38. SO WHAT TECHNIQUE DO YOU CHOOSE?

39. CACHING STRATEGIES
IDEAL SETUP
VARNISH REDIS

40. CACHING STRATEGIES
IDEAL SETUP
VARNISH REDIS

41. CACHING STRATEGIES
IDEAL SETUP
VARNISH REDIS
FRONT-END

42. CACHING STRATEGIES
IDEAL SETUP
VARNISH REDIS
FRONT-END QUERIES

43. WHY REDIS AND NOT MEMCACHED?

44. CACHING STRATEGIES
WHY I PREFER REDIS
▸ Values up to 512MB in size (memcached limited to 1MB
per key)
▸ Supports much more programming languages

45. QUESTIONS?

46. THANK YOU!
I’LL TWEET THE LINK TO THE SLIDES ON
@BRECHTRYCKAERT