User Experience on mobile might not be great yet, but I'm working on it.

Your first time on this page? Allow me to give some explanations.

Awesome Web Performance Budget

⚡️Articles, Websites, Tools and Case Studies to implement performance budget to a website. (PR 's welcomed)

Here you can see meta information about this topic like the time we last updated this page, the original creator of the awesome list and a link to the original GitHub repository.

Last Update: Nov. 24, 2020, 6:11 p.m.

Thank you pajaydev & contributors
View Topic on GitHub:
pajaydev/awesome-web-performance-budget

Search for resources by name or description.
Simply type in what you are looking for and the results will be filtered on the fly.

Further filter the resources on this page by type (repository/other resource), number of stars on GitHub and time of last commit in months.

Articles

Tools to measure Performance Budget

Calculate A Performance Budget For Your Site.

Measuring web performance, get today's performance metrics.

Online test to help speeding up heavy web pages.

A set of open source performance monitoring tools.

Tracking framework performance at scale.

Build Tools to set up performance budget

Keep your bundle size in check

4.02K
199
21d
MIT

Grunt task for performance budgeting.

860
42
10m
MIT

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.

3.85K
908
3d
MIT

Track compressed Webpack asset sizes over time.

1.65K
41
9m
Apache-2.0

🤖 Compare your base branch to a pull request and run plugins over it to view differences

178
15
1y 10m
Apache-2.0

Progressive web metrics at your fingertipz

1.24K
72
4m
Apache-2.0

Track your library bundles size and its treeshakability with less effort

143
8
118d
MIT

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

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

Bundle Analyzers

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

10.45K
387
7d
MIT

📊 Analyzing bundles created by Lasso js.

3
1
5m
MIT

📈⚖️ Visuallize your bundle

362
15
22d
MIT

A plugin for the parcel bundler to visualise bundle contents

265
16
1y 7m
MIT

CSS selectors complexity and performance analyzer

654
21
5d
BSD-2-Clause

Helps you find the performance impact of adding an npm package to your frontend bundle.

A tool to help you find source code duplication across your JavaScript chunks/splits.

Visualise the module tree of browserify project bundles and track down bloat.

Website Analyzers

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).

Podcasts

Conversation with people to make web faster by Tim kadlec

Podcast about front end web design, development and UX.

Videos

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.

Books

Case Studies

Set a threshold for collection of enhancements.

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

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 true story of how Zillow uses performance budgeting.