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.