No business can be immune to the need for a mobile responsive website. And yet, too many websites perform poorly away from the desktop screen. If you’re not sure how to make your website perform better on a platform used by huge swathes of your target market, we offer 5 useful tips on how to improve your mobile website performance.
In the second quarter of 2020, mobile devices (excluding tablets) accounted for 51.53% of global website traffic. There is evidence to suggest that three-quarters of these users will only use their smartphone to access the web. These are powerful statistics and ones that should set alarm bells ringing if you haven’t checked your website for how responsive and agile it is on mobile devices.
Speed is of the essence
Speed is everything. A slow-loading website is damaging. A 2018 study found that a website that loaded within one to three seconds had a bounce rate of 32% whilst one that loaded within one to 10 seconds suffered a 123% bounce rate, a metric that could be damage ranking results.
So how do you improve page speed overall?
Tip 1 – Determine what the current web page speed is
There’s no point plundering through these tips and making changes to your mobile website if there is no need.
And so, the first tip is to analyse web page speed, something you can do on a regular basis. Don’t forget, your website is never really finished. As it grows with more content added, you’ll need to keep checking back.
If you’ve noticed conversion rates are slowing and your ranking has started to slip, it could be speed (or lack of) that is the problem.
Use a free analysis tool to give you the information that you need but – and here’s the real issue – you need to understand what these results are telling you.
Effectively, it will list all the elements on the page that need to be loaded and give you an idea of how long each takes – usually measured in microseconds. It should then give you the overall figure for the seconds taken to reveal the whole page to the user.
Aim for a 3 second load time and you could find that your conversion rate starts to increase too.
Tip 2 – Optimise images
At one time, optimising an image for a website meant reducing the quality. Thankfully, we have moved past this and now have the same high-quality image but without it being ‘too heavy’.
High-quality images naturally have a lot of detail in them which in turn gives them the definition that makes them stand out.
But if you have an image-heavy website – images can make up to a fifth of a website’s content, more in some cases – such as an e-commerce site with hundreds of product pictures, you may find loading speed is affected.
The secret is to optimise them, resizing them to 800 px in width. But take care but simply re-sizing them on the page means you are changing their dimensions with the same level of detail still being stored on your server.
With a photo editing suite, you can have 80% of the quality with no noticeable difference. Wherever possible, use JPG and PNG image files.
Tip 3 – Reduce plug-ins
Over time, as a website owner, you’ll be ‘advised’ to use certain plug-ins on your site. There are times when these make sense – for example, Google Analytics is a great addition because of the background stats and data it affords you in relation to your site.
Adding plugins isn’t necessarily a bad thing but, over time, as the number of plugins starts to creep up, your mobile responsive website load times start to decline.
Most of these additions work with a piece of code, usually in the header section – innocent enough you may think. But these snippets are all sending key pieces of data and information every time that page is accessed.
And if this flow of information increases, it will naturally slow the page loading speed. Factor into your website management schedule to check the plugins you have and which you need.
Tip 4 – Remove unnecessary code in your CSS files
Cascading style sheet (CSS) files are used to format the contents of a webpage. They define the size, colour, font, line spacing, indentation, borders and the location of HTML elements of a page. In many ways, they produce a similar look and feel across the website.
CSS files can cause issues when there are redundant selectors and rules overwriting all over the file. This contributes to the file size, thus making the page heavier and more cumbersome to load. This is often referred to as a page being slow to render.
There are many developer tips for improving CSS file performance, especially if you feel this is the source of the problem for a slow load website or page.
Tip 5 – Cache pages
Every time someone makes a request to view a web page, they are asking the website server to assemble all the component parts from images to text, HTML coding and more. There can be over 100 requests flying back and forth between user and server to get the page assembled.
This information fires back and forth and lightning-fast speed. But even then, this might not be quick enough, especially if lots of users are accessing the same page at the same time.
Caching pages solves the problem by storing a copy of the assembled web page in different locations. By doing this, the browser being used doesn’t need to go back and forth to load the same page and this can significantly improve web page loading speeds.
Speed is key in so many ways when it comes to mobile website performance. But knowing how to improve it can be shrouded in mystery. First, you need to check current load times for pages – you may find one page is slower than others – and when you have identified the issue, you can take the appropriate action to improve performance.