Web Performance Budget

Awesome Web Performance Budget Awesome

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.

Why We need Performance Budget

Articles

Tools to measure Performance Budget

Build Tools to set up performance budget

  • Bundle Size - Keep your bundle size in check.
  • Webpack Perf Budget - If you are using Webpack in your project then you can prefer this.
  • Grunt-perfbudget - Grunt task for performance budgeting.
  • Size Limit - 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.
  • Size Plugin - Track compressed Webpack asset sizes over time.
  • 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.
  • bundle-buddy - A tool to help you find source code duplication across your JavaScript chunks/splits.
  • 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 Visualizer - Visualize and analyze your Rollup bundle to see which modules are taking up space.
  • Parcel plugin Visualizer - A plugin for the parcel bundler to visualise bundle contents.
  • CSS Analyzer - CSS selectors complexity and performance analyzer.

Videos

Case Studies

License

CC0