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.
Thank you pajaydev & contributors
View Topic on GitHub:
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.
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.
Implementing Performance Budget in Angular projects.
Set up performance budget into your build process.
Tools to measure Performance Budget
Calculate A Performance Budget For Your Site.
Build Tools to set up performance budget
Keep your bundle size in check
Grunt task for performance budgeting.
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.
Track compressed Webpack asset sizes over time.
🤖 Compare your base branch to a pull request and run plugins over it to view differences
Progressive web metrics at your fingertipz
Track your library bundles size and its treeshakability with less effort
If you are using Webpack in your project then you can prefer this.
Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
📊 Analyzing bundles created by Lasso js.
📈⚖️ Visuallize your bundle
A plugin for the parcel bundler to visualise bundle contents
CSS selectors complexity and performance analyzer
Helps you find the performance impact of adding an npm package to your frontend bundle.
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.
Conversation with people to make web faster by Tim kadlec
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.
Set a threshold for collection of enhancements.
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.
Improving third-party web performance at The Telegraph.