I'm not a fan of one-page websites, as a rule. But making sure that they load as quickly as possible goes a long way to making them acceptable.
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.
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
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.)