25 KiB
25 KiB
Awesome Web Performance Budget !Awesome (https://awesome.re/badge.svg) (https://awesome.re)
▐ 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.
Contents
- Articles (#articles)
- Tools to measure Performance Budget (#tools-to-measure-performance-budget)
- Open source tools (#open-source-tools)
- Build Tools to set up performance budget (#build-tools-to-set-up-performance-budget)
- Bundle Analyzers (#bundle-analyzers)
- Website Analyzers (#website-analyzers)
- Blogs (#blogs)
- Podcasts (#podcasts)
- Videos (#videos)
- Books (#books)
- Case Studies (#case-studies)
Articles
- JavaScript Start-up Performance (https://medium.com/reloading/javascript-start-up-performance-69200f43b201) - Performance Budget by Addyosmani.
- Performance Budget (https://addyosmani.com/blog/performance-budgets/) - Performance Budget by Addyosmani.
- Your first performance budget (https://web.dev/your-first-performance-budget/) - Explained how to define your first performance budget in a few simple steps.
- Designing for Performance (http://designingforperformance.com/index.html#table-of-contents) - How performance is important for designers.
- Web Performance for Designers and developers (https://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/) - Front-end performance for web designers
and front-end developers.
- Performance as design (http://bradfrost.com/blog/post/performance-as-design/) - Best practise to see performance as an essential design feature.
- Inside Design - Setting a web performance budget (https://www.invisionapp.com/inside-design/setting-a-web-performance-budget/) - Setting a performance budget by Invision.
- Real-world Web Performance Budgets By Alex Russel (https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/) - Can You Afford It?: Real-world Web Performance
Budgets.
- Performance Budget using Angular CLI (https://medium.com/dailyjs/how-did-angular-cli-budgets-save-my-day-and-how-they-can-save-yours-300d534aae7a) - Implementing Performance Budget in
Angular projects.
- Performance budgets 101 (https://web.dev/performance-budgets-101/) - How to start a journey by setting up the performance budget.
- Incorporate performance budgets into your build process (https://web.dev/incorporate-performance-budgets-into-your-build-tools) - Set up performance budget into your build process.
- How to make Performance Budget (http://v3.danielmall.com/articles/how-to-make-a-performance-budget/) - Instructions for developing the performance budget.
- Impact of Page Weight on Load Time (https://paulcalvano.com/2018-07-02-impact-of-page-weight-on-load-time/) - Impact of Page Weight on Load Time.
Tools to measure Performance Budget
- Performance Budget Calculator (http://www.performancebudget.io/) - Calculate A Performance Budget For Your Site.
- Web Page Test (https://www.webpagetest.org/easy) - Test your performance.
- lightest app (https://www.lightest.app/) - Visualize web performance against competitors.
- Speed Curve (https://speedcurve.com) - Measuring web performance, get today's performance metrics.
- Yellow Lab Tools (https://yellowlab.tools/) - Online test to help speeding up heavy web pages.
- Sitespeed.io (https://www.sitespeed.io/) - Easy to monitor and measure the performance of your web site.
- Perf Track (https://perf-track.web.app/) - Tracking framework performance at scale.
Open source tools
- Perfume.js (https://zizzamia.github.io/perfume/) - Tiny, web performance monitoring library that reports field data back to your favorite analytics tool.
- Falco (https://github.com/theodo/falco) - Helps you monitor, analyze, and optimize your websites.
Build Tools to set up performance budget
- Bundle Size (https://github.com/siddharthkp/bundlesize) - Keep your bundle size in check.
- Webpack Perf Budget (https://webpack.js.org/configuration/performance/) - If you are using Webpack in your project then you can prefer this.
- Lighthouse (https://web.dev/use-lighthouse-for-performance-budgets/) - How to set up a performance budget using lighthouse (https://developers.google.com/web/tools/lighthouse) and automate
using Lighthouse bot (https://web.dev/using-lighthouse-bot-to-set-a-performance-budget/).
- Grunt-perfbudget (https://github.com/tkadlec/grunt-perfbudget) - Grunt task for performance budgeting.
- Size Limit (https://github.com/ai/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 (https://github.com/GoogleChromeLabs/size-plugin) - Track compressed Webpack asset sizes over time.
- Performance Budget Builder (https://github.com/GoogleChromeLabs/pr-bot) - 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 (https://github.com/paulirish/pwmetrics) - 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 (https://github.com/TrySound/rollup-plugin-size-snapshot) - CLI tool and lib to gather performance metrics via Lighthouse.
- ImportCost - VS Extension (https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) - Extension to display inline in the VS code editor the size of the imported package.
Bundle Analyzers
- Bundlephobia (https://bundlephobia.com/) - Find the cost of adding a npm package to your bundle.
- bundle-buddy (https://bundle-buddy.firebaseapp.com/) - A tool to help you find source code duplication across your JavaScript chunks/splits.
- webpack-bundle-analyzer (https://github.com/webpack-contrib/webpack-bundle-analyzer) - Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable
treemap.
- Disc (http://hughsk.io/disc/) - Visualise the module tree of browserify project bundles and track down bloat.
- lasso-analyzer (https://github.com/ajay2507/lasso-analyzer) - Analyze and Visualise project bundles created by Lasso.
- Rollup Visualizer (https://github.com/btd/rollup-plugin-visualizer) - Visualize and analyze your Rollup bundle to see which modules are taking up space.
- Parcel plugin Visualizer (https://github.com/gregtillbrook/parcel-plugin-bundle-visualiser) - A plugin for the parcel bundler to visualise bundle contents.
- CSS Analyzer (https://github.com/macbre/analyze-css) - CSS selectors complexity and performance analyzer.
Website Analyzers
- Lighthouse Metrics (https://lighthouse-metrics.com/) - 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.
- UITest.com Site Check (https://uitest.com/check/) - Test your website in more than 80 tools (web-based and free).
Blogs
- Web Performance Calender (https://calendar.perfplanet.com/2020/) - Speed geek's favorite time of the year.
Podcasts
- Chasing Waterfalls (https://chasingwaterfalls.io/) - Conversation with people to make web faster by Tim kadlec (https://timkadlec.com/)
- Shoptalk Show (https://shoptalkshow.com/) - A podcast about building websites.
Videos
- Concept of Performance Budget (https://www.youtube.com/watch?list=PLYo5nh8xQFpkwsu9QNlCpPGkmCCuTTWDJ&v=yqejmZrtmNg) - Performance Budget with Tim Kadlec.
- Implementing Performance Budgets (https://youtu.be/vVlpCmK1l5k) - How to implement performance budgets to avoid regression - Google Chrome Developers.
- Design Decisions Through The Lens Of A Performance Budget (https://vimeo.com/108328247) - How we can make smarter design decisions, from the beginning of a project, to ensure that our sites
perform well.
Books
- Web Performance Warrior (https://www.oreilly.com/library/view/web-performance-warrior/9781492048114/)
- Designing for Performance (http://designingforperformance.com/)
Case Studies
- Web Performance Optimization case studies (https://wpostats.com/) - Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and
business metrics.
- BBC - Cutting the mustard (http://responsivenews.co.uk/post/18948466399/cutting-the-mustard) - Optimizations while building responsive websites.
- Casper.com Self-hosting Optimization (https://medium.com/caspertechteam/we-shaved-1-7-seconds-off-casper-com-by-self-hosting-optimizely-2704bcbff8ec) - How we shaved 1.7 seconds off
casper.com by self-hosting Optimizely.
- Netflix Performance Improvement by shipping less JS (https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9) - A Netflix Web Performance Case Study.
- Pinterest Web App Optimization (https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154/) - A Pinterest Progressive Web App Performance Case
Study.
- Smashing Magazine's Web Performance (https://www.smashingmagazine.com/2014/09/improving-smashing-magazine-performance-case-study/) - Improving Smashing Magazine's Web Performance Case
Study.
- Tinder Web App Performance (https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0/) - A Tinder Progressive Web App Performance Case Study.
- Treebo PWA Case Study (https://medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299/) - Treebo - React And Preact PWA Performance Case
Study.
- Twitter Lite (https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3/) - A Twitter Lite Web App at Scale.
- Telegraph - Creating a web performance culture (https://medium.com/the-telegraph-engineering/improving-third-party-web-performance-at-the-telegraph-a0a1000be5) - Improving third-party web
performance at The Telegraph.
- Zillow's Performance Budget (https://www.zillow.com/engineering/bigger-faster-more-engaging-budget/) - A true story of how Zillow uses performance budgeting.
License
!CC0 (https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg) (https://creativecommons.org/publicdomain/zero/1.0)
▐ 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.
Contents
- Articles (#articles)
- Tools to measure Performance Budget (#tools-to-measure-performance-budget)
- Open source tools (#open-source-tools)
- Build Tools to set up performance budget (#build-tools-to-set-up-performance-budget)
- Bundle Analyzers (#bundle-analyzers)
- Website Analyzers (#website-analyzers)
- Blogs (#blogs)
- Podcasts (#podcasts)
- Videos (#videos)
- Books (#books)
- Case Studies (#case-studies)
Articles
- JavaScript Start-up Performance (https://medium.com/reloading/javascript-start-up-performance-69200f43b201) - Performance Budget by Addyosmani.
- Performance Budget (https://addyosmani.com/blog/performance-budgets/) - Performance Budget by Addyosmani.
- Your first performance budget (https://web.dev/your-first-performance-budget/) - Explained how to define your first performance budget in a few simple steps.
- Designing for Performance (http://designingforperformance.com/index.html#table-of-contents) - How performance is important for designers.
- Web Performance for Designers and developers (https://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/) - Front-end performance for web designers
and front-end developers.
- Performance as design (http://bradfrost.com/blog/post/performance-as-design/) - Best practise to see performance as an essential design feature.
- Inside Design - Setting a web performance budget (https://www.invisionapp.com/inside-design/setting-a-web-performance-budget/) - Setting a performance budget by Invision.
- Real-world Web Performance Budgets By Alex Russel (https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/) - Can You Afford It?: Real-world Web Performance
Budgets.
- Performance Budget using Angular CLI (https://medium.com/dailyjs/how-did-angular-cli-budgets-save-my-day-and-how-they-can-save-yours-300d534aae7a) - Implementing Performance Budget in
Angular projects.
- Performance budgets 101 (https://web.dev/performance-budgets-101/) - How to start a journey by setting up the performance budget.
- Incorporate performance budgets into your build process (https://web.dev/incorporate-performance-budgets-into-your-build-tools) - Set up performance budget into your build process.
- How to make Performance Budget (http://v3.danielmall.com/articles/how-to-make-a-performance-budget/) - Instructions for developing the performance budget.
- Impact of Page Weight on Load Time (https://paulcalvano.com/2018-07-02-impact-of-page-weight-on-load-time/) - Impact of Page Weight on Load Time.
Tools to measure Performance Budget
- Performance Budget Calculator (http://www.performancebudget.io/) - Calculate A Performance Budget For Your Site.
- Web Page Test (https://www.webpagetest.org/easy) - Test your performance.
- lightest app (https://www.lightest.app/) - Visualize web performance against competitors.
- Speed Curve (https://speedcurve.com) - Measuring web performance, get today's performance metrics.
- Yellow Lab Tools (https://yellowlab.tools/) - Online test to help speeding up heavy web pages.
- Sitespeed.io (https://www.sitespeed.io/) - Easy to monitor and measure the performance of your web site.
- Perf Track (https://perf-track.web.app/) - Tracking framework performance at scale.
Open source tools
- Perfume.js (https://zizzamia.github.io/perfume/) - Tiny, web performance monitoring library that reports field data back to your favorite analytics tool.
- Falco (https://github.com/theodo/falco) - Helps you monitor, analyze, and optimize your websites.
Build Tools to set up performance budget
- Bundle Size (https://github.com/siddharthkp/bundlesize) - Keep your bundle size in check.
- Webpack Perf Budget (https://webpack.js.org/configuration/performance/) - If you are using Webpack in your project then you can prefer this.
- Lighthouse (https://web.dev/use-lighthouse-for-performance-budgets/) - How to set up a performance budget using lighthouse (https://developers.google.com/web/tools/lighthouse) and automate
using Lighthouse bot (https://web.dev/using-lighthouse-bot-to-set-a-performance-budget/).
- Grunt-perfbudget (https://github.com/tkadlec/grunt-perfbudget) - Grunt task for performance budgeting.
- Size Limit (https://github.com/ai/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 (https://github.com/GoogleChromeLabs/size-plugin) - Track compressed Webpack asset sizes over time.
- Performance Budget Builder (https://github.com/GoogleChromeLabs/pr-bot) - 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 (https://github.com/paulirish/pwmetrics) - 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 (https://github.com/TrySound/rollup-plugin-size-snapshot) - CLI tool and lib to gather performance metrics via Lighthouse.
- ImportCost - VS Extension (https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) - Extension to display inline in the VS code editor the size of the imported package.
Bundle Analyzers
- Bundlephobia (https://bundlephobia.com/) - Find the cost of adding a npm package to your bundle.
- bundle-buddy (https://bundle-buddy.firebaseapp.com/) - A tool to help you find source code duplication across your JavaScript chunks/splits.
- webpack-bundle-analyzer (https://github.com/webpack-contrib/webpack-bundle-analyzer) - Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable
treemap.
- Disc (http://hughsk.io/disc/) - Visualise the module tree of browserify project bundles and track down bloat.
- lasso-analyzer (https://github.com/ajay2507/lasso-analyzer) - Analyze and Visualise project bundles created by Lasso.
- Rollup Visualizer (https://github.com/btd/rollup-plugin-visualizer) - Visualize and analyze your Rollup bundle to see which modules are taking up space.
- Parcel plugin Visualizer (https://github.com/gregtillbrook/parcel-plugin-bundle-visualiser) - A plugin for the parcel bundler to visualise bundle contents.
- CSS Analyzer (https://github.com/macbre/analyze-css) - CSS selectors complexity and performance analyzer.
Website Analyzers
- Lighthouse Metrics (https://lighthouse-metrics.com/) - 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.
- UITest.com Site Check (https://uitest.com/check/) - Test your website in more than 80 tools (web-based and free).
Blogs
- Web Performance Calender (https://calendar.perfplanet.com/2020/) - Speed geek's favorite time of the year.
Podcasts
- Chasing Waterfalls (https://chasingwaterfalls.io/) - Conversation with people to make web faster by Tim kadlec (https://timkadlec.com/)
- Shoptalk Show (https://shoptalkshow.com/) - A podcast about building websites.
Videos
- Concept of Performance Budget (https://www.youtube.com/watch?list=PLYo5nh8xQFpkwsu9QNlCpPGkmCCuTTWDJ&v=yqejmZrtmNg) - Performance Budget with Tim Kadlec.
- Implementing Performance Budgets (https://youtu.be/vVlpCmK1l5k) - How to implement performance budgets to avoid regression - Google Chrome Developers.
- Design Decisions Through The Lens Of A Performance Budget (https://vimeo.com/108328247) - How we can make smarter design decisions, from the beginning of a project, to ensure that our sites
perform well.
Books
- Web Performance Warrior (https://www.oreilly.com/library/view/web-performance-warrior/9781492048114/)
- Designing for Performance (http://designingforperformance.com/)
Case Studies
- Web Performance Optimization case studies (https://wpostats.com/) - Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and
business metrics.
- BBC - Cutting the mustard (http://responsivenews.co.uk/post/18948466399/cutting-the-mustard) - Optimizations while building responsive websites.
- Casper.com Self-hosting Optimization (https://medium.com/caspertechteam/we-shaved-1-7-seconds-off-casper-com-by-self-hosting-optimizely-2704bcbff8ec) - How we shaved 1.7 seconds off
casper.com by self-hosting Optimizely.
- Netflix Performance Improvement by shipping less JS (https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9) - A Netflix Web Performance Case Study.
- Pinterest Web App Optimization (https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154/) - A Pinterest Progressive Web App Performance Case
Study.
- Smashing Magazine's Web Performance (https://www.smashingmagazine.com/2014/09/improving-smashing-magazine-performance-case-study/) - Improving Smashing Magazine's Web Performance Case
Study.
- Tinder Web App Performance (https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0/) - A Tinder Progressive Web App Performance Case Study.
- Treebo PWA Case Study (https://medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299/) - Treebo - React And Preact PWA Performance Case
Study.
- Twitter Lite (https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3/) - A Twitter Lite Web App at Scale.
- Telegraph - Creating a web performance culture (https://medium.com/the-telegraph-engineering/improving-third-party-web-performance-at-the-telegraph-a0a1000be5) - Improving third-party web
performance at The Telegraph.
- Zillow's Performance Budget (https://www.zillow.com/engineering/bigger-faster-more-engaging-budget/) - A true story of how Zillow uses performance budgeting.
License
!CC0 (https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg) (https://creativecommons.org/publicdomain/zero/1.0)