When using your phone to browse online, what’s worse: being confronted with an impossibly slow-loading site when you need a quick answer? Or tapping to click an element on a mobile site, only to have it jump because your page has not fully loaded, so you end up clicking on something else? (And let’s be honest, isn’t it even more annoying if that “something else” is an ad?)
Both are bad, frustrating experiences for mobile users. (HubSpot says this is not only frustrating, but can generate stress levels equivalent to those caused by watching a horror movie!)
The good news? There are many things you can do to deliver that first pixel as quickly as possible, sparing your users irritation, and even winning them over. Here are 5 ideas for improving your mobile site’s performance and load time.
1. Use a Content Delivery Network (CDN)
If a US-based visitor tries to access my mobile site hosted in France, the data has a long way to travel. The user’s mobile browser must call the server in France, which will send my site data all the way to that user in the US, which can slow things down. With a Content Delivery Network, I can avoid this problem – the CDN enables content from my website to be replicated and stored on different servers worldwide, so anytime anyone anywhere wants to access my site, they can access content quickly from the server located closest to them.
For a great mobile experience, every millisecond counts. Using a CDN can help you save precious loading time.
2. Define a file load order
Going back to that annoying problem mentioned above, where a user tries to click something on your slow-loading mobile site, only to have it jump out of reach… and now they’ve unintentionally clicked on an ad (incurring their wrath, and probably costing you money).
There is a simple solution to avoid this: Don’t load all your page files at once! Be sure to define an order.
First, load your page layout so the structure of your content will be set in in place, giving your users an idea of where different content will appear. Even if your text and images are not yet visible, seeing your layout will allow them to quickly understand the structure of your page. This will also keep your content blocks from jumping around as elements load at different speeds.
Next, load your text content. Your users will be able to access the essential text information they might be looking for, and even if your visuals aren’t yet loaded, your page is still completely usable at this point.
Lastly, load your graphics, and your mobile page is fully ready, in all its glory, for user consumption. By delivering layout, then text, then graphics, you also give your users the impression that your page is loading more quickly than it might be, in reality, as they’re not stuck waiting on a blank page.
3. Reduce the size of your files (don’t just resize)
For years, we’ve heard that responsive web design is absolutely necessary, that by ensuring our website will automatically resize to fit all types of mobile screens, we’re offering our mobile users a great experience. Right?
But an often-neglected aspect is, you guessed it – the impact on mobile site performance and speed. Just because a site is responsive to screen size doesn’t mean it’s fully optimised for mobile performance.
Let’s take a common mistake: simply resizing an image’s display size to fit on a mobile screen (while the original image file, for desktop-quality, remains huge). Sure, your scaled-down display size means your image fits on mobile screens, but the heavy file size still means extra loading time.
Avoid just resizing your desktop site images for mobile devices. Instead, host different versions of the page on your server, such as a version with high-resolution images for desktop devices, and a version with lighter, lower-resolution images for mobile devices.
4. Store your data in the cache
Use cache whenever possible to store data to make subsequent visits faster:
- Server-side caching: Calculated data results are stored on your server cache, so the next user who requests the same information will be able to quickly access these pre-calculated results.
- Browser-side caching: Certain elements of your mobile site that remain static across pages – like your company logo or the footer – can be stored in the cache on your user’s browser. When that user opens another page of your mobile site, those cached elements will load immediately, as they’re already stored on the user’s browser.
5. Request less: Streamline your tags
Think about the number of requests being fired off each time your page loads: ad tags, widgets, analytics tags, and the list goes on…
Since each request you send adds a little more load time, a page that’s brimming with tools will take longer to load. Be discriminating about which tools you really need on your site, and only conserve the ones that truly deliver value. Are you really working with 10 different ad servers? By streamlining the number of tags and requests you send with each page load, you can improve your mobile site performance.
Want to know precisely how long your website takes to load on a mobile device? Test your speed at https://www.webpagetest.org/ – see the number of requests being sent, a breakdown of processing time, and more.
For many more concrete tips on improving the performance of your mobile sites, and ideas for keeping your digital analytics tag light, be sure to watch this webinar replay:
Boost Mobile Performance & Optimise Tag Loading
Thanks to Florian Rieupet, AT Internet product manager, for providing the basis of this article!
Comments are closed.