Website performance is more valuable than features

Why the obsession with optimizing website speed performance?

Andy Hume explains the importance of web page load speed is best:

“There is no difference for the user between a site being down and a site being inaccessible due to loading issues caused by blocking resources or slow networks.”

Allow that statement to sink in. From a user’s perspective, your website being too slow is the same as your website being down. The offline commerce equivalent would be to re-create the Apple Store experience just to put up a Sorry We’re Closed sign on the door when your customers arrive. While websites are getting heavier with new features, growing an astounding 67% in total size in just one year (2014 to 2013), website loading speeds aren’t keeping up – especially for the mobile users who are quickly becoming responsible for the majority of the web traffic. Below we will explore strategies that will help you re-examine approaches that hurt your website performance – all without getting too technical.

What is Good Website Performance, Anyway?

Everybody’s different, but most people wait for one second – and then their mind starts to wander off. The One Second Rule Anything that takes less than 1/10th of a second feels instant. Perception of waiting starts kicking in just after a quarter of a second! After one second, the brain is ready to switch tasks, as the process of forgetting the original intent sets in motion. Attention is completely lost after 10 seconds. At this point we should make an important distinction between a full page load and key content render. Web pages load in bundles (or packets) and their order matters. Page 1 could fully load in 3 seconds, but display nothing until the 2.5 second mark. Page 2 may take 5 seconds, but show the majority of the content after the first second. While taking longer to load, Page 2 provides a better user experience and show better website performance metrics, we would argue.

A Business Case for Paying Attention to Website Performance

As we mentioned in a blog post before, most website users will abandon a website just after 3 seconds of waiting for the site to load if they don’t see any content on the loading page. Moreover, 4 out of 5 of those users will never come back. So the time your website should render key content should be between 1 and 3 seconds. There is not only a user experience case for better performance, but also a business case: How Speed Affects Business Performance The above table lists data from a Bing experiment where website performance had been artificially delayed on purpose. As could be expected, a 2-second (2000 millisecond) delay decreased user satisfaction by 3.8% and the number of clicks fell by 4.4%. However, the fact that the RPU (revenue per user) also dropped by 4.3% clearly demonstrated that slower websites negatively impacts the bottom line.

Best Practices in Improving Website Performance

What would it take for you website to render key content in as close as possible to 1 second? One of the ways is by implementing an approach called Performance Budgeting. A performance budget is essentially a focused approach to limiting 1. the total web page size, and 2. the total number of web page assets. The budget refers to a specific performance, say seeing a usable page in 10 seconds on a GPRS connection, and defining the page weight and asset count based on that. An important concept in performance budgeting is called “key content”, as it is usually a minimal usable content required to keep user attention while the remainder of the page loads. Key to understanding Performance Budgeting Without getting too technical, your key content should mostly consist of the “cheap” performance budget assets.

1. Use “cheap” assets:

• text
• a small image
• video (without auto-play)

“Cheap” performance budget assets should be first to load, giving the user access to the most important part of your website. The “expensive” items on your performance budget should be kept to a minimum: moreover, you should have a justification for every “expensive” asset.

2. As much as possible, avoid “expensive” items:

• a high resolution image – or worse: several of them
• many small images
• 3rd party widgets and extensions

Once you establish a budget, adding something to the website requires a discussion about:

• optimizing existing features
• removing existing features that add little value
• not adding a new feature

Keeping your web pages fit and within budget requires you to proactively remove and refuse “expensive” performance budget assets. If that seems too complicated, you should at least ensure that all image assets are optimized using lossless file size minimization as image content is the number one offender in keeping your pages slow. Removing valuable content to increase page speed is, however, not a valid performance strategy. Deciding on a performance budget requires who your target users are, knowing their actual Internet access speed, which browser they use and many other considerations. MavenEcommerce has consulted dozens of businesses on performance issues, so feel free to contact us if you need help establishing a performance budget or just making your Magento store faster.

Website Optimization Summary

Optimizing performance is not just a feel-good thing: better performance has real impact on your bottom line; There is real business logic in having your web site load key content as close as possible to about 1 second. A performance budget is one tool that helps with maintaining performance by providing a framework for decisions on what components should – and shouldn’t – be added.