While a number of factors contribute to the overall weight of a web page, the size of images is often the primary driver.
Some of the top responsive design websites are delivering unacceptable load times on mobile devices, according to an analysis of 155 responsive websites by Trilibis, develops server-side responsive design technology for businesses, brands and web development firms.
The study revealed that just 21 percent of these modern websites were loading in less than four seconds on a smartphone, and that 32 percent of the sites required between 8 and 48 seconds to load.
While a number of factors contribute to the overall weight of a web page, the size of images is often the primary driver. 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 (disk, RAM), page weight is not a major concern. But for mobile devices, the exact opposite proved to be true.
To conduct the study, Trilibis compiled a list of 155 prominent responsive sites based on published data from Dashburst, Econsultancy, Mobify, Search Engine Journal, and The Next Web.
The company then examined the total page and image weights of the home page of each of these responsive sites, and then measured the load time of each page on a mobile device.
For the image optimization analysis, they optimized the JPEG and PNG images of the targeted sites using image compression and resizing methods suitable for desktop machines, tablets, and smartphones.
Trilibis investigated the reason for these sluggish page-load time of responsive sites and found that image size was the primary cause. By analyzing page composition, Trilibis determined that the mean home page weight of the sites in the sample was 1.7MB, with a median weight of 1.2MB.
This figure was considerably heavier than the 420KB average page weight of the top 30 retailers tracked on the Keynote Mobile Commerce Performance Index, a well-known industry benchmark.
"The mobile Web is considerably slower than its wireline counterpart," Ted Verani, senior vice president of of sales and marketing at Trilibis. "By serving images and pages that are optimized for mobile devices, we see dramatic improvements in page-load time, which translates to a much better overall user experience."
Trilibis also provided some recommendations for website designers, including careful management of image size, which 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," the report noted. "A successful One Web strategy should optimize website assets for specific classes of mobile device. To optimize performance on mobile devices, consider the use of server-side technologies in conjunction with responsive design techniques."