Step 1 – assessing the load speed of your website

Once you have built a website, we recommend you assess the speed so you have an initial report to go by, but also so you can measure the improvements. We use GT Metrix as our first port-of-call, to assess how slow/fast a website is.

• gtmetrix.com

We also recommend you use Google Page Speed Insights too – by using both this and GT Metrix, it will give you an overall measure of how fast your website is before any optimisation is done.

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

A few notes on images

We have published another blog here on image optimisation, but for convenience we have included the main points you need to keep in mind when optimising images below:

At this point, and before any sort of speed optimisation is done, it is important to check the most obvious things, such as image re-sizing and compression. This is one of the main areas that tends to be overlooked. If a browser is ‘scaling’ the image that might have been uploaded at 2000 x 2000 pixels, but being scaled down to 500 x 500 pixels, this can slow a website down. It is important to both resize and compress images.

For image resizing, we recommend using Photoshop or Fireworks, ensuring that images are saved for web. We also use a programme called Caesium for compressing images, as you can control the level of compression.

• https://saerasoft.com/caesium/ (go for the TOP option in the “Products” menu)

Also, as a rule-of-thumb, it is important to think about ANY media uploaded – and whether or not this can be compressed. PDFs can also be compressed right down, and we always compress PDFs as much as possible. For this we use SmallPDF.

• https://smallpdf.com/compress-pdf

For PNG (and you can also do JPG images), we use another website to compress them, called TinyPNG.

• https://tinypng.com/

Finally, the best and fastest image file type is what’s called an SVG (Scalable Vector Graphics file). These are not only tiny in size, super-fast to load but they are also crystal clear too. On our website nearly all the images are SVGs, HOWEVER SVG files only work well for more simple graphics, for example, the pattern backgrounds in our slide-show on the homepage are SVG files, as are the pictures of the phone and laptop with the smiley faces, but pictures in our portfolio are JPGs as it wouldn’t be possible to save these files as SVGs.

Step 2 – CAREFUL use of caching plugins

Once all the media files have been compressed and uploaded to the website, we then start looking at the compression of the website.

For this there are different Caching plugins that can be used, as follows:

W3 Total Cache Plugin

This is a comprehensive caching plugin with many different options that can be set, HOWEVER we always recommend that you play around with the settings whilst the website is on a development link, and you have taken a backup of the website beforehand, because if there are incorrect settings applied, it can crash the website.

Every website will be different – whilst some settings will work effectively on some WordPress themes, on others the same settings will crash the website or screw up the CSS. We would recommend following the guide on the following website:

• https://themeisle.com/blog/w3-total-cache-settings/

When changing settings on W3 Total Cache, we run many different GT Metrix and Google Page Speed Insights reports to assess the speed improvements. Generally, you should be able to reach A-B grading on GT Metrix, and you should get up to 80 on Desktop/Mobile tabs on Google Page Speed Insights – sometimes higher. There can be cases where the grading/numbers are lower than what we have suggested above and this is unavoidable.

WP Super Cache Plugin

This plugin is more plug-and-play and will optimise the website as much as possible with more generic settings automatically applied that are less likely to mess the website up.

Other considerations

Hosting

This is a massive consideration when trying to optimise a website. Nowadays you really do get what you pay for, and if a client has cheap shared hosting this will impact on the load speed of the website. It is far, far better to recommend the client pays for decent quality shared/dedicated hosting (depending on the size of the website and its core functionality). For example, we manage our own hosting solution on Google servers that are optimised for Google, Speed and SEO. Find out more about our hosting here.

Page Size

When building a website, consider how many elements or images are going onto a page, and how long the page is overall. Obviously there needs to be creative flair and design within any website that is built so it looks visually appealing, but, it is also worth keeping in the back of your mind whilst building a site that pages shouldn’t be too long with loads of functionality and images – the more elements and images on a page, the longer it’ll take to load.

Use Of Plugins

Where possible try and limit how many plugins the website has. As a rule-of-thumb a website should be built using as few plugins as possible.

CDNs (Content Delivery Networks)

Putting client’s websites onto a CDN (Content Delivery Network) such as CloudFlare (we use this) is great for speeding up websites. It is free of charge too. It requires a couple of DNS changes to the client’s Domain Name and then its up and running.

Keeping WordPress Updated (and Plugins too)

Not necessarily something you would think of when it comes down to website ‘speed’ but outdated versions of WordPress will always keep the website running as fast as possible. Each update of WordPress brings improvements, so always keep websites updated and the same applies to Plugins too.

More on Plugins

If you have any disabled plugins, it is always best to remove them. Less plugins is better for speed.

Adding Google Analytics

There are many plugins available to add Google Analytics code into a WordPress website, but it is always better to add it directly into the header.php file, using what’s called a ‘child’ theme if using a purchased theme. Adding the code into a child theme means it won’t get deleted when the theme or versions of WordPress get updated, however if the website is designed from scratch, you can go ahead and add it straight into the main header.php file without the need to use a child theme as it isn’t necessary.

Videos

If a client has lots of videos to add to the website, either upload these to YouTube or ask the client to do this. Never upload videos directly to the website itself.

Slider Plugin

Most WordPress websites feature a slider of some sort, however we recommend using an optimised slider, such as Revolution Slider, remembering to optimise any images used too!

Limit Post Revisions

Post revisions take up space within the WordPress database. It can also affect some database queries run by plugins too. You can limit the number of post revisions saved (you can usually see how many post revisions have been saved by looking up at the top right of the editor page, within the ‘Publish’ box, underneath ‘Visibility’) by opening your wp-config.php file and editing the following section:

1  define( ‘WP_POST_REVISIONS’, 4 );

Adding this line of code to this file will limit the number of revisions saved to 4 and discard older versions automatically.

PHP Version

More server-side related, but always make sure your server is running the latest version of PHP. This will increase the speed of the website, BUT if you have any older websites, its important to test PHP7+ compatibility first.