Use a Page Weight Budget to Speed Up Your Website

Posted by in Sustainability, Web Development tagged with , ,

In this post, we cover how a page weight budget, an essential component of understanding sustainable web design, can make your website faster and more sustainable with a better user experience while also helping you build team consensus on performance goals.

It’s easy to get caught up in the excitement of new feature ideas when creating a website or digital product. After all, the sky’s the limit on things you can do…but what should you do? Every new feature, additional image, ad tracking code, or piece of media adds weight to your pages, slowing load times, impeding performance, and potentially wasting energy. This can frustrate many users, especially those on older mobile devices or in rural areas with restricted bandwidth.

According to research by Google on mobile page speeds, over half (53%) of users will leave a mobile page that doesn’t load in less than three seconds. Considering that mobile internet use outpaced desktop in 2014 and hasn’t slowed since, the majority of your site users could be leaving your pages in frustration after just a few seconds. That’s not great for your users or your bottom line.

loading icon
Do your users leave before your website even loads?

That same research also noted that the average time for a typical mobile page to fully load is 22 seconds. (While the front-end user-facing page may load more quickly than that, many mobile pages have tracking codes, ads, and extra scripts that continue to load even after viewable assets are in the browser.) Considering that as of July 2018, Google will use mobile page speed as a ranking factor in its search algorithm—as it currently does for desktop searches—companies should be incentivized to create leaner, faster-loading digital products and services. Yet the internet is strewn with slow, bloated websites that frustrate users, waste energy, and get penalized by Google for poor performance.

How then do you make the right decisions to balance features and usability across devices and platforms? One great way to keep stakeholders aligned and everyone committed to launching a fast-loading website is to use a page weight budget.

What is a Page Weight Budget?

A page weight budget—also commonly called a web performance budget—is a set of constraints that project teams use to ensure a website or digital product meets performance standards and loads quickly across devices and platforms. This includes setting a threshold with limits on load time and bandwidth usage. For all the reasons mentioned above, using a performance or page weight budget should be common practice when building or maintaining websites and digital products. Unfortunately, it’s an all too rare practice.

While there are plenty of posts that cover the technical aspects of defining and measuring page weight budgets, for this post, we’ll cover how to use them as a communications tool to reach consensus among all project stakeholders—including clients, project managers, production teams, and others—on a project’s design constraints. If you’re tasked with managing the company website redesign, this post can help.

A More Sustainable Solution

Faster loading pages aren’t just good for people, they’re good for the planet too. The faster a page loads, the less energy it uses. While loading a single page may not seem like a big deal, when you consider that over half the world’s population is online and there are nearly 2 billion websites on the internet, the numbers really start to add up. Plus, very little of the internet is powered by renewable energy, so it is, in effect, the world’s largest coal-powered machine. Faster load times mean less CO2 emissions.

Page size is rising significantly, as shown in this graph from Speedcurve based on HTTP Archive data.

In 2017, the average webpage size crossed 3 MB. While there are certainly use cases for pages this size, it is more often the case that a bloated website got that way due to lack of knowledge or misaligned expectations—content creators uploading uncompressed images, design teams adding extraneous bells and whistles, or site creators just not caring about user experience.

If your inefficient website gets heavy traffic, in addition to frustrating users, it could mean a lot of CO2 emissions. Pages with lightning-fast load times reduce that impact. This is why performance and page weight budgets can be so effective in reducing the internet’s environmental impact, which is now on par with the commercial airline industry, emitting about 2% of the world’s CO2 emissions.

For more information on how the internet ranks for sustainability, check out our post Internet Sustainability in 2018 or run your site through our free website sustainability checker, Ecograder.

How Do I Set a Page Weight Budget?

Setting a page weight budget will depend on several factors. If possible, it’s best to set performance expectations at the beginning of a project, in a kickoff meeting or early discovery workshop. This ensures collaboration between the project’s various stakeholders to ensure everyone clearly understands both the goals and the benefits of maintaining a budget.

There are many limits to set when defining a budget, such as total number of HTTP requests, maximum image size, number of external resources, and so on. Details for each are typically fleshed out by design and development teams during production, but it’s important for everyone to understand the goals. The primary metrics for higher-level project stakeholders to keep in mind are:

  • Maximum download time for target users
  • Maximum page weight not to exceed

In other words, how quickly will the majority of your users be able to view your content on their device of choice?

To estimate what an optimal experience might be like, you’ll need to answer a few important questions about your users:

  1. Who is your lowest common denominator front-end user? For example, if you target people in rural areas, consider potential bandwidth constraints that could impede their experience.
  2. What sorts of devices do they use to access the internet? Similarly, if your target users don’t have smartphones, for example, or, conversely, use wearable devices, you’ll need to walk through use cases and identify potential experience roadblocks that will inform technical specifications.
  3. How will content managers maintain the budget over time? This is an important conversation to have up front and throughout a project. Admins are users too!

Good user research and testing, as well as perhaps a user persona workshop can help answer the questions above. Use the information from those exercises to inform your budget.

An easy way to start this conversation is with Jonathan Fielding’s Performance Budget Calculator. If you know bandwidth constraints and how quickly you want pages to load, this simple tool can help your team foster more detailed discussions.

Performance IO Budget Calculator
Choose desired load time and bandwidth, to set a performance budget with the Performance Budget Calculator.

Team Budget Implementation

Building team consensus on page weight budgets and helping stakeholders better understand potential roadblocks are critical to creating and maintaining optimal website performance. This is just as much of an issue during a website build as it is during website maintenance and website governance. It’s important for all project stakeholders to be on board. Here are some ways to insure performance over time on your digital product or service.

Page Weight Budgets for Project or Product Managers

As the conduit between product owners and production teams, product managers are responsible for managing expectations and facilitating a smooth transition between product build and product maintenance. PMs should facilitate training with relevant project stakeholders on the core components of a page weight budget. This would take place first in an early discovery workshop to level expectations, then continue with more detailed training for admins and content managers.

Page Weight Budgets for Designers and Developers

Design and development teams will be responsible for getting performance budget details right. This includes wrangling HTML and CSS, JavaScript, fonts, images, media files like audio or video, server requests, and so on to ensure lightning-fast page loads. They should also set guidelines for ongoing performance goals.

Page Weight Budgets for Site Admins and Content Creators

After launch, it can be easy to lose sight of performance goals. Site admins, content managers, and others who regularly add content to your website should be well-versed in optimizing images and other content for fastest download. They should also check page weight against goals before they publish to stay on track.

Page weight budget resources
Web Page Test (left) and Page Size Checker (right).

Page Weight Budget Resources

Below are some tools to assess page performance and identify areas to improve. Some of these tools work retroactively, with pages that already exist, while some can be used to set initial goals.

  • ImgIX’s Page Weight focuses primarily on images, but gives you a handy remediation report for making improvements.
  • As noted above, Jonathan Fielding’s Performance Budget Calculator can help you plan an appropriate page weight budget based on target bandwidth and download time. Super handy!
  • Pingdom’s Website Speed Test gives you a full, detailed report on things you can do to improve a page’s performance.
  • Web Page Test allows you to test page performance from multiple locations and at real consumer connection speeds.
  • SEO Rank Analyzer has created a simple Page Size Checker that helps you quickly check page size. They also have a WordPress plugin, which sounded handy, but I couldn’t get it to work.

Get Optimizing!

We hope you have found this information helpful and can use it to improve your own website or inform your next redesign project. If you’d like to know more about how to speed up your website alongside other digital sustainability practices for improved performance, check out Ecograder in the link below.

Try the new Ecograder

Reduce emissions, improve performance, reach your website goals faster.

Try Ecograder
Tim Frick founded Mightybytes in 1998 to help mission-driven organizations solve problems, amplify their impact, and meet business and marketing goals. He is the author of four books, including Designing for Sustainability: A Guide to Building Greener Digital Products and Services from O'Reilly Media. Follow Tim on Twitter or connect with him on LinkedIn.