awesome-web-perf-budget

1.0.1 • Public • Published

Web Performance Budget Awesome

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 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

Case Studies

Package Sidebar

Install

npm i awesome-web-perf-budget

Weekly Downloads

1

Version

1.0.1

License

ISC

Unpacked Size

8.73 kB

Total Files

5

Last publish

Collaborators

  • pajay