Designers of single page websites often don’t take page load times and page weight into consideration. Such sites are often several megabytes in size, taking way too long to download. Mobile users are often penalized by such sites, as they have to download a lot of data and, in many cases, use up a large amount of their monthly data allowance.
The front page of a well-known newspaper website in Britain is a huge 7 megabytes when it’s first loaded… and even on a repeat visits, readers have to re-download nearly 1.5 megabytes of data every time.
Performance was therefore a main priority when coding the new version of friendlyworkspace.ch at !frappant Webfactory for our client Gesundheitsförderung Schweiz.
The project gave me the opportunity to delve into responsive images for the first time in a commercial project. Using HTML5’s srcset feature, I can make sure that the content images in the custom page modules are loaded at a suitable size for each device. For now, at three breakpoints: mobile, tablet and desktop.
Although desktop browsers still receive around 1.2 megabytes of data for the single-page view, 85% of this load is made up of images. By allowing the browser to choose and download smaller images for mobile use, the weight of the image assets can be reduced by over 90%.
Take the leading image as an example, featuring a smiling woman. The desktop-sized image (1600px wide) is 150kb; the version delivered to mobile devices (320px) is just short of 11kb.
Other JPGs containing plenty of white space are more heavily compressed, leading to a massive performance win for smaller devices.
By ensuring that the file caching times are correctly set for a long browser life, we can ensure that after the first visit, all but 12.7 kilobytes – the HTML page itself – is loaded from the browser cache. That makes the long, detailed page of content exceptionally fast.
Cross-browser support for the srcset technology is rapidly improving, but I needed to implement Scott Jehl’s picturefill to make sure that Internet Explorer plays nicely. As the large JPGs on the site are primarily design elements, rather than critical content elements, I decided that the JavaScript polyfill was O.K. to use. If JavaScript fails for any reason, then the only loss will be of the design elements, not any page content.
The slider at the top of the page is an exception to the srcset implementation. Here, the crop aspect of the images is slightly different at each resolution, so the images are defined individually at all three resolutions for now. (A future update will switch this module over to an srcset solution too.)
Leave a Reply