Libx Awesome Lists

    On this page

    Awesome Web Performance Budget

    A curated collection of resources and projects focused on Web Performance Budget.

    Contents

    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).
    • PageGuard - Free website health scanner. Measures Core Web Vitals (LCP, FCP, CLS, TTFB), performance scores and provides AI-powered action plans. No signup required.

    Blogs

    Podcasts

    Videos

    Books

    Case Studies

    License

    CC0