This post may contain affiliate links. Check out my affiliate disclaimer here to see what’s up with that. In short, it means I get paid a small percentage if you buy through one of my links, but it doesn’t cost you anything extra. And please know, I only ever recommend resources I believe in and use myself.
“Speed and responsiveness;” two terms Google has been harping on about for some time now when it talks about websites. That means web designers and bloggers everywhere should take note.
If your website runs like molasses down a screen or looks like a jumbled mess on a small display, then it is in danger of plummeting in the rankings and will quickly lose its ability to attract traffic.
There are a ton of reasons to improve your site’s responsiveness and speed. The customer experience is tantamount to improving conversions. If you make your customers happy while they are visiting your website you will make more money.
Statistically, a page with a load time greater than 3 seconds will have a high bounce rate (visitors leaving your site without doing anything).
With mobile use on the rise and the imminent release of Google’s mobile first index, it’s now more vital than ever that your website looks great on every screen, no matter its size. It also needs to run super quick.
Why Does Your Website Load Slowly and How To Speed it Up
There are a number of scenarios that can make a website sluggish, but the first thing you should look closely at is your hosting provider.
Examine Your Hosting Provider
You need a quality provider which uses servers powerful enough to process and display your website at speed – especially when your site is hosted on shared hosting.
The cheaper providers will shove a gazillion websites onto the one server. This means that you are sharing CPU time with all the other sites.
During peak load times your site – along with everybody else’s – will slow to a crawl as the server struggles to keep up.
IF you are serious about your blog then you need to find the few extra dollars each month for more bandwidth.
The extra bandwidth is worth it as you aren’t going to get far on a website that isn’t keeping it’s visitors or is falling out of favor with Google because of its lackluster performance.
Remove Unncessary Plugins
WordPress is a fantastic environment for creating cool effects and making it easy to do just about everything else to help your website stand out.
All this fanciness does come at a cost though, as plugins mean extra work for your server while it processes the code, and assembles your page behind the scenes.
Get rid of plugins you don’t use anymore, and delete the ones you know are slowing your page down.
Optimize Your Images
You’ve no doubt read about images increasing user engagement and keeping visitors on your page for longer, but they also come at a cost – which is increased page load times.
Optimize your images before you upload them to your web server. WordPress can resize them on the fly but this will increase the workload.
Creating images with the right dimensions and compressing them beforehand will create less work for the server to get them in front of your readers.
You can use image editors like Photoshop or GIMP (my favorite and it’s free) to clip your graphics to the right dimensions.
Use High Quality Images
Your readers shouldn’t see a drop in image quality when going from their mobile device to a desktop.
Small images may look good on a phone, but what happens to them when your reader switches to a large desktop monitor? Do the images now look blurry and pixelated?
If they do you need to start using images of sufficiently high resolutions that look good no matter what device your readers are using at the time.
Use the following CSS code in your style.css to ensure all images are displaying at their correct size on every screen.
Use Plugins to Speed up Page Loads
I know I said get rid of plugins you don’t need or are slowing your site down, but these ones will speed it up.
Use Image Optimizer Plugins For WordPress
I haven’t used WP Smush but have heard that it works well. It will also remove extraneous information from the image, such as GPS location data, to further reduce load times.
The average load time for my home page used to be well over 2 seconds, and sometimes over 5 depending on the testing location. EWWW has reduced this time significantly; right down to less than 2 seconds in a lot of cases – so it’s one plugin I highly recommend.
Plugins to Reduce Server Requests
If the web browser is making numerous calls to a number of these files it can really screw your load times. Unfortunately, most WordPress users are completely stumped when it comes to knowing how to work around this problem without completely buggering their WordPress install.
Autoptimize is a plugin you can use to get rid of this problem for you, automatically.
W3 Total Cache
W3 Total Cache is a complete toolset for reducing file requests, but, unlike Autoptimize – which is mostly set and forget, it does take some work.
I enjoyed Autoptimize for its ease of use but I want to squeeze every last ounce out of speed out of my site to get it in front of viewers quick as a flash, so I’ve switched over to W3 Total cache.
Rather than repeat what’s already been said you can get a better idea of how to use W3 Total Cache by going over to WPBeginner who have written an excellent tutorial on improving your site’s speed.
You’ve got a little work ahead of you as each time you make a change you need to ensure it hasn’t broken your website.
At first, I went gung-ho and just added in every file listed but when I checked the website my nice white background had been replaced by a garish purple gradient and my opt-in forms had disappeared… so take it slow.
My strategy is to do a couple of things each day and then test.
Improving Mobile Responsiveness
Improving mobile responsiveness is a doddle when you are using WordPress. The WordPress boffins have been working hard to make it mobile responsive straight out of the box.
In most cases, all you need to do is install a theme with mobile responsiveness built in.
Responsive themes work by using percentage sizes for images instead of pixels and use media queries to determine breakpoints.
This simply means that the theme includes @media rules to insert a block of CSS code if a certain condition is true, such as when a screen is less than 500px wide. You can learn more about breakpoints here.
It’s all fairly heady stuff for the average non-techie so it’s fortunate that a good mobile responsive theme will do most of the adjustments without too much trouble.
The growth in mobile usage means that a lot of developers are taking a mobile first approach. This means they are designing specifically for a mobile screen before designing for the bigger screen sizes – rather than the other way around.
Page builders like Divi from Elegant Themes and Elementor can also help ensure a fluid experience between desktop and mobile. They each have options to view your design from the various screen sizes as you work on the layout of your page.
Testing Your Page Design and Speed
Most people have at least one mobile phone and a tablet so it’s not too difficult to check each design change on a physical device.
If you don’t have a particular gadget you can still check out your design as it will appear on the smaller screens using an online tool.
My favorite tool for ensuring my page works everywhere is at Am I Responsive. This tool is awesome for a couple of reasons.
Firstly, it means I don’t have to run around the house typing in web addresses on each device, as I can see it all happen on the desktop.
Second, not only can you see how your web page looks but you can also use your webpage inside the virtual device you see on the screen. I’m not sure how they do it but it’s a fantastic feature that will make testing a design a lot easier.
I only run one website (soon to be two) so I can imagine how useful this tool would be for developers working on a number of different designs for clients. I just wish they showed a tablet being used in landscape mode. Oh well, can’t have everything I suppose.
Testing for Speed
Speed is an important ranking component so I make use of two online tools (that are also free for basic service) to make sure my site continues to get out of the gate at a decent speed.
Go to tools.pingdom.com for a rundown on how fast a page is loading. You can test from different areas of the globe to get an idea about the experience your readers are getting from their country of origin.
You also get a report on the various processes involved in serving your web page and a grade on how well each performed. This gives you a wealth of information to work on for improving your website’s speed.
The report is also where you will get the information you need for minifying your CSS and JS calls. Each file can be copied and pasted over. Be sure to test before making too many changes.
Web Page Test is another awesome tool for checking out the speed of your sites.
Web Page Test runs the tests from a number of locations around the globe, in real web browsers, and at the actual speeds your readers will be experiencing with their ISP providers.
Reports give you a ton of information on which to dig into so you can start switching out what doesn’t work with what does.
That’s A Wrap
These are all of the tools I use every day to improve the speed of my site. If you are serious about getting ranked and giving your readers the best possible experience then you should definitely consider finding a toolset that you are comfortable with.
Start slow and work your way up as you learn. Soon you will be trying new things as your understanding grows and your website will be flying out of the gate at breakneck speed.
Need Awesome Content?
Having trouble keeping up with your hectic publishing schedule for your blog? Check out my writing services where I can help you fill out your site or email sales funnel with relevant useful information your email subscribers will love.