Web Performance Budget 

Curated list of why, how and tools to implement Web Performance Budget. Included few cases studies. Feel free to contribute.

Contents

- Why We need Performance Budget
- Articles
- Websites To measure Perf Budget
- Tools To measure Perf Budget
- Bundle Analyzers
- Videos
- Case Studies

Why We need Performance Budget

- JavaScript Start-up Performance - Performance Budget by Addyosmani.

Articles

- Performance Budget - Performance Budget by Addyosmani.
- Designing for Performance - How performance is important for designers.
- Web Performance for Designers and developers - Front-end performance for web designers and front-end developers.
- Performance as design - Best practise to see performance as an essential design feature.
- Inside Design - Setting a web performance budget - Setting a performance budget by Invision.
- Real-world Web Performance Budgets By Alex Russel - Can You Afford It?: Real-world Web Performance Budgets.
- Performance Budget using Angular CLI - Implementing Performance Budget in Angular projects.

Websites To measure Perf Budget

- Performance Budget Calculator - Calculate A Performance Budget For Your Site.
- Web Page Test - Test your performance.
- Speed Curve - Measuring web performance, get today's performance metrics.

Tools To measure Perf Budget

- Bundle Size - Keep your bundle size in check.
- Using Webpack - If you are using Webpack in your project then you can prefer this.
- Grunt-perfbudget - Grunt task for performance budgeting.
- Size-plugin - Grunt task for performance budgeting.
- Performance Budget Builder - 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.
- Progressive Web Metrics - 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.
- rollup-plugin-size-snapshot - CLI tool and lib to gather performance metrics via Lighthouse.
- ImportCost - VS Extension - Extension to display inline in the VS code editor the size of the imported package.

Bundle Analyzers

- Bundlephobia - Find the cost of adding a npm package to your bundle.
- webpack-bundle-analyzer - Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap.
- Disc - Visualise the module tree of browserify project bundles and track down bloat.
- lasso-analyzer - Analyze and Visualise project bundles created by Lasso.
- rollup-plugin-analyzer - Metrics about your roll up bundle, sneak into your bundle using this tool.

Videos

- Concept of Performance Budget - Performance Budget with Tim Kadlec.
- Implementing Performance Budgets - How to implement performance budgets to avoid regression - Google Chrome Developers.

Case Studies

- Zillow's Performance Budget - A true story of how Zillow uses performance budgeting.
- Tinder Web App Performance - A Tinder Progressive Web App Performance Case Study.
- Pinterest Web App Optimization - A Pinterest Progressive Web App Performance Case Study.
- Casper.com Self-hosting Optimization - How we shaved 1.7 seconds off casper.com by self-hosting Optimizely.
- BBC - Cutting the mustard - Optimizations while building responsive websites.
- Treebo PWA Case Study - Treebo - React And Preact PWA Performance Case Study.
- Twitter Lite - A Twitter Lite Web App at Scale.
- Netflix Performance Improvement by shipping less JS - A Netflix Web Performance Case Study.
- Telegraph - Creating a web performance culture - Improving third-party web performance at The Telegraph.