Quick Wins For Optimising Your Mobile Site

The importance of designing and building websites using a mobile-first approach has been brought even further to the fore with Google announcing they are going to change their index to be mobile-first. When our Technical SEO Director, Mark Chalcraft, wrote a post on ‘Why Google’s Mobile Index Has Big Implications For Your Brand’ he inspired me to share some thoughts and techniques to optimise a mobile browsing experience, and ultimately, help in increasing your mobile conversion rate:

Did you know that 50.3% of e-commerce website traffic comes through a mobile device?

Source: Shopify

Put simply, this means that the mobile responsive model is no longer going to be enough.

It’s no secret that your mobile site needs to consider the user experience and browsing behaviours and how these differ to desktop. However, this all needs to be wrapped up with ensuring that users can retrieve exactly what they are searching for as quickly as possible – quite literally. From a marketing perspective the functionality and speed of your mobile site contributes significantly to your overall customer experience.

Here are my quick and easy changes that you can pass on to your development team to ensure you are doing just that.

Optimise your mobile site’s mobile performance

It seems obvious, but creating a mobile-first website should take smaller screens and slower connection speeds into consideration.

Ensuring your site is mobile responsive (adjusting the sites layout and dimensions to a screen it’s being browsed on) may well be a quick solution but it most certainly isn’t the right one. Scaling up your content from mobile to desktop is essential for achieving a fast loading mobile user experience via 3G and 4G connections.

Optimising your mobile sites performance includes two key factors:

• The time it takes to render content on the screen (such as an image)
• The speed in which a user can then interact with that content

How long do you think mobile users are willing to wait for a web page to download and render before they abandon it? You should be able to get the answer to this from your analytics solution.

Generally speaking, mobile users are more tolerant than desktop users when waiting for a web page to load. This is because of slower network speeds and people moving when they're using their mobile devices, preventing a consistent connection from being established.

However, loading time is a major contributing factor to users abandoning a website. On average, if a page takes up to 4 seconds to render, sites can see a 25% page abandonment rate – very concerning when you think about how many users that could equate to.

Use responsive images to drastically speed up the user’s mobile experience

Serving optimised images for mobile is a great way to instantly reduce the time it takes to download and render web pages for mobile users.

Responsive images ensure that when a user views a website on a mobile device they will only download the images optimised for that experience or platform. The images will be much smaller in file size to suit slower network connections.

If you, or your developers, are not currently using this technique then we could easily assume you are feeding the same images to all users on all devices. This may not be so bad for smaller images and graphics like icons, but problems can occur when images start to get larger and heavier.

The best approach to implementing responsive images is by using HTML. Utilising the HTML5 <picture> element acts like a container to specify multiple sources of images along with the <img> element. When implemented correctly, this setup will allow the browser to choose the most suitable source of image according to the current layout and the device it is being displayed on.

As standard we apply the responsive image technique to all of our web builds which results in page load speeds reduced by half – and Google has loved them for it!

Prioritise your above-the-fold content

Google loves fast mobile optimised websites and one of their guidelines is to ‘achieve sub-second rendering of the above-the-fold content on mobile networks’.

The goal here is, therefore, to present content as fast as possible – simple. How do you do this? The first solution is to ensure that you keep your HTTP requests to a minimum. Understanding how your web server is performing is crucial to getting this right. Do you know how many requests a browser is making to a server to download files containing the content of your website? These files contain things like text, images, JavaScript, video etc. The browser has to make a separate request for every file that exists on a web page. If you don’t have this information to hand your developers / development team should be able to provide you with it.

If your website has lots of files and content, then it will take longer to request and download the content. The most common culprit to slowing down the load speed is large high definition images.

Here are some best practices that your developers should follow to deliver a sub one second rendering experience:

• Minimise HTTP requests to download content for your website by prioritising or personalising the content
• Load JavaScript using asynchronous loading to ensure that your content is rendered first
• Optimise and compress your JavaScript and CSS to keep file small in size

Make it easy for your customers

Did you know that 60% of global mobile consumers use their mobile device as their primary or exclusive internet source?

Source: Internet Retailer

This is the final and the most important consideration when using a mobile-first approach.

By designing mobile-first you will be forced to make decisions about what is really important to your audience and users. You will need to make decisions that you would never be forced to make when designing for desktop first. Although some of the decisions on what to prioritise may be difficult, the result is almost always a more focused, cleaner, and more usable design.

A good place to start is to use your websites analytics to understand the content that your users are demanding most. If you have access to, or are using, a Data Management Platform, you can then also start to prioritise content based on your users search enquiries or previous behaviours.

By introducing these very simple techniques I guarantee you will achieve faster download and screen rendering times, therefore contributing to a more positive mobile experience your customers have with your brand.

I would love to hear your thoughts on this post and if anyone has any other thoughts on how to quickly and effectively implement simple changes to sites to make them more mobile friendly.

Likewise, if you have any questions at all on this post then please do get in touch with us and we will be more than happy to talk it through.