Awesome performance budget
Awesome Web Performance Budget ¶
Web Performance Budget is a group of limits to certain values that affect site performance that should not be exceeded in the design and development of any web project. By setting up the performance budget, we can focus more towards performance which can improve the speed and overall user experience of our websites. This list help us to provide link to various articles, projects, tools and techniques to maintain performance budget.
Why We need Performance Budget¶
- JavaScript Start-up Performance - Performance Budget by Addyosmani.
Articles¶
- Performance Budget - Performance Budget by Addyosmani.
- Your first performance budget - Explained how to define your first performance budget in a few simple steps.
- Designing for Performance - How performance is important for designers.
- Web Performance for Designers and developers - Front-end performance for web designers and front-end developers.
- Performance as design - Best practise to see performance as an essential design feature.
- Inside Design - Setting a web performance budget - Setting a performance budget by Invision.
- Real-world Web Performance Budgets By Alex Russel - Can You Afford It?: Real-world Web Performance Budgets.
- Performance Budget using Angular CLI - Implementing Performance Budget in Angular projects.
- Incorporate performance budgets into your build process - Set up performance budget into your build process.
- How to make Performance Budget - Instructions for developing the performance budget.
Tools to measure Performance Budget¶
- Performance Budget Calculator - Calculate A Performance Budget For Your Site.
- Web Page Test - Test your performance.
- Speed Curve - Measuring web performance, get today's performance metrics.
- Yellow Lab Tools - Online test to help speeding up heavy web pages.
- Sitespeed.io - Easy to monitor and measure the performance of your web site.
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.
- 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.
Videos¶
- Concept of Performance Budget - Performance Budget with Tim Kadlec.
- Implementing Performance Budgets - How to implement performance budgets to avoid regression - Google Chrome Developers.
- Design Decisions Through The Lens Of A Performance Budget - How we can make smarter design decisions, from the beginning of a project, to ensure that our sites perform well.
Case Studies¶
- Zillow's Performance Budget - A true story of how Zillow uses performance budgeting.
- Tinder Web App Performance - A Tinder Progressive Web App Performance Case Study.
- Pinterest Web App Optimization - A Pinterest Progressive Web App Performance Case Study.
- Casper.com Self-hosting Optimization - How we shaved 1.7 seconds off casper.com by self-hosting Optimizely.
- BBC - Cutting the mustard - Optimizations while building responsive websites.
- Treebo PWA Case Study - Treebo - React And Preact PWA Performance Case Study.
- Twitter Lite - A Twitter Lite Web App at Scale.
- Netflix - Performance Improvement by shipping less JS - A Netflix Web Performance Case Study.
- Telegraph - Creating a web performance culture - Improving third-party web performance at The Telegraph.
- Uber Eats - Performance Improvements - Counting Calories: How We Improved the Performance and Developer Experience of UberEats.com.
- Analyzing the Walmart site performance - Improving the performance of Walmart's product page.
- Walmart - Turbocharging the Speed - Turbocharging the walmart website speed without compromise.
- Wehkamp.nl - How performance budgets and SpeedCurve are helped us-keeping our website high performant by implementing Performance Budget using Speed Curve.
Contribution¶
Feel free to add an awesome list. Kindly read the contribution guidelines and then open a pull request!