Responsive sites fail load tests
Tuesday April 22 2014
Web performance survey finds 69% of responsively designed websites fail to deliver acceptable load times on mobile devices due to image sizing issue
A survey published this week found that some of the top websites designed to be responsive are delivering unacceptable load times on mobile devices.
Analysis of 155 responsive websites revealed that only 21% of these websites – referred to as ‘responsive’ because they are built using rich media that adjusts automatically to any screen size – were loading in less than four seconds on a smartphone. A further 32% of these responsive sites required between 8 and 48 seconds to load.
Mobile development specialist Trilibis
investigated the reason for this sluggish page-load time of responsive sites and found that image size was the primary cause.
Images add to webpage weight
By analysing page composition, Trilibis determined that the mean homepage weight of the sites in the sample was 1.7 megabytes (MB), with a median weight of 1.2MB.
While a number of factors contribute to overall weight of a webpage, image size ranks highest. This is particularly true for responsive websites, which are often graphically complex and are designed to deliver an excellent visual experience on all devices.
For desktop computers with high-bandwidth connections and abundant local resources (such as hard disk and RAM storage), page weight is not a major concern. But for mobile devices, the exact opposite is true.
When Trilibis examined the relationship between image weight and overall page weight of the sites in the sample, it found that images constituted more than 50% of overall page weight for 107 websites (or 69% of the sample).
The developer also found that, on average, images were 50-60% of the page weight for these responsive sites, and that load time was unacceptable when overall page weight exceeded 1 MB. In fact, 61% of the responsive websites in this sample served a home page of at least 1MB in size.
Server-side processing steps
The survey also examined whether server-side processing could lower overall page weight and improve performance on mobile devices. To determine this, Trilibis selected the most image-heavy websites (a total of 64 responsive websites), and performed simple image optimisation to reduce images to a size that would ensure excellent rendition of the website on a wide range of desktop and mobile devices.
Before server-side optimisation, the total image weight of all 64 responsive websites was 115MB. Trilibis used its device detection and image optimisation technology to reduce the page weight for every class of device: down to 50MB for desktop browsers, 30MB for tablets, and 27MB for smartphones, which amounted to a reduction in page weight of 57%, 74% and 77%, respectively.
The mean page weight of the 64 websites was 1.8MB; optimisation reduced this to 780KB (desktop), 470KB (tablet) and 420KB (phone). To measure the reduction in load time, Trilibis applied these optimisation techniques to three sites in the sample (Boldandnoble.com
), and recorded site-load time reductions of several seconds.
Redressing mobile imbalance
“The mobile web is considerably slower than its wireline counterpart,” said Ted Verani, senior vice president of sales and marketing at Trilibis. “By serving images and pages that are optimised for mobile devices, we see dramatic improvements in page-load time, which translates to a much better overall user experience.”
The company also gave its recommendations to website designers for reducing responsive webpage load times:
- Carefully managing image size is crucial to ensure responsive websites load quickly and deliver the best experience for mobile users.
- 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. A successful ‘one web’ strategy should optimise website assets for specific classes of mobile device.
- To optimise performance on mobile devices, consider the use of server-side technologies in conjunction with responsive design techniques. For its survey, Trilibis used Software Enabling One Web (SNOW), its server-side technology that adds automatic device detection and image optimisation to responsive websites.
For the image optimisation analysis, the developer optimised the JPEG and PNG images of the targeted sites using image compression and resizing methods suitable for desktop machines, tablets and smartphones.
Tagged as: Online | responsive | website | e-commerce | mobile | m-commerce | speed | performance | Trilibis