wordpress performance optimization

WORDPRESS PERFORMANCE TWEAKING

BRECHT RYCKAERT

“WordPress Expert” @ combell.com

I blog at brechtryckaert.com

Author “WordPress Security 101”

Proud dad of Fleur!

BRECHT RYCKAERT

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

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

MORE RAM & CPU =/= A MUCH FASTER SITE

MISCONCEPTION:

PUT IN THE WORK AND YOU WILL GET YOU A FAST SITE!

BE THE ANT…

ANALYZE THE SITESTEP ONE

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

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,…)

ANALYZE THE SITE

IDEAL VALUES

▸ 30 to 50 elements -> concurrent browser connections

▸ 0 to 1.5 MB in size

▸ Less is more

ANALYZE THE SITE

WAYS TO IMPROVE LOADING SPEED

▸ Domain sharding

▸ CSS-sprites (http://css-tricks.com/css-sprites/)

OPTIMIZE WORDPRESSSTEP TWO

OPTIMIZE WORDPRESS

SLOW INITIAL GET?

▸ Usually points towards too many queries

▸ Fix: limit or reduce the number of queries

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!

OPTIMIZE WORDPRESS

OPTIMIZE IMAGES

▸ wp smush it

▸ Reduce the size of images (new and already added images)

OPTIMIZE WORDPRESS

CACHING PLUGINS

▸ W3 Total Cache

▸ WP Super Cache

▸ WP Rocket

▸ WP Faster Cache

▸ …

OPTIMIZE WORDPRESS

MY PLUGIN OF CHOICE

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

OPTIMIZE WORDPRESS

MY PLUGIN OF CHOICE

▸ Proof by Mattias Geniar:https://ma.ttias.be/benchmarking-the-performance-of-wordfence-a-wordpress-plugin/

SERVER SIDE TWEAKS STEP THREE

SERVER SIDE TWEAKS

GZIP

▸ Compresses the data sent from server to browser

▸ add to your .htaccess:AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/htmlAddOutputFilterByType DEFLATE text/xmlAddOutputFilterByType DEFLATE text/cssAddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xmlAddOutputFilterByType DEFLATE application/javascriptAddOutputFilterByType DEFLATE application/x-javascript

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 ETagFileETag None

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>

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

CACHING STRATEGIESSTEP FOUR

CACHING STRATEGIES

CONTENT DELIVERY NETWORK

▸ Cloudflare

▸ …

CACHING STRATEGIES

CACHING TECHNIQUES

▸ Memcached

▸ Redis

▸ Varnish

CACHING STRATEGIES

CACHING TECHNIQUES

▸ Memcached

▸ Redis

▸ Varnish

OBJECT CACHE

REVERSE PROXY

SO WHAT TECHNIQUE DO YOU CHOOSE?

CACHING STRATEGIES

IDEAL SETUP

VARNISH REDIS

CACHING STRATEGIES

IDEAL SETUP

VARNISH REDIS

CACHING STRATEGIES

IDEAL SETUP

VARNISH REDIS

FRONT-END

CACHING STRATEGIES

IDEAL SETUP

VARNISH REDIS

FRONT-END QUERIES

WHY REDIS AND NOT MEMCACHED?

CACHING STRATEGIES

WHY I PREFER REDIS

▸ Values up to 512MB in size (memcached limited to 1MB per key)

▸ Supports much more programming languages

QUESTIONS?

THANK YOU!I’LL TWEET THE LINK TO THE SLIDES ON

@BRECHTRYCKAERT