3 Design Tactics for Better Mobile Optimization and UX
The holiday season is in sight. The shoppers are coming. And when they come, they will be attacking from all fronts: web, retail and – increasingly – from mobile devices.
In fact, for the first half of this year, “mCommerce” accounted for 10% of all eCommerce sales. 10%! And according to eMarketer that number should jump to 16% during the busy buying season — netting around 10 billion dollars of revenue.
Even in a world where the rapid growth of the mobile web has been reported to the point of cliché, these are still astounding numbers. Consider that in Q4 2010, the mCommerce percentage was only at 3%. And those figures account only for actual purchases made on devices – not the hours of comparison-shopping users may do on their phones before actually making a purchase either in person or on desktop. (Figures for eCommerce traffic on mobile is much higher than the percentage of total sales).
Simply put, eCommerce sites that don’t optimize for mobile users will miss out on a serious chunk of the market.
The Mobile Performance Challenge
Optimizing for mobile means not only implementing new designs and visitor flows, but also optimizing performance. Mobile users tend to be even less patient than desktop users, expecting faster page loads on average. They’re quick to bounce from a slow page and prone to going directly to a competitor when they’re frustrated.
Since smaller devices and unreliable cell networks introduce new performance challenges, making mobile sites fast is no trivial effort. Blanket application of performance best practices honed on desktop sites will not guarantee success in mobile.
How to Optimize Mobile Sites for the Holidays
Unless you’re already mid-stream, you’re not going to be able to re-do your entire mobile presence from the ground up in time for the holidays. But that doesn’t mean you can’t optimize it for performance to capitalize on the influx of traffic. Furthermore, 5 of every 7 dollars spent on mCommerce is done through desktop sites accessed on mobile, so even if your mobile site is top notch, making sure your desktop site is optimized for mobile visitors is essential. A few simple steps can seriously impact your mobile performance in the short term, carrying on to bring long-term value.
1. Find out how fast your site is (for everyone)
The explosion of devices and browsers means it’s more important than ever to test performance across a large set of variables. Covering all bases is key to understanding your challenge and deciding where to focus your efforts in optimization.
To test effectively, know your performance across:
- Device types (popular phones, tablets)
- Mobile browsers
- Last-mile connection (3G, 4G, wireless)
This testing can be accomplished with tools like Webpagetest.org (which is free) or offerings from Keynote and Compuware. Using this data, you can also drill down to identify speed bottlenecks, to see if your site is repeatedly slowed by a particular on-page asset or type of asset (e.g. an inconsistent Facebook script or a sneaky group of un-optimized images).
While you’re at it, use these tools to check your desktop site too. 35% of mobile users choose to view the “full site” immediately — make sure the experience there matches your goals.
For more on performance testing and identifying bottlenecks, check out our eBook: 10 Performance Problems Identified in 10 Seconds
2. Cut down number of requests per page
Reducing requests is already a cornerstone tactic for optimizing desktop sites – fewer requests means less overhead due to the time it takes for each request to travel across the Internet. For mobile, though, it’s even more effective. Why? Because cell networks are unreliable. Packet loss rates, connection failures, and tower congestion all conspire against fast and reliable page loads. On-page elements fail, pages stall during the load process, and users are frustrated. Cutting down requests simply reduces the chance a page will fall victim to one of these issues.
Cutting down requests entails:
- Script concatenation
- Creating image sprites
- Using Data URIs
For walkthroughs on how to perform these techniques (and more!) check out our eBook: 11 Techniques to Make Your Website Rock.
3. Reduce image performance impact (footprint)
Images take up 70% of total bandwidth for mobile sites. Since images are often some of the bulkiest files that will have to be processed on a mobile page, it’s worth trying to reduce the number of bytes that are required to present your on-page experience.
Basic ways to reduce image impact include:
Lossless image compression – This basic image compression should always be in use
Lossy image compression – “Lossy” compression means degrading image quality — though only to an extent that?s imperceptible, or nearly imperceptible, to the user — in exchange for significantly smaller file size. For more on lossy image compression check out our blog post on the subject.
Image right-sizing – All browsers will attempt to (if the developer doesn’t address it) resize images for the frame dimensions. When a developer neglects to specify image dimensions, he/she is forcing the device to do more work to right-size the image. Beyond that, there’s the issue of delivering too large a payload to the browser (huge images fit for desktop screens being displayed in a tiny window is a waste). “Image right-sizing” involves applying custom code to dynamically resize the images so the browser receives only the image size it needs. For more on right-sizing, check out CloudFour’s blog post on the subject.
4. Reduce image impact on performance (on-page presentation)
Keeping that 70-30 image ratio in mind, think of what a typical site looks like in the viewport of a mobile phone or small tablet. Regardless whether it’s a “full site” or a mobile-specific site, the central content of the page takes up almost all of the horizontal real estate, and the viewport only shows a fraction of the vertical length of most pages. That means either A) there are unseen images outside of the viewport adding requests and payload (thereby slowing down the page); or B) images are crowding out the actual content the visitor wants to see. In either case, the user experience is not optimal.
We noted the significant percentage of mobile users choosing to buy through the desktop versions of sites. The following techniques are great for desktop users, and are even more effective when users are accessing the desktop site on a mobile device.
To optimize image presentation for mobile experience:
Delay-load images – Set images that are further down the page to load only after the “above the fold” content is finished. This lets the visible part of the page finish loading much faster. And by the time the user decides to scroll down the page, the “below the fold” images will be done loading.
Lazy-Load Images – Similar to delay-loading, lazy-loading actually recognizes when an image comes into the viewport of the device, and loads it on-command at that point in time. This creates a seamless and fast user experience. Check out this GitHub page on lazy-loading for more.
5. Continue monitoring over time
Just like performance optimization for desktop sites, optimizing for mobile is not a one and done project. To guarantee that your changes are working, you’ll need to systematically replicate the tests you performed initially to compare them to the baseline. Further, you’ll benefit from charting performance data over time to discover trends. This is the only way to guarantee that your visitors are having an optimal experience and that your site is ready to capitalize on the holiday crush.
To monitor over time, choose a tool that:
- Offers visualized trending of performance data
- Enables deep-dive views into data – not just generic “load time” stats
- Captures data through real browsers and/or real user sessions
For more on monitoring, check out our eBook 17 User Experience Metrics You Should Care About.
The number of customers buying on phones and tablets is increasing rapidly, and they expect fast performance. Capitalize on this growing segment by beating the competition on user experience this holiday season.
It may be too late for a complete overhaul of your mobile experience, but it?s not too late to apply some simple best practices for performance. In summary,
- Test your site
- Reduce requests
- Optimize Images
- Monitor over time