Web Performance Budget is a group of limits to certain values that affect site performance that should not be exceeded in the design and development of any web project. By setting up the performance budget, we can focus more towards performance which can improve the speed and overall user experience of our websites. This list help us to provide link to various articles, projects, tools and techniques to maintain performance budget.
Performance Budget by Addyosmani.
Performance Budget by Addyosmani.
Explained how to define your first performance budget in a few simple steps.
How performance is important for designers.
Front-end performance for web designers and front-end developers.
Best practise to see performance as an essential design feature.
Setting a performance budget by Invision.
Can You Afford It?: Real-world Web Performance Budgets.
Implementing Performance Budget in Angular projects.
How to start a journey by setting up the performance budget.
Set up performance budget into your build process.
Instructions for developing the performance budget.
Impact of Page Weight on Load Time.
Calculate A Performance Budget For Your Site.
Test your performance.
Visualize web performance against competitors.
Measuring web performance, get today's performance metrics.
Online test to help speeding up heavy web pages.
Easy to monitor and measure the performance of your web site.
Tracking framework performance at scale.
Tiny, web performance monitoring library that reports field data back to your favorite analytics tool.
Helps you monitor, analyze, and optimize your websites.
Keep your bundle size in check.
If you are using Webpack in your project then you can prefer this.
How to set up a performance budget using [lighthouse](https://developers.google.com/web/tools/lighthouse) and automate using [Lighthouse bot](https://web.dev/using-lighthouse-bot-to-set-a-performance-budget/).
Grunt task for performance budgeting.
Calculate the real cost to run your JS app or lib to keep good performance. Show error in pull request if the cost exceeds the limit.
Track compressed Webpack asset sizes over time.
Lay out your template types, set a size budget for each template type, then plug in the sizes for each asset category that will load in the template.
Lay out your template types, set a size budget for each template type, then plug in the sizes for each asset category that will load in the template.
CLI tool and lib to gather performance metrics via Lighthouse.
Extension to display inline in the VS code editor the size of the imported package.
Find the cost of adding a npm package to your bundle.
A tool to help you find source code duplication across your JavaScript chunks/splits.
Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap.
Visualise the module tree of browserify project bundles and track down bloat.
Analyze and Visualise project bundles created by Lasso.
Visualize and analyze your Rollup bundle to see which modules are taking up space.
A plugin for the parcel bundler to visualise bundle contents.
CSS selectors complexity and performance analyzer.
Lighthouse Metrics provides easy insights for your site's performance. Save your time by running tests from multiple locations to get the valuable insight you need.
Test your website in more than 80 tools (web-based and free).
Free website health scanner. Measures Core Web Vitals (LCP, FCP, CLS, TTFB), performance scores and provides AI-powered action plans. No signup required.
Speed geek's favorite time of the year.
How to Set up budget, Calculate, And Apply
Conversation with people to make web faster by [Tim kadlec](https://timkadlec.com/)
A podcast about building websites.
Performance Budget with Tim Kadlec.
How to implement performance budgets to avoid regression - Google Chrome Developers.
How we can make smarter design decisions, from the beginning of a project, to ensure that our sites perform well.
Revisiting Performance Budgets
Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and business metrics.
Optimizations while building responsive websites.
How we shaved 1.7 seconds off casper.com by self-hosting Optimizely.
A Netflix Web Performance Case Study.
A Pinterest Progressive Web App Performance Case Study.
Improving Smashing Magazine's Web Performance Case Study.
A Tinder Progressive Web App Performance Case Study.
Treebo - React And Preact PWA Performance Case Study.
A Twitter Lite Web App at Scale.
Improving third-party web performance at The Telegraph.
A true story of how Zillow uses performance budgeting.