4 Steps to Speed Up your Mobile Site and Increase Conversions

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%

how page load time affects the bounce rate
Image Source: Google

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.

how to test your average speed index with webpagetest
Testing the Average Speed Index of my website with Webpagetest

I tested my website and here are the results:

how to calculate the average speed index with webpagetest
Screenshot of the Performance results of my website from Webpagetest

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.

how to analyze your mobile website with Test My Site
Houston we have a problem. Test my Site rated poor my mobile page speed.
test your page speed and identify the failures to speed up your website
“Test your page speed” identifies the failures that slow down your website

Fortunately, Test My Site offers a comprehensive report with recommendations on how to make the mobile website faster.

how to download the full report of google test my site
Test My Site sent me via email a report to improve my mobile site experience.

Here are some recommendations for my website:

  • Reduce JavaScript execution time
  • 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.

compare you mobile website speed against your competitors using Test my Site
Screenshot of the Speed Scorecard comparing my website with some competitors

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.

evaluate the roi of a faster mobile website with test my site
Test My Site can evaluate the ROI of a faster site

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.

how to measure the speed of your mobile website with Pagespeed insights
I measured the speed of my mobile website with Pagespeed Insights but the results are not satisfactory

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.

example of report of a mobile website by pagespeed insights
Lab Data shows the status of the main metrics of my mobile website.

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.

How is a Pagespped Insights Report
The tips provided by PageSpeed Insights will help my page load faster.

Diagnostics provide additional information about how a page adheres to best practices for web development.

pagespeed report of a mobile website
Image Source: PageSpeed Insights

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.

Comparing JPGE to WebP
Image Source: Jaime Franko

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.

example of lazy loading
Image Source: Google I Example of Lazy Loading

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.

Conclusion

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:

5 Tips to Boost Online Sales in the Buyer’s Decision Stage

How to Rank your Product on the First Page of Google even if Nobody Knows it

5 Strategies to Win New Clients at the Consideration Stage

How to Identify the Right KPIs for your Customer’s Journey

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.

Processing…
Success! You're on the list.

Leave a Reply