The Importance of Web Performance Optimization (WPO)

Web performance optimization offers a lot of benefits like increased conversion rates, page views, search engine rankings, and even lower server bandwidth costs. These factors are especially important in view of mobile connections. To stress web performance optimization much more we’re currently establishing a kind of performance culture which incorporates different teams responsible for the development of a website.

Why We All Should Care about Web Performance Optimization

People hate to wait, whether it’s due to long queues at the supermarket or a poor web performance. Especially regarding the latter, every fraction of a second counts. The benefits of web performance optimization with respect to factors like conversion rate, sales, pageviews, search engine rankings, and others shouldn’t be underrated.

Here are some statistics to illustrate the issue:

• Shopzilla reduced page load times from 7 seconds to 2 seconds and
  saw a 7% — 12% increase in conversion rate
• They also increased pageviews by 25% by decreasing their load time by 5 seconds
• and were able to support the same volume with 50% (402 to 200 nodes) less nodes, cutting server costs in half
• If Amazon increased page load time by +100ms they lose 1% of sales
  (+100ms === 1 marketing pixel / third party script)
• If Google increased page load by +500 ms they get 25% fewer searches
• If Firefox reduced load times by 2.2 seconds they saw an increase in download conversions by 15.4%
• Netflix saw a 43% drop in outbound traffic after enabling compression
• 52% of online shoppers claim that quick page loads are important for their loyalty to a site

Web performance optimization is part of SEO

In addition, web performance optimization plays an important role in SEO. About five years ago, Google added site speed as a signal to their search ranking algorithm, thus encouraging better web performance. And up to now, there have been quite a few releases of reports and tools by Google, aiming to support you in improving your web performance.

Particularly when it comes to mobile devices, a good web performance is crucial. There are even rumors out there that Google is testing a “red badge” or “slow badge”, which labels slow sites in the search results on mobile devices. This doesn’t sound far fetched when taking into account the increasing importance of mobile and after Google already launched a “mobile-friendly label”.

Define a Performance Budget

A good starting point for web performance optimization is to define a performance budget, i.e. to set a certain value for a specific performance indicator and adjust all other factors so that your page doesn’t exceed your budget. For their responsive mobile website, the BBC, for example, determined that each page should be usable within 10 seconds on a GPRS connection and set their goals for page weight and request count in correlation to that budget.

There are a couple of factors for which a certain metric or KPI can be elaborated:

• page load time
• page weight
• PSI Score
• load time
• first paint
• speed index
• visually complete
• number of requests
• or “time to first tweet”

Steve Souders (former Head Performance Engineer at Google and Chief Performance at Yahoo!) names three options to consider, in case something exceeds the value determined based on your budget:

1. Optimize an existing feature or asset on the page.
2. Remove an existing feature or asset from the page.
3. Don’t add the new feature or asset.

Using a tool to check whether everything stays within the budget is certainly useful. A build should fail if you violate the rules you set up. Grunt-perfbudget, for example, allows you to compare test results to budgets you specified beforehand.

Optimize Your Responsive Web Design (RWD)

Obviously, RWD makes no sense without high web performance. Tammy Everts shares some findings about how mobile users engage with e-commerce websites. The results demonstrate how user engagement is affected when pages are slowed down even slightly. The above-described reasons which illustrate the importance of web performance optimization apply all the more for mobile use cases. So one should consider to remove or reduce things on responsive websites wherever possible. You could, e.g. use a suitable web font or remove redundant tracking or marketing pixels.

Performance Culture

Of course, web performance optimization doesn’t merely depend on front-end developers but is a cross-departmental team effort. Designers, product managers, quality assurance, marketing, business intelligence, back-end and front-end developers, and managing directors, they all need to act in concert to achieve a high performance website at the end of the day. Therefore, it’s vital to establish some kind of performance culture, even though this isn’t an easy endeavor. The performance impact should be taken into account for each new feature, from its conception through to its development.

Lara Hogan shares some advice on how to incorporate performance culture in product development cycles and provides some example values for a performance budget. In another presentation, she provides information on optimizing images, fonts, and semantics for web performance and additionally gives some advice regarding responsive sites.

Tools for Web Performance Optimization and Monitoring

Last but not least, there is quite a number of tools for monitoring and optimizing your web performance. On perf.tooling.today, Stefan Judis and Marco Biedermann provide a collection of resources which will help you to establish a performance-oriented workflow and increase performance on your website.