Set up a web performance budget

Establishing a performance budget early in the development cycle for websites and APIs is the optimum choice for keeping your websites and web services fast for all users. However, it is never too late to set a web performance budget to improve your user experience. Keeping your users in mind, a web performance budget allows you to make decisions based on your preferred page speed.

What is a web performance budget?

It’s easy for a website to grow in size, but unfettered growth may create a performance nightmare for the users on desktop computers and mobile devices. To prevent creating a monster site that consumes user bandwidth and time, you have to practice constraint in every part of a site’s development, i.e., a website performance budget. Your budget keeps performance a priority by setting limits on page elements and server responsiveness.

You may base your website performance budget on load time (or other load time metrics), total page size, total image size, total number and size of JavaScript and CSS downloads, number of requests, third party elements like web fonts, or a combination of several different limits (see Figure 1). Determining the maximum load time for your site is your web performance budget.

Figure 1: Chart with Performance metrics

Like any budget, you have so much of something that you can use. In the case of a web performance budget that something is time.

You decide how fast your site should load on a given device and connection speed, and you make sure you stick to your budget. For example, if you need your site to load in two seconds on a 4G mobile device, you optimize your content, and server response times accordingly.

What is the optimum speed for your website performance budget?

How fast is fast enough is a tough question, and a website may have a reason to use a higher budget than what most users expect. However, think twice before setting a higher maximum load time for your web performance budget.

Google explains that a fast website has advantages. For example, a site that loads in under three seconds has a better page ranking and higher completion rates than pages that load in 3.5 seconds. At four seconds, you’ve lost 53% of your users.

Google, when making its ranking determination, uses bots to crawl and test your website’s performance. The results help Google prioritize search results in favor of sites with fast mobile speeds. Therefore, the faster your page can load, the better your page rankings.

In SemRush’s article by Cami Bird, How fast is fast enough? Page load time and your bottom line, she concludes that a site should load in two seconds. She recommends that you make your site as fast as you can without impeding your customer experience. But if your website is too slow, you’ve blown your customer experience anyway.

Like Cami, a two-second goal also fits Tammy Evert’s findings in Time is Money: The business value of web performance. Tammy doesn’t actually make the declaration that a two-second maximum load time is the performance goal for a website to do well. However, she presents multiple studies that found significant advantages for sites that load in two seconds or less. According to Tammy’s research, website speed affects:

• Bounce rates
• Conversions and revenue
• Page views
• User satisfaction and retention
• Brand Perception
• Google ranking

Where do you start with a web performance budget?

Network latency, server response times, page size, and connection type, effective use of browser caching, appropriately sized images, compression, use of CDNs (Content Delivery Networks) all contribute to or reduce page load times.

Your users have unique configurations of devices, browsers, operating systems, and networks that you need to consider when establishing your budget.

You may have to make some tough choices like eliminating content and optimizing response times until you stay within your budget.

Because of the different user configurations, you may have multiple goals. So that you’re certain what devices, locations, connection types, and operating systems your visitors use to interact with your content, you may want to consider using Real User Monitoring (RUM) to refine your website performance budget further.

One of Google’s ranking factors uses your page speed. Google bases your page’s speed by simulating a slow 4G mobile connection. Google uses the following throttling configuration:

• Latency: 150ms
• Throughput: 1.6Mbps download / 750 Kbps upload
• Packet loss: none

Using Google’s testing presets is a great place to start when establishing your web performance budget. Meeting your performance goal on mobile guarantees you’ll also have a fast site on the desktop computer.

Once you’ve determined your performance goal, you can make the decisions that affect—and hopefully improve—your site’s performance.

1. Benchmark your current website performance

It is easier to establish a budget during the design phase, but that isn’t always possible. If you have an existing site that you want to bring into conformance with a budget, you need to know its current speed. A synthetic tool can get you the answers you need.

If you’re an Uptrends customer, you can set up a new synthetic monitor for a mobile device working on a slow 4G or fast 3G network. Otherwise, head to our free Website Speed Test tool and run a check on your site using the mobile option with 4G connection throttling.

The free Website Speed Test tool gives you all of the information you need to analyze your site’s performance. You get:

• Google PageSpeed Score: Look for a score in green (see Figure 2), and consider the performance recommendations the tool suggests (see Figure 3). A yellow score means your speed is average, and red means you’re aren’t doing well at all. For a competitive advantage, you need a green score. Google bases the score on:
  • First Contentful Paint: first render of DOM content.
  • First Meaningful Paint: Primary content has loaded.
  • Speed Index: Speed that a page is visibly loaded.
  • First CPU Idle: Most UI elements become interactive.
  • Time to Interactive: Page has displayed useful content, registration of event handlers, and the page responds within 50 milliseconds to user interactions.
  • Estimated input latency: Input responsiveness.

Figure 2: General test results, including the Google PageSpeed Insights score.

With the free Website Speed Test tool, you get your page’s full mobile load time (see Figure 2); you also get performance-enhancing information on how to get you within budget (see Figure 3).

• Load time: Time from the first request to a fully rendered page
• Page size:
  • Total combined size for all page elements
  • Object types: number of images, scripts, CSS, HTML, etc.
  • Total MBs for each object types
• Number of Requests: Includes first- and third-party requests
• Waterfall report:
  • Shows individual element download speeds
  • Average resolve, TCP connect, HTTPS handshake, send, wait, and receive times

  Figure 3: Google PageSpeed Insight’s performance recommendations

  Don’t forget your content pages

  Your budget doesn’t stop with your homepage. Any landing pages or pages within your user’s path need analyzed and benchmarked. Different budgets may apply to different pages since the browser loads many elements from the cache—hopefully.

  2. Know your competitors’ load times

  Beating your competitors’ site performance can give you a competitive edge. As discussed earlier, a faster site improves users’ perceptions of the site and improves user trust. To gain a competitive advantage, make sure your website is 20 percent faster than your competitors. Why 20 percent? Based on the Weber-Fechner Law or Just-Noticeable Difference for your users to be aware of a difference, your page needs to load 20% faster than a competitor’s.

  Using your Uptrends account or the free tool, you can easily benchmark your competitors’ pages and monitor their pages for performance changes. Even if you can’t beat them in speed, you can always aim to match them or get close enough that your users don’t notice the difference.

  3. Set your budget

  It is easy to say, “My page is going to load in 1.5 seconds.” However, it is a challenge (If not impossible) for some sites to reach this performance level. Finding the right balance between content, page configuration, and server performance gets tricky.

  Your website performance budget is a game of give and take to find the right balance that works for your site. To illustrate how different sites may handle the mitigation of their performance, let’s look at four popular web search tools to see how they’ve configured their page elements and how it affects performance.

  We tested each site on October 2, 2019 using our free Website Speed Test tool. We used the mobile testing option with an Apple 8 on a 4G connection.

Table 1: Comparison of page load times, element types with quantity and total size.

As you can see in Table 1 above, performance is a trade-off. DuckDuckGo and Bing both come in at 2.6 seconds. Although DuckDuckGo has twice the page size and twice the average receive times as Bing, DuckDuckGo has less than half of the number of requests reducing their load times. Where Google’s long receive times kill its budget despite the lower number of requests. Yahoo matches DuckDuckGo on receive times but has 77 more requests and twice the page size of DuckDuckGo.

Your website performance budget may require you to make similar sacrifices in the type and size of page content, a reduction to the number of requests, and improve response times. Resource hints like preloading, preconnect, and prefetch along with browser caching can also improve overall page performance.

4. Use Web Performance Monitoring to ensure your website remains within the budget

Once you’ve established your budget and brought your website into compliance, it is important that you maintain a close eye on your site. Things change suddenly as your site evolves, and your performance is frequently impacted by the changes.

Using Uptrends’ Full Page Check, you can keep an eye on your key indicators and see your current performance. If your performance slips, you can quickly find where your site has broken your budget. You can track your mobile and desktop performance at the same time since the two may have different budgets.

Conclusion

A website performance budget is an important part of the development and maintenance of your site’s user experience. Maintaining a strict budget improves user engagement, conversion rates, and Google rankings and gives your site a competitive edge over your competition. Benchmark and maintain your budget with a free 30-day Uptrends trial.