Image-heavy responsive sites drag down mobile performance: report
April 21, 2014
Starbucks’ mobile site
An analysis of 155 responsive sites finds that only 32 or 21 percent of sites load in four seconds or less, according to a report from Trilibis launching today.
The Responsive Web design: Why image optimization is crucial for a mobile-friendly customer experience report is based on a list of 155 responsive sites from brands such as Starbucks and Wired UK and looks at both total image and page weights of the sites. Despite the attention that responsive Web has garnered as a cross-screen Web solution, Trilibis research indicates that there are some limitations with responsive Web load times since images and code run in the background that users cannot see.
Marketers that operate fast-changing and highly dynamic Web sites such as news blogs [and] etailers with changing inventory need to pay attention to the size of images that they send to mobile devices, said Ted Verani, senior vice president of sales and marketing at Trilibis, San Mateo, CA.
Heavy images lead to increased page weight, which directly impacts how fast a site will load, he said.
This is particularly true for responsive design Web sites, where the same codebase and associated images are sent to all devices from PCs to mobile phones. It is best to optimize images for mobile devices at the server level, which delivers lighter pages, faster load times and a better user experience.
Mobiles wrath on load times
The report is another example of the ongoing learnings related to responsive Web as marketers test new Web design tactics.
Trilibis measured the load time for each page, and the images were optimized with compression and resizing approaches across desktops, tablets and smartphones.
The 155 sites analyzed includeTime, Starbucks, World Wildfund Foundation, Mitsubishi, Capital One, Currys,Nokia, Salesforce, Gigaom, Engadget, Mulberry, Microsoft and Sony.
Aside from the 21 percent of sites that loaded in less than four seconds, 31 percent of the sites took between eight and 48 seconds to load. The remaining 48 percent of sites had a load time between four and eight seconds.
The mean load time for the sites was 7.95 seconds, and the median time was 5.82 seconds.
The speediest responsive site clocked a .54 second load time, and the heaviest responsive site took 48.08 seconds to load.
Trilibis cites marketers need to launch mobile and Web sites quickly as the root of the performance problems. Since responsive sites serve up the same content across multiple screens, large images put extra pressure on mobile devices that may not be able to process the image quick enough.
Images were largely to blame for the slow-down and generated more than 50 percent of overall page weight. Sixty-nine percent of the sites analyzed in the report heavily played up graphics.
Moreover, the six sites with the most images had more than 90 percent of overall weight from the home pages coming from pictures.
Breaking down responsive
The lightest page in the study had a page weight of 57 kilobytes, and the heaviest weighed in at 11 megabytes.
The report also broke down the home page weights with a mean size of 1.7 megabytes and a median weight of 1.2 megabytes.
Trimming mobile performance
Trilibis then applied server-side image optimization to 64 of the sites surveyed. These sites had a home page weight greater than ten megabytes with at least one served that was heavier than 100 kilobytes.
The difference with both server-side optimization and responsive delivery compared to responsive Web is that the technology serves up content to specific devices and does not tamper with Web site coding.
The idea is that the technology can detect which device a consumer is accessing content from and decide which pieces of content are most relevant to serve.
Images play an essential role in user engagement, Mr. Verani said.
Designers of responsive sites should consider how images affect site load time and performance, he said. They can also use server-side device detection and image optimization technology to provide an excellent experience for desktop, tablet and smartphone users.
The images were compressed at three levels. PNG images were set at a nine of nine level, and JPG pictures were set to a 50 of one level. The mobile compression level was640 pixels wide.
Before going through the compressions, the combined weight for the 64 sites was 115 megabytes.Image compression slimmed down the page weight of the desktop sites to 50 megabytes, tablet page weight shrunk to 30 megabytes and the page weights from smartphones dropped to 27 megabytes.
Trilibis claims that these numbers represent a reduction in page weights by 57 percent for desktops, 74 percent on tablet and 77 percent for smartphones.
A graph from the report
Trilibis then ran tests on the Starbucks, Bold and Noble and Engadget responsive sites. The content from the three sites was reproduced on Trilibis Web server and server-side optimization was applied to images on the home page.
The company then calculated load times and the image weight on desktop and mobile.
Server-side optimization on Starbucks site cut down mobile page weight from 892kilobytesto 90kilobytes. Additionally, the coffee giants load time was down to 3.206 seconds from 4.454 seconds.
Running the tests on Bold and Nobles site dropped the mobile page weight from 2.2 megabytes to 212kilobytes, or by 90 percent. Load time also dropped from 6.63 seconds to 3.912 seconds.
On Engadgets site, Trilibis test reduced mobile page weight to 362kilobytes, down from 861kilobytes. Not surprisingly, load times decreased from 11.814 seconds to 5.45 seconds.
For brands and retailers who have already tested responsive Web design, server-side optimizations could be beneficial in helping speed up load times.
A responsive Web design challenge not often discussed is that changes on an ecommerce site can render in unexpectedly poor ways on hundreds of mobile devices, said Wilson Kerr, vice president of business development and sales atUnbound Commerce, Boston.
Mr. Kerr is not affiliated with Trilibis. He commented based on his expertise on the subject.
A lot of testing needs to be done and this can be both expensive for IT and limiting, from a mobile marketing perspective, even with server-side image optimization, he said. Responsive Web design is trendy and sells a lot of tickets to a lot of conferences, but retailers should understand the pitfalls, especially as mobile commerce keeps growing.
Lauren Johnson is associate reporter on Mobile Marketer, New York