WordPress Speed Optimization: The Definitive Guide

WordPress Speed Optimization: The Definitive Guide

Why optimization is so important?

5 critical points to why optimization should be your first priority.

  1. Faster websites get conversions. A visitor waiting for a page to load is going to raise your visitor bounce rate AKA visitor left. Read more about Bounce Rate.
  2. Website speeds is a ranking SEO factor. Google will rank your website on the speed it loads. Click here to read more about this ranking factor.
  3. Google has recently rolled out “Mobile First” which means your website needs to be optimized for users on slow data speeds.
  4. Study’s show the average human attention span is 8 seconds. This is 8 critical seconds to impress your visitor. Read more about that here.
  5. Most of all it’s good practice. Think of optimization on the way as you build your empire.

Benchmark your website before you do anything.

We need a base score to compare to when we make optimization changes.

Google PageSpeed Insights Rating
Google PageSpeed Insights

Before you do anything we need to first see how your website performs without any optimization.

Welcome to Google PageSpeed Insights. This is the secret to getting your website optimized to the best it can be. This tool is used by professionals in the SEO industry to raise your ranks.

So what does it do? Simple: It analyzes your website in detail to help you build a high performance website. Take a look at some of the key tests this monster of a tool performs.

  • TTFB (Time Until First Byte) – How long does it take for your web server to respond from entering your website URL into their browser to seeing content.
  • Render Blocking Resources – What’s delaying the display of your content.
  • Poorly Optimized website assets such as Images, Stylesheets, Javascript.

This is not the only tool we can use. There are a range of other tools which perform similitude tests but for this article we will stick to using Google PageInsights.

Here are some other website optimization services you can try:

Critical Factors that slow down a WordPress website

Let’s identify primary causes for a slow WordPress website.

  • Web Hosting – If your web hosting provider servers are not correctly configured this also can impact your website speed.
  • Bad WordPress Plugins – Just because it has 80,000 installations does not mean its good. Most of them users have installed it because they heard it was good or thought the same.
  • Bad WordPress Themes – Paid or Unpaid it’s ridiculously easy to build a theme and worst yet some of the popular themes are the worst offenders with brutally poor optimization leading to slow speeds.
  • Bad WordPress Page Builders – Oh yes our all time favorite. These page builders might look appealing with drag and drop functionality, lots of widgets but underneath the hood they cram your page with poorly optimized JavaScript and Stylesheets resulting in a website from hell.
  • Page Size – One of the biggest factors is page size. Mr Joe Blogs on his mobile device out in the desert now has a 1 Megabit connection. He has to now download your 10 Megabyte page. That’s really bad.
  • External Assets – External scripts such as Bootstrap, jQuery or your chosen live chat application. Before you page loads these first need to be fetched causing your page to render slowly.

WordPress Shared Web Hosting

This plays a huge role in connecting your visitors to your website.

WordPress Admin Control Panel
WordPress Admin Control Panel

Most shared hosting providers like ourselves, Siteground or Bluehost take extra pride in optimizing the servers in various ways to give your website a good performance gain. Each web hosting provider has their own method but generally follow the same guidelines.

The shocking reality of this is many providers of shared web hosting cram as many websites onto a single web hosting server as possible increasing the risk of resources being consumed to quickly resulting in your website suffering from peak time performance issues.

The poor performance of the server directly impacts speed factors such as TTFB (Time Until First Byte) which then once a connection has been established we have additional wait time for stylesheets and scripts.

Thanks to technologies such as CloudLinux users are now contained within their own environment meaning they can not directly effect other users on the server as a result of their actions. You can read more about LVE containers here.

Unfortunately there are still web hosting providers that have not yet implemented this technology whereby down to cost or generally a poor service.

One of the most common mistakes webmasters make is deploying their website to a server that is not in their region. If your website is targeting customers in the UK then purchase web hosting in the UK. If your website is targeting customers in the US then get web hosting in the US.

Reducing the distance of travel will definitely boost your sites performance and on top of that it’s good for SEO. Remember Google rates your website based on speed. Hard code it into your brain.

We recommend the following requirements for running WordPress and with this basic guideline you can now hunt down your ideal shared hosting provider.

WordPress System Requirements

  • Diskspace: 1GB Minimum
  • Memory: 512MB+
  • Web Server: Apache or Nginx
  • MySQL Server: Version 5.6+
  • PHP version 7.3 or Later
  • HTTPS Support with a Valid SSL Certificate
  • CloudLinux + Lightweight Virtual Environment (LVE) for Shared Servers.

WordPress VPS Web Hosting

You’re very own Virtual Private Server. You’re playground if you like.

A VPS sits on a dedicated server as a virtual machine. It’s your very own server with as much power as you can afford. Most VPS’s often share the network connection with other VPS’s that are on the dedicated server the same as Shared Hosting just with less users.

If your lucky some hosts will allow you to assign your own gigabit network adapter with IP address but that’s beyond the scope of this article.

The good thing here is that a good quality VPS provider should not oversell the resources of a dedicated server resulting in a more stable and fast platform for your WordPress website. Before you go rushing off to purchase a VPS understand that they will require additional configuration which is beyond the scope of this article.

Most VPS providers have an automated setup process which allows selection of control panels such as DirectAdmin or cPanel. However you still need a good understanding of Linux to harden security and optimize it for your website.

VPS vs Shared Hosting
VPS (Virtual Private Server) VS Shared Hosting

Bad WordPress Plugins

Bad WordPress Plugins could lead to 40% or more in performance loss.

There is nothing more tempting than adding additional functionality to your website with a simple click to install a WordPress Plugin. No coding or skill-set required. The trouble with this is you are entrusting developers to do a good job and the truth is they don’t. They are badly built due to lack of knowledge and discipline and in turn quality and performance is compromised.

Every time your website is visited it has to load a plugin and that plugin costs resources such as memory, disk space and database. Valuable resources that is like diamonds to you and me. You need to learn to value them like diamonds.

Another common issue is plugin developers don’t use the WordPress development API correctly resulting in unnecessary code such as Javascript being loaded into the website header directly resulting in “Render-Blocking Resources” issues which in term as you now know effects performance.

The only code that needs to be in your website header is meta tags, stylesheets and that’s it. Javascript belongs in the footer. It is the last thing to be loaded. Click here to learn how to view your website’s source code.

WordPress Slider Plugins are BAD and should be banned. They are performance hogs and over bloated with unnecessary code resulting in tremendous amount of performance being lost before your page is even visible to the end user. Disable them and delete them. Hard code a slider in or have a developer do it for you. Remember Javascript goes in the footer so find a developer that understands this or you aswell forget it.

The common perpetrators are Layer Slider, Revolution Slider and many more.

They often come packed with a website template/theme. Minifying/Compressing StyleSheets, HTML and JavaScript is an important process to save space by removing white-space from the code. It’s a massive performance gain. We will teach you how to do this later.

  • Less Plugins = More Power. Disable unused plugins, they use valuable resources we need.
  • Check your website source code when you enable-disable a plugin. Where is the JavaScript? Is it compressed? Where is the Stylesheets (if any) is that compressed? Remember they are the enemy and we need to get rid of anyone crossing the line.
  • Purchased a template? Some of the plugins “required/recommended” are not actually required unless you use the functionality in your website. Learn what each plugin does and remove it if needed. Some even come bundled as paid promotions and are simply bloatware.
  • Just because it has 80,000 installs does not mean its good. Do your research “Does X plugin affect SEO or website performance”.
  • Treat your website as if it’s getting a billion views and you have to save as much resources as you can to be cost effective.

Test your websites performance with Google PageSpeed Insights. Disable all plugins and enable them one by one and see who is hogging the most resources. Find an alternative or delete it. Be aware some may break the themes functionality but you need to do this to find who is causing issues and who is not.

Do it at night when traffic is slow/low. Do not put your website into “Maintenance Mode” as this will prevent Google PageSpeed Insights from testing the new plugin configurations.

If you find a plugin that is a culprit perhaps try to contact the developer for improvements. If that fails leave feedback warning other users of the same issue. Don’t be malicious about it. We don’t need to burn bridges as the chances are the developer may not know about the issue.

Bad WordPress Themes

The internet is flooded with badly coded free or paid WordPress Themes.

Theme Builders, Page Builders or whatever they want to call themselves that have the feature of drag-drop elements have one common performance problem they share. Over bloated HTML, Javascript and Cascaded Stylesheets (CSS).

The reason for this is to cater for all the functionality the theme has to offer even if you never use this functionality it’s still loaded resulting in unused CSS and Javascript and in turn uses valuable bandwidth resulting in slow website speeds.

These themes are also culprits for cramming Javascript into the header and what did we say about that earlier? Javascript belongs in the footer. As we mentioned earlier it causes “Render-Blocking Resources” and we don’t want that.

Popular Theme Builder WordPress Plugins: BeTheme, WPBakery, Visual Composer, Elementor and many many more.

Guide for Website Developers

If you are a developer then we recommend coding your website template from scratch using BootStrap and a popular HTML5 WordPress Theme Skeleton (HTML 5 Blank) ready to go. Use the latest HTML5 standards and think of site speed and performance from the ground up.

Strip out any unwanted bloatware and start building your empire. Use this WordPress Template Guide to select and build custom WordPress Pages. We use the same method for our website and look how fast it is.

Every time you make a change TEST IT in Google Page Speed Insights. Any score over 90 is awesome. Use resource hints such as DNS-Prefetch, Prefetch, Preload and Preconnect which is a great way to give your website a performance boost.

<link rel="dns-prefetch" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://www.google-analytics.com">
<!-- This method prevents "Render-Blocking Resources" -->
<link rel="preload" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css?ver=4.4.1" as="style" onload="this.rel='stylesheet'"/>

    <link href="https://fonts.googleapis.com/cssfamily=Open+Sans:300,400&display=swap" rel="stylesheet">

Resource Hints are covered in great detail at this blog article by keycdn: Resource Hints – What is Preload, Prefetch, and Preconnect?

Remember for key optimized performance place Javascript in the footer; stylesheets and meta tags in the header. Nothing more and nothing less. Bundle your theme with W3 Total Cache Plugin. You will be amazed the amount of performance gain in 30 seconds. Up the ranks you go! We talk more in depth about W3 Total Cache below.

Guide for None Website Developers

If you are NOT a developer don’t worry we still have plenty of tricks for you to.

If you use any of the theme builders above then you won’t be able to switch to a new template unless its compatible with the same theme building plugin. The reason for this is that each one uses their own methods of storing page data so it can then be called back and displayed to the user. So what do you do?

If your website is new then do take the risk by trying out multiple themes and testing with Google PageSpeed Insights to see which is the fastest.

  • Use a WordPress Plugin called Scripts to Footer – This small plugin will move all scripts to the footer speeding up page load time.
  • Use W3 Total Cache – This alone will improve page speeds by compressing the page data before browser output. You can find more about this below.
  • Be careful not to have conflicting plugins. Remove any other plugins such as Auto-optimizer and W3 Super Cache.
  • Use an image optimizer such as WP Smush this will compress large images and make them web friendly.
  • Make sure to follow the guide below for W3 Total Cache.

Final notes: You don’t need 1,000 plugins layered on top of each other to optimize your website. Just two will do and the above are them two.

W3 Total Cache

If you want to see instant improvements then get this plugin activated but before you do…

WordPress W3 Total Cache
W3 Total Cache by BoldGrid

This plugin alone will change your life and give you instant improvements with just a few clicks. Lets go through the settings and get everything enabled/disabled to get the best out of this plugin.

The good news is all the overwhelming advanced settings have already been configured for you. Educate yourself and learn what each setting does.

Once installed navigate to Performance -> General Settings

  • Enable Page Cache
  • Enable Minify
  • Enable Zend OPCache
  • Disabled Database Cache
  • Enable Object Cache

CDN – Content Delivery Network

Don’t be afraid of using this. Your learning something new! A CDN will distribute your content across the world serving your website data via servers that are closest to your website visitors. This provides HIGH availability and most importantly to us HIGH performance.

The default CDN Type selected is StackPath we recommend it for ease of use. It’s around $10 a month for 1TB of bandwidth. It’s 100% worth it but you have to know how to set it up.

Follow this guide from StackPath and you will be amazed on the performance gains you get.

  • Enable Lazy Loading under
  • User Experience – This will defer off-screen images.

Navigate to Performance -> Minify

  • Enable HTML minify settings
  • Enable Line break removal
  • Enable JS minify settings
  • Enable CSS minify settings

That’s it. Now run Google PageSpeed Insights to get a new score. You may have to run it twice as the first run W3 Total Cache may be caching content for the first time.

If you decide to make changes to your website REMEMBER it’s now cached.

Use Performance -> Purge All Caches to clear the cache or switch it off until your finished with editing.