Updated: January 2023 (the original was posted in the summer of 2020)
If you’ve ever tested your site speed on PageSpeed Insights, you’ve likely noticed a large discrepancy between the page load speed on mobile and on desktop. The load speed on mobile can be half or a third or even less than the load speed on desktop. This is a problem for a number of reasons, including customer satisfaction (and your conversion rate) as well as for search engine optimization (SEO).
User Experience and Google
The trend is clear: in 2016 the use of mobile to access the Internet surpassed desktop, and since then this number has only increased. People expect a site to load quickly — no matter the device — and are very frustrated when it doesn’t. According to Google:
- As page load speed increases from 1 second to 3 seconds, the probability of people leaving the site increases by 32%.
- One second to 5, the probability of them bouncing is 90%.
- There is very little chance somebody will wait 10 seconds for your site to load: the probability of people leaving increases to 123%.
They aren’t likely to return either, preferring to buy from faster sites that offer comparable products.
And then there is Google, who only wants the best for Internet users. Google penalizes sites that don’t load quickly on mobile by ranking them lower. Since July 2019, Google has been using the mobile version of a site for indexing and ranking. Even if your site is blazingly fast on a desktop, if it is slow on a mobile device, your ranking will suffer. If your ranking suffers, so does your visibility and ultimately your conversions.
It is definitely in your best interest to make sure your site loads quickly on mobile devices.
Why Does My Site Load So Slow on Mobile?
Mobile-specific reasons could be related to: a less than consistent or reliable internet connection, slower processor speed on mobile devices, and the mobile site design. You can’t do much about a sometimes spotty connection or a slow processor speed, but you can make sure your site is designed and optimized properly for mobile devices. A sleek, lightweight, responsive web design is best. Besides mobile specific optimization, best practices for site speed, no matter what the viewing platform, are critical as well.
According to Google, a benchmark to aim for is a site load speed of 3 seconds or less. Below we list 5 top actions you can take to make sure your site loads quickly on mobile devices.
1. Speed Up Server Response Time
There are 3 steps in this process: DNS lookup which is the time it takes for your server to find the IP address associated with the URL of your website; server processing, and server response.
The “time to first bite”(TTFB) is the time it takes for the browser to start receiving data from the server. The goal is for the page to start loading within 200 milliseconds of a request.
This might not happen if your hosting service or equipment is of poor quality or you are using a scope of service that is not adequate for your needs. Maybe you need to upgrade to a dedicated server instead of the cheap shared hosting to deal with the amount of traffic you get, for example.
If your server response time is slow, all your other measures to optimize your site for speed will be handicapped. You could also reduce the stress on the server by reducing the number of HTTP requests.
2. Reduce HTTP Requests
According to Yahoo, 80% of end-user response time is spent downloading page components such as images, CSS (style sheets) or scripts such as Javascript or libraries such as Google fonts. The best design for mobile devices is simple and lean with no unnecessary clutter or code. Take a look at your assets to determine if you really need them. What can you get rid of while still keeping an interesting, engaging site design? Do you really need all those plugins? Can some of their functionality be handled manually?
Images are important in making a site interesting and appealing, however, too many of them will slow down your site. Take a look at which ones offer good value, keep them and ditch the rest. Using a sprite sheet can be an option for some image situations (combining multiple images in one file).
Once you’ve reduced the unnecessary clutter, consider combining Javascript files, and CSS files if your site runs a number of them. This will mean the browser will not need to make so many round trips to retrieve them.
Enabling caching will make sure that the site is quicker to view the next time after the initial download. Caching allows the browser to reuse the previously downloaded resources.
3. Reduce Page Size
After you have combined files or gotten rid of unnecessary ones, minifying the ones that are left will decrease their size and hence time to download. Minifying involves removing unnecessary white space, formatting and code. You can minify JavaScript, CSS, and HTML. Every little bit of code adds weight to your site and takes time to download.
Images are notorious for slowing down a site. Always make sure your images are compressed and optimized for the web. Generally they shouldn’t be larger than 100KB.
Finally, compressing your files will dramatically reduce their size. Compressing rewrites the code and does require decompressing to be used by the browser but the net benefit is worth it. Gzip is standard and works particularly well with CSS and HTML.
4. Reduce The Number of Redirects
A redirect automatically takes the website visitor from one page to another. They are extremely useful to direct a page from an outdated page to a new one with a different URL. However,each redirect adds time to the page load, and this is even more apparent on mobile where networks are less reliable. The problem gets worse if you link to a page that has a redirect, causing an even longer trip to get to the desired page. If your site is older and you’ve changed from, say, www to non www to https, you may have chains of redirects. This type of circuitous route needs to be simplified to speed up your site.
While it is best to avoid redirects whenever possible, if they are necessary, server side redirects such as 301 and 302 redirects are quicker than client-side redirects, such as JavaScript solutions or using http-using equiv=”refresh” in your code. Server-side redirects can be cached as well, which makes them quicker the second time around.
5. Prioritize Above the Fold Loading
This isn’t about the total number of resources that are loaded, but rather, the order in which they are fetched and displayed. If the resources that are needed to display the top of the page are fetched first, the viewer will have a sense that the page is loading quicker. At least they won’t have to wait for all resources to be loaded before they see anything.
Since a browser loads a webpage from top to bottom, putting the CSS at the top of the page and the Javascript at the bottom, will make sure the content is displayed first before the page becomes interactive. This will make it feel like the page is loading faster. Your web developer can also make some files load asynchronously, which means several of them can be loaded at the same time to speed it up.
This suggestion directly addresses another aspect of site load time and Google ranking: as well as full load speed, Google also measures site load speed from the perspective of the user — how fast it feels to the user that the site is loading. This series of metrics is called the core web vitals, and is an important part of Google’s ranking algorithm. Prioritizing the above fold content load addresses the Largest Contentful Paint metric – how quickly content that is relevant to the user is loaded.
6. Go Headless
Using a headless front-end built with modern technologies that allow you to leverage static site generation (eg. Next JS) will dramatically speed up the load time of your site on all devices, including mobile. Here at Stikky, we regularly see website loads on mobile go from a score of 20-30 with a traditional WordPress site to 85-95 when we switch them over to a headless approach.
The headless approach decouples the front-end of the website from the back-end. Meaning, the front-end — the part that is displayed in the browser — is not bogged down by all the heavy-lifting of the back-end’s server-side rendering process. The front-end, built with nimble technologies such as Next.js, is similar to the static pages of websites back in the 90s — they don’t need to retrieve a lot of information to construct the page when it is opened or refreshed in a browser. Point #2 from our list — Reduce HTTP Requests — becomes a non-issue.
Instead, with a headless/static front-end, each page goes through a “build” process once, resulting in static HTML files that get dispersed across a global network of servers; when a site visitor requests the page, the nearest server sends the pre-built HTML back to the browser within milliseconds. Compare this with traditional CMS’ like WordPress, where the page goes through the same rendering process from scratch EVERY time someone visits/reloads the page – you might ask yourself, what’s the point of rebuilding the page if the content rarely changes?
With a headless website, the various functions of a website are separated and streamlined, with dedicated technologies doing what they do best, instead of asking a bloated back-end to do everything. There is still communication between the front and back-ends, it just doesn’t over-communicate – as it should be!
Key Takeaways for Improving your Mobile Page Speed
Speeding up the load time of your site on mobile is not only worthwhile, it is critical. Not only will your website visitors be happier, your conversions will likely increase. Google will also reward you with higher rankings and increased visibility. Your site might not need all the measures outlined above, but if any one of them, or a number of them are causing slow-downs, fixing them will be some of the best things you can do for your online presence and business.
Is your Site a Slug or Cheetah?
Want to find out whether your site’s a slug or a cheetah? Get in touch for a free website audit and speed test!
