Do you know how fast your website loads for mobile visitors? Speed matters, improving your load time by 0.1s can boost conversion rates by 8% and a one-second delay can impact your conversion rates by up to 20%!
In this article, you will learn how to find out how long your web page loads and the right strategies to speed up your mobile site and increase your online conversions!
Mobile Page Speed must be a top priority for online businesses
Why Speed Matters for Mobile Ecommerce sites? Google studied 37 leading mobile websites for one month in the following verticals: retail, luxury, travel, and lead generation.
The conclusions of the study showed that the fastest the mobile website is, the more time users spend on it, the lowest its bounce rate, and the more they buy.
Did you know that 77% of smartphone shoppers are more likely to purchase from companies whose mobile sites allow them to make purchases quickly?
Waiting for too long to load the web decreases the likelihood to purchase by 62%. A slow mobile website will kill online sales numbers and conversion rates.
Recently, Google made an experiment about this topic. They wanted to know what happens when they gave people 60 seconds to buy whatever they want from a mobile site. They controlled how fast the site loaded. It is interesting to watch the feedback of the participants.
How Fast Your Website Loads from Mobile?
The average mobile web page takes 15.3 seconds to load. This is an eternity! As page load time goes from 1 to 10 seconds the probability of bounce increases 123%
If you cannot measure your mobile page speed, you cannot improve it. Make mobile speed a KPI and establish a strategy to improve site speed. Let’s learn 4 useful KPIs:
1. Average Speed Index
It means how quickly the mobile page displays content to users. The lower the average speed index, the better. I recommend keeping it under 3 seconds.
To test your average speed index you can go to Webpagetest. Enter your website URL, choose a test location, and choose the web browser you’re using. Finally, select the Start Test button and see the results.
I tested my website and here are the results:
My Speed Index is under 3 seconds, it is 2.4 seconds. The result is not bad, but it must be faster.
2. Average Time to First Byte
It means how fast and responsive a mobile web server is in a specific category. Google suggests keeping it under 1.3 seconds. High web traffic, Network problems, Dynamic content, and Server Configuration slow down the Time to First Byte.
According to the report of Webpagetest (see above), my website First Byte is 0.600 seconds.
3. Average Request Count
It is the number of individual pieces of content needed to display the entire mobile page. It should be fewer than 50.
According to the previous report, the number of requests of my website is 35. See the Fully Loaded section of the image above.
4. Average Page Weight Bytes
It is the total size of a mobile webpage, measured in bytes. Google recommends keeping below 500 KB. My website is 1,137KB. I need to improve this KPI.
How to measure the speed of your mobile website
We have already measured 4 KPIs related to the speed of the mobile website. Now, I will show you some useful tools. They will show your mobile page speed, valuable info from competitors, and useful recommendations to improve the speed of your mobile website.
Google Test My Site
I recommend Test My Site to analyze the impact of speed on your bottom line. This tool uses your own data and sees how your mobile site stacks up to your competitors.
According to Test My Site, my mobile page speed is 3 seconds on a 4G connection. Google recommends keeping the mobile page speed under 2.5 seconds.
Fortunately, Test My Site offers a comprehensive report with recommendations on how to make the mobile website faster.
Here are some recommendations for my website:
- Serve static assets with an efficient cache policy
- Eliminate render-blocking resources
- Defer unused CSS
Fortunately, specific WordPress plugins can fix most of the recommendations.
Test My Site offers an interesting tool called Speed Scorecard. It is an easy-to-use tool that lets you compare your mobile site speed with industry peers. Its data is based on how real-world Chrome users experience popular destinations on the web.
I compared my website with Neilpatel.com and Socialmediaexaminer.com. The comparison chart below shows that neilpatel.com is under 2.5 seconds. Socialmediaexaminer.com also needs to improve its mobile page speed.
Last but not least, the Impact Calculator is another tool of Test My Site. With just a few inputs, the tool estimates the potential revenue impact that could result from improving my mobile website speed.
Google PageSpeed Insights
PageSpeed Insights (PSI) reports on the performance of a page on both mobile and desktop devices and provides suggestions on how that page may be improved.
PSI uses Lighthouse to analyze the given URL, generating a performance score that estimates the page’s performance on different metrics: First Contentful Paint, Largest Contentful Paint, Speed Index, Cumulative Layout Shift, Time to Interactive, and Total Blocking Time.
Each metric is scored and labeled with an icon:
- Good is indicated with a green check mark
- Needs Improvement is indicated with an orange informational circle
- Poor is indicated with a red warning triangle
For example, my speed index is 5.3 seconds, so I need to improve it. Fortunately, the tool provides areas of improvement:
Opportunities provide suggestions on how to improve the page’s performance metrics. Each suggestion in this section estimates how much faster the page will load if the improvement is implemented.
Diagnostics provide additional information about how a page adheres to best practices for web development.
How to Optimize Your Website for Mobile Page Speed in 4 steps
The optimization of your website can have a huge impact on performance. Here are some tips to work through with your developers.
Implement the following 4 steps and you will create a faster mobile experience for your users.
1. Prioritize your brand site’s images in order of importance
If you’re looking for mobile page speed wins, start by re-evaluating the images on your site. Consider what images are necessary and remove unnecessary assets. Substitute images with text or CSS wherever possible.
Optimize or remove high-res pictures and remove animated GIFs or simplify them into an efficient animation purely in code.
2. Choose an efficient image format
Aim to start with WebP. It is used for photographic and translucent images at 30% more compression than JPEG, without loss of image quality.
Choose JPEG for pictures with no transparency, PNG for transparent backgrounds, and SVG for scalable icons and shapes
3. Compress and resize imagery
To compress and resize imagery you need to remove metadata, experiment with quality settings, and use custom image tags to automate optimization.
Google created the Accelerated Mobile Pages, or AMP, a subset of HTML that follows much more stringent guidelines about what can be included. The goal is to get most pages to a 1-second load time on mobile, which it generally does.
When building an Accelerated Mobile Page (AMP), the custom image tags make many of these same optimizations automatic. The Google AMP Cache also limits the maximum image dimensions to prevent browser memory issues and caches images for faster future loading.
BMW implemented a new AMP site and achieved a load time up to 4X faster with a 50% increase in mobile users.
4. Use loading techniques
Besides compressing and resizing images, companies should serve different versions of the image based on the user’s device, screen size, or even the quality of their network conditions.
You should also try the technique called lazy loading. The webpage will prioritize loading the first available images in this limited view, while off-screen images are loaded at the moment of need.
For example, the German e-commerce, bücher.de, only loads images if they enter the area visible to the user. It allows them to speed up their site by 33% and reduce load time to 3.5 seconds.
Try to implement progressive loading techniques like placeholders, progress indicators, or efficient formats like progressive JPEG. It is a good way to keep the users engaged on the site longer.
Mobile website owners need to consider their load time. Just a few seconds can have a huge impact on the conversion rates of an online business.
The first step is to measure the speed of a mobile website. Some of the most important KPIs related to the load time of a mobile website are: Speed Index, Average Time to First Byte, Average Request Count and Average Page Weight Bytes.
I have recommended some specific tools. They will help you measure these KPIs and provide valuable recommendations on how to improve the speed of mobile websites.
Each case will be different and will require a different prognosis. Nevertheless, I have summed up some of the most common areas of improvement in mobile websites.
- Prioritize your brand site’s images in order of importance
- Choose an efficient image format
- Compress and resize imagery
- Use loading techniques
Do you have other ideas? Please share them with us!
P.S. Before you go, you may also be interested in the following articles:
POST WRITTEN BY
Jose Maria (Chema) Lopez
A Madrid Polytechnic University International MBA has worked as global marketing director in B2B and B2C international leading companies implementing global marketing and communication strategies to ensure business objectives and to optimize brands reputation and visibility on a global level.
Never miss a post
Get new blog posts delivered straight to your inbox. No spam. Promise.