Here’s my #1 problem: I’m impatient. I want everything I decided I need yesterday. I don’t want to wait, I don’t want to talk to anyone, I just want it right now. I recently bought a brand new iMac and the 2 week long delivery wait was excruciating.
Here’s the kicker, I’m not alone.
It seems that people like us and possibly the rest of humanity has some form of ADHD and unless we get what we want right now, we jump to the next thing. That’s why our websites HAVE to be fast and beautiful. Because otherwise, your visitors are going to jump in a new tab and go to your competitor.
A Few reasons why you'd want to work on your site speed:
- Higher page speed is highly correlated with cart abandonment and bounce rate
- Page speed is a Google ranking factor. Faster = More traffic
- Faster sites bring better user experience.
The issue is that most of the time when people talk about site speed, I get lost. They talk about apache optimisation or server config files and to be honest, as a non engineer, I’ve always felt this was beyond me and I could never get a fast website unless I dropped thousands of dollars for someone else to do it for me.
This was annoying because site speed is important both for search engine traffic and conversion rate optimisation. But I dug in and decided this had to be figured out. To be honest, I even broke Health Ambition a few times in the process by messing around with the DNS but I finally made it.
Our home page now loads under 1 second instead of 4. That’s a huge improvement and our analytics testifies as you will see bellow.
Before you start commenting I’d also like to say this very site has not received this treatment yet and could do with loading a little faster. It’s on my todo list, retain the hate in the comments :).
What you will learn
The Benchmark & Results of This Guide
How is this guide different than most of the guides you’ll find online? Well, the fact is that I’ve actually executed all the things I’ll be talking about on our website Health Ambition.
So we’ve been very negligent of our site speed however the before results are not that bad. That’s partially due to Performag, the theme that was developed specially for us by the guys over at thrive themes. Before we switched to their theme, the site was performing in the mid 50’s but I didn’t take a screenshot then.
After working on the site for 5 hours, here is the result I managed to achieve. It’s not perfect and I didn’t break in the 90’s for the Google tool but according to Pingdom, the site loads in under 1 second and is faster than 90% of all tested websites.
Moreover, this is our analytics progression since we’ve made the changes. As you can see, everything is green and 8.35% page view growth for us means an extra 20,000 in just under a month. Plus, the bounce rate is slightly better and so is the exit rate and time on page.
Now let me show you how exactly I achieved that and how you can do the same.
The Step By Step Plan
Step 1 – I swapped for a speed optimised theme
What this tweak does: It gives you a wordpress theme that’s already page speed optimised out of the box
Why do it: Your theme is essentially a layer of WordPress that renders a large part of your content. It is also the code sent to the browser of your visitors. If it is poorly optimised, your pages will be heavier and slower.
Cost: $49 one off.
Alternative: Pick any available theme and pay a page speed expert to optimise your theme (several hundred dollars)
Nothing gets me more excited than going over on Theme Forest and browse theme to instantly get dozen of website ideas. However there’s a problem. Most themes on most marketplaces are built to look good and have fancy effects.
Because it makes them sell more. People rarely think of performance when they pick a theme because design and looks are so much more vivid and appealing to their emotional side at the time.
At the time I decided the site needed a redesign, the guys over at Thrive Themes reached out to me and offered to build the best authority site WordPress theme on the market for me (Performag). And one of the main criteria for it was page speed.
This was achieved using the following methods:
- No unnecessary fancy effects, just simplicity and speed
- Reducing the number of plug ins needed by building in ad systems, sharing systems etc.
- Reduce the number of elements loaded on mobile
I lost the screenshot but our page speed was initially at 55 and bumped to 67 after switching themes. Not bad.
One good thing the guys over at Thrive Themes included is that they automatically compress your new images through kraken.io, the best image optimisation service out there but I’ll talk about it later.
How do you get it done for your site?
- Go over on Thrive themes and pick a theme that matches what you want your site to look like.
- Once you purchased it, go in your WordPress Dashboard and click on Appearance > Themes > Add New.
- Click on upload theme and upload the theme file you downloaded from Thrive Themes.
- Activate the theme and enter your license code in the thrive option settings.
- Go in Appearance > Customise and edit the design of the theme to match your brand.
- Go over the main pages of your sites and make sure nothing broke with the new theme and manually fix them.
Step 2 – I upgraded our hosting
What this tweak does: It recommends a hosting provider that has been better and faster for us than many others on the market.
Why do it: In reality this is more complicated to explain. In a nutshell your hosting is the computer that serves your files and it’s internet connection. Your hosting provider also affects the uptime of your site.
Cost: $24.95/month for up to 5 sites
Alternative: Cheaper but slower shared hosting or more expensive less performant “WordPress Hosting”
I have to say, our hosting was not bad but it was not ideal either. We used to use Synthesis by Copyblogger. When I was running the page speed test, it kept returning the recommendation “improve server response time”. This basically means that our server was not great given the volume of traffic we were dealing with.
Add that to the fact that we were not able to run image optimisation services, it clearly was not worth the $150+ we were paying monthly.
Enter Traffic Planet Hosting
After reading several blogger’s reviews, I decided to give a shot to Traffic Planet Hosting. The reason I went for them is because they actually rely on Amazon S3 in terms of server so that despite the fact that they’re a small company, they rely on one of the strongest server infrastructure in the world.
On top of that, they offer a top notch 24h service. I’m a bit of a night owl and even bugging them at 2am on the chat, they’ve always been able to help me. Not bad.
But the real advantage of Traffic Planet Hosting in the context of this post is that I managed to bump my page speed from 67 to 71 after switching to them. Not a ton but take into account the fact that I was already on a hosting considered premium and fast. If you’re on something like Bluehost, you will most likely see higher gains.
If you couple that with the fact that I literally saved $600/year in hosting costs and they did all the site transfers for me, this was an operation that was worth it and did help me get my page loading speed under 1 second.
Their plans start at $24.99/month. It’s not the cheapest and if you’re just getting started I still recommend Bluehost because it’s good enough for a first site.
But as soon as you want to move to something more robust with real support and optimised for WordPress hosting, I now recommend Traffic Planet Hosting over WPEngine or any other both for their price and performance.
How do you get it done for your site?
- Go over on Trafficplanethosting.com
- Select the plan you need for the amount of sites you manage (most of you should be fine with the cheapest plan)
- If you want them to transfer your sites from your previous host, submit a new ticket with your hosting and WordPress log in information, they’ll do the rest.
Note on site transfer: They transferred 9 sites of ours in 24 hours, it was all pretty good but some images got lost in the transfer. Make sure you make your own back up before changing hosting company.
Step 3 – I fixed our images
What this tweak does: It allows you to shrink your images using various image optimisation algorithm directly from your WordPress dashboard without quality loss.
Why do it: Images are the heaviest part of most websites, shrinking images down makes your pages much smaller and faster.
Cost: from $9
Alternative: Free less capable image compression tool smush.it
In 90% of the cases, images are the biggest files to download in a web page. Actually, they are 70% of all bandwidth usage world wide. That’s why they are the one thing you can make significant page speed gains on.
See, there are different image compressing services that allow you to shrink your images, thus making your pages faster to load. The 2 main contenders are Smush.it by Yahoo Yslow It and Kraken.io.
They can both be installed as plugins on WordPress which is why I retained those two and basically run image through their API as you upload them. If you use a Thrive theme as recommended above, the Kraken subscription is included so you don’t need to worry about this step.
The difference between the two is that Kraken is largely superior however it is a paid service while Smush it is only half as good but free. Decide with your wallet what’s the best opportunity for you.
The reason I subscribed to Kraken was to optimise our previously uploaded images as Thrive themes only optimises the newly uploaded images. For $9 of credit I was able to optimise our entire image library and reduce the size of images by up to 85%! That’s huge!
The site felt significantly faster and lighter after we’ve done this change. It’s hard to give a benchmark as the speed gains vary from page to page but some of our pages went from several megabits to a few hundred kilobytes. Not bad for a $9 one off investment.
How do you get it done?
- Go over to kraken.io and pick the $9 plan unless you have a huge image library
- Go over on WordPress.org and install the Kraken .io plugin and add your api key in the plugin settings
- Go in your media library, select everything and click on the “krak ’em all” button, select lossy and run the plugin
- Repeat the operation on every page of your website.
Step 4 – I setup caching properly on our domain
What this tweak does: Because your CMS dynamically generates pages on every load, “caching” allows your website to not regenerate fixed content with every page load, speeding up the generation of the page.
Why do it: Because it’s free and it’s a one off task that permanently makes your website faster
Alternatives: Not using caching
I have to admit it, WordPress has changed my life. I’m not a coder and it gave me the tools to compete with web designers when it comes to creating websites. However, because of the way it works, it needs to compute a lot of data each time a page is loaded.
Caching helps make this job easier by preventing your website from having to recompute the whole page and basically “save” the work that has already been done. In practice that means that things like your header, your sidebar, your footer etc that tend to be similar across pages don’t need to be downloaded over and over again.
The recommended WordPress plugin to setup page and browser caching is W3 Total cache. It’s the most popular in this category and probably the most integrated one. It plugs in Yoast SEO, it plugs into most Content Delivery Networks.
Beware though, if you set it up wrongly, this plugin can hurt your website and sometimes completely take it down.
How do you get it done?
- Go in the WordPress plugin search engine and search for W3 Total Cache
- Install and activate the plug in
- Go in Performance > General settings
- Activate Page Cache, Minify and Browser cache and click save
W3 Total cache is a tricky plugin and could break your site.
Step 5 – Install Google page speed module
Note: It seems like Google just pulled that one away just as I published the post. However, you can install the same set of scripts on your own servers for free with the page speed module. Check it out here.
What this tweak does: It uses Google’s own servers and algorithms to serve your website and further speed up the loading with things like above the fold loading priority, lazy loading of images etc.
Why do it: Because it’s free and if one of your motives for improving your page speed is search traffic, who better than Google to optimise it for you passively ?
Cost: Free (for now)
Alternatives: Custom coding and site speed consulting
I consider myself pretty smart, but I’m sure Google’s Phds are probably smarter. The Google page speed service is (for now) a free service offered by Google that allows anyone with a website to leverage the infrastructure of Google to serve some of their resources.
Here are the main features that come with Google page speed:
- Serve important files from Google’s local data centers (acts as a CDN powered by Google’s network)
- Clean up your code to reduce it’s size
- Optimises the load priority to load visible content first (perceived loading speed improvement).
- Resize images to rendered size.
One thing that’s very interesting with this service is the “perceived” page speed boost. That means that they prioritize above the fold content to load first, thus making your site feel faster for the visitor (and is a boost for your SEO page speed core).
Another interesting feature is that the service is basically a free CDN and that it feels much better than the free version of Cloudflare. Usually, premium CDN services such as Max CDN start at $9/month. That’s a $108/year saving along with the optimisation of your code.
If you want to understand how the service works technically check out this video:
Here you have it. After doing a lot of online research, I’ve applied these 5 things to our website and managed to reach the top 10% of websites in terms of speed despite the fact that I started very low.
Do I understand the exact technical implication of each step? Of course not. I’m not an engineer and a lot of the suggested steps rely on advanced web technologies that even most engineers could not necessarily explain.
But the proof is in the pudding: it works and it’s cost effective. If you were to apply everything you found in this guide, you’d be looking at a $58 one off cost along with a $24.99/month cost for hosting instead of a $7.99 for the cheapest hosting providers.
That’s a tiny cost compared to the alternative: hiring a high end dev to do all of this for you for a lot of money.
I’d love to get your feedback in the comment section on this one and maybe learn the other tricks you guys have used to make your website faster!