How to speed up WordPress website?

Our teams regularly does website speed audits and perform the fixes to increase the website loading time. What agency owners and directors should understand is that the approach to these fixes in different depending on website base:

• Custom theme ( Usually built with ACF, Carbon fields or Gutenberg blocks )
• Page builder ( Elementor, WpBakery etc)
• Hybrid ( Page builder + ACF/Carbon fields)

General sucess rules for fast wordpress website load

1. Page should be small in terms of size ( kb )
2. Page should be accessible
3. Load only what you need and Don’t load what you don’t need
4. Use best practices for every piece of page: css files, images, fonts, js files etc.
5. Be careful with GTM ( Google Tag Manager )

How to ensure wordpress page is small enough?

Every page by default is fast, on any hosting, trust me. The page with just content ( what users and Google need) is super fast, because it’s plain HTML. Now, next layer of “weight” is media resources:

• Images
• Videos
• Iframes
• Fonts

The rules of thumb when optimising images in wordpress

The image should not be more than 100 KB. It’s a big enough thing even with 100kb, but the main point is that 100kb+ images are the main source of load delay, especially if they are an LCP image (the first big image the user sees when opens the page).

I’ve also created a detailed image optimisation guide recently, where you can read about the most common steps to ensure your client’s website images are optimised really well.

Extra tips: Make sure they are lazy-loaded, except the LCP image – this once should NOT be lazy-loaded, but preloaded with fetch-priority high. Really, please check my guide above, it worth your attention.

The rules of thumb when optimising videos in wordpress

Avoid using autoplay background videos. Even well optimised video weighs like 10 images, and if it’s background on the hero section, forget about a fast loading website.

Using video player like vimeo or youtube won’t save the situation as it’s same asset + establishing connection to another host.

Videos should be lazy-loaded and ideally user should see image and after click on the “play” button – video download actually starts, so it’s not blocking main page content from loading

The rules of thumb when optimising fonts in wordpress

I think in most cases fonts loaded from the same server are loaded faster than those that are loaded from a CDN. So try to avoid CDN load, Adobe Type Kit, etc.

Ideal way is to use system fonts, some of them are great – but client’s rarely accept this, so just make sure they are stored as files in WOFF2 format

The rules of thumb when optimising iframes in wordpress

Iframes are loading content from external resource – so try to avoid using them, and if you still need them on the page – make them lazy-loaded, so src is set when user scrolls to the section or activates the popup by clicking some button

Use all of the practices above and your page should be good enough 🙂

How to ensure that your wordpress page is accessible?

Try to decrease the amount of HTML content ratio to the actual copywriting. This means avoid using page builders and a huge amount of nested selectors. Additionally, make sure that you can navigate through website using keyboard and check for accessibility issues using wave browser extention

How to load only required resources?

In general page should have only the code that is required to output the current page, meaning if there are no forms on the page, form.js code should not be loaded, if page have just 5 sections – the CSS files for these 5 sections + general CSS should be loaded, not all CSS that you have for website.

You can do this with checks by page template in functions, or use plugins to remove unused CSS. For me only WpRocket plugin does this job well.

How to ensure that best practices for every piece of content are applied?

Well, basically, what you see in most plugins as 1 click optimisation ex: Optimise CSS is a series of actions that your developer could do in the code before using the plugin and work with raw code gives much better outcome, as it’s more safe and controllable environment.

I’d like to circle back to optimising images, videos, iframes, CSS, JS, etc.

Avoid using libraries, most websites do not need jQuery to certain point, yet a lot of wordpress websites use it and got surprised why page is loading ton of JS before processing LCP image

GTM ( Google Tag Manager) issues in wordpress

This is the most critical issue for most projects. If on the delivery date everything looks good and the website loads fast, as soon as the marketing team installs GTM – devs have no idea what kind of resources are loaded on every page. Sometimes it’s huge libraries, so my recommendation is to make sure GTM fires after main page load.

Your analytics is important, but not as important as users’ experience on a fast website.

In most cases, devs are trying to optimise their code, when in fact they should just remove/delete the GTM to make sure the website loads fast. Not forever, but as a test measure – great idea. If website instantly takes off – means you should optimise the queue of loading resources, where GTM will be loaded when all page is loaded

Final thoughts

No of the rules above is secret, none of them will have a huge impact on its own, but together, they are capable of bringing your website to the 90s on mobile and passed core web vitals. So enjoy this long ride – if you’re running traffic – you’ll need this.

Highly recommend paying attention to GTM issues and image optimisation