There’s plenty of rather alarming data about how users react to the time it takes for a website to load. For example, one study found that nearly half of web users expect a site to load in 2 seconds or less, and they tend to abandon a site that isn’t loaded within 3 seconds. Walmart.com found that when load times jump from 1 second to 4 seconds, conversions decline sharply, and for every 1 second of improvement, they’ve experienced up to a 2% conversion increase. Studies have consistently found that we expect increasingly faster load times - in 2006, people expected page load times to be four seconds or fewer. Just three years later, that expectation was down to two seconds. Now, it’s even less.
Regardless of these figures, it’s fair to say anecdotally, based on your own online experiences, that we’ve all become less and less patient to wait for websites to load and we get annoyed when they’re slow. We’re much less likely to want to buy something from, or re-visit, a website that’s sluggish. And Google has recognized that by including site speed as one of the signals used by its algorithm to rank pages, meaning that slow websites will be demoted in the search results.
One of VentureWeb’s development wizards, Roger Sarrasin, has been focussing in the past year on site speed and performance. He’s using a bunch of tools and methods to help improve page load times and initial rendering of the web page, and used new performance tools (such as Speed Curve and Page Speed Test) to measure the improvements.
Roger’s tricky tricks have had a big impact on the speed of some of the websites of VentureWeb’s clients. For example, work Roger has done on Jasper SkyTram’s website has made the full rendering of the home page 64% faster. Even taking the survey data with a grain of salt, it’s clear that such a significant improvement will have a big impact on user experience. Work on Golden Isles’ website has made “start render” (the time it takes for the page to start to display in the user’s browser) of its activities pages faster by 2 seconds and the full render faster by 1.7 seconds.
Some of the key techniques Roger has employed include:
- Lazy loading: this stops images being downloaded unless the image is in the user’s viewport (“above the fold”). Any images lower down the page that the user can’t see won’t be downloaded until the s/he has scrolled down and is near the image. This helps to reduce the number of images initially downloaded and can save bandwidth usage.
- Image optimization: this allows different sizes of the same image to be delivered depending on the user’s device or browser size. The technique makes the server resize a lead image to a smaller dimension and file size if the person is viewing the page on a mobile device.
- Inline CSS: this adds styling code (CSS) to the top of the page, which allows the browser to read these styles sooner and display “above the fold” content (content in the user’s viewpoint) much earlier.
- Minified HTML and CSS: the website code is all minified, which means all the extra whitespace has been removed from the code files, resulting in much smaller website file sizes, faster downloads, and reduced bandwidth use.
- Font loading: font services are moved to the bottom of the page to allow the website content to download and display first, before fonts are downloaded, so that they do not delay the page from rendering.
- Gzip: website files are delivered by the server in gzip format, which allows the files to be much smaller in file size and makes their download faster.
Speeding up websites is important. Faster sites help create happy users, encourage conversions, and boost organic search rankings. If you’d like to find out more about making your website perform more like a World Cup downhill racer than a Jerry zigzagging down the bunny slopes, get in touch with us here at VentureWeb. We like going fast!