Mobile-friendly responsive design websites can deliver an excellent visual experience for visitors but as Ted Verani, SVP Sales & Marketing, Trilibis explains image-rich websites need to pay special attention to image weight and its effect on page-load times.
Global mobile internet usage increased from 14% to 25% between May 2013 and May 2014, according to a recent report by influential KPCB analyst Mary Meeker. That increase was most pronounced in Europe, where mobile internet usage as percentage of total web page views jumped from 8% to 16% (compared with growth of 11% to 19% in North America).
For online retailers, one very interesting mobile factoid in her report concerns tablets: unit growth was 52% over last year, a massive jump that is surely reflected in this year’s server logs of any marketer. This mirrors the findings of comScore, which reported that one-third of online shoppers at the top 10 retailers shop only on mobile devices. Your own website analytics are likely showing similar or even higher mobile traffic numbers.
ONE-WEB ARCHITECTURE
Until recently, for many companies, a mobile website meant deploying an “m-dot” experience that was distinctly separate from the desktop version of their website. While this approach ensured an optimized experience for mobile users, its disadvantages were significant: a separate code base (development and maintenance costs); two websites to manage (content synchronization issues); and associated SEO issues. Consequently, many companies re-examined the “segmented web” strategy, leading to a major shift toward responsive web design.
With responsive design, a website can configure its presentation to fit all screen sizes, ranging from a high-res desktop display to the smallest smartphone. Responsive sites are created from a single codebase and use a set of techniques that adapt the content to various screen sizes of tablets and smartphones.
The result is impressive: a website that smoothly adjusts its layout to any device, especially smartphones and tablets. It’s no surprise that marketers and e-business managers have embraced responsive design as a scalable way to deliver an excellent mobile experience from a single website code base.
There is a wealth of excellent guidance on designing websites that deliver a superior user experience on mobile devices. Using responsive techniques is generally considered a best practice for ensuring a consistent, “one web” experience across all devices. But online retailers should be aware that the ‘one size fits all’ approach – that is so appealing for website designers – also has some significant downsides.
Development time: Responsive design typically requires a large-scale rebuild of a company’s web presence. From UI/UX design to the final testing phase, there are many things that go into the development of a good responsive site that ensures the experience is optimized for a wide variety of devices.
Contextual challenge: While it addresses layout problems, and elegantly expands and contracts according to a screen’s width, responsive design is a one-size-fits-all-approach that makes it difficult to optimize for special design considerations or differentiated use-cases, such as offering the customer a mobile-specific shopping experience.
Performance: Responsive design forces the browser to handle the bulk of the processing work so that content is rendered appropriately on the device. The client is sent all elements of a web page, irrespective of local device capabilities, and the client must determine which layout and assets to present. For mobile devices, the result can be longer load times and web pages that perform poorly.
DO IMAGES IMPACT PERFORMANCE?
We decided to take a hard look at how responsive design affects a mobile website’s performance, since load time directly affects user experience and ultimately whether a sale is made or not. Radware recently tested the load times of the Internet Retailer ‘Top 500’ retail web sites and found that pages are heavier (measured in bytes) and slower than they were just one year ago. This correlates with our own experiences. Moreover, through our work with online brands to eliminate performance issues on their websites, we noticed that the design attributes of responsive techniques were frequently the reason for slow page-load times on mobile devices.
While a number of factors can determine the overall weight of a web page, images are generally the principle contributor. This is particularly true for responsive websites, which generally serve the same content to all devices. This can lead to overly large images being served to mobile devices.
To see whether poor performance is often associated with responsive design, Trilibis conducted a survey to measure the image weight of the top responsive websites. We wanted to know: how much do images contribute to page weight on responsive websites; how much does this affect load time for different types of users; is it possible to automatically reduce page weight (and, therefore, load time) while maintaining an excellent user experience?
The study showed that:69% of the responsive sites we sampled were image-heavy, with images contributing to more than 50% of overall page weight; the responsive sites we looked at generally loaded slowly on mobile phones: only 32 out of the 155 responsive sites (21%) responded with acceptable load times of less than 4 seconds; 48% performed poorly with load times of between 4 and 8 seconds; 32% took anywhere from 8 to 48 seconds to load, which is unacceptable for most users.
We then evaluated a technique to automatically reduce image size for responsive websites. Our goal: improve the overall user experience for some real-world examples, and achieve the target load time for RWD sites on mobile devices of no more than 3-4 seconds. We selected three RWD websites: boldandnoble.com, engadget.com and starbucks.com. For each site, we replicated each site’s content on our own webserver. We then optimized all the images used on the home page of each website, calculated the image weight savings for both desktop and mobile devices, and then calculated load times both before and after optimization. The results were noteworthy:
BoldandNoble.com – Images accounted for 2.2MB (49%) of the total 4.5MB home page weight. Optimization results: reduced mobile page weight from 2.2MB to 212KB (90% savings); shortened load time from 6.63 seconds to 3.912 seconds (41% reduction).
Engadget.com – Images accounted for 0.9MB (53%) of the total 1.7MB home page weight. Optimization results: reduced mobile page weight from 861KB to 362KB (58% savings); shortened load time from 11.814 seconds to 5.45 seconds (54% reduction).
Starbucks.com – Images accounted for 0.9MB (53%) of the total 1.7MB home page weight. Optimization results: reduced mobile page weight from 892KB to 90KB (91% savings); shortened load time from 4.454 seconds to 3.206 seconds (28% reduction).
Our research shows that delivering a truly exceptional user experience on the web requires more than simply redefining layout and styling for the screen width of a particular device; it’s crucial to keep the overall page weight low. In the case of images, designers have several options:
1. When designing a responsive website, ensure images are of an appropriate size for mobile devices.
2. If using a web content management system, design different templates that address the wide range of devices that might access the website.
3. Automate the image-sizing process using server-side processing techniques.
To deliver an excellent website experience for mobile users, server-side technologies can be used in conjunction with responsive design techniques. This approach enables detection of the device characteristics of the smartphone or tablet that the visitor is using, and then fine-tuning of the user experience for that visitor.
Server-side logic enables a complete swap of crucial page elements and enables custom functionality based on local device characteristics. For example, a retailer can ensure fast presentation of a product catalogue with images optimized for the accessing device. Or a content-heavy site can deliver entirely different ad placement based on device and user context.
These server-side technologies are simple to implement and use abundant server-side computing resources to optimize the image size for the accessing device before it is sent to the client. As our research shows, this approach can deliver much faster load times – and a far better experience for the user.
