My 157ms page load WordPress Speed Up Optimisation Blueprint version 1.0 – July 2018
What if you could make your WordPress website load faster than your competitors website yourself? And by quick I mean LIGHTENING QUICK!
You would gain an automatic elevation on Google SERPs, your website visitors would be able to access more content quicker and they would be a lot happier, you wouldn’t have to pay a developer because you could do the job yourself and you’d most likely make more money from internet sales and generate a better ROI. Win, win.
Why is this important?… Well, Google have just changed the ranking rules a little…
(Google Said) “Today we’re announcing that starting in July 2018, page speed will be a ranking factor for mobile searches.”
This is how I built one of the fastest WordPress websites in the World and you can do the same by following my process…
My WordPress Speed Up Optimisation Blueprint doesn’t require a WordPress developer
You don’t have to pay a WordPress developer to achieve the same results as me and you don’t have to pay for a custom lightweight WordPress theme to gain massive speed improvements either! There’s already a tonne of freemium WordPress plugins, speed enhanced WordPress themes and other open source software and paid services enabling you to do the job yourself! What do you think us WordPress developers are using? Fairy dust? :)
I took special steps in my article to ensure that my entire WordPress speed up and optimisation process could be carried out by someone who is WP site savvy but not a developer AKA a “non developer” – basically someone who wants to replicate the same high speed results for their own commercial or non-commercial gain. The article you’re reading has been re-drafted around 20 times, it’s taken a month to assemble and it’s called on all of my 12 years as a WordPress developer to curate. I’m not a natural born author or an experienced writer, but I know WordPress, I understand WP technology and I’m one of the best WP developers I know. The information contained within my article is VALUABLE therefore please use this knowledge and power responsibly.
There’s lots of miss information on the web when it comes to WordPress hosting and WordPress performance, so I thought it was about time someone who knew what they were talking about actually told WordPress site owners how to make a super fast WordPress site for themselves (without hacking their theme) – starting right, first time around with a solid performance foundation.
The WordPress speed results that I gained in July 2018 following the WordPress Speed Up Optimisation Blueprint
The site I built loads in 0.157 seconds (157 milli seconds) when tested from London with GT Metrix and has grade A’s on major speed testing sites like Pingdom, Yslow and GT Metrix. It serves content instantly to website visitors!
Why my article is aimed at “non developers”
I’ve been a WordPress developer for over 12 years and in my time I’ve come across lots of miss-information online about speeding up WordPress. My aim is simple – to help those who are searching to seek out the truth and provide a blue print on how to make a super fast WordPress website based on FACTS! This article will assist non WP developers to build their own super lightweight, fast WordPress website and gain kudos from search engines. To do this all you have to do is read and follow the same steps as me and be motivated enough to complete all the steps! Make sure you read all of this article first before attempting it. Some of my article will require you to buy third party services. If you don’t want to buy anything that’s OK, but you wont be able to complete the WordPress Speed Up Optimisation Blueprint process and gain the same results that I did.
Why my article isn’t written for WordPress developers
My article wont discuss CSS minification, CDNs Content Delivery Networks, NGIX, PHP versions, functions, functions.php modification, .htaccess rules, frameworks, WP developer techniques, Less CSS, page headers, browser caching or anything technical that someone who has been using WordPress for a short while couldn’t understand. Although, the process does include these features – I just don’t talk about them.
I’ve cut down on the tech jargon and simply stated the things I did (without the long and boring explanation) to make my super fast WordPress website. I’ve glossed over the finer detail and just included the things that automatically do the clever stuff for us – the things that generate the the real WordPress speed gains!
WordPress developers and WP site owners please contribute
My aim is to created revised versions of my initial WordPress Speed Up optimisation Blueprint. If you have a valuable contribution please share it by commenting below. I will refine and include visitor contributed feedback for the next version of the blueprint and make it even better.
The advantages of owning a fast WordPress website
Remember when a person lands on your website for the first time, you only have a few seconds to capture their attention to convince them to hang around.
There are two main advantages of owning a HIGH SPEED WordPress website:
- Visitors can access more web pages quicker because they don’t have to wait for pages to load – Better for User Experiences
- Google ranks websites that load quicker better – Better for SEO
Combing 1. and 2. increases the probability of a website conversion (internet sale or profitable website enquiry). By this I mean, If your WordPress website enables your website visitors to browse and access more content quicker than your competitors website and your WordPress website is found more easily on Google search that your competitors website – win win. At the very least, your SEO company, PPC manager, PR or social media marketing person will be happy – their job suddenly becomes a lot easier to get better results.
I don’t know about you but I don’t own a website for fun. I own a website to make money.
The 3 key SEO principles
Good content, quality links and fast loading pages are what it takes to dominate search engines. The 3 key influencers of SEO haven’t really changed whilst I’ve been a developer and I’ve been doing it for over 12 years! However, the way you go about the process is constantly evolving and it’s very much different to what it was twelve years ago. I’m not going to talk about website content quality or the pros and cons of good or bad back links in this article, instead I’m going to focus on one of the three SEO key influencers: WordPress website speed optimisation.
Faster web page loading is better for SEO… a boost in speed = a boost in SERPs
Fast WordPress websites are more attractive to Google and rank better (“good for SEO”). Google actively encourages developers like myself to use it’s page speed tool to gain better speed results. Google released a statement in April, 2014 that states site speed is a ranking signal and is one part of the overall Google website ranking algorithm. So website owners can take their business fate into their own hands (just a little) by gaming the search algorithm to the max by building “a faster than their competitor website!”. Recently they’ve gone one step further and publicly announced site speed is a ranking factor on mobile search (see link at the top of the article).
You’ve probably browsed Google on your iPhone or mobile and seen the grey and white lightening icon next to a search result? Yep – Google even tells website visitors on mobile search if the search result is faster than the other results (before they click it). This also incentivises mobile users to click these results over others.
Enhanced visitor experiences decreases visitor bounce rates (fewer immediate site exists)
Providing a better than standard website visitor browsing experience is good customer service. I can say from around 12 years as a WordPress developer that visitor bounce rates and drop off rates that I see on Google Analytics are far higher on slow loading WordPress websites which are typically hosted with budget hosting providers. In my professional opinion a low tier or budget hosting provider typically charges around £50-£150 excluding VAT ($60-$200 excluding taxes) per year for a web hosting account.
People don’t like to wait in supermarkets to pay for their shopping and website visitors don’t like to wait for content to load on websites – especially when they
know “think” they can get the exact “same” from someone better a competitor where they wont have to wait in a queue.
Slow WordPress websites are loss leaders in the business sense and should be avoided at all costs if you want to maximise your ROI (return on investment).
3 fundamental factors that affect website page load speed
By isolating the three parts of a website speed we can enhance the overall speed and performance of any website and game the Google search algorithm by creating a faster than standard website that serves content to visitors quicker than 100% of websites ever speed tested in the World. Best of all Google will reward us on SERPs (search engine result pages) for doing so!
1. Domain DNS look up time
This is the time taken from when some types your website address into their web browser or clicks on a website link for the server that your website sits on to start loading website asset number 1. A web browser performs a DNS lookup to verify the IP address of the server to connect to, (in Chrome browser this is when you often see “Connecting…” bottom left hand corner of your browser when the screen is white) then the browser is connected to the web server, and the website content begins to load (as soon as the first asset begins to load on the webpage the Domain DNS look up has completed).
We are going to make the DNS lookup as fast as possible.
2. Server technology that powers the WordPress website
The hosting infrastructure (web server) often referred to as the hosting provider or hosting package plays a crucial role. If we expect our website to run like a Ferrari we need a supercharged engine to drive it! If I went into a Ferrari dealership and the salesman tried to sell me a brand new Ferrari for the same price as a Ford – I’d know I wasn’t getting a Ferrari and I certainly would know I wasn’t buying Ferrari speed performance! The fastest WordPress hosting platforms are expensive and good.
We are going to use a very fast WordPress hosting package that is specifically designed to ONLY power WordPress websites. A tailored hosting package will deliver precise speed, power and agility compared to a cheaper generic solution!
3. Website genetics and asset composition
How a website is built, the number, type and weight (filesize – kilobytes) of the assets a website uses affects page load speed. This can also vary page by page. On website speed test waterfall charts this is referred to as the number of “Requests”.
We are going to use a lightweight WordPress theme and optimise the theme for high speed performance without coding it from scratch! We’re also not going to make it look like an amateur has built it. The website we’re going to build has to have a real world business value.
Suggested Reading: Moz.com Faster Sites: Beyond PageSpeed Insights
Let’s get this party started :) The following is my account of how I build a 157ms page load speed WordPress website which looks good and performs better than the majority of the websites ever tested on Pingdom (99% of websites tested) and has the best grades possible on the current top 3 independent website speed test tools – GRADE A’s!
Let’s start from beginning, step by step, so you too can replicate the same success I achieved for you own business without paying a WP developer! Just follow what I did to achieve the same results and remember stay calm if something doesn’t go right and keep making headway to seek out the treasure of unrivaled WordPress website speed!
The WordPress Speed Up Optimisation Blueprint by Ben Llewellyn
Take a deep breath, “you got this”! Step one, make a coffee and read all the blueprint before attempting to do it!
What is a standard WordPress website page speed for a vanilla WordPress site install?
Answer. Around 0.721 seconds
To set a personal best time (PB), I needed to have a track record or in other words I needed to define a standard or benchmark WordPress website page load speed to beat. I setup a basic WordPress website running the twenty seventeen WordPress theme running on a standard web hosting package.
I only did the following:
- I removed all plugins (I didn’t install Google Analytics)
- I setup permalinks as the post name
- I didn’t change anything else in the WP dashboard
I did a quick speed test on pingdom.com which recorded a 0.721 second load speed. My goal was to make my new speed optimised WordPress website load quicker and look much better than this website.
Benchmark WordPress website page load speed to beat of WPStandardSpeed.com: 0.721 seconds (721ms)
I started from scratched
I wanted to build a new WordPress website because it would be difficult to write an article on how to optimise every current WordPress theme available (although there’s lots of things you can take from this article to do that)! I knew this was the only way I could explain how my readers could get the same speed results. So the process started with me buying a new domain name for my speed optimised WordPress website.
I purchased a .com domain name for my new speed optimised WordPress website
Domain TLD has some affect on SEO so it’s important not to make a rushed decision. Country level domains are geo targeted by Google. I found an available .com domain because I wanted to appear on Google.co.uk, Google.com, Google.us and other international Google an on Google search result pages. It’s more likely that a .com webpage result will be served on Google.us (and other international Google search sites) as opposed to a .co.uk search result (given other factors like for like are the same)! I wanted visitors all around the World to find my fast WordPress website, not just visitors in the UK searching using one Google search engine (Google.co.uk).
I settled on wpspeedupoptimsation.com. The WordPress trademark rules prevented me from using the word “wordpress” in my domain name without their expressed permission because it’s a protected trademark.
I purchased wpspeedupoptimsation.com from HeartInternet for £10.79 exc VAT per year a UK based hosting company. As a professional WordPress developer I purchase my domain names from the same place because it helps me to keep track of all domain renewals (I have around 200 domains which I manage on behalf of paying WordPress development, WordPress website maintenance, WordPress SEO company clients.
Fast DNS lookup demands a faster than normal DNS service
My domain name already came with a DNS service supplied by Heat Internet:
But I needed a premium DNS service because I wanted the fastest speed possible for DNS lookup.
Premium DNS lookup service
I created a DNSMadeEasy.com account and I paid $29 for 1 year. DNSMadeEasy provide outstanding DNS lookup times. I was motivated by their affordability and performance rank on dnsperf.com (in the top 10)!
How I connected DNSMadeEasy to wpspeedupoptimisation.com purchased from Heart Internet
I followed these 3 steps in the video
- Select the “DNS” Menu, select “Managed DNS”
- Click “Add Domains”, on the right
- Enter Domain Name(s) one per line (replace example.com with your domain anem). Click “Ok”
Once I clicked “Ok” DNSMadeEasy loaded a popup with the following nameservers (yours might be different):
HeartInternet DNS configuration
** IMPORTANT ** Making DNS changes to a domain name is a risky business, for starters any changes you make will make your website and email go off for up to 48 hours (sometimes longer). Secondly if you make a mistake you will have extended downtime! I purchased a new domain that wasn’t being used, so I could live with my website and email going offline whilst the DNS changes propagate.
Navigate to: www.HeartInternet.com >> Login >> Domain Control Panel >> [Select Domain Name] >> Change Name Servers
Then I made the following change in HeartInternet to use the DNSMadeEasy nameservers.
I waited for around an hour and my DNS had properagated (sometimes this can take up to 48 hours). I used whatsmydns.net to check the nameservers had changed.
This is what my DNSChecker result looked like, the DNSMadeEasy nameservers were showing meaning it had completed (nsXX.dnsmadeeasy.com):
DNS lookup speed
I ran two DNS look up speed tests using this DNS lookup speed test tool to verify a high speed DNS lookup.
WPStandardSpeed.com DNS look up average speed: 0.081 seconds (81ms)
DNSMadeEasy DNS look up average speed: 0.003 seconds (3ms)
Speed gain: 0.078 seconds (78ms)
Fast WordPress hosting account setup
Next, I setup my WordPress hosting! As a senior WordPress developer, I’ve used some very good and very bad hosting companies in my time. I’ve had the luxury of working on client sites and sampling pretty much all of the mainstream hosting companies over the course of 12 years development. I’ve worked with companies that employ thousands of people all around the World and I’ve worked with one man bands. To give you an idea of my experience with hosting companies: I’ve probably used around 30 of the top current just within the past 2 years and I’ve built hundreds of WordPress websites using lots of different hosting providers. There’s a big different in speed performance between the good and the standard hosting companies.
My preferred fast WordPress hosting company is WP Engine. They provide a very reliable hosting service, excellent live chat technical support, page caching, staging server, production sever, backup and recovery, CDN (content delivery network) and they manage security server side – so WordPress website owners don’t need to install security plugins to harden their WordPress websites (which slow WP websites down). More importantly WordPress sites load much more quickly on WP Engine servers!
I selected the WP Engine starter package and added the CDN option to it. A CDN (content delivery network) enables images and other website assets to be downloaded from a server closest to a website visitors geographic location. It improves content download speed for visitors worldwide – so it’s a must for high speed content loading.
I checked out and paid $50 per month! WP Engine are positioned at the high end for hosting, but I wanted a better than standard website speed and I was willing to pay whatever it took to get the enhanced performance! Based on my experiences as a WP developer, I knew without this my website speed just wouldn’t be fast enough.
WP Engine domain settings
I needed to tell WP Engine which domain was going to belong to my new speed enhanced WordPress website. To do this I logged into my WP Engine account, clicked on my install name and navigated to domains. I entered my wpspeedupoptimisation.com and www.wpspeedupoptimisation.com and pressed Add Domain. I had to enter the www version and the non www version of my domain for WP Engine engine to understand they are both the same domain.
Navigate to: www.Wpengine.com >> Login >> Install Name >> Domains
Then, to make my domain (www.wpspeedupoptimisation.com) my website URL I clicked Set as primary on the www domain entry. This made WP Engine display my website for my domain name as opposed to the demo speedup.wpengine.com testing URL.
I went back to my install overview page and made a note of my server IP address. I wrote my IP address down (because I needed it for the next step).
I pointed my domain to WP Engine in my DNSMadeEasy account
I logged into my DNSMadeEasy account and clicked on my domain.
I clicked the + icon under A Records. A pop up loaded and I entered my server IP address (from the previous step) into the form field.
Just like WP Engine, I had to create two records for my www.wpspeedupoptimisation.com and wpspeedupoptimisation.com (www and non www domain).
My DNSMadeEasy A Record settings looked like and had two rows:
I waited for an hour or so, then I typed my website URL into my web browser and it loaded my new WP Engine website which had been automatically created by WP Engine.
SSL (https://) is best
It’s best practise to run a website on https:// now a days as opposed to http://. Https was always seen by most developers as a “nice to have” feature of a website, but things have changed and moved on. Chrome browser now actively warns website visitors if they are about to access a http:// website – which I don’t want.
I logged into my WP Engine account and navigated to SSL and placed an other for my SSL certificate. It was free!!
Navigate to: Wpengine.com >> Login >> SSL
SSL Install Step 1 of 3
SSL Install Step 2 of 3
SSL Install Step 3 of 3
After completing the 3 steps above my SSL settings showed as “pending”
I waited for around an hour – then WP Engine emailed me to say my SSL was active. I tested https:// was working by visiting my domain name with https:// in front of it (https://www.wpspeedupotomised.com) and it loaded my WordPress website.
Final SSL settings
The SSL Let’s Encrypt™ certificate came free with my WP Engine account and took around 20 minutes to automatically activate. I didn’t need to confirm my email or do anything outside of WP Engine.
I setup https:// for all my WordPress URLs with WP Engine live chat
After successfully purchasing my SSL certificate, I logged into my WP Engine account and clicked on the live chat icon (located at the top right of the WP Engine account control panel). I live chatted to WP Engine technical supprt and asked them to change my website database URLs from http:// to https://. I asked them to change two URLs in my database to https://
- xyz.wpengine.com (in my case wpspeedup.wpengine.com) to https://
- http:// URLs to https:// URLs
This was a bit lazy, and I really wanted to use my favourite database tool to do this, but I also wanted to write an article that a non developer could follow. Besides, WP Engine have world class WP support (which I paid for) so I decided to get my moneys worth. After a few minutes of silent live chat (whilst the operator performed the request) it was complete. I graded the live chat 10/10. Make sure you grade them too – it helps the person at the end of the line!
I ran my first WP Engine speed test
I activated the Twenty Seventeen WordPress theme and repeated the same steps as before:
- I removed all plugins (I didn’t install Google Analytics)
- I setup permalinks as the post name
- I didn’t change anything else in the WP dashboard
WordPress Website Page Load speed: 0.495 seconds
Running Total Speed Gain: 0.266 seconds
Lightweight WordPress theme install
I sourced a lightweight WordPress theme that is remarkably lightweight and recommended by lots of well respected professionals online! It’s called Genesis Framework. It’s made by Studio Press and I wanted to give them a shout out because it’s made remarkably well. It’s recommended by lots of top web marketeers as well!
I paid $59.95 to downloaded the Genesis Framework theme from their website. I downloaded 2 zip files (1 was the parent theme and 1 was the child theme).
Parent theme installation
I logged into my WP admin, navigated to themes, clicked add new and uploaded the parent theme.
Naviate to: WordPress Login >> Dashboard >> Themes >> Add New
Child theme installation
I repeated the same steps, but this time I uploaded the child theme.
Once it was uploaded. I clicked Activate so that my WordPress website was running the child theme.
WordPress website speed test with the parent Genesis Framework theme and child installed and active
WordPress Website Load speed: 0.394 seconds (394ms)
Running Total Speed Gain:0.327 seconds (327 milli seconds)
Something you should know about the WP Engine cache
WP Engine recommends that you stage your WP site and not work directly on the live (production) server. The live server caches content which means some changes aren’t immediately apparent. My article however is aimed at “non developers” so we’re going to ignore this suggestion and not use any code editors or SFTP (secure file transfer protocol)! This does however mean you may have to hard reload (hard refresh) your web page to see changes or open an incognito window in Chrome to see new changes. These resources will explain how to do that:
I know this is a faff – but it will be worth it in the end and it keeps this article simple for you to follow.
Website speed graphs explained for speed gainers
There are broadly 3 key speed test websites that most of my WordPress website developer friends use.
A Pingdom speed test diagram height and width has a meaning.
Pingdom.com speed test digagram explained
Time in milli seconds (ms) runs along the top. The assets of a webpage being tested run down the page (on the left hand side).
A new row is a new website asset loading on the web page being tested. This creates a waterfall effect, cascading down the page. Assets load one at a time and the time taken to download is recorded. The next asset can’t load until the previous asset in the row above has loaded. Assets may include: 1 image, 1 CSS file, 1 JS file. Lots of assets makes a website speed graph taller (more rows) and the website load time becomes longer because lots of assets make a web page load speed longer. 10 website assets take up 10 rows, 50 website assets take up 50 rows and so on. In this article we are going to explore how to load as fewer WordPress website assets as possible without making the website look rubbish. There is a fine balance between number of assets used and website aesthetics. If we were just going for ultimate speed we would load zero web assets :) This however wouldn’t have a real World value for any business because a visitor wouldn’t be impressed once they arrived on the website.
Each solid bar in a row
A new bar (one bar per row) is the time taken for 1 asset to load. The time unit measurement is milli seconds (1000th of a second) e.g. 300 milliseconds = 0.3 seconds. The bar can have maximum of 6 parts in 6 different colours). The colours can are used to identify what the hold up is.
- DNS -Web browser is looking up DNS information
- SSL – Web browser is performing a SSL handshake
- Connect – Web browser is connecting to the server
- Send – Web browser is sending data to the server
- Wait – Web browser is waiting for data from the server
- Receive – Web browser is receiving data from the server
Fast is square and small
A fast website speed report has fewer rows with small and condensed bars. We need to make our Pingdom waterfall speed diagram look like a small square – this is the WordPress website speed sweet spot. We definitely do not want a big square and certainly not a long portrait orientation rectangle.
If you’re still unsure: do a pingdom speed test and click on the 1st column link (asset 1) – this will take you to the asset being loaded on your speed test for a particular web page. This will help you to understand that a website is composed not just of 1 asset but of sometimes 20, 50, or even 300 assets! Each row is the time taken to load just one website assets (one part of a website)!
The speed optimise goal is to reduce rows and move the bars further left (at the same time).
Bare in mind, when you optimise a website the scale of the waterfall digram becomes less (the diagram will always appear the same width).
WordPress admin dashboard speed optimisation settings and configuration
I took the following steps to get marginal WordPress speed gains. I knew these may not benefit me solely, but I was fairly sure combined with lots of other steps they’d provide a few milliseconds of speed gain.
I removed all plugins (besides from the 3 mandatory WP Engine ones)
I didn’t have any additional WordPress plugins installed besides the four mandatory WP Engine ones. They’re required to make WordPress run efficently on WP Engine servers and besides you can’t remove them! In my install I had 3 X Must-Use Plugins and 1 X Drop-ins.
Navigate to: WordPress Website >> Login >> Dashboard >> Plugins
I removed all themes except my active Parent and Child theme
Navigate to: WordPress Website >> Login >> Dashboard >> Themes
I remove all comments and deleted them from trash
Navigate to: WordPress Website >> Login >> Dashboard >> Comments
I removed all posts and deleted them from the bin
Navigate to: WordPress Website >> Login >> Dashboard >> Posts
I removed all page and deleted them from the bin and then created my homepage
Navigate to: WordPress Website >> Login >> Dashboard >> Pages
I configured the General Settings
Navigate to: WordPress Website >> Login >> Dashboard >> Settings
I configured the Discussion Settings
Navigate to: WordPress Website >> Login >> Dashboard >> Discussion
I setup permalinks
Navigate to: WordPress Website >> Login >> Dashboard >> Settings >> Permalinks
I setup the Reading Settings to assign my new homepage
Navigate to: WordPress Website >> Login >> Dashboard >> Settings >> Reading
PHP 5.6 speed test
I ran a new speed test to gauge the speed performance before I did the next steps.
There was zero speed change after making the WordPress Admin changes above! But I had to do them to absolute sure either way.
PHP 7 setup
I logged into my WP Engine and live chatted with the support agent. I requested my install to be upgraded to PHP 7. They CC’d me in on a support ticket and I had to wait for a little while for this to complete.
PHP 7 speed test
I ran a new speed test on my website but this time it was running the latest PHP 7 version.
There was zero speed change after upgrading to PHP 7.0! At least I knew. To be frank my WP site was so light at this point that a PHP 7.0 upgrade would probably only be noticeable on a website loading more than 16 assets.
Nitty gritty speed enhancement row by row
This was my latest speed graph from the PHP 7.0 speed test on Pingdom.
I analysed my speed graph. I reviewed each of the rows to evaluate if I could gain any further speed gains. I concluded the following:
- https://www.wpspeedupoptimisation.com/ – [No change]
I was happy with the DNS lookup speed after all the wpstandardspeed.com DNS lookup was much longer!
- wp-emoji-release.min.js -[Change]
I removed this. I didn’t want emoji’s on my webpage.
- style.css – [Change]
After inspecting the .css file I had two options: remove it and loose the site site styling completely or compress the file using a stylesheet magnification tool. I compressed the file using CSSMinify.
- https://fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400i%2C600%2C700&ver=2.6.0 – [Change]
I realised by using a default browser font, I would save 3 X asset requests (1 X CSS file and 2 X .WOFF font files served from Google Fonts googleapis.com) = 40.1kb (around 33% of my total website assets). I removed the custom font files. I can cope with using Arial!!
- jquery.js – [No change]
I compressed this file.
- query-migrate.min.js – [No changed]
I did not need this file.
- hoverIntent.min.js – [No change]
I did not need this file.
- superfish.min.js – [No change]
I did not need this file.
- skip-links.min.js – [No change]
This is used by screen readers which are typically used by visitors who are visually impaired. I didn’t want to eliminate this because it would cause accessibility issues with my site. I combined this to 1 scripts file.
- responsive-menus.min.js – [No change]
I knew this file was being used by my theme to make the responsive menu and it was already optimised by being minified. I combined this to 1 scripts file.
- genesis-samples.js – [Change]
I did not need this file.
- wp-embed-json.js – [No change]
I dare not change the WP core files because it can put you in a WORLD OF PAIN ANYTIME IN THE FUTURE!
I made the developer changes to my theme. I found this GeekFlare post highly useful – they have an excellent functions.php optimisation article and I also used InfoPhilic’s jQuery migrate removal technique. I used both of these sources and my own techniques to create a WordPress speed optimised functions.php file in my child theme. Yes, we are skipping the explanation and process here to save you time, to save me time and to prevent a headache for both of us. You’re welcome to use my optimised child theme which is readily available here :)
Note: For this theme to work you will need to pay and download the Genesis Framework Parent theme here.
I removed my current active child theme and replaced it with this child theme
Navigate to: WordPress Website >> Login >> Dashboard >> Appearance >> Themes
I removed my current child theme.
I uploaded my new Genesis Speed Optimised Child Theme and activated it.
Which is fastest of the king SEO plugins? SEO Yoast or All In One SEO Pack?
Genesis theme comes with SEO settings built in, so you don’t need to slow your WP site down by installing an additional SEO plugin! So I didn’t have to install either of these.
I ran and installed WP Optimize
I downloaded the WP Optimize plugin and uploaded it as a plugin, activated it and ran the full process.
I then de-actived and deleted the plugin.
The speed gain potential was very minimal (if any), but it only took a 1 minute to do. So I did it. I’d almost run out of things to try to get a WordPress website speed boost.
Page header shortcode made a visually stunning homepage without requiring images
I created a neat little custom shortcode in the child theme that you’ve just installed. The shortcode puts a responsive css colour gradient header on a page/post wherever you place the shortcode. It’s a good substitute for an image header because it doesn’t load an image asset, it’s lightweight, loads a small snippet of CSS code and looks amazing. It works on modern web browser too!
This visual impact was what my speed optimised web page was missing.
I added this shortcode to my homepage using the visual editor:
[gradientheader icon=”⏱” headline=”One of the FASTEST WordPress websites in the World” subheadline=”51.8kB – 5 requests – Grade A (100%) page speed score – 157ms page load (London, UK)” button=”Download WP theme” buttonurl=”https://www.slibdesign.com/wordpress-speed-up-optimisation-blueprint/”]
It added this to my page:
The WP Engine Finale
The last steps were the easy steps! To wrap everything up, I activated the WP Engine speed control options in my Wp Engine control panel.
I turned on the CDN
WP Engine >> My Account >> Utilities
I Turned On The CDN
I turned on object caching
WP Engine >> My Account >> Utilities
I cleared the cache
WP Engine >> My Account >> Utilities
Verified the CDN was active
I visited my website in my web browser. I right clicked on my webpage and clicked view source. I need to check the CDN had activated.
Random characters had appeared in my website file names – so I knew the CDN was on and working.
My WordPress speed up optimisation speed mission was finished
I ran a speed test and my new WordPress website loaded in 0.157 seconds from London (GTMetrix) and 0.325 seconds from Stockholm.
The final outcome of following the WordPress Speed Up Optimisation Blueprint was: I had built one of the fastest WordPress websites ever built – faster than 99% of websites tested on Pingdom.com.
GT Metrix PageSpeed Score A (100%) & YSlow Score A (100%) – Tested from London, UK
WordPress Website Page Load speed: 0.157 seconds (157ms)
Running Total Speed Gain:0.564 seconds (564 milli seconds)
Pingdom Score A (100%) – Tested from Stockholm, Sweden
WordPress Website Page Load speed: 0.325 seconds (325ms)
Running Total Speed Gain:0.396 seconds (396 milli seconds)
Ben’s WordPress Speed FAQs
I get asked quite a lot of questions regarding WordPress site speed. So here are the answers to some of the most frequently asked questions.
I started the WordPress speed optimisation process on a Friday evening around 5pm. I’d successfully setup my hosting account by Friday night and performed the DNS update on my domain (20% complete).
On Saturday I had performed around 80% of the WordPress speed up process. Finally on Sunday I completed the process by the early afternoon.
My way of working is probably going to be a bit quicker, than someone doing it for the first time. Having said that – I was also writing and taking screengrabs and running speed tests throughout the process. I also had to fine tun the WordPress theme.
I’d allow 1-2 days to complete the WordPress Speed Up Optimisation Blueprint. It’s not hard, but all the steps need to be completed in the same order.
If you want to Increase wordpress speed without following the blueprint, there’s still a lot of valuable information you can take from it. Here are my top 4 WordPress speed optimisation tips:
- DNS Look Up Speed – DNSMadeEasy.com
- Host with WPEngine.com
- Install and run a lightweight and stable WordPress theme. Genesis Framework have a lot of Child themes to choose from!
- Don’t install any additional plugins that you absolutely don’t need
Pingdom dot com, GT Metrix dot com and Google’s own PageSpeed Insights.
Chrome browser also has a built in speed tester. You open it by following these steps (you don’t need an additional extension – it’s part of the core browser functionality):
- Press F12 on your keyboard to open the developer toolbar
- Then click on the the “Network tab”
- Click the “X” to close the developer toolbar
You can use this if you’re developing your WordPress website locally on a localhost or private web server.
I think if you’re in the position where you’re installing plugins to try and obtain speed gains – it’s probably not going to be as beneficial as following the WordPress Speed Up Optiomisation Blueprint.
Good question! I think this question is website specific. For example, does your site use too many plugins? Does your site rely on too many third-party assets? The answer to these questions will influence the solution to the problem.
Anything I say here is really speculation without understand the site you’re trying to speed optimise.
If you’re WordPress admin dashboard is running slowly it’s most likely to do with your server performance or the type of hosting package you have. I don’t notice any admin speed performance issues with sites running on WPEngine.
There are plugins that kind of do what the WordPress Speed Up Optimisation Blueprint does…
- Page Caching
- CSS Minification
But you have to load additional assets onto your WordPress website pages by installing WP plugins. That’s why I haven’t discussed this approach.
During my research, I found lots of articles approaching speed optimisation this way but there wasn’t 1 common standard to do it right to a new site, first time around, until now.
You don’t. The way WordPress queries pages can’t be altered. It’s part of the core functionality of WordPress.
The easiest way to speed up your database queries is not by making a page run lots of queries.
- Limit your blog posts to around 10 posts per page
- Don’t use lots of widgets on the same page or footer to display page links or post lists
- Don’t bolt on lots of things to WordPress beyond the core functionality
- In the blueprint I installed the Wp Optimize plugin to optimise the mysql database linked to my website – do the same. Then de-activate and delete the plugin
I check WordPress speeds fairly regularly. It’s a good idea to keep a check on page speed especially if you’re running advertising campaigns!
From personal experience I’ve found running regular speed checks is a way to ensure your CDN is always active (you may have turned it off to do site work or development). Slow speeds will identify a site issue and flag that you might need to investigate it.
You want a WordPress website that loads as fast as possible.
Tip: Install my Speed Optimised Genesis Child Theme + Genesis Framework Parent Theme, run a speed test and compare the speed test to same site running your theme. If there’s a big different in speed you know your theme needs lots of speed optimisation.
If you want a before and after figure – I’d always aim for at least 50% quicker after optimisation. Especially if your site has E and F grades on Pingdom dot com.
This is probably related to your WordPress hosting. I generally see long ajax lags on shared server environments hosted with budget hosting providers.
- The American spelling is: WordPress speed Optimization
- The British spelling is: WordPress speed Optimisation
It’s British thing?!
This article covers both WordPress speed optimization and WordPress speed optimisation. They are the same thing!
Dedicated Servers (Various providers)
VPS Severs (Various providers), Lots and lots and lots of shared hosting providers (Lots!) – Including but not limited to:
- Heart Internet (Host Europe)
- WP Engine
- 123 Reg
- InMonthion Hosting
- Amazon AWS
And lots more!!
As fast as possible. If you have identified your competitors – use their page speeds as benchmark times to beat.
Yes. I charge by the day.
Comment below or drop me an email via my website homepage contact form.
This article is a true account of my steps and my results ONLY. Website site speed is subjective. It is affected by many factors including your location. Therefore to replicate the same speed results in milliseconds is virtually impossible. Following this guide will not guarantee the exact same results for you.
After adding more content to the demo speed site, the speed of the website did slow down. This is the full report after adding lots of content to the website. The site speed when tested from London on GTMetrix dipped ever so slightly to 208ms. This speed dip was recorded and only notice-able after this article was created, published and more content was added to the speed optimised WordPress website (after the 20th July 2018).