Neutral Political Machine

    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

    Install

    npm i awesome-web-perf-budget

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    8.73 kB

    Total Files

    5

    Last publish

    Collaborators

    • pajay