Posts Tagged ‘responsive web design’
Last week, we published a survey called “RESPONSIVE WEB DESIGN: WHY IMAGE OPTIMIZATION IS CRUCIAL FOR A MOBILE-FRIENDLY CUSTOMER EXPERIENCE,” where we looked at the performance of responsive design websites in both desktop browsers and mobile browsers. While it’s true that many factors contribute to the overall weight of a webpage, image size is at the top of that list, with large images directly affecting load time. This is particularly true for responsive websites, which are designed to deliver an excellent visual experience across all devices. Unfortunately, this one-size-fits-all approach can often yield bloated sites that take too long to load.
To test this theory, we surveyed top-rated responsive sites to see how images were affecting their load times. First, we compiled a list of 155 prominent responsive sites based on published data from Dashburst, Econsultancy, Mobify, Search Engine Journal, and The Next Web. We then examined the total page and image weights for the home page of all 155 sites, and then measured the load time of each page on a variety of mobile devices.
An analysis of our sample revealed the good, the bad and the ugly in terms of mobile performance. The good was quite small with only 32 of the 155 sites that we analyzed, or 21%, responding with load times of less than 4 seconds; the bad included 48% of the sample with load times between 4 and 8 seconds; and 32% were downright ugly, requiring anywhere from 8 to 48 seconds to load.
Furthermore, we explored whether server-side processing could lower overall page weight and improve performance on mobile devices. To determine this, we selected the most image-heavy websites (a total of 64 responsive websites), and optimized the JPEG and PNG images using resizing and image compression methods suitable for desktop machines, tablets, and smartphones.
We found that by using our own image optimization solution, we could reduce page weight by 57% for desktop sites, 74% for tablets and 77% for smartphones. What is more interesting, by using SNOW.IO, we were able to dynamically serve up optimized images at runtime with no programming or tags required. Just add SNOW.IO to your webserver and your responsive site will automatically serve an image optimized for the target device.
Indeed, the better approach when using responsive design techniques to create a site across all devices is to let the webserver (and not the mobile device) do the heavy lifting when it comes to images. You can read more about our findings in our news section or download the complete report for the detailed analysis .
Stay tuned for more details as we put the finishing touches on SNOW.IO.
Fresh off the plane, coming back from Breaking Development conference (@bdconf) in Dallas, packed with 3 days of stimulating presentations and discussions with such Web thought leaders like Brad Frost (@brad_frost), Lyza Gardner (@lyzadanger) and Luke Wroblewski (@lukew) to name a few. Right off the bat, 2 points were clear to me. First, how far Web technologies have come in the past couple of years and second, how hard we still need to work to bring mobile Websites to 2012.
What do I mean by bringing mobile Websites to 2012 you ask?