If you visit a website and it take ages to load the chances are you are going to leave and go elsewhere.
We live in a world where everything needs to happen immediately. A website loading is no different.
You have 3 seconds.
3 seconds to get the right information in front of potential customers or they are gone – and never coming back..
So where do you start?
Like most new websites that hit the internet these days this site uses WordPress for Content Management because it’s easy to use, has a million plugins (more on these later) that allow you to do things normal coding would prohibit and can be setup in a hour or so.
I like step by step guides that I can follow along with so this post is going to offer the same thing.
Step 1: Hosting
Hosting is the difference between a website that loads in 1 second or under and a website that loads in 5 seconds – not including any bloat from themes or plugins.
We use SiteGround for all our hosting because they are (in our professional opinion) the best in the business.
We particularly like their Chat function because they can and do resolve anything we ask them in a matter on minutes.
Another great feature of Siteground is their Website performance plugins. These guys really focus on site speed as one of their USP’s and it shows when you run a site on their platform.
You have multiple options available in your Dashboard:
Static Cache: The Static Cache option caches all static content on your site that includes images, CSS files, javascript and more. When enabled, all future visitor requests to your pages will be answered from the cached content and not directly from the server.
Dynamic Cache: Dynamic caching is the second layer of site performance improvement. It creates copies of your website’s dynamic content and stores them in the server RAM.
Memcached: The Memcached technology speeds up database calls, API calls and page rendering by storing data and objects in memory to reduce the number of times a database is queried.
By using this built in technology on the hosting side you can avoid installing multiple plugins to do the same thing which sometimes actually slow down your site and do the opposite of what they are designed to do – plus you can avoid reading multiple guides online to get them to work at all.
Step 2: WordPress Theme
I like my sites to look cool and while the default free WordPress themes are functional I prefer something a bit more stylish out of the box. We use Thrive Themes on this site and quite a few of our other sites because it’s awesome.
One thing to watch out for with your Theme is the coding bloat that some developers unfortunately leave in because they don’t understand the importance of website speed.
Pick any theme you like and run a Google search to see if anything comes up about performance issues. This might seem a bit archaic but any SEO worth his salt will concentrate on site speed and if there is a theme that loads slow you can be guaranteed somebody has written about it online.
A great way to see what other sites are using for their WordPress themes is to put their URL into a site like http://whatwpthemeisthat.com and if they are using a normal WP Theme this site will give you all the details.
Take this up a notch and spy on the plugins they are using as well by putting their URL into a site like builtwith.com. If their site loads really fast then they must be doing something right so stick to the same plugins if possible and you should be good to go.
Step 3: Plugins
Plugins for WordPress are great but use them sparingly otherwise your site load time will creep up quickly.
One of the reasons we use the Divi WordPress theme is because the platform does pretty much everything we need it to do straight out of the box.
For example: On this site we are running a few plugins in total because we can use custom snippets of code to do everything else.
Everyman and his brother has written plugins to do all sorts of things in WordPress but make sure you absolutely have to install one before you do.
A great way to see what other sites are using for their WordPress themes is to put their URL into a site like http://whatwpthemeisthat.com and if they are using a normal WP Theme this site will give you all the details.
Take this up a notch and spy on the plugins they are using as well by putting their URL into a site like builtwith.com. If their site loads really fast then they must be doing something right so stick to the same plugins if possible and you should be good to go.
In a lot of cases you can add small snippets of code to your functions file in a child theme to do the same thing without the overhead of another plugin.
A nifty tool to check you Plugin loadtimes in WordPress is called P3 Plugin Performance Profiler which incidentally is a plugin, but by running this you can quickly identify troublesome plugins and look for alternatives.
I have worked on sites with 30+ plugins installed and apart from being a mess they took forever to load.
Plugins should be a last resort if possible.
Step 4: Images
Any decent looking website is going to have an array of images spread through it’s pages and with the quality of digital cameras and even smartphones these days there are a lot of self proclaimed ‘expert photographers’ out there.
Sure you can capture quality images from a mobile device but don’t upload them straight onto your website. We see this all the time…
A webpage with plenty of easy to read text and a few images, but when you examine the images that are the wrong size for a start and then they may be over a couple of Mb’s in size.
This is going to kill your page loading times straight away.
A very handy tool we use is called TinyPng.
You can upload up to 20 images at a time and it automagically compresses the files for you without loosing any noticeable quality.
This is probably one of the quickest ways to speed up a website thats loaded with images…
Step 5: Testing (The Right Way)
I know quite a few SEO’s that obsess over site speed and I may fall into that bucket at times but it all comes down to what you are trying to accomplish.
If you have a basic blog with mainly text the site will always load fast – provided you have good hosting, a solid theme and limited plugins installed.
But, if you have very visual website loaded with images and high quality videos you are going to see a big difference in speed – but if your target audience requires these visually appealing images to convert into paying customers then you have to make some trade-offs.
Using Pingdom to test your website speed
A great way of checking your website for speed is with one of the many online tools. The image at the top of this post is from a site called Pingdom which measures the site speed based on a single user browsing your website from a pre-determined location.
If you look at the image above you will see this site you are reading has a super quick load time of just over 1 second and comes in 98% faster than the rest of the sites these guys have tested.
Now you need to take these numbers with a pinch of salt because they are based on a single user visit without any site load applied.
Google Pagespeed Insights for testing website performance
The next test I always run is by Google themselves. The Google Page Speed Insightswebpage is a great tool for getting an overview of how your site is doing.
They have started in that past that page load times are important for user experience so if you decode that message it means it will help you rank higher in the search results so why not focus on speed as a priority.
Here is an image of this site run through the Page Speed Insights tool.
Now as you can see there are still some issues that need to be resolved but hey, nobody’s perfect right.
One great addition Google gives you when you test your website is a download file full of optimised content. Most sites I run through this tool the first time around will have images that could be optimised and Google provides these for you – handy right…
Load testing a WordPress Site with Loadimpact.io
If you want to test you site under a more realistic situation you should take a look at loadimpact.com and run your URL through their platform.
The test I ran was from a server in Tokyo and simulated 12 users at the same time to check how the site performed under a bit of load.
The graph above shows the load time of my homepage over a 5 min testing period. The results look quite different to the Pingdom graph I showed you earlier but still spot on compared to other sites out there so I happy enough.
GTMetrix for Website Testing
The final test I usually run is with GTMetrix as this tool gives you even more insight into what is happening when a visitor loads your website. They have a very handy Waterfall graph that shows you exactly what is happening on page load.
Now you could obsess with all the different tools out there and spend a lifetime trying to get everything to 100% but it comes back to user experience – do you have the right content on your web page to keep the user engaged enough to read all your content and perhaps sign up to your list or convert into a paying customer?
These are the tradeoffs so don’t let speed hamper your ability to make money or deliver value to your customers – ever.
Step 6: Essential Plugins for Site Speed
We mentioned plugins earlier in the post but now lets look at some mush have plugins for your site to help speed things up a bit.
Autoptimize for WordPress is a plugin that we use constantly and it works seamlessly with Siteground hosting. It’s a great little tool for optimizing your CSS and JS files. This helps reduce load times considerably.
Setup is very straightforward and without too much hassle you can be up an running in a matter of seconds.
The main two things you want to concentrate on are CSS and Javascript optimization.
This may seem like there are plugins missing but as mentioned earlier SiteGround takes care of most of our page speed requirements at the hosting levelso take advantage of our 50% off offer and sign up today…
Step 7: Mobile Site Speed
One thing often overlooked by our customers is their mobile site.
Everything looks great from a desktop or a laptop but try browsing the site from a mobile device not connected to WiFi and it’s a very different story.
Those big fancy images have a place but not on a mobile optimised site.
There are a few ways to get around this though so don’t panic yet.
First up you could employ AMP on your website to take care of mobile page views. The AMP project was designed to speed up mobile browsing and once implemented the site visitor gets a stripped down version of your website. This is not ideal and not everybody’s cup of tea but the page load times are dramatically reduced once you get everything configured correctly.
It comes back to user experience again but studies have shown that a site that loads on a mobile device in under 5 seconds has the following:
You can upload up to 20 images at a time and it automagically compresses the files for you without loosing any noticeable quality.
This is probably one of the quickest ways to speed up a website thats loaded with images…
%
lower bounce rate
%
longer sessions
%
higher ad revenue
Now one thing to note is that during this study it was identified that the average load time for a website from a mobile device was 19 seconds and that 53% of users will abandon the site if it takes longer that 3 seconds to load.
We are an impatient lot aren’t we…
Another thing you can do is to use a Theme that is designed with a mobile first policy. This is becoming the norm and will only improve over time.
Mobile traffic has outgrown desktop traffic dramatically over the past number of years so make sure you fix this before your competition does…
And if you think your customers are not on mobile then think again… This report shows that 77% of Americans own a smartphone and as they become more tech savvy they will start shopping online for goods and services.
Can you really afford to miss the boat on this one – I didn’t think so…
Bonus Tip: Database Maintenance
WordPress uses a Database in the engine room and like everything in life it needs to be looked after.
Every time you create a new post or page WordPress runs a script that autosaves the content every 60 seconds or so and each of these actions is saved as a revision.
This can come in handy if you need to recover something or roll back some changes you have made to page content that din’t work out as expected.
Not turned on by default, you can find these in the Admin dashboard under ‘Screen Options -> Revisions’ when you are editing a page or post.
While these are handy you can tune the DB to only keep a couple of revisions instead of the endless copies stored.
To do this open up your wp-config.php file and add the following code:
Make sure to take a backup of the file content before you do anything and test everything out afterwards to make sure you site still loads. You may have to clear your cache to see the live site.
Fine Tune your database with this handy plugin called WPOptimize.
This lets you delete all the old post and page revisions and clean out any junk cloggin up your DB tables.
Wrapping Up
There are a million different ways to speed up your WordPress website and this is what works for us.
If you found this of value we would really appreciate if you hit one of the share buttons and if you have any speed tips you always perform on your website then let us know in the comments.
Thanks
Gary
You can upload up to 20 images at a time and it automagically compresses the files for you without loosing any noticeable quality.
This is probably one of the quickest ways to speed up a website thats loaded with images…