What is a page weight budget?
Before we even begin, the main question arises – what exactly is a page weight budget?
The short answer is efficiency. Page weight budget = efficiency. The long answer is that a page weight budget is just a “budget” of how much a webpage can weigh. Not in grams or kilograms, and definitely not in pounds, but rather in kilobytes and megabytes.
Specifically, it refers to the sizes of the files transferred over the internet when a webpage is loaded.
Great, how do we set a page weight budget?
The purpose for a page weight budget is to focus the project team on making the website as efficient as possible, but the budget does have to be realistic. 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.
The truth of the matter is that it’s easy to get caught up in the excitement of new feature ideas when creating a website or digital product. After all, there’s no limit on what 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.
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
It’s even great for the environment!
Eh? What does a webpage have to do with the environment?
It’s simple, really. Faster loading pages aren’t just good for people, they’re actually good for the planet too. The faster a page loads, the less energy it uses. And sure, while loading just a single page may not seem like a big deal, keep in mind that over half the world’s population is online and there are nearly 2 billion websites on the internet, so the numbers really start to add up. And additionally, very little of the internet is powered by renewable energy. So believe it or not – faster load times mean less CO2 emissions.
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.
What are the benefits?
Basically, just like everything in life, setting a tangible goal focuses the mind. By setting a page weight budget, you’re likely to deliver a far more efficient website, even if you fail to hit your target.
Do you want to see it from our point of view? Well, ever since we introduced page weight budgeting into our process we have seen the following benefits:
- Average page sizes reduced dramatically
- Improved user experience
- Much faster loading times
- Improved accessibility
Fonts
Fonts are arguably the stealthiest contributor to the weight of a web page. Most people don’t think about the size of font files on the web but they can have a huge impact if we’re not careful. The size of the font files is impacted massively by the file format used and whether you use the full character set or only a subset of the font with the required characters (e.g. English characters only).
Images
On most websites, images make up the vast majority of the page weight. There are a huge number of variables that impact the weight of images on a page, including the number of images, the dimensions, the complexity of the images and the level of compression applied to the image file.
As such, we highly recommend using compressed images (but not too compressed!). And try adjusting the resolution to fit all devices and monitors. And yes, while a 5000 by 7000 pixel images looks great and sharp, on a regular laptop with an HD or full HD screen you won’t be able to tell if the image is 5000×7000, 2000×3500 or simply 1080 by 1920.
Video
While adding videos to webpages isn’t as common as adding images, it is extremely taxing. Try adding a 3 minute full HD video encoded in h264, it’ll probably be about 2Gb. You know how long that takes to load on a household 10mbps connection? About 10 hours. And nobody is going to wait for 10 hours for a webpage to load, not even one hour, one minute, or even 10 seconds. Seriously, if the webpage hasn’t loaded in 2-3 seconds, your visitor is gone. And can you blame them?
Validating your budget
The final step is to validate your budget. It is important to validate the page weight budget by measuring the final page weight using Chrome developer tools, or an app such as GT Metrix. These tools will also help you identify missed opportunities and allow you to make further improvements to the website.
Above all, whether you meet the budget or not, it’s important that the whole team learns about the impact of the decisions made along the way so that more informed choices can be made in the future.
Closing thoughts
Page weight budgets are far more important than anyone might think. They are a very simple and highly effective tool used to deliver websites that aren’t just more efficient, they’re also much faster to load and less taxing on the environment.
The best results are achieved when efficiency is prioritised from the beginning of a project, not as an afterthought. One of the best ways to achieve high levels of efficiency is to agree a page weight budget and use it as a metric of project success.