Responsive web design (RWD) is generally regarded, as CMSWire writer Tom Murphy noted today, "just fine for now." But a new survey from Trilibis, a provider of mobile development solutions, claims mobile performance on responsive design websites is often "unacceptable."

Four out of five RWD websites provide suboptimal page weight and load time on mobile devices, according to the survey, "Responsive Web Design: Why Image Optimization Is Crucial for a Mobile-Friendly Customer Experience."

The survey examined 155 responsive websites. Of these, Trilibis found only 21 percent loaded in less than four seconds on a smartphone. Nearly a third required between eight and 48 seconds to load, with equivalent connectivity.

The Culprit

The culprit: image size, the former bugaboo of websites before virtually everyone got high-speed access. Images were more than half of the overall page weight for 69 percent of the sampled sites. If the overall page weight was greater than one megabyte, the survey found, the load time became unacceptable. And 61 percent presented a home page that weighed at least one megabyte.

As might be expected from the company that conducted the survey, Trilibis claims it has a solution.

The remedy is its server-side processing solution called Snow, which performs image optimization with the targeted mobile device in mind. Average page weight among all sampled sites was 1.8 megabytes, which Snow reduced to 789 kilobytes for desktop, 470 kilobytes for tablets and 420 kilobytes for phone. Page load times were reduced by 28 percent to 54 percent.

Suntae Kim, Trilibis' vice president of professional services, told CMSWire that Snow conducts a two-step image optimization process. First, there's optimization of all images on a web page, creating and storing an optimized version for each of three device groups – desktop, tablet and mobile browser. Then, he said, "when a web page is requested by a device, Snow will detect the device and serve up" an image optimized for its device group.

Starbucks - jpg.jpg
Trilibis: a 28 percent reduction in Starbucks load time with image optimization.

RWD provides one URL, one code base and one set of content, which is then rendered for a target device's presentation and features through the use of fluid grids and cascading style sheets (CSS). Trilibis claims that CSS detects the screen width on the client side, but that Snow detects device characteristics before the content is sent. Additionally, Kim said, CSS reformats layout and scales the image on the device side – after the image has already been sent and caused any loading performance issues.

Adaptive Design

By comparison to responsive design, an adaptive design approach builds different sites for different devices – a smartphone site, for instance, in addition to a tablet site and a desktop/laptop site.