awesome-web-performance-budget

Performance Budget by Addyosmani

Performance Budget by Addyosmani

Explained how to define your first performance budget in a few simple steps

How performance is important for designers

Front-end performance for web designers and front-end developers

Best practise to see performance as an essential design feature

Setting a performance budget by Invision

Can You Afford It?: Real-world Web Performance Budgets

Implementing Performance Budget in Angular projects

How to start a journey by setting up the performance budget

Set up performance budget into your build process

Instructions for developing the performance budget

Impact of Page Weight on Load Time

Calculate A Performance Budget For Your Site

Test your performance

Visualize web performance against competitors

Measuring web performance, get today's performance metrics

Online test to help speeding up heavy web pages

Easy to monitor and measure the performance of your web site

Tracking framework performance at scale

Tiny, web performance monitoring library that reports field data back to your favorite analytics tool

Falco

Helps you monitor, analyze, and optimize your websites

Bundle Size

Keep your bundle size in check

If you are using Webpack in your project then you can prefer this

How to set up a performance budget using and automate using

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

Extension to display inline in the VS code editor the size of the imported package

Find the cost of adding a npm package to your bundle

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

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

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

Test your website in more than 80 tools (web-based and free)

Speed geek's favorite time of the year

Conversation with people to make web faster by

A podcast about building websites

Performance Budget with Tim Kadlec

How to implement performance budgets to avoid regression - Google Chrome Developers

How we can make smarter design decisions, from the beginning of a project, to ensure that our sites perform well

Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and business metrics

Optimizations while building responsive websites

How we shaved 1.7 seconds off casper.com by self-hosting Optimizely

A Netflix Web Performance Case Study

A Pinterest Progressive Web App Performance Case Study

Improving Smashing Magazine's Web Performance Case Study

A Tinder Progressive Web App Performance Case Study

Treebo - React And Preact PWA Performance Case Study

A Twitter Lite Web App at Scale

Improving third-party web performance at The Telegraph

A true story of how Zillow uses performance budgeting