How To Turbocharge WordPress Performance

There are many areas of WordPress performance that all need to sing in tune if you are going to make your WordPress website work to its potential.

“Working” means complying with all Googles requirements to rank in search and get found online.

It means loading quickly on any device, being mobile friendly so users can view and interact with your content on any device.

Working also means having a website that actively converts visitors into enquiries, phone calls and online sales.

Most websites don’t work and there are normally multiple reasons why they don’t. Slow loading, badly constructed content is a common culprit, along with poor ‘user engagement‘ signals.

In the third decade of the Century, there are multiple requirements, all of which need to be addressed if you want to achieve your goals online.

We always begin any project with a complete SEO Audit so we can see what needs work and what is working well already.

Quite often, some elements of a site will be optimised to perform really well. Meanwhile, other issues will be over riding the good work and preventing the site from making progress.

We’ll deal with SEO and user engagement later, for now, we need to address the WordPress Performance that will make your WordPress installation load fast on any device.

It needs to work on all devices and to thus be Google friendly.

When your site earns enough “Trust & Authority” to be rewarded with top Google rankings for highly competitive search terms and phrases, it will be healthy enough to flourish online.

What Affects WordPress Performance?

Page Load Speed

  • Image Size
  • Code Bloat
  • File Requests
  • Gzip Compression
  • Eliminate Render Blocking Resources
  • JS & CSS Aggrigation
  • JS & CSS Minification
  • Lazy Loading Images
  • Set Expires Headers
  • Using a CDN – Content Delivery Network

Image Sizes

The size of your website images usually has a massive impact on your site load speed.

As an image comes out of your SLR camera, it may be 4000 x 3000 pixels and could be 8 – 10 MB in size.

Many people just load them up and hope for the best, but most sites can’t reduce images down to sensible proportions.

Most screen sizes rarely exceed 1400 pixels, so 4000 pxl wide images are unnecessary.

In an ideal world the total size of each page shouldn’t exceed 100kb, certainly less that 500 kb, so your images need to be compressed to fall within these perameters.

Learn all about compressing images for WordPress

Code Bloat

Not often given much consideration, but every byte of code needs to be sent each time a page request is made. The less bytes required, the faster the website.

File Requests

The volume of file requests needed to render your page has a huge impact on load speed.

Some plugins use 7 or 8 css style sheets to work. This means that just to use that plug in your site needs to send up to 8 different style sheets (as well as all the other files, JavaScripts etc. required).

Aggrigate all the style sheets that some WordPress themes and structures generate into one larger stylesheet. You will reduce multiple file requests down to 1 file which although a larger file, will download much faster.

This is another good reason to choose your plugins carefully as some are much slimmer and faster than others.

It is why it’s also important not to install plugins you don’t need or are not using – uninstall them, save code bloat and speed your site up.

Gzip Compression

Gzip is an easy way to automatically compress all the code in your website so it can be delivered faster.

Eliminate Render Blocking Resources

In most cases, when you add functionality, WordPress adds the necessary JavaScript files and css into the header of the page / site.

This means that they all trigger (to activate or trigger their functionality) on initial page load. This prevents the top of the page from rendering (and looking like your website) until all those JS scripts have finished loading.

If for example you have a slideshow half way down a page, well below the fold, your header won’t load & display your page until the slideshow has finished loading.

In most instances, visitors will work their way down a page, so if you could defer the slideshow until they had something to read at the top, you then buy yourself more time to load the slideshow at your leasure, ready for when the user has scrolled down to it.

Load spped is counted based on how quickly the visible window loads, not the total page, so even data heavy pages can be loaded so that as far as the user is concerned the page is visible, even if the bottom hasn’t actually loaded yet.

JavaScript & CSS Aggrigation

Hand in hand with reducing file requests, aggrigating as many files as possible minimises file requests, improving load speed.

Lazy Loading Images

As standard, WordPress loads your whole page in order. This includes all images on the page.

The problem with this is that the first images won’t be visible until the last image has loaded.

The solution to this is to lazy load your images, this means that as a user scrolls down your page, each image is loaded just as its needed.

This means that to show the images visible on initial load, only those images are loaded… which is of course, much faster.

Expires Headers

As standard, no WordPress files have caching set up.

Many files don’t change from one month to the next, so by adding caching – expiry headers for different types of files, a users computer can save all the files that don’t change very often and reuse them rather than download them for each request.

This will increase your load speed.

Content Delivery Networks (CDN)

CDN’s like CloudFlare serve your website fully optimized from high speed servers, across super fast networks.

A CDN will cost you a monthly fee depending on your bandwidth requirements (how many people visit your site).

Next – Optimizing Images for Performance