Web performance

A web performance budget can be a useful reference for helping you figure out what should and shouldn’t go on your website. Ultimately it can help reduce the footprint of our websites and help make the the experience better for more users regardless of their internet connection speed and computer or device capabilities.

How do I implement a performance budget pre-build? #

Before designing and building a project define a limit to how many bytes you should allow for pages, scripts and assets. In your budget break it down to include:

HTML
Images
CSS
JavaScript
Other

Performance Budget calculator #

A webpage should ideally load in 3 seconds or less. Performance Budget calculator (works best in Chrome) helps you to work out a performance budget based on typical connection speeds for a range of connection speeds including cable, dial-up, DSL (digital subscriber line) and mobile internet connections.

How do I implement a performance budget post-build? #

Creating a web performance budget retrospectively: follow the pre-build process above and then analyse this against the website with something like WebPageTest.org (External link). This should give you an overall picture for which things are slowing down your website and need to be optimised or dropped if they don’t serve a useful purpose.

Where to make improvements and reduce environmental impact #

Webpage bloat is a term often mentioned when discussing the environmental impact of websites. Looking at a typical website several years old you might find code and assets in need of refactoring, removal or updating to adhere to latest web standards. Identify areas for improvement and where possible engage with the client to help identify redundant parts of the website taking up unnecessary space and bandwidth. Help share this understanding of the environmental impact their website has.