The speed of websites is a hot topic right now with many reports saying that if a website doesn’t load in under 4 seconds then a user will click their back button.
With more and more designs featuring large images and marketing teams demanding multiple third-party tracking scripts everywhere, your website is at risk of loading slowly and putting off customers.
The statistics don’t lie, with kissmetrics.com reporting that 47% of consumers expect a website to load in under 2 seconds and 40% abandon a website that takes over 3 seconds to load.
Pretty sobering stuff.
40% [of people] abandon a website that takes over 3 seconds to load
Source: kissmetrics
A website that takes an age to load is at real risk of its users hitting their back buttons and clicking the next result down in Google. That’s a lost sale, but it could have been easily avoided with some careful planning.
Improving how fast your website loads requires buy-in from the whole team.
- It requires designers to really think about how many different typefaces this designs really needs.
- It requires marketing teams to consider whether Facebook/Twitter share counters are truly worth causing your site to freeze for a second or two while they load their own code.
- It requires developers to create HTML/CSS code that is mobile first and doesn’t include tonnes of third party junk because it makes their lives a little easier.
Using a performance budget
At the start of a project, the team sets a target for the how quickly this site should load. Say if you want it to load in under 5 seconds on mobile and your target audience is (mostly) on 3G, well that means you need to plan accordingly.
Designers now have to make some tough choices because every element on every page has to justify its presence.
If a new feature is needed then something else on the page either needs to be removed or optimised to allow ‘room’ for the new feature.
…a 1 second delay decreases customer satisfaction by 16%
Source: kissmetrics
Combining code assets
Bizarrely, web browsers will often download one large file quicker than several smaller files. So while it may be better for your developers to split their CSS into multiple files for their own ease of management, it could be slowing your site down – unless you combine all those little files into one big one before you use it on your website.
A super simple way to get around this, is for your developers to use a build tool like Grunt or Gulp (yup, they sound made up but, honestly, they’re real things) and automatically combine their smaller JavaScript files (or CSS files) into one big file. While that is happening you could also cut out all the whitespace, comments and uglify the code (once again, I promise, I’m not making these terms up) to reduce that one big file even more.
The rise of flat design
Flat design has taken off in such a big way and a lot of that is down to how much easier it is to design and build websites (and apps) with block colours, less images and simple typography.
If you look at my this site, you will see very few images and you will notice it loads very fast but that approach is not practical for every brand. A lot of the time you need images, big images and lots of them.