Mobile Optimisation Tips for Lightning Fast Mobile Sites12 min read
There are now nearly 4 billion mobile internet users globally! By 2021 these users will be responsible for $2.3 trillion (or about 67.2%) of e-commerce sales.
We’re already living in a mobile-first world, but businesses and marketers are still not optimising for mobile performance, UX or app stores.
This means there’s a huge opportunity for savvy marketers to take advantage of, as the bar is still set so low!
But mobile optimisation is about much more than just creating a responsive website.
It’s about designing a website with the mobile user at the forefront of your mind.
Every aspect you design should be tailored to a mobile audience.
In 2019, that’s best practice!
So let’s take a look at some easy-to-implement mobile performance optimisation tips that will make your mobile sites faster than lightning!
Mobile Optimisation Tip 1: Mobile-First Indexing
As you’ve almost certainly experienced, it’s all too common to stumble across mobile site experiences that feel cluttered and slow. Search engines are hungry for speed, which is why Google has introduced mobile-first indexing.
What is mobile-first indexing?
- Mobile-first indexing means that the mobile version of your website (instead of the desktop version) is what Google will prioritise when indexing.
- It’s called mobile-first because, if there isn’t a mobile-friendly version, the desktop version will still be indexed.
- Because Google prioritises mobile versions of websites, a lack of a mobile-friendly experience might have a negative impact on your site’s ranking.
- In March 2018, Google stated that “Mobile-first indexing means that we’ll use the mobile version of the page for indexing and ranking, to better help our – primarily mobile – users find what they’re looking for.”
This means that Google ranks search results based solely on the performance of the mobile page – even if you’re searching from a desktop device.
Basically, for good SEO, no matter what device your users access your content on, you need to be optimising your pages for mobile!
Mobile Optimisation Tip 2: Run Mobile Site Diagnostics
According to Google the average page load time in 2018 was 15.7 seconds. That’s incredibly slow.
Google says that mobile sites should load in less than 1 second. 53% of users will bounce from a page if it takes more than 3 seconds to load.
Speed is great for both mobile user experience and search engine indexing. With Google continually pushing out mobile-first updates, mobile page speed is becoming significantly more important by the day.
But how can you achieve super fast load times?
First things first – do a speed diagnosis! There are lots of tools out there to test mobile performance, but our favourite three are actually provided by Google.
The great thing with this tool is not only will it give you the page speed index, it lists all the opportunities and optimisations that can be made to improve page speed and will tell you how much they can be improved by.
This analysis is going to show you exactly how fast your mobile pages load on a 4G connection! Remember that anything greater than 3 seconds is considered very slow. It will also give you custom fixes for each page that you analyse.
Mobile Usability Report – Google Search Console
The Mobile Usability report shows which pages in your property have usability problems when viewed on mobile devices.m It’s a great sanity check to ensure that Google views your pages as mobile friendly.
These tools are a good starting point, but remember to take what Google considers “mobile-friendly” with a pinch of salt.
It doesn’t correlate with a site that has great UX, but instead looks to ensure that all functionality works on mobile and that there are no practical design issues.
Use these tools to create a list of opportunities and optimisations that you can make to your pages!
But once you’ve got a list, you’ll need to figure out what all the terms mean.
Mobile Optimisation Tip 3: Understanding Mobile Site Diagnostics
Images are big. They’re unfriendly to browsers, and can account for up to 68% of total page weight!
So, how do we solve this problem?
You should always consider removing images on mobile unless they’re completely necessary. But, as an image says a thousand words and is fundamental to good website design, removing them completely is unrealistic.
Sometimes you can actually replace or replicate images with CSS effects. For example, you can use CSS to add shadow effects and gradient backgrounds and even create animations.
By combining these CSS techniques, you can create assets that look amazing at any resolution and come at a fraction of the size of an image file.
Also, try not to use text in images – use web fonts instead. Web fonts are similar but are better for UX. They can be selected, searched and they look much better on high-res screens!
You’ll also need to be able to choose the right image formats:
- Use JPEG for images
- Use PNG for logos – where you need a transparent background
- Vector for Geometric Shapes – could potentially be better for icons and logos
- SVG formats have support for interactivity and animation
You may have seen your diagnosis reports telling you to try and serve images in next-gen formats to reduce size.
But what are next-gen formats, and do you really need to use them?
Basically, the newer JPEG 2000, JPEG XR and WebP image formats have superior compression and quality characteristics than their older JPEG and PNG counterparts. These newer versions will load faster on mobile, so it’s a good idea to consider them.
Images often account for most of the downloaded bytes on a web page occupy a significant amount of visual space.
So, optimising images can often yield some of the largest byte savings and performance improvements for your website.
Here are some great tools to help you with your image compression!
If you use WordPress, you should be using Smush.
Smush is a super simple plugin that lets you both compress all your existing images with the click of a button, and it features an automatic compression on upload feature too.
It also helps you out by stripping images of the unnecessary meta-data often stored by cameras.
As an extra bonus, you can stop unnecessarily large images from being uploaded to your gallery, and there’s a feature that detects and highlights incorrectly sized images.
Another tool we would recommend for faster image compression is Kraken.io.
This one lets you bulk upload photos (even on the free version) and choose your compression type, plus it has an “expert” mode for better customisation.
You can also use a tool like svgminify.com to optimise vector files and strip them of the large amounts of unnecessary information pulled from graphics editors.
On a more technical note, you may have seen that your diagnosis said that “offscreen images” might be having a negative impact on your page load time.
These “offscreen images” are the images that appear below the fold – but because they are downloaded on the initial page they decrease the page loading speed.
There are a few ways to stop these assets downloading on initial page load, but we would advise talking to your developer to make it happen.
One popular technique is “lazy-loading” that will defer an object until it is actually required.
Put simply: more data = slower page loading times.
That’s why it’s always super important to trim the fat of your code!
This where minification comes in.
“Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser – e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.” – developers.google.com.
This technique can save you a good amount of bytes and page speed too!
Here are some of the tools you can use to make this process as easy as possible:
Using WordPress? The WP Speed of Light Plugin is good. It has lots of functionality above and beyond minification, so once you’ve installed it you simply need to go to the dashboard and flick the switches on the functionality you need.
Leveraging Browser Caching
As explained by GTMetrix, browser caching can help by storing some files locally in the user’s browser. The first visit to a site might take a while to load, but when they revisit your site, refresh a page or even move to a different page, they will already have some of the files stored locally.
This means the amount of data the user’s browser has to download is less, and fewer requests need to be made to your server.
The result? Decreased page load times!
This is actually super easy to achieve, but you might want to mention it to your development team if you’re not comfortable with front-end coding.
If you’re using WordPress (like the 33% of sites in existence), there are lots of browser caching plugins you can use. The WP Speed of Light Plugin has that feature!
AMP stands for Accelerated mobile pages. The AMP project is an open-source initiative aiming to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms.
At its core, the framework allows you to build lightweight experiences for mobile by simplifying the HTML and following streamlined CSS rules.
Basically, it lets you create super fast pages for mobile that load on average 4x faster than non-AMP.
The only downside is that these pages aren’t so good for SEO. Although these pages will be faster-loading for mobile visitors (and will, therefore, stand out slightly more in Google’s results pages), strict AMP standards may mean you can’t offer all of the functionality of your website to mobile users.
This means that you’ll have to give more control to Google, and that implementation may require some more development resources.
In terms of backlinks, when someone links to your AMP pages, the link will point to the Google.com domain. This means that any backlinks to your page won’t be attributed to your own domain.
Mobile Optimisation Tip 4: Think About Search Rankings on Mobile!
Remember to optimise your site’s title and description tags for mobile.
Mobile screens are smaller so you have less visual real estate! This means you should consider how the site’s meta tags will look on mobile SERPs.
Use a tool like SERPism to see exactly how your title and description tags will look in search results from a mobile device.
Remember, setting your site up for great speed and performance from both the back and front end is to lay the foundations of well optimised mobile sites.
It’s crucial to have a mobile-first approach!
Test your knowledge of mobile optimisation, UX, content marketing, front-end code and a number of other essential skills that every T-Shaped Marketer needs in our quiz 👇
Be sure to watch the video too! 👇
Always be Learning! Stay in the Know with the Latest from Growth Tribe!
Sign-up for the latest on growth marketing, artificial intelligence, blockchain and digital skills!