Improve Website Speed – Average Page Load Times Under 1 Second on WordPress (even on Bluehost shared hosting)

“Your website is faster than 98% of all tested websites”

Note: make sure you read (or scroll) all the way to the end of this post to see an even more impressive screenshot!

Now that’s what I’m talking about!! I can’t tell you how long I’ve been obsessed with my website speed and page load times. I thought I had tried just about everything to improve website speed on all of my sites. I’ve even gone to great lengths and went so far as to move several of my sites to one of the best and fastest (and more expensive) hosting providers that exists for WordPress users. I’m currently paying $104 per month for that hosting plan – and I still feel like it’s worth every penny.

But now I feel like I’ve really cracked the code! I’ve finally figured out how to make my sites on WPEngine even faster (average load times under 1 second). But here’s what is even better. It’s working for my sites on Bluehost shared hosting too! I’ve gotten my average load times on my Bluehost sites to under 1 second as well! Many of them are closer to half a second – which is faster than about 95% of ALL tested websites. This is insane!

And here is the very best part. The website speed improvement tips that I’m about to show you can be done completely for free! You too, should be able to get your WordPress site(s) to load in under 1 second – even if you’re on a cheap shared hosting plan.

Note: This post is kind of long (over 4,000 words). Feel free to grab the shorter Cliff Notes version if you’d rather cut out all my fluff. 🙂

Grab the Cliff Notes version of this post

Testing Site Speed or Page Load Times

Pingdom

One of the most popular and widely used website speed testing tools is made available by Pingdom.com. It’s free to use. All of the screenshots you’ll see on this page are taken from tests I’ve done using that free tool. Go ahead and test your own site right now. Here is the link – http://tools.pingdom.com/fpt/

Important – make sure you test your site several times. Every single time you test, your results will be different and they can vary by as much as a few seconds. There could be several reasons for this. One of which is where the test is originating from. Make note in any of my screenshots (or on your own results) the criteria that is displayed in the box that shows your results:

• you see a tiny screenshot of the page being tested
• the URL is displayed in big bold letters on the top
• the location, date and time are displayed on the next line
• test results and stats are displayed in nice boxes just below that
• a comparison metric is written below that – your website is faster than…
• and some social sharing buttons at the very bottom

The biggest varying factor that I’ve noticed, after performing hundreds and hundreds of these tests over time, is the location that the test is originating from. For example – when tested from countries other than the United States, matt76allen.wpengine.com will sometimes show page load times of over 2 seconds. But when tested from locations within the U.S., my page load times are always right around 1 second and usually below 1 second.

For this reason – I always test my sites 7 to 10 times and just make a mental note of the average. If my site is targeting mostly a U.S. audience, I will write-off (or ignore) the slower results from other countries. And no – you cannot control where each test is originated from. It seems to be totally random. Just run the test several times and you’ll see what I mean. Again – here is the link to test any site that you want on the free tool from Pingdom – http://tools.pingdom.com/fpt/

Screenshots

Now that I just explained the randomness of the varying results that you will get – it will make sense that you can’t trust or believe just one screenshot. For example – if I’m trying to show off my website speed – it makes sense that I wouldn’t share with you one of my bad screenshots. While running my speed tests, I could get 7 or 8 results in a row of load times close to 2 seconds. Then all of a sudden one really fast one comes through at under 1 second and I take a screenshot of just that one and post it in a blog post.

Kind of like that screenshot at the very top of this page. That’s one of the fastest times I’ve ever seen for this blog! Since taking that screenshot, I had to make one necessary change and my average load times are closer to 1 second now. But I put that screenshot at the very top of this post anyway. For obvious reasons. To grab your attention!

A better and truer representation would be to post several screenshots, or even a video of yourself performing all of your tests. Even better yet – invite your audience to test your site themselves! Go ahead – perform your own tests for the sites that I am about to show you.

My Dumb Passive Income blog on WPEngine hosting

Note: Since taking these screenshots, I had to disable one of the functions that was speeding up my site because it was causing one of the effects on my site to not work properly. The certain effect was more important to me than half a second – so currently my page load times are closer to 1 second (usually just under 1 second).

My Miter Saw Review Niche Site on Bluehost shared hosting

Improve Website Speed in 4 Easy Steps

To be completely transparent and clear – I am not an expert. I am just a dumb truck driver who runs websites and blogs on the side as kind of a hobby (that makes a little bit of money). I am not a coder and I don’t understand most of the back-end stuff that goes on with a website.

Just about everything I do within WordPress is fairly simple and most of my results are achieved by taking advantage of plugins that were created by people who are much smarter than me. Making my websites fast is a prime example. I’ve enabled, activated and tweaked the settings in just a few plugins and programs in order to get the website speed results that I have today. Here is a short list of the 4 main things that I’ve focused on to improve my website speed and load times…

• Image file size and lazy load images and videos
• Caching
• Content Delivery Networks (CDN)’s
• Clean up and minify back-end html and code (stuff I don’t understand)

Make Your WordPress Site Faster

Optimizing or utilizing just those 4 things are what have produced the amazing speed results that I am experiencing. I’ve heard that it helps to use a good clean theme too – which is not a problem for me. All of my sites are either on Genesis themes or on the Ultimate Azon theme – including both of the sites featured in the screenshots above. Dumb Passive Income is currently on the eleven40 Genesis theme and my Miter Saw Review site is on the Ultimate Azon Theme.

Don’t worry. I wasn’t going to leave you hanging. Below is a much more detailed description of each of those 4 elements that I mentioned in the short list above. Included are links to the specific tools or plugins that I use. Again – all of this can be accomplished completely for free. Although, some of the tools have premium versions that you could pay for if you want and if it makes sense for you.

Grab the Cliff Notes version of this post

Image File Size and Lazy Loading Images and Videos

Image File Size

Believe it or not, your image file sizes make a noticeable difference in your page load times. The smaller your file size, the faster your pages will load.

One easy and free way to get smaller image file sizes, to increase website speed, is to upload smaller files in the first place.

For example, if you know you will be displaying an image as a medium size (maybe 300×300 pixels) – don’t upload a massive original size and then have it displayed as medium size. Instead, use your favorite photo editing tool to shrink your image to the size you plan to display and save it to your hard drive. You’ll notice that the file size will be smaller than the original. Then upload that new smaller sized image to your website.

I choose to use a paid plugin to shrink my image file sizes, instead of doing it manually. I do this to save time and also to avoid the hassle factor. Plus, the plugin somehow optimizes my images and makes the file sizes smaller than I can possibly make them if I do it manually. I don’t understand it. I just use it.

WP Smush (Free Plugin)

In years past, there was a free plugin that did this called WP Smush.it. Earlier this year – the developers for that plugin decided to do away with the free option for their plugin. This was a real bummer for me (and many other WordPress users) – because I was using it on ALL of my sites. I ended up switching to a different paid plugin (mentioned below). But I just checked – and it appears that the developers have changed their minds! It is now called WP Smush and it looks like there IS a free version available. Here’s the link – https://wordpress.org/plugins/wp-smushit/

Kraken Image Optimizer (Paid Plugin)

This is the plugin that I use. Again, I felt like I was forced to use a paid plugin because WP Smush.it did away with their free version. But now that I’ve been using Kraken – I am very pleased. I paid $50 for their micro plan – which is good for an entire year. I loaded the plugin onto all of my sites and it works seamlessly without me ever having to do anything or worry about anything. I just upload my images into WordPress like anybody normally would, and the plugin takes care of minimizing and optimizing them in the background. (Note: I did have to manually tell it to optimize all existing images on my site when I first activated the plugin, but after that it works by itself and automatically optimizes all new images that are uploaded). Here is my affiliate link if you want to check it out – http://matt76allen.wpengine.com/kraken

Lazy Load Images and Videos

Lazy loading simply means that images (and videos if you have it set up that way) don’t load until they actually become visible on the page. In other words, any image (or video) that is below the fold will not load until the reader/user scrolls down to where the image is located in the post. This is genius – really. And it’s something I didn’t take advantage of on any of my sites until just recently. Mostly because I didn’t know I had the option.

You can even take advantage of cool effects, like making the images fade in when they become visible. I do this on all of my sites, just because I think it looks cool. I highly suggest taking advantage of one of the free lazy load plugins – especially if your site has a lot of images. Let me show you an example. The following site is NOT mine – but the page has a ton of images that are set to lazy load as the user scrolls down. Open the following link and scroll down the page and watch how their images fade in at the bottom as they appear – http://www.havingbabies.com/patient-resources/resource-links/.

Or check out one of my posts on this blog that includes a few images throughout the post and one video. You should be able to see the fade-in effect as you scroll down in this post. Watch for it. It happens kind of fast for images and not quite as fast for videos. Here is the link – http://matt76allen.wpengine.com/the-content-upgrade-strategy-growing-email-list/

Free Lazy Load Plugins

a3 Lazy Load – this plugin worked great and I had it on all of my sites – but then ALL of my images on my sites disappeared when I implemented CloudFlare (more on that below in the CDN section). I had to deactivate and uninstall this plugin and find an alternative. If you don’t plan to use CloudFlare – this lazy load plugin works great.

Lazy Load XT – this is the lazy load plugin I use now on all of my sites. So far, it has been 100% compatible with everything else I use to increase speed on my websites.

Caching

Without getting overly technical (because I can’t), I’ll do my best to explain caching. Actually – I’ll let somebody else explain it. Here is somebody else’s words explaining what caching is…

Caching is an area of a computer’s memory devoted to temporarily storing recently used information. The content, which includes HTML pages, images, files and Web objects, is stored on the local hard drive in order to make it faster for the user to access it, which helps improve the efficiency of the computer and its overall performance.

Most caching occurs without the user knowing about it. For example, when a user returns to a Web page they have recently accessed, the browser can pull those files from the cache instead of the original server because it has stored the user’s activity. The storing of that information saves the user time by getting to it faster, and lessens the traffic on the network.

The previous quote was originally posted on Citrix.com. Here is a link to the original article – https://www.citrix.com/glossary/caching.html

If you want to really dig into the details of caching and really understand all of the technical mumbo jumbo – I found this great caching tutorial – https://www.mnot.net/cache_docs/

2 Ways I Use Caching to Speed Up My Websites

For my sites hosted on WPEngine – I do not need to use caching plugins. In fact, caching plugins are disallowed by WPEngine because they interfere with the custom caching environment that WPEngine produces. WPEngine uses something called Evercache. It’s not something I can activate or deactivate – it just comes with the package and it’s automatic. I don’t worry about any settings whatsoever – which is one of the reasons I love WPEngine as a hosting provider.

Here is part of what WPEngine has to say about their custom caching environment…

The WP Engine EverCache system is also part of our “secret sauce,” and is often referenced as the most specialized server software linked with the internals of WordPress. EverCache serves common pages (such as home pages and feeds), on average, 4-6 times faster, than other, non-WP Engine servers…. Because of WP Engine’s EverCache, there is no need for site owners or developers to manage caching plugins. WP Engine takes care of that for you.

Previous quote from WPEngine.com – taken from this post – http://wpengine.com/our-infrastructure/

For my sites not hosted on WPEngine – I have to use plugins to achieve caching. In fact, the rest of my sites are currently on shared hosting plans through Bluehost. The following plugins are really easy to install, activate and setup – and they are essential to get your website to load faster.

Free Caching Plugins

WP Super Cache – this is the caching plugin that I currently use and prefer. Again, easy to install and setup. The navigation menus within the plugin are self-explanatory. I pretty much just use all of their recommended settings under the ‘Advanced’ settings tab.

W3 Total Cache – this caching plugin is probably the most popular one that I know of. I used it previously myself – but found it to be slightly more complicated to setup. Also, I was having some compatibility issues with W3 Total Cache in the past. It was causing certain things on my site(s) to not work properly. I know that plenty of people use this plugin though and have no problems whatsoever.

WP Fastest Cache – this is another popular caching plugin. I’ve never tried this one personally and have no experience with it. But I’ve heard it is just as good as the others.

Content Delivery Networks (CDN)’s

What is a content delivery network?

A Content Delivery Network is a network of hundreds of caching servers, positioned all around the world, which can store a local copy of your site’s content, and can instantly serve this content to visitors in that particular region. Normally, the content stored on a CDN includes your site’s static files such as images, JavaScript, and stylesheets. When a request comes in for content on the CDN, it automatically determines which of these world-wide servers is physically closest to the requesting browser, and the content is delivered from that location rather than your site’s server.

Previous quote from WPEngine.com – taken from this post – http://wpengine.com/our-infrastructure/

2 Ways I Use CDN’s to Speed Up My Websites

Throughout my first several years of blogging and running websites, I never even considered using a CDN. It sounded too technical and I figured that it wouldn’t make a very big difference anyway. Well – I’m here to tell you now, that using a CDN makes a HUGE difference in site speed and page load times. And it is super easy to activate and set up!

For my sites hosted on WPEngine, all I do is mark a checkbox and a CDN is activated for me. I don’t have to install any plugins or mess with any settings. It’s all automatic. WPEngine partners with a CDN service called NetDNA. Anybody can pay for and sign up for similar CDN services from a multitude of providers. I’ve heard that MaxCDN is a good and popular one.

But I have to be totally honest – I was only seeing a very minor difference in speed when I activated the CDN that came included with my WPEngine plan. And I never even bothered with CDN’s for any of my Bluehost sites.

CloudFlare

CloudFlare has been THE missing ingredient in my quest to produce the fastest websites possible and to obtain the fastest page load times. CloudFlare isn’t technically a standalone CDN service though. They offer much more. In addition to providing you with a CDN, they also provide several optimization and security services.

CloudFlare image originally posted here – https://www.cloudflare.com/overview

Best thing about CloudFlare? Their FREE plan is plenty sufficient to produce results like I am seeing and it can literally be setup in about 5 minutes.

I can’t mention CloudFlare though without telling you why I ended up trying it in the first place. CloudFlare is something I had heard about – but never took the time to fully investigate. I wrote it off as just another CDN service that was probably too technical and wouldn’t make a very big difference anyway.

But then I read this post on Chris Lee’s RankXL blog. He explains how he activated CloudFlare along with W3 Total Cache to improve his page load times from 9 seconds to about 2 seconds. He includes very detailed step-by-step instructions, with screenshots, for how to setup those 2 elements. As soon as I finished reading his post, I tried CloudFlare on one of my Bluehost sites and I was completely amazed by the results! Most of my Bluehost sites were loading at around 2 to 3 seconds on average. Just activating CloudFlare improved all of them to under 1 second (most around half a second) on average!

CloudFlare and WPEngine

I carefully conducted some research (I Googled it) before trying CloudFlare on my WPEngine sites. As it turns out, they are completely compatible. I left my CDN’s enabled on WPEngine and also activated CloudFlare for all of those sites and, again, my website speeds increased across the board! My sites were already fast on WPEnine (average load times around 1 second) – but now they are even faster (average load times less than 1 second)!

Setting Up CloudFlare

Setting up CloudFlare is not hard at all and you just need a tiny little bit of technical know-how that anybody can easily learn. Simply head over to CloudFlare and click the ‘Sign up now!’ button and they walk you through their easy 4-step process to get started, step-by-step. The only technical thing that you will need to know how to do is change your NameServers with your domain registrar. Don’t worry if you don’t know how to do this already. It’s really easy. Just go to wherever you registered your domain (GoDaddy, NameCheap, etc.) and access their Help menu and search for how to change NameServers.

Again – I can’t stress enough how big of a difference CloudFlare has made to speed up my sites and decrease my page load times. I was utilizing everything else I talk about in this post before – but my site speeds increased dramatically just by activating CloudFlare on all of them. And tweaking just one setting within CloudFlare seemed to make the biggest difference (more on that below)!

Clean Up and Minify Back End HTML and Code

This is the part I hardly understand. But luckily, I don’t have to understand it. I just need to know that it works and that’s pretty much all you need to know too. There are options within CloudFlare and within several of the caching plugins to ‘minify’ or ‘auto minify’ the source code on your website.

It is very important to note that you should not use multiple plugins or programs to do this simultaneously. In other words, don’t use the auto minify option in CloudFlare at the same time as using the minify options in your caching plugin. Activate one and leave the other deactivated. Personally, I choose not to use the minify options in either CloudFlare or any of my caching plugins. Instead, I use a separate plugin…

Autoptimize (Free Plugin)

Here is the description for Autoptimize, taken straight from the WordPress plugin directory – “Autoptimize makes optimizing your site really easy. It concatenates all scripts and styles, minifies and compresses them, adds expires headers, caches them, and moves styles to the page head, and scripts to the footer. It also minifies the HTML code itself, making your page really lightweight. There are advanced options available to enable you to tailor Autoptimize to each and every site’s specific need.”

Here is the link to check it out yourself – https://wordpress.org/plugins/autoptimize/

And here are some comments about the plugin from another one of its users…

A WordPress Developer recently suggested the Autoptimize plugin in a Facebook Group I follow. The plugin claims to “speed up your website and helps you save bandwidth by aggregating and minimizing JS, CSS and HTML.” I’ve implemented this plugin on several high-traffic WordPress websites and I’ve not ran into any issues. In all cases I have seen considerable performance improvements. There’s quite a few settings in the Autoptimize plugin so I will go through the options panel step by step.

Feel free to check out the entire post by clicking here and see his step-by-step options panel settings.

Important – Testing and Compatibility

This part is extremely important! Whenever you implement any change to your website, especially the things I mention in this post, you should test your site and make sure that everything works properly. Many of the things that I mentioned within this post may or may not cause certain functions of your site to not work properly. Functionality issues will vary for every single website and are typically caused either by your specific theme that you are using (and the way it is coded) or by other plugins or features that you have activated.

How to Test Your Website

To test your site, simply visit one of your webpages and scroll down and make sure everything seems to be appearing and working properly. Things to look for:

• images or buttons appearing properly – right size, right place, etc.
• hover effects over images or buttons working properly (ex: share buttons showing up? hover color effects working?)
• any Javascript add-ons or effects working properly (ex: Disqus comment system)
• other plugin settings/options working properly (ex: fixed widgets staying on page)

Make sure you activate plugins one at a time and then test. Each time you tweak settings within a plugin, test again. Do not activate everything I mention above all at once and then start your testing. If you do this, it will be much more difficult to narrow down which plugin/setting is screwing up your site (if any).

Make sure you delete your cache before each test! If not, your browser may be displaying a version of your site that was saved in your cache before you made the changes. Deleting your cache is pretty easy. Simply go to your cache settings page and locate the ‘Delete Cache’ button or option. Do that, and then refresh or reload the webpage that you are using for your tests.

Cliff Notes Version (plus all of my settings)

I realize this post was really long – over 4,000 words! So I created a shorter (Cliff Notes) version of this post and put it into a nice printable PDF for you. The Cliff Notes version cuts out all the fluff and delivers just the information you need to take action. It’s pretty much a nice, simple, step-by-step guide for you to easily reference while you’re implementing these tips on your own site(s). It’s totally free – just click the button below to access and I’ll get it sent right over to you.

Grab the Cliff Notes version of this post

Also included in the Cliff Notes are the exact plugins and settings I’m using to get these amazing speed results.

One more screenshot – for your viewing pleasure! 🙂

I’m always monitoring and testing my websites, and I was amazed (but not surprised) when the following results came through…

Your website is faster than 99% of all tested websites!

Again, this was for my miter saw review niche website which is on one of my Bluehost shared hosting accounts! Want to see the exact settings I use to achieve speed results like this? Grab my Cliff Notes PDF right HERE and I’ll show you.

Matthew Allen

Matthew Allen is a full-time trucker, part-time blogger, and imaginary entrepreneur. He's probably not the only trucker who calls himself a dumbass. But, he is the only known trucker who is blogging about passive income."Might be crazy, but I ain't dumb!" ~ Crazy Cooter (also Matt's CB handle) 

Matthew Allen

Matthew Allen is a full-time trucker, part-time blogger, and imaginary entrepreneur. He's probably not the only trucker who calls himself a dumbass. But, he is the only known trucker who is blogging about passive income."Might be crazy, but I ain't dumb!" ~ Crazy Cooter (also Matt's CB handle)