3. Performance Culture
We are failing at making the web faster. The year-on-year metrics for user-centric performance on HTTP Archive suggest the regressions in Time-to-Interactive and FCP for the top 1M sites.
Despite heavy investments in documenting best practice guidance, sites have continued to ship an increasing amount of bloated code to their users. Even sites that momentarily ship a fast experience quickly regress a quarter after.
A large reason for this is a lack of shared accountability for performance. To shift the industry there needs to be heavy adoption of Performance Budgets.
What is Performance budgeting ?
Budgets are not just thresholds
Performance budgets are a limit for each Mobile Site page you cannot exceed.
Much like a financial budget, they’re something consciously spent.
View them as a currency to spend and trade on user-experience.
Performance Budgeting is collaborative
Success requires stakeholder alignment and top down sponsorship. Performance needs to be owned by management and enforced throughout the firm.
Performance budgeting is one of the first things a team considers in planning a site.
Every site change follows strict budget rules. Everyone knows how it impacts the bottom line and stakeholders know what it takes to achieve acceptable performance.
How to approach Performance Budgeting
1. It's like moving home...
The good news is that speeding up your mobile site doesn’t need to be a massively complex or time-consuming process.
Think of it like moving into a new home, insofar as the process goes much smoother if you adopt a few key principles....
3. Make fewer trips to and from the van:
Each resource on your mobile site requires additional requests from the server. So try to group similar files together (eg. JS with JS, CSS with CSS, etc). Small images under 10KB can also be combined into a sprite or web format.
2. Unpack essentials first:
Prioritise above the fold content over anything else.
That way, users consider your site fully loaded earlier on, and can start shopping faster. If you have multiple JS and CSS files, have those load in later on—as users start reading and interacting.
4. Lighter boxes make easier carrying:
Large images take longer to load and slow things down. Compress your images to below 100KB wherever possible. GZIP can also reduce the size of text-based resources like CSS or JS by as much as 70-80%.
What Metrics should a Performance budget measure?
Milestone Success Metrics
Set and agree key milestones that define success.
These are often based on a single point in time and built around page load speeds e.g Speed Index or the Time-to-Interactive
Pair several of these points in time to accurately represent the complete story during page load.
Set Targets for Key Values
Think about the fundamentals that build the page as it loads.
Base these on raw values, e.g., the weight of JavaScript (KB/MB), the number of HTTP requests.
These are core parts of the critical rendering path that visitors need to have loaded first.
Site Grading Rules
Benchmark or Score metrics used as key values that are generated by tools such as PageSpeed Insights, Lighthouse or WebPageTest.
Often, a single number or series will help to grade your site These tools will help identify how fast a user can interact with the site and flag key areas that cause poor performance.
How Build a performance budget
1. Tool Introduction
One way to calculate your Performance Budget is to use a website based performance budget tool.
A good example is the tool created by Jonathan Fielding which helps you calculate a performance budget.
Simply input how fast in seconds you want your site to load, and pick the connection speed. To calulate a performance budget for your site click here
2. Inputs
Input target speed over a specific connection type by adjusting the sliders based on the HTML, CSS, JS, Images, Video, and font usage on your website. Set your approximate budget in KB.
Notice it will give you a warning if your total assets are exceeding your total budget.
Once you've set your target speed and usage the calculator provides a performance budget breakdown and estimated load times by connection type.
Beware!! Becoming fast is one thing......
Success depends on Performance budgeting
If you’re building a web experience and want to stay fast, a performance budget can be critical.
For success, embrace performance budgets and learn to live within them. Network & CPU limits on mobile can require asking hard questions like, “what is really important to my users?”
Staying Fast is another......
Progression, not Regression
When we talk to FTSE100 and Fortune500 companies that put in the work to improve performance, performance metrics will often rapidly regress once they return to feature development.
Performance budgets help teams prioritize features, optimizations and facilitate discussions on what is really important to users.
Four common causes of Performance Budget Regression
Inexperience
Most teams have never dealt with performance, often features and functions are development priorities
Performance sneaks up on teams who have never dealt with it
Optimizations not built in a scalable way, e.g., images are optimized but publishing flow hasn’t been updated so new content is unoptimised
Misalignment
Limit and monitor development processes with performance in mind
Organizational misalignment; teams lack continuous performance monitoring
Developers can feel sensitive to placing more focus on perf during the development process (professional pride, lack of knowledge, lack of time)
Knowledge Gap
Business stakeholders don't understand or aren't aware of Performance as a key development pillar
Expectations are that writing code automatically leads to strong performance
Often there is no frame of reference to understand the unique challenges of speed in complex sites
Entrenchment
Developers, Product teams, Marketers feel out of their depth or are unwilling to implement cultural change
Extra work may be necessary to bring performance to the next level
Developers may fear for their jobs if they admit what they implemented is not performing well
Resistance to change is often based on entrenched habits
Top tips
How to build a framework for Performance Thinking
