Skip to content

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.

Articles

Tools to measure Performance Budget

Open source tools

  • Perfume.js - Tiny, web performance monitoring library that reports field data back to your favorite analytics tool.
  • Falco - Helps you monitor, analyze, and optimize your websites.

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.
  • Lighthouse - How to set up a performance budget using lighthouse and automate using Lighthouse bot.
  • 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.

Website Analyzers

  • Lighthouse Metrics - Lighthouse Metrics provides easy insights for your site's performance. Save your time by running tests from multiple locations to get the valuable insight you need.
  • UITest.com Site Check - Test your website in more than 80 tools (web-based and free).

Blogs

Podcasts

Videos

Books

Case Studies

License

CC0