Speeding up WordPress

from fat cat to ninja cat

Simon Pollard

Lead Web Developer at 

@smp303

https://slides.com/simonp303

@smp303

Speeding up WordPress

"Out Of The Box"

WordPress out of the box is not that slow and a lot of sites can run ok with no changes.

BUT

How many of us just install WordPress and use it as it is?

@smp303

Speeding up WordPress

A bit of this a bit of that

We start adding things:

Nice things - a bit of Javascript, Some CSS, a Framework or two, maybe a Font library, lots of pictures and of course my favourite, lots of plugins

Now they may make things taste look great but there is a downside...

@smp303

Speeding up WordPress

Things get a bit bloated

Our sites get slower and load times increase as all these great things have to be loaded in. Page sizes become large, very large.

@smp303

Speeding up WordPress

Load times

The more things we have to load one by one the harder it is to manage and the slower your pages generate.

@smp303

Speeding up WordPress

Testing

There are lots of ways to test how quick your site is:

Chrome web developer tools

Right click on screen, click inspect, click on the Network tab and then reload the page

@smp303

Speeding up WordPress

Testing 2

Google Page Speed Test

https://developers.google.com/speed/pagespeed/insights/

Web Page Test
https://www.webpagetest.org/

Is a real bitch though

@smp303

Speeding up WordPress

Solutions!

There are many ways to help things

@smp303

Speeding up WordPress

Enqueue

Let's start by checking we are loading things correctly.

Enqueue Javascript and CSS in functions.php

Do not hard code into your header / footer

https://developer.wordpress.org/reference/functions/wp_enqueue_script/
https://developer.wordpress.org/reference/functions/wp_enqueue_style/

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

@smp303

Speeding up WordPress

Compression and Minification

Try using a compiler such as Gulp to compile your CSS and JavaScript.

Compress your multiple files into one file for CSS and one for JavaScript. If you can at the same time minify those files.

Use uncompressed for dev (easier to debug)

http://gulpjs.com/

@smp303

Speeding up WordPress

Compression and Minification 2

What if you are loading in CSS and JavaScript from other sites? Well you can still enqueue them, and then you could try something like:

W3 Total Cache - yes that is a plugin!

Which has a great minify setting which will work for all CSS and JavaScript and...

https://en-gb.wordpress.org/plugins/w3-total-cache/

@smp303

Speeding up WordPress

Caching

You really should be looking at caching your site if you need to speed it up.

This is made easy by using a plugin such as W3 Total Cache or Super Cache. Most of these do not require much knowledge you just need to enable some settings.

If you are running your server look at something like PHP Opcache for an extra level on top.

https://en-gb.wordpress.org/plugins/w3-total-cache/
https://en-gb.wordpress.org/plugins/wp-super-cache/
 

@smp303

Speeding up WordPress

Speaking of plugins...

Be sure you are only using what you actually need.

"There is a plugin for that"

But

There is often some simple code for that which is a lot less resource heavy.
eg: share this plugin vs your own code 

@smp303

Speeding up WordPress

Adaptive Media

All this is well and good but sometimes sites are just heavy with content. Lots of images, even video and that takes time to load.

@smp303

Speeding up WordPress

Adaptive Media 2

Out of the box WordPress compresses images that are uploaded, but NOT the original. So be sure to specify some sizes and use those.

Then add them to your site correctly.

https://developer.wordpress.org/reference/functions/add_image_size/
https://developer.wordpress.org/reference/functions/wp_get_attachment_image/

add_image_size( string $name, int $width, int $height, bool|array $crop = false );

wp_get_attachment_image( int $attachment_id, string|array $size = 'my-size', 
bool $icon = false, string|array $attr = '' );
// Or
the_post_thumbnail('my-size');

@smp303

Speeding up WordPress

Adaptive Media 3

So what does all do?

The browser will load the correct image for the correct screen size. No waste.

<img width="2000" height="1125" 
src="https://websites.com/wp-content/uploads/2017/02/image.jpg" 
srcset="websites.com/wp-content/uploads/2017/02/image.jpg 2000w, 
https://websites.com/wp-content/uploads/2017/02/image-300x169.jpg 300w, 
https://websites.com/wp-content/uploads/2017/02/image-768x432.jpg 768w, 
https://websites.com/wp-content/uploads/2017/02/image-1024x576.jpg 1024w, 
https://websites.com/wp-content/uploads/2017/02/image-800x450.jpg 800w" 
sizes="(max-width: 2000px) 100vw, 2000px">

@smp303

Speeding up WordPress

The Sneaky Win

So you have done all this but things are still a bit sluggish and your server is not happy.

Enter the CDN - Content Delivery Network
let someone else take the load, literally

Try something like Max CDN or Key CDN

https://www.keycdn.com
https://www.maxcdn.com

@smp303

Speeding up WordPress

After all that...

Your site should now be running a lot quicker and load up a lot speedier.

Your fat cat is now a ninja cat

@smp303

Speeding up WordPress

Thanks for listening!

Any Questions?

https://slides.com/simonp303/