Do you want the best results from your website? Of course you do – who doesn’t? Then you need to make sure it’s up to speed… literally. Use these tips and resources to get your website bolting out of the gate while also being mobile responsive for maximum audience reach.
“Speed and responsiveness,” are two terms Google has been banging on about for some time now for improving the user experience. That means web designers and bloggers everywhere should take note of how fast their sites are loading, as well as how they look on mobile screens.
If your website runs like molasses 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.
Faster site loads equals more conversions. Learn How.
Why Mobile Responsive and Fast Sites are Important
There are a ton of reasons why you need to improve your site’s responsiveness and speed. For starters, excellent customer experience on your site will equate to dollars in the bank. Secondly, Google loves a fast site and will reward speedier domains by supplying more ranking juice.
Statistically, a page with a load time greater than 3 seconds will usually have a high bounce rate (visitors leaving your site without doing anything).
With mobile use on the rise and Google's mobile-first policy, it’s now more vital than ever that your website looks great on every size screen. It also needs to run super quick (under 3 seconds is okay, but faster is better).
Why Does Your Website Load Slowly and How To Speed it Up?
There are many variables which can slow your site to a crawl, 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 an upgraded plan.
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 Unnecessary 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
The fastest sites are those with no images, but who wants to look at a wall of text? Not me, that's for sure. Pictures make your text visually appealing, but they do have the unfortunate side effect of slowing your site down.
Optimize your images before you upload them to your web server. WordPress can resize them on the fly, but this will increase the server's workload.
Create your images at the exact dimensions they will be displayed. Use a photo editor like Gimp (powerful and free) to lower the quality. Not so much that it's noticeable but just enough to squeeze off a few extra kilobytes. Every little bit helps when you have large articles with lots of pictures.
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 there are a few which work to improve load times.
Use Image Optimizer Plugins For WordPress
Both WP Smush and EWWW Image Optimizer will decrease page load times by optimizing your images.
I haven’t used WP Smush but have heard that it works well. It will also remove extra 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 Which Reduce Server Requests
If the web browser is making a lot of calls to a number of these files, it can really screw your load times. Autoptimize is a plugin you can use to get rid of this problem for you automatically, and sure beats doing it by hand.
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, so I made the switch 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. You will find an excellent tutorial on improving your site’s speed which covers everything you need to know.
You’ve got a little work ahead of you because each time you make a change you need to check your website for errors.
At first, I went gung-ho and just added in every file listed. After I checked the website my white background had been replaced by a garish purple gradient and my opt-in forms had disappeared… so take it slow.
My strategy now 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 just means that the theme includes @media rules to insert a block of CSS code if a specific 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 make 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. They are designing specifically for a mobile screen before creating for the larger screen sizes – rather than the other way around.
Page builders like Divi from Elegant Themes, Elementor, and Thrive Architect 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.
Not only can you see how your web page looks on each device from the one screen, but you can also use your webpage inside the virtual device. I’m not sure how they do it, but it’s a fantastic feature that surely makes testing a site design a lot easier.
I only run one website, but I can imagine how useful this tool would be for developers working on many designs at a time for different clients. However, the owner of AmI.Responsivedesign.is states that it is not a tool for testing and recommends you still use physical devices for an accurate indication of your site's performance.
Testing for Speed
Speed is a vital 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.
Web Page Test is another excellent tool for checking out the speed of your sites.
Web Page Test runs the tests from different locations around the globe, in real web browsers, and at the actual load times your readers will be experiencing through their ISP providers.
Reports give you a ton of information so you can start switching out what doesn’t work and replace them with speedier options.
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.
Leigh has been working as a professional content creator for the last 7 years, providing unique, engaging articles for web sites and blogs. His educational background is in web development, marketing, and IT, which provides him a broad range of experiences to draw from in his writing. Leigh's content strikes the fine balance needed to give your human readers an engaging article, while also providing the search bots what they need for correctly ranking your site. Leigh prides himself on providing excellent customer service and always enjoys meeting and working with new clients. Contact Leigh today for all your content needs.