Why Mobile Speed Matters
Today the share of mobile commerce is 45 %. By 2021, mobile shopping is predicted to dominate eCommerce driving 659 billion $ and occupying 54 % of the market. Is this not a good reason?
If it’s not I will remind you how mobile speed affects your conversion. If you have a small business and your mobile site has a 1-second delay your conversion reduces by 7 %. For example, if Amazon had a 1-sec delay it would lose 1.6 billion $. It isn’t so much for one of the biggest marketplaces which revenue is 232 billion $, is it? But what for small business? If your annual income is 100.000 $ then you lose potential 2.5 million $.
Users expect your mobile site load in 2 seconds. If it’s more — 80 % of shoppers will prefer to go to your competitors and never come back to your site.
So what do you think is the average mobile load speed? The answer can shock you a little bit. The average load time for mobile websites is… Are you ready? 19 seconds! Yep, it’s a million light-years away from desirable 2-3 seconds. Sounds shocking but the things are not so bad like they seem to be.
Your smartphone needs 19 secs to load a site as web pages contain lots of scripts, tracking code and ads. All this stuff continue to load after you think everything is done. On average, you need 10 secs to see a home page on the screen but it doesn’t mean that loading is done.
You may say that it doesn’t affect you as a user and you’ll be wrong. Think about your battery and cell data usage. It’s pulling a lot of energy from your device.
Statistics say that mobile speed is a real problem as only 25 % of websites meet users’ expectations and needs. You need to speed up your eCommerce site up to 2-5 seconds at least.
Why Is Your Mobile Site Slow?
First of all — extra large and badly optimized images. The average size of ads is 816 Kb and it takes 4 seconds to load it. The average size of a web page is 2.5 Mb, which takes 13 seconds to load. It’s the most wide-spread issue that affects mobile performance because 90 % of all websites are affected by it.
The second main problem is the enormous amount of server requests. On average, each mobile page takes 214 server requests. 32 of them are content-related and 50 % — ad-related.
Let’s point some more possible reasons for poor mobile performance:
- Poor web performance
- Lots of traffic
- Un-minified CSS, JS and HTML code
- Too many plugins
- Server location
- Bad design and UX
- Excessive redirects
Speeding Up Mobile Speed Performance
Enable Browser Caching
Browsers can keep your site’s files and content. These data are stored on users’ devices when they visit your store for the first time. The next time these shoppers will land on your site it’ll take less time to load it as some information is already kept in their browsers.
It’s like traveling light. You don’t need to carry all your stuff with you as it’s already in your hotel or luggage room. Got it? That’s browser caching.
This trick can reduce the loading time from 2.4 (no cache) to 0.9 (full browser cache) seconds. 60 % speed boost!
Optimize Images
1Mb and 2Mb + images reduce your capacity while loading, consume lots of server resources and customers’ nerves. You should pay attention to three main image attributes: size, format and src.
Some useful tips:
- 1200×1200 px is ok for regular displays
- JPEG is the best option. Forget about image comments and reduce color depth to the lowest acceptable level.
- No empty <img src = ‘…’> codes if you don’t want unnecessary traffic to your servers.
Don’t forget to compress your images by 30-40%. Don’t let the web browser to scale your images down. Use Photoshop to resize your images or use one of the free image editors.
Minimize HTTP Requests
These are one of the main speed killers. More components like images, scripts or stylesheets you have on your page, the longer it loads.
In this case, the quickest way to improve mobile site performance is to simplify your design:
- Optimize your page elements. Your main navigation shouldn’t include more than seven links. Remove unnecessary features and discard overlapping forms.
- CSS instead of images. Shadows, gradients and etc. can be achieved with the help of CSS.
- Scripts at the bottom of the page. This way HTML content loads first and users don’t wait until the script will be fully downloaded.
Minimize Web Server Response Time
Mobile speed also depends on your web server, it’s not only about code and images. The longer your server waits for customers’ data, the slower your web performance.
Analyze the existing server performance, gather the data and only then fix performance issues. Your server response time should be under 200 ms. To improve server response time you can try to change your web server or reduce resources consumed by your web pages.
Minimize Redirects
Sounds controversial, doesn’t it? On one hand, you’re trying to enhance UX making your customers bouncing from one page to another, but on another hand, they have to wait for your page load again. If this process takes longer, they become more unsatisfied.
Moreover, redirects create extra HTTP requests and as you know their amount should be minimal.
JavaScript at the bottom and CSS at the top
These two elements can both spoil your mobile performance.
JavaScript brings animation and interactivity to your website. There’re no doubts that it enhances user experience but for mobile users, content is the top priority. It’s crucial to display JS after HTML elements are loaded.
If you place Cascading Style Sheets (CSS) at the top of your website your customers won’t see any content without any style information. It prevents the Flash of Unstyled Content and helps mobile pages to load faster.
Gzip Compression
Everyone has used WinRar at least ones. The principle is almost the same. We have a 300Mb file and reduce its size to a 25 Mb file.
What basic types of files should be compressed:
- text/html
- text/plain
- text/xml
- text/javascript
- text/css
- application/xml
- application/xhtml+xml
- application/javascript
If your not sure that you’re already using Gzip compression, contact your hosting provider.
Mobile CDN
A content delivery network can enormously speed up your mobile store. With the help of CDN, your scripts and images are stored on a distributed network of servers with the closest web server to the client actually sending the content.
Simply put, Asian customers get content from Asian servers, not from the US ones. It significantly removes the distance between your clients and servers what make your mobile performance much better.
Do You Want to Speed Up Your Magento Website?
Bottom Line
Do you remember what is the share of mobile Commerce? Yep, 45 %. Almost half of all online purchases are made via smartphones. Boosting your mobile performance should become your top priority to beat your competitors and win clients. You’re not obliged to follow all these tips, even 2 of them can significantly help you speed up your website. I hope that some of these tips will help you to succeed. Good luck!
