[38;5;12m                                                                        [39m[38;2;255;187;0m[1m[4mAwesome Web Performance Budget [0m[38;5;14m[1m[4m![0m[38;2;255;187;0m[1m[4mAwesome[0m[38;5;14m[1m[4m (https://awesome.re/badge.svg)[0m[38;2;255;187;0m[1m[4m (https://awesome.re)[0m
[38;5;11m[1m▐[0m[38;5;12m [39m[38;5;12mWeb[39m[38;5;12m [39m[38;5;12mPerformance[39m[38;5;12m [39m[38;5;12mBudget[39m[38;5;12m [39m[38;5;12mis[39m[38;5;12m [39m[38;5;12ma[39m[38;5;12m [39m[38;5;12mgroup[39m[38;5;12m [39m[38;5;12mof[39m[38;5;12m [39m[38;5;12mlimits[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mcertain[39m[38;5;12m [39m[38;5;12mvalues[39m[38;5;12m [39m[38;5;12mthat[39m[38;5;12m [39m[38;5;12maffect[39m[38;5;12m [39m[38;5;12msite[39m[38;5;12m [39m[38;5;12mperformance[39m[38;5;12m [39m[38;5;12mthat[39m[38;5;12m [39m[38;5;12mshould[39m[38;5;12m [39m[38;5;12mnot[39m[38;5;12m [39m[38;5;12mbe[39m[38;5;12m [39m[38;5;12mexceeded[39m[38;5;12m [39m[38;5;12min[39m[38;5;12m [39m[38;5;12mthe[39m[38;5;12m [39m[38;5;12mdesign[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;12mdevelopment[39m[38;5;12m [39m[38;5;12mof[39m[38;5;12m [39m[38;5;12many[39m[38;5;12m [39m[38;5;12mweb[39m[38;5;12m [39m[38;5;12mproject.[39m[38;5;12m [39m[38;5;12mBy[39m[38;5;12m [39m[38;5;12msetting[39m[38;5;12m [39m[38;5;12mup[39m[38;5;12m [39m[38;5;12mthe[39m[38;5;12m [39m[38;5;12mperformance[39m[38;5;12m [39m[38;5;12mbudget,[39m[38;5;12m [39m[38;5;12mwe[39m[38;5;12m [39m[38;5;12mcan[39m[38;5;12m [39m[38;5;12mfocus[39m[38;5;12m [39m[38;5;12mmore[39m[38;5;12m [39m[38;5;12mtowards[39m[38;5;12m [39m
[38;5;11m[1m▐[0m[38;5;12m [39m[38;5;12mperformance[39m[38;5;12m [39m[38;5;12mwhich[39m[38;5;12m [39m[38;5;12mcan[39m[38;5;12m [39m[38;5;12mimprove[39m[38;5;12m [39m[38;5;12mthe[39m[38;5;12m [39m[38;5;12mspeed[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;12moverall[39m[38;5;12m [39m[38;5;12muser[39m[38;5;12m [39m[38;5;12mexperience[39m[38;5;12m [39m[38;5;12mof[39m[38;5;12m [39m[38;5;12mour[39m[38;5;12m [39m[38;5;12mwebsites.[39m[38;5;12m [39m[38;5;12mThis[39m[38;5;12m [39m[38;5;12mlist[39m[38;5;12m [39m[38;5;12mhelp[39m[38;5;12m [39m[38;5;12mus[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mprovide[39m[38;5;12m [39m[38;5;12mlink[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mvarious[39m[38;5;12m [39m[38;5;12marticles,[39m[38;5;12m [39m[38;5;12mprojects,[39m[38;5;12m [39m[38;5;12mtools[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;12mtechniques[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mmaintain[39m[38;5;12m [39m[38;5;12mperformance[39m[38;5;12m [39m[38;5;12mbudget.[39m


[38;2;255;187;0m[4mContents[0m

[38;5;12m- [39m[38;5;14m[1mArticles[0m[38;5;12m (#articles)[39m
[38;5;12m- [39m[38;5;14m[1mTools to measure Performance Budget[0m[38;5;12m (#tools-to-measure-performance-budget)[39m
[38;5;12m- [39m[38;5;14m[1mOpen source tools[0m[38;5;12m (#open-source-tools)[39m
[38;5;12m- [39m[38;5;14m[1mBuild Tools to set up performance budget[0m[38;5;12m (#build-tools-to-set-up-performance-budget)[39m
[38;5;12m- [39m[38;5;14m[1mBundle Analyzers[0m[38;5;12m (#bundle-analyzers)[39m
[38;5;12m- [39m[38;5;14m[1mWebsite Analyzers[0m[38;5;12m (#website-analyzers)[39m
[38;5;12m- [39m[38;5;14m[1mBlogs[0m[38;5;12m (#blogs)[39m
[38;5;12m- [39m[38;5;14m[1mPodcasts[0m[38;5;12m (#podcasts)[39m
[38;5;12m- [39m[38;5;14m[1mVideos[0m[38;5;12m (#videos)[39m
[38;5;12m- [39m[38;5;14m[1mBooks[0m[38;5;12m (#books)[39m
[38;5;12m- [39m[38;5;14m[1mCase Studies[0m[38;5;12m (#case-studies)[39m

[38;2;255;187;0m[4mArticles[0m
[38;5;12m- [39m[38;5;14m[1mJavaScript Start-up Performance[0m[38;5;12m (https://medium.com/reloading/javascript-start-up-performance-69200f43b201) - Performance Budget by Addyosmani.[39m
[38;5;12m- [39m[38;5;14m[1mPerformance Budget[0m[38;5;12m (https://addyosmani.com/blog/performance-budgets/) - Performance Budget by Addyosmani.[39m
[38;5;12m- [39m[38;5;14m[1mYour first performance budget[0m[38;5;12m (https://web.dev/your-first-performance-budget/) - Explained how to define your first performance budget in a few simple steps.[39m
[38;5;12m- [39m[38;5;14m[1mDesigning for Performance[0m[38;5;12m (http://designingforperformance.com/index.html#table-of-contents) - How performance is important for designers.[39m
[38;5;12m- [39m[38;5;14m[1mWeb Performance for Designers and developers[0m[38;5;12m (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.[39m
[38;5;12m- [39m[38;5;14m[1mPerformance as design[0m[38;5;12m (http://bradfrost.com/blog/post/performance-as-design/) - Best practise to see performance as an essential design feature.[39m
[38;5;12m- [39m[38;5;14m[1mInside Design - Setting a web performance budget[0m[38;5;12m (https://www.invisionapp.com/inside-design/setting-a-web-performance-budget/) - Setting a performance budget by Invision.[39m
[38;5;12m- [39m[38;5;14m[1mReal-world Web Performance Budgets By Alex Russel[0m[38;5;12m (https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/) - Can You Afford It?: Real-world Web Performance Budgets.[39m
[38;5;12m- [39m[38;5;14m[1mPerformance Budget using Angular CLI[0m[38;5;12m (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.[39m
[38;5;12m- [39m[38;5;14m[1mPerformance budgets 101[0m[38;5;12m (https://web.dev/performance-budgets-101/) - How to start a journey by setting up the performance budget.[39m
[38;5;12m- [39m[38;5;14m[1mIncorporate performance budgets into your build process[0m[38;5;12m (https://web.dev/incorporate-performance-budgets-into-your-build-tools) - Set up performance budget into your build process.[39m
[38;5;12m- [39m[38;5;14m[1mHow to make Performance Budget[0m[38;5;12m (http://v3.danielmall.com/articles/how-to-make-a-performance-budget/) - Instructions for developing the performance budget.[39m
[38;5;12m- [39m[38;5;14m[1mImpact of Page Weight on Load Time[0m[38;5;12m (https://paulcalvano.com/2018-07-02-impact-of-page-weight-on-load-time/) - Impact of Page Weight on Load Time.[39m

[38;2;255;187;0m[4mTools to measure Performance Budget[0m

[38;5;12m- [39m[38;5;14m[1mPerformance Budget Calculator[0m[38;5;12m (http://www.performancebudget.io/) - Calculate A Performance Budget For Your Site.[39m
[38;5;12m- [39m[38;5;14m[1mWeb Page Test[0m[38;5;12m (https://www.webpagetest.org/easy) - Test your performance.[39m
[38;5;12m- [39m[38;5;14m[1mlightest app[0m[38;5;12m (https://www.lightest.app/) - Visualize web performance against competitors.[39m
[38;5;12m- [39m[38;5;14m[1mSpeed Curve[0m[38;5;12m (https://speedcurve.com) - Measuring web performance, get today's performance metrics.[39m
[38;5;12m- [39m[38;5;14m[1mYellow Lab Tools[0m[38;5;12m (https://yellowlab.tools/) - Online test to help speeding up heavy web pages.[39m
[38;5;12m- [39m[38;5;14m[1mSitespeed.io[0m[38;5;12m (https://www.sitespeed.io/) - Easy to monitor and measure the performance of your web site.[39m
[38;5;12m- [39m[38;5;14m[1mPerf Track[0m[38;5;12m (https://perf-track.web.app/) - Tracking framework performance at scale.[39m

[38;2;255;187;0m[4mOpen source tools[0m

[38;5;12m- [39m[38;5;14m[1mPerfume.js[0m[38;5;12m (https://zizzamia.github.io/perfume/) - Tiny, web performance monitoring library that reports field data back to your favorite analytics tool.[39m
[38;5;12m- [39m[38;5;14m[1mFalco[0m[38;5;12m (https://github.com/theodo/falco) - Helps you monitor, analyze, and optimize your websites.[39m

[38;2;255;187;0m[4mBuild Tools to set up performance budget[0m

[38;5;12m- [39m[38;5;14m[1mBundle Size[0m[38;5;12m (https://github.com/siddharthkp/bundlesize) - Keep your bundle size in check.[39m
[38;5;12m- [39m[38;5;14m[1mWebpack Perf Budget[0m[38;5;12m (https://webpack.js.org/configuration/performance/) - If you are using Webpack in your project then you can prefer this.[39m
[38;5;12m-[39m[38;5;12m [39m[38;5;14m[1mLighthouse[0m[38;5;12m [39m[38;5;12m(https://web.dev/use-lighthouse-for-performance-budgets/)[39m[38;5;12m [39m[38;5;12m-[39m[38;5;12m [39m[38;5;12mHow[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mset[39m[38;5;12m [39m[38;5;12mup[39m[38;5;12m [39m[38;5;12ma[39m[38;5;12m [39m[38;5;12mperformance[39m[38;5;12m [39m[38;5;12mbudget[39m[38;5;12m [39m[38;5;12musing[39m[38;5;12m [39m[38;5;14m[1mlighthouse[0m[38;5;12m [39m[38;5;12m(https://developers.google.com/web/tools/lighthouse)[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;12mautomate[39m[38;5;12m [39m[38;5;12musing[39m[38;5;12m [39m[38;5;14m[1mLighthouse[0m[38;5;14m[1m [0m[38;5;14m[1mbot[0m[38;5;12m [39m
[38;5;12m(https://web.dev/using-lighthouse-bot-to-set-a-performance-budget/).[39m
[38;5;12m- [39m[38;5;14m[1mGrunt-perfbudget[0m[38;5;12m (https://github.com/tkadlec/grunt-perfbudget) - Grunt task for performance budgeting.[39m
[38;5;12m- [39m[38;5;14m[1mSize Limit[0m[38;5;12m (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.[39m
[38;5;12m- [39m[38;5;14m[1mSize Plugin[0m[38;5;12m (https://github.com/GoogleChromeLabs/size-plugin) - Track compressed Webpack asset sizes over time.[39m
[38;5;12m- [39m[38;5;14m[1mPerformance Budget Builder[0m[38;5;12m (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.[39m
[38;5;12m- [39m[38;5;14m[1mProgressive Web Metrics[0m[38;5;12m (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. [39m
[38;5;12m- [39m[38;5;14m[1mrollup-plugin-size-snapshot[0m[38;5;12m (https://github.com/TrySound/rollup-plugin-size-snapshot) - CLI tool and lib to gather performance metrics via Lighthouse.[39m
[38;5;12m- [39m[38;5;14m[1mImportCost - VS Extension[0m[38;5;12m (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.[39m

[38;2;255;187;0m[4mBundle Analyzers[0m

[38;5;12m- [39m[38;5;14m[1mBundlephobia[0m[38;5;12m (https://bundlephobia.com/) - Find the cost of adding a npm package to your bundle.[39m
[38;5;12m- [39m[38;5;14m[1mbundle-buddy[0m[38;5;12m (https://bundle-buddy.firebaseapp.com/) - A tool to help you find source code duplication across your JavaScript chunks/splits.[39m
[38;5;12m- [39m[38;5;14m[1mwebpack-bundle-analyzer[0m[38;5;12m (https://github.com/webpack-contrib/webpack-bundle-analyzer) - Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap.[39m
[38;5;12m- [39m[38;5;14m[1mDisc[0m[38;5;12m (http://hughsk.io/disc/) - Visualise the module tree of browserify project bundles and track down bloat. [39m
[38;5;12m- [39m[38;5;14m[1mlasso-analyzer[0m[38;5;12m (https://github.com/ajay2507/lasso-analyzer) - Analyze and Visualise project bundles created by Lasso.[39m
[38;5;12m- [39m[38;5;14m[1mRollup Visualizer[0m[38;5;12m (https://github.com/btd/rollup-plugin-visualizer) - Visualize and analyze your Rollup bundle to see which modules are taking up space.[39m
[38;5;12m- [39m[38;5;14m[1mParcel plugin Visualizer[0m[38;5;12m (https://github.com/gregtillbrook/parcel-plugin-bundle-visualiser) - A plugin for the parcel bundler to visualise bundle contents.[39m
[38;5;12m- [39m[38;5;14m[1mCSS Analyzer[0m[38;5;12m (https://github.com/macbre/analyze-css) - CSS selectors complexity and performance analyzer.[39m

[38;2;255;187;0m[4mWebsite Analyzers[0m
[38;5;12m- [39m[38;5;14m[1mLighthouse Metrics[0m[38;5;12m (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.[39m
[38;5;12m- [39m[38;5;14m[1mUITest.com Site Check[0m[38;5;12m (https://uitest.com/check/) - Test your website in more than 80 tools (web-based and free).[39m

[38;2;255;187;0m[4mBlogs[0m
[38;5;12m- [39m[38;5;14m[1mWeb Performance Calender[0m[38;5;12m (https://calendar.perfplanet.com/2020/) - Speed geek's favorite time of the year.[39m

[38;2;255;187;0m[4mPodcasts[0m
[38;5;12m- [39m[38;5;14m[1mChasing Waterfalls[0m[38;5;12m (https://chasingwaterfalls.io/) - Conversation with people to make web faster by [39m[38;5;14m[1mTim kadlec[0m[38;5;12m (https://timkadlec.com/)[39m
[38;5;12m- [39m[38;5;14m[1mShoptalk Show[0m[38;5;12m (https://shoptalkshow.com/) - A podcast about building websites.[39m

[38;2;255;187;0m[4mVideos[0m

[38;5;12m- [39m[38;5;14m[1mConcept of Performance Budget[0m[38;5;12m (https://www.youtube.com/watch?list=PLYo5nh8xQFpkwsu9QNlCpPGkmCCuTTWDJ&v=yqejmZrtmNg) - Performance Budget with Tim Kadlec.[39m
[38;5;12m- [39m[38;5;14m[1mImplementing Performance Budgets[0m[38;5;12m (https://youtu.be/vVlpCmK1l5k) - How to implement performance budgets to avoid regression - Google Chrome Developers.[39m
[38;5;12m- [39m[38;5;14m[1mDesign Decisions Through The Lens Of A Performance Budget[0m[38;5;12m (https://vimeo.com/108328247) - How we can make smarter design decisions, from the beginning of a project, to ensure that our sites perform well.[39m

[38;2;255;187;0m[4mBooks[0m

[38;5;12m- [39m[38;5;14m[1mWeb Performance Warrior[0m[38;5;12m (https://www.oreilly.com/library/view/web-performance-warrior/9781492048114/)[39m
[38;5;12m- [39m[38;5;14m[1mDesigning for Performance[0m[38;5;12m (http://designingforperformance.com/)[39m

[38;2;255;187;0m[4mCase Studies[0m

[38;5;12m- [39m[38;5;14m[1mWeb Performance Optimization case studies[0m[38;5;12m (https://wpostats.com/) - Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and business metrics.[39m
[38;5;12m- [39m[38;5;14m[1mBBC - Cutting the mustard[0m[38;5;12m (http://responsivenews.co.uk/post/18948466399/cutting-the-mustard) - Optimizations while building responsive websites.[39m
[38;5;12m- [39m[38;5;14m[1mCasper.com Self-hosting Optimization[0m[38;5;12m (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.[39m
[38;5;12m- [39m[38;5;14m[1mNetflix Performance Improvement by shipping less JS[0m[38;5;12m (https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9) - A Netflix Web Performance Case Study.[39m
[38;5;12m- [39m[38;5;14m[1mPinterest Web App Optimization[0m[38;5;12m (https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154/) - A Pinterest Progressive Web App Performance Case Study.[39m
[38;5;12m- [39m[38;5;14m[1mSmashing Magazine's Web Performance[0m[38;5;12m (https://www.smashingmagazine.com/2014/09/improving-smashing-magazine-performance-case-study/) - Improving Smashing Magazine's Web Performance Case Study.[39m
[38;5;12m- [39m[38;5;14m[1mTinder Web App Performance[0m[38;5;12m (https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0/) - A Tinder Progressive Web App Performance Case Study.[39m
[38;5;12m- [39m[38;5;14m[1mTreebo PWA Case Study[0m[38;5;12m (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.[39m
[38;5;12m- [39m[38;5;14m[1mTwitter Lite[0m[38;5;12m (https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3/) - A Twitter Lite Web App at Scale.[39m
[38;5;12m- [39m[38;5;14m[1mTelegraph - Creating a web performance culture[0m[38;5;12m (https://medium.com/the-telegraph-engineering/improving-third-party-web-performance-at-the-telegraph-a0a1000be5) - Improving third-party web performance at The Telegraph.[39m
[38;5;12m- [39m[38;5;14m[1mZillow's Performance Budget[0m[38;5;12m (https://www.zillow.com/engineering/bigger-faster-more-engaging-budget/) - A true story of how Zillow uses performance budgeting.[39m

[38;2;255;187;0m[4mLicense[0m

[38;5;14m[1m![0m[38;5;12mCC0[39m[38;5;14m[1m (https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)[0m[38;5;12m (https://creativecommons.org/publicdomain/zero/1.0)[39m
