Skip to content
😎 Articles, Websites, Tools and Case Studies to implement performance budget to a website.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore included awesome lint, added license, contrib guide Jul 29, 2019
CONTRIBUTING.md added code of conduct Dec 5, 2019
LICENSE Update License Dec 4, 2019
README.md Merge branch 'master' of github.com-personal:ajay2507/perf Jan 20, 2020
code-of-conduct.md
package.json
yarn.lock Bump mixin-deep from 1.3.1 to 1.3.2 Nov 30, 2019

README.md

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.

Contents

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-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.
  • CSS Analyzer - CSS selectors complexity and performance analyzer.

Videos

Case Studies

License

CC0

You can’t perform that action at this time.