Not long ago, websites were usually simple affairs. Some text, a few images, a little interaction, the odd form and some quick audio or video. Over the last five years, however, even the simplest site has become bigger. A lot bigger. According to the HTTP Archive, which has been tracking this sort of thing for half a decade or more, the average ‘page’ at a major website is now heading towards 2MB. And well-known websites can have pages weighing in as much as 14MB in size.
As a bit of background, page load performance isn’t just about how many bytes a browser needs to download, it’s also about how many individual files go into making up that page. As the typical high profile website approaches 200 individual files, this has become a particularly costly problem over even the shiniest 4G mobile network.
More than a developer’s dilemma
While there are things that developers and DevOps professionals are doing to tackle page load times, this problem is more than a developer’s dilemma. Reason being that it’s often the strategic and design decisions as team makes that contribute to increased load time.
Think of it like this: just as building new roads increases the amount of traffic on them (ironically increasing overall trip times), increased network performance has encouraged bigger, slower sites.
Why is this a problem? In addition to providing a poor user experience on any large site, research shows that slow page load can be incredibly costly for retailers. Walmart, for instance, has seen the impact of a page that loads a second slower at 2% of their total e-commerce sales. Additionally, other e-tailers have measured and reported far worse outcomes. With these learnings, we’ve proven that even the slightest page load increase can contribute to a noticeable decrease in earnings, along with other key engagement metrics.
However, there’s a surprising upside to such great losses. A company’s ability to decrease page load time not only offers a very competitive advantage, but isn’t as difficult to execute as one may think.
You are part of the solution
To begin solving today’s page load problem, we need to first stop ignoring our role as designers and decision makers. We must make a mental shift to begin seeing performance as everyone’s problem.
As a new rule, remember that every single image, font and font weight will incur a performance cost. Social media buttons can add 10 seconds or more per page load. Third party ads, analytics, and user trackers will also incur considerable costs, depending on how they’re implemented.
Moving forward, take a few extra minutes to choose the right format and optimize images before handing them in. Make it a point to help your developers to the best of your ability. Invest in learning about what different aspects of a web page cost in terms of performance. Talk with members of the Development and DevOps teams to decide what’s necessary and what’s extraneous. Together, be mindful of all costs.
Website performance is one area where there are clear, measurable returns on investment, and where most sites really aren’t yet paying enough attention. But that will change — so you can get onboard now and get ahead of your competitors, or wait and play catch up.
Recommended reading
- While more for designers and developers, Etsy’s Lara Hogan has literally written the book on designing for performance.
- The performance team at Etsy also brought together some thoughts on performance for that company, with some good rules of thumb.
- Some real world numbers to convince your client, team or boss about the real cost of website performance that focuses on the bigger picture.
About our writer // John Allsopp, co-founder of the Web Directions conferences, is widely recognized as the originator of the concepts behind Responsive Web Design, and his ideas helped form the foundations for Typekit. Find him on Twitter @johnallsopp.
The Fetch Blog 