Performance is design

The WiFi connection on the train is too slow, so you access a website with your slightly faster 3G connection. The website doesn’t load quickly, but you eventually get there—albeit not with much enthusiasm.

Nowadays, the average webpage is 1MB in size, which is simply too much. We assumed that internet connections had become faster. That’s true, but we forgot about mobile connections. A 1MB page is too large, and in most cases, it’s the result of sheer laziness from designers and developers, myself included. This has changed significantly over time, and I have become aware of the importance of good performance.

Let’s revisit the example of a heavy website. In this case, each page is around 1.3MB. Imagine if it were only 250KB—five times smaller, five times faster. Cool, right? You’d be able to read an article faster, order tickets quicker, and check train schedules without having to wait 10 seconds.

Design is about ensuring that the user can achieve their goal as simply as possible. Poor performance therefore means poor design.

Practical Improvements

• Develop directly in the browser, because you can’t measure performance in Photoshop.
• Pay attention to the number of images and their sizes. Use sprites or icon fonts, and don’t forget responsive images.
• Be cautious with box-shadow; anything beyond 3 pixels can cause your website to render more slowly.
• Compress and bundle all your JavaScript and CSS files.

Further Reading

• Tutsplus: Best practices for increasing website performance
• Brad Frost: Performance as design
• CSS Wizardry: Front-end performance for web designers and frond-end developers
• Clearleft: Responsive design on a budget
• Smashing Magazine: How to make your websites faster on mobile devices

— This post was originally written on the Studio Wolf blog.