WordPress Speed Optimisation V 2.0

By 25th December 2018Blog

The latest WordPress speed optimisation article by Ben Llewellyn. Updated: 2019

If you’ve been wondering how to increase WordPress page speed you should read this article.

WordPress Speed Optimisation – 0.133s Page Load Time

Warning: These steps will make your WordPress website load faster for your website visitors! General advisory – Before carrying out any form of WordPress development take a backup of your WordPress site files and database.

To speed up my WordPress site I relied heavily upon these four factors for the successful publication of this WordPress speed optimisation guide.

1. Specialist WordPress Hosting Provider
2. Premium DNS Service
3. My WordPress Speed Plugin – Free
4. Twenty Nineteen Theme – Free

Two premium services, one plugin to speed up WordPress and one fast WordPress theme massively influenced my website speed outcome and my entire WordPress speed optimisation process is centered around these four factors.

Proof My Speed Techniques Really Work

Proof that this article really does do what it claims it does.

133ms WordPress website speed optimisation results source: Pingdom.com December 2018

One of the fastest WordPress websites in the World loads pages in 133 milli seconds (0.133 seconds)

The WordPress Speed Up Optimisation Blueprint Version 2.0 – January 2019

This article is the update to my earlier Version 1.0 of “The Blueprint” which increases WordPress website speed. Version 2.0 is a much faster, easier and efficient method for everyone follow and build a fast WordPress website.

This version (Version 2.0) of my WordPress speed guide requires no coding and the WordPress configuration carried out for speed adjustment can be accomplished simply by installing one special WordPress plugin which is free. It’s highly likely that anyone who attempts to follow my guide will witness speed gains even if they currently have a fast WordPress website. The biggest speed gains will occur to slow loading WordPress websites.

WordPress Hosting And DNS Service Setup (Follow Version 1.0 Initial Steps)

The initial steps are illustrated with screenshots in the first version of my WordPress speed optimisation blueprint V1.0. I’ll summarise this below because I don’t want to reuse the same detailed content from my original post to avoid a duplicate content search engine penalty.

Step 1 of 5 – Setup WPEngine.com Website Hosting

The purpose of hosting you WordPress website with a premium managed WordPress hosting provider is: it’ll make your website run alot faster.

WPEngine DNS Configuration Instructions

If your WpEngine CDN (content delivery network) is enabled I suggest you disable it. I found an active WpEngine CDN was resulting in a 99/100 Google PageSpeed Insights score on mobile devices during testing. Whereas disabling my CDN got me a 100/100 PageSpeed Insights score. I don’t know why, it’s possible that the CDN server was furthest from the Google testing location. (so it may be slightly different from your location).

Step 2 of 5 – Setup DNSMadeEasy.com Premium DNS service

The reason why you’re setting up a premium DNS service is: it’ll content web browsers to your web server much quicker and this will make your website load quickly.

Repercussions Of Not Completing All Of Step 1 And Step 2

Some website owners may not want to complete step 1. That’s OK, although a massively noticeable WordPress speed gain will not be possible. Proceed to step 2 to learn about WordPress optimisation. For the purpose of building the fastest WordPress site possible I completed both steps 1 and 2.

Step 3 of 5 – Twenty Nineteen Theme Installation And Activation

My earlier speed guide included using the Genesis Framework Theme which is a premium well rated theme. I’ve used the Genesis Theme for other sites and it’s got a good reputation in the WordPress developer community. During development of Version 2.0, WordPress.org released the Twenty Nineteen theme here’s a quick preview  of what it looks like. The theme is free to download and it’s built really well.

Don’t be put off by the 3.5 / 5 average user score rating on the WP website. WordPress didn’t release a Twenty Eighteen theme last year, so I presume a few bloggers are annoyed that they’ve waited this long for the next official and latest WordPress theme. From my perspective it doesn’t disappoint what so ever. I managed to get wpspeedupoptimisation.com to run faster simply by disabling the Genesis Theme, activating the latest Twenty Nineteen Theme and making the functions.php modifications.

I should point out at this stage that it is best practise to use a child theme although we will not be using one. If we install a child theme alongside a parent theme it will force our website to load additional website assets which will slow it down.

How To Install The Latest Twenty Nineteen WordPress Theme

1. Login to your WordPress dashboard
2. Go to: Appearances > Themes
3. Search for: “Twenty Nineteen” and click on the preview image
4. Click: Add
5. Click: Activate

Your new Twenty Nineteen Theme will be running on your WordPress website.

Step 4 of 5 – Disable All Active Plugins

If you really want your WordPress website to run as fast as possible, you’ll need to disable all your WordPress plugins. Operating a website with zero active plugins will ensure your WordPress website is running at maximum efficiency. The lighter your site is the faster it will run.

How To Disable Your WordPress Plugins

1 Login to your WordPress dashboard
2 Go to: Plugins
3 Click all the checkboxes next to each plugin
4 Select De-activate from the drop down at the top of the page
5 Click Apply

Your plugins will be disabled on your WordPress website.

If possible you want to delete your plugins too – this is what I did on the speed demo website wpspeedupoptimisation.com. Please be aware: if your site currently relies on plugins and you disable them, your site will no longer use the features that the previous plugins added to your site. It’s best to disable your plugins to check your site functions OK before permanently deleting them. To do this follow the steps above 1-5 but select delete from the dropdown this time around.

Step 5 of 5 – WordPress Speed Plugin Installation And Activation

My original Blueprint Version 1.0 includes all the technical steps required to obtain a WordPress speed boost. So if you want to try and do this step on your own – go ahead! If you’re uncomfortable using sFTP, code editors and updating theme files such as the functions.php file – there’s a simpler way.

In December 2018, I launched my WordPress speed plugin to complete all the technical adjustments necessary so that site owners don’t need to hard code or make technical changes beyond the scope of their WordPress Dashboard. I’m pleased to say that WP speed gainers no longer need to do any coding to achieve the results they deserve!

Install this plugin to make your WordPress website load quicker for your website visitors.

How To Install And Setup My Speed Theme Plugin

1. Visit www.speedthemewp.com
2. Download the free plugin speedtheme.zip file
3. Login to your WordPress dashboard
4. Go to: Plugins
5. Add New
6. Upload the speedtheme.zip file
7. Activate
8. Go to: Settings (left nav bar) > Speed Theme
9. Tick all the checkboxes
10. Don’t enter a favicon URL. Fewer requests will make your WP site load quicker.
11. Save

Your site is now running the speed enhancing features of my WordPress plugin.

Almost Finished – Fast Database Optimisation

The last thing I did was install WP Optimize plugin which optimises a WordPress website database (the brain of your website). I ran all the optimisation functions and then I disabled and removed the plugin. The plugin removes things like post auto saves and helps to optimise your WordPress database.

Optimise WordPress Database

Tick the checkbox to select all checkboxes and then hit Run All Selected Optimizations

Your site is now making database queries as quickly as possible.

WordPress Speed

I generated an approximate 0.024 second speed gain compared to Version 1.0 following the steps in this article. Verify the results for yourself by visiting wpspeedupoptimisation.com in your web browser. My speedrun results are below and they measure website speed loading:

WordPress Speed Test #1 – 133 ms (0.133 seconds) Page Load Speed on Pingdom Tested From London

133ms WordPress website speed optimisation results source: Pingdom.com December 2018

Pingdom – Performance Grade A, Page Size: 66.3KB, Load Time: 133ms & 5 Requests

WordPress Speed Test #2 – 210ms (0.210 seconds) Page Load Speed on GTMetrix.com Tested From London

Download Report PDF

WordPress Speed Test #3 – 100/100 Google PageSpeed Insights Score On Mobile And Desktop Devices

Mobile Score

Mobile 100/100 Google PageSpeed Insights Score

100/100 Mobile Google PageSpeed Insights Score

Desktop Score

Google 100/100 Google PageSpeed Insights Score

100/100 Desktop Google PageSpeed Insights Score

Why Are The Reported Speeds Different?

The demo speed site loads so quickly that fractional differences are common. The speed tool testing servers are also different distances from the the demo speed and use different algorithms to measure speed. The speeds are fairly consistent on the industry leading website speed test tools – so I’m happy.

Test And Check The Speed Yourself

Run a speed test on wpspeedupoptimisation.com. This site is running the latest WordPress speed optimised updates and it’s probably one of the fastest WordPress websites ever built.

Run Your Own Website Speed Tests

Run a Google PageSpeed Insights, Pingdom and GTMetrix website speed tests. If you create a free GTMetrix account it will let you test from different locations closest to your web server for free.

You have completed the WordPress speed optimization process.


Further reading

WordPress Speed Optimisation Background Information

WordPress speed up is relatively straight forward when you understand how WordPress works.

What Is WordPress Speed?

“WordPress speed is measured as the total time taken for a webpage running the WordPress content management system (CMS) to fully load for a website visitor.” – Ben, CEO Slib Design Limited

A Speed Analogy

WordPress speed optimization can be described like building a fast racing car. For a racing car to drive at high speed it needs to be light and have a powerful engine. Aerodynamics are obviously another factor and so is driver skill level. Imagine sitting in your new racing car on a racing circuit waiting for the lights to turn green – knowing: you had the same aerodynamic efficiency as other cars, you had the same driver skill as the other drivers and all other given factors were equal except you were sat in the lightest and most powerful racing car on the grid. Would you be confident of winning the race? I would!

When you look inside a racing car, there isn’t a car stereo, there isn’t a passenger seat and there isn’t a spare tyre in the boot (trunk). Only the absolute essential features are kept in the car because only the essential parts make it go fast. The lighter the car and the bigger the engine – the more powerful it becomes. Racing cars are optimised for speed by making them lighter and building them with a bigger horse power engine.

“I didn’t invent the speed process I just adapted it so that it was fit for purpose for WordPress websites.” – Ben

How A Racing Car Speed Equates To WordPress Website Speed

– Engine (Horse Power) – WordPress hosting provider is the driving force behind page load speed
– Lightweight – Reducing the number of requests (files e.g. .css, .js and third party API calls) makes a website lightweight (reduces MB filesize)

About My First WP Speed Optimisation Attempt (Version 1.0)

In July 2018 I set myself the goal of building one of the fastest WordPress website ever made. I didn’t know how fast a WordPress website could go – so I decided it was about time someone found out. I was influenced by the latest Google updates that were being released stating page speed matters for mobile search ranking performance. I decided to publish my strategy and share it with the WordPress and open source community. I labelled the strategy as The WordPress Speed Up Optimisation Blueprint. The fastest I managed to get my WordPress website to load in Version 1.0 was 155ms.

Evaluation Of Version 1.0

The first version steps required website speed gainers to develop on the WordPress platform and purchase a premium theme. After completing Version 1 I’d accomplished what I set out to do – which was to build a fast WordPress website. But after taking time off and re-studying The WordPress Speed Up Optimisation Blueprint a few times I knew it would be too challenging for “non-developers” to follow. I needed to create the same outcome but make the process a lot quicker and easier to complete. Then it would be more successful strategy for everyone to adopt.

December 2018

WordPress released their Twenty Nineteen Theme in December. I installed it, inspected the code and immediately knew what to do. The theme was really well written and it had a very high natural Google PageSpeed Insights score. I knew if I could build a WordPress plugin to achieve the speed results discussed in Version 1.0 and select the Twenty Nineteen theme as the framework for my new WordPress website I’d achieve the same high speed outcome but massively simplify the entire speed optimisation process. It would be better, much better.
The aim with Version 2.0 was to create a method that anyone could follow. I wanted Version 2.0 to be faster, cheaper and more time efficient for WordPress website owners to create a high speed WordPress website.

I planned a method that required users to install a free theme and install a free plugin – It would later become the perfect WP optimisation solution.

Version 2.0 Plugin Development Begins

I started to build a WordPress speed plugin that optimized WordPress performance. The plugin was going to be one of the best WordPress speed up plugins ever made!
Remember our racing car? I turned everything off in WordPress that wasn’t necessary for our racing car to race at high speed. I’d already done all the hard work in Version 1.0 – this code was basically converted into a WordPress speed up plugin and optimised for every day use. You can inspect the plugin code on Github.

During development of my WordPress speed tool, WordPress 5.0 was released on December 6th 2018. WordPress 5.0 included the much-anticipated release of the Gutenberg page editor which replaced the basic WordPress text editor. The new Gutenberg page editor had a much more intuitive GUI (a simplified version of the WP Bakery Page Builder) – although it also included additional .js and .css component files. This was something that I later had to optimise for page speed download performance. I couldn’t just copy and paste the code from Version 1.0 into a plugin, I had to carry out additional speed development.

WordPress plugin development took around two weeks. After running a series of development cycles and carrying out a series of speed tests, I found that I needed to make Twenty Nineteen theme specific fine tuning changes too. I like to code in a modular fashion, so I made a require_once file for Twenty Nineteen which was easy to replicate and roll out for the Twenty Seventeen and Twenty Sixteen theme. My new WordPress speed plugin could be used with the latest generation of popular WordPress.org themes. There are currently >3 million active theme installs for these themes. My speed plugin detects if one of these themes is active and offers additional theme specific speed enhancing options.

The plugin has an options page whereby website owners can choose which speed enhancing features to turn off or on. I decided to include this feature because it’s possible certain WordPress features might be required on some sites and not for others. Building a plugin options page would ensure the future compatibility with almost any theme or plugin.

Plugin Options Page For My WordPress Speed Plugin

Plugin options page of the WP Dashboard – All Speed Features Are Turned On

Version 1.0 Change Log

– Combined new .css and minify it to 1 .css file
– Combined new .js and minify it to 1 .js file
– Switched from the Genesis Framework Theme to the new Twenty Nineteen Theme
– Added backwards compatibility with Twenty Sixteen – 2016 and Twenty Seventeen themes – 2017
– New plugin created (WordPress optimizer component)
– Plugin options page which makes it easy for site owners to turn speed enhancing features on and off

Version 2.0 Performance

Despite switching from the highly recommended Genesis Framework Theme to the free Twenty Nineteen WordPress theme I’d generated a modest but good speed gain.

My new WordPress website loaded in 133ms (23ms) faster than Version 1.0.

– Performance Grade: A
– Page size: 67.9 KB
– Load time: 0.133 ms
– Requests: 5

Google PageSpeed Insights grades websites differently for mobile and desktop. For both tests WPSpeedUpOptimisation.com received a perfect 100/100 score.

<head> HTML Code

The header of the optimised WP site is just 11 lines of code. WordPress developers will know that this is often 20-40 of code on many themes. So it’s a huge reduction in size – which coincides with a big page load speed saving. The <head> consists of only a few HTML tags:

– Charset
– Viewport
– Title
– Stylesheet
– Jquery
– Canonical Tag

The source code doesn’t look like a WordPress website – it’s really trimmed down. The only giveaway in the source code of my WordPress demo speed website wpspeedupoptimisation.com is that the site uses the WordPress path (wo-content/) in the assets it calls.

Footer HTML Code

The footer includes just one minified .js file. With a small slice of js output required for the mobile menu to work.

Version 2.0 Evaluation

I’d completed what I set out to do. I’d made building a fast WordPress website quicker, easier and cheaper!

Version 2.0 was alot quicker to complete than Version 1.0.

Future Development Of Version 3.0

Despite 133ms being undetectable to the human eye the new target WordPress speed is going to be sub 100ms (33ms faster than Version 2.0).

Things I want to explore and try:

– Explore using alternative WordPress website speed test tools
– Create a WordPress hosting speed comparison table
– Screencast the WordPress page speed optimization steps
– Consider WordPress admin speed up tuning
– WooCommerce compatibility
– Run individual mobile and desktop speed tests
– Compare WordPress vs HTML speeds
– Add WordPress booster addons to the speed plugin and improve plugin performance
– Discuss benchmark goals i.e. what speed should a website run at? And how many file requests should it have?

The WordPress Speed Up Optimisation Blueprint Version 2.0 Five Step Process

You only need to carry out 5 steps to optimize WordPress for speed:

1) WpEngine.com – WordPress Hosting (setup instructions in Version 1.0)
2) DNSMadeEasy.com – DNS Service (setup instructions in Version 1.0)
3) Twenty Nineteen Theme (Free)
4) My WordPress site speed optimisation plugin (Free) – Made by me
5) No other WordPress plugins to be installed

Visit the demo speed website wpspeedupoptimisation.com

 

General notice: website speed and performance is affected by many factors. Following the steps on this web page does not guarantee that you will achieve the exact same results. Before making any WordPress changes backup your WordPress website. You will need a backup of your website should you need to restore your website e.g. if something goes wrong. Some of the links in this article are to third party affiliate sites. I never recommend a service provider that I don’t use myself. If you’d prefer not to take part in any affiliate link campaigns do not click on the links in this article. I’ve included the site urls of interest in the article.

Share buttons

Ben

Author Ben

Senior WordPress developer (London) and founder of SlibDesign.com. I've been using WordPress for over 12 years. Feel free to get in touch with me if you need WordPress help or tips.

More posts by Ben
Top