<div class="github-widget" data-repo="pajaydev/awesome-performance-budget"></div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6890694312814945" data-ad-slot="5473692530" data-ad-format="auto"  data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
## Awesome Web Performance Budget [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)
 &gt; Web性能预算是对影响网站性能的某些值的一组限制，在任何Web项目的设计和开发中都不应超过这些限制.  通过设置效果预算，我们可以将更多精力放在性能上，从而可以提高网站的速度和整体用户体验.  此列表可帮助我们提供各种文章，项目，工具和技术的链接，以维护绩效预算.




## Why We need Performance Budget

- [JavaScript Start-up Performance](https://medium.com/reloading/javascript-start-up-performance-69200f43b201) -Addyosmani的绩效预算.

## Articles
- [Performance Budget](https://addyosmani.com/blog/performance-budgets/) -Addyosmani的绩效预算.
- [Your first performance budget](https://web.dev/your-first-performance-budget/) -说明了如何通过几个简单的步骤定义您的首个效果预算.
- [Designing for Performance](http://designingforperformance.com/index.html#table-of-contents) -性能对设计师而言多么重要.
- [Web Performance for Designers and developers](https://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/) -网页设计师和前端开发人员的前端性能.
- [Performance as design](http://bradfrost.com/blog/post/performance-as-design/) -将性能视为基本设计功能的最佳实践.
- [Inside Design - Setting a web performance budget](https://www.invisionapp.com/inside-design/setting-a-web-performance-budget/) -通过Invision设置绩效预算.
- [Real-world Web Performance Budgets By Alex Russel](https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/) -您负担得起吗？：实际的Web性能预算.
- [Performance Budget using Angular CLI](https://medium.com/dailyjs/how-did-angular-cli-budgets-save-my-day-and-how-they-can-save-yours-300d534aae7a) -在Angular项目中实施绩效预算.
- [Incorporate performance budgets into your build process](https://web.dev/incorporate-performance-budgets-into-your-build-tools) -在您的构建过程中设置性能预算.
- [How to make Performance Budget](http://v3.danielmall.com/articles/how-to-make-a-performance-budget/) -制定绩效预算的说明.

## Tools to measure Performance Budget

- [Performance Budget Calculator](http://www.performancebudget.io/) -计算您网站的性能预算.
- [Web Page Test](https://www.webpagetest.org/easy) -测试您的表现.
- [Speed Curve](https://speedcurve.com) -测量网络性能，获取当今的性能指标.
- [Yellow Lab Tools](https://yellowlab.tools/) -在线测试可帮助加快繁重的网页.
- [Sitespeed.io](https://www.sitespeed.io/) -易于监视和衡量您网站的性能.

## Build Tools to set up performance budget

- [Bundle Size](https://github.com/siddharthkp/bundlesize) -检查包的大小.
- [Webpack Perf Budget](https://webpack.js.org/configuration/performance/) -如果您在项目中使用Webpack，则可以选择此选项.
- [Grunt-perfbudget](https://github.com/tkadlec/grunt-perfbudget) -用于性能预算的艰巨任务.
- [Size Limit](https://github.com/ai/size-limit)  -计算运行JS应用或lib来保持良好性能的实际成本.  如果费用超出限制，则在拉取请求中显示错误.
- [Size Plugin](https://github.com/GoogleChromeLabs/size-plugin) -随时间跟踪压缩的Webpack资产大小.
- [Performance Budget Builder](https://github.com/GoogleChromeLabs/pr-bot) -布置模板类型，为每种模板类型设置大小预算，然后为将在模板中加载的每种资产类别插入大小.
- [Progressive Web Metrics](https://github.com/paulirish/pwmetrics) -布置模板类型，为每种模板类型设置大小预算，然后为将在模板中加载的每种资产类别插入大小. 
- [rollup-plugin-size-snapshot](https://github.com/TrySound/rollup-plugin-size-snapshot) -CLI工具和lib以通过Lighthouse收集性能指标.
- [ImportCost - VS Extension](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) -扩展以在VS代码编辑器中内联显示导入包的大小.

## Bundle Analyzers

- [Bundlephobia](https://bundlephobia.com/) -查找将npm软件包添加到软件包中的成本.
- [bundle-buddy](https://bundle-buddy.firebaseapp.com/) -一种工具，可帮助您跨JavaScript块/拆分查找源代码重复项.
- [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) -Webpack插件和CLI实用程序，将捆绑包内容表示为方便的交互式可缩放树形图.
- [Disc](http://hughsk.io/disc/) -可视化浏览器项目捆绑包的模块树并追踪膨胀. 
- [lasso-analyzer](https://github.com/ajay2507/lasso-analyzer) -分析和可视化由Lasso创建的项目包.
- [Rollup Visualizer](https://github.com/btd/rollup-plugin-visualizer) -可视化并分析汇总套件，以查看哪些模块占用了空间.
- [Parcel plugin Visualizer](https://github.com/gregtillbrook/parcel-plugin-bundle-visualiser) -用于包裹捆扎机的插件，用于可视化捆扎内容.
- [CSS Analyzer](https://github.com/macbre/analyze-css) -CSS选择器的复杂性和性能分析器.

## Videos

- [Concept of Performance Budget](https://www.youtube.com/watch?list=PLYo5nh8xQFpkwsu9QNlCpPGkmCCuTTWDJ&v=yqejmZrtmNg) -与Tim Kadlec共同制定的绩效预算.
- [Implementing Performance Budgets](https://youtu.be/vVlpCmK1l5k) -如何实施效果预算以避免回退-Google Chrome开发者.
- [Design Decisions Through The Lens Of A Performance Budget](https://vimeo.com/108328247) -从项目开始就如何做出更明智的设计决策，以确保我们的网站表现良好.

## Case Studies

- [Zillow's Performance Budget](https://www.zillow.com/engineering/bigger-faster-more-engaging-budget/) -关于Zillow如何使用绩效预算的真实故事.
- [Tinder Web App Performance](https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0/) -Tinder渐进式Web应用程序性能案例研究.
- [Pinterest Web App Optimization](https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154/) -Pinterest渐进式Web应用性能案例研究.
- [Casper.com Self-hosting Optimization](https://medium.com/caspertechteam/we-shaved-1-7-seconds-off-casper-com-by-self-hosting-optimizely-2704bcbff8ec) -如何通过自托管Optimizely将casper.com缩短1.7秒.
- [BBC - Cutting the mustard](http://responsivenews.co.uk/post/18948466399/cutting-the-mustard) -在构建响应式网站时进行了优化.
- [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性能案例研究.
- [Twitter Lite](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3/) -大规模的Twitter Lite Web App.
- [Netflix - Performance Improvement by shipping less JS](https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9) -Netflix网络性能案例研究.
- [Telegraph - Creating a web performance culture](https://medium.com/the-telegraph-engineering/improving-third-party-web-performance-at-the-telegraph-a0a1000be5) -改善《电讯报》的第三方网络性能.
- [Uber Eats - Performance Improvements](https://eng.uber.com/uber-eats-com-web-app-rewrite/) -计算卡路里：我们如何改善UberEats.com的性能和开发人员体验.
- [Analyzing the Walmart site performance](https://iamakulov.com/notes/walmart/) -改善沃尔玛产品页面的性能.
- [Walmart - Turbocharging the Speed](https://speakerdeck.com/vasa/turbocharging-walmart-dot-com-speed-without-compromise) -毫不妥协地为沃尔玛网站速度加价.
- [Wehkamp.nl - How performance budgets and SpeedCurve are helped us](https://medium.com/wehkamp-techblog/how-performance-budgets-and-speedcurve-are-helping-us-keeping-a-high-performant-website-283c0233daba)通过使用速度曲线实施效果预算来保持我们网站的高性能.

## Contribution
 随时添加一个很棒的列表.  请阅读 [contribution guidelines](https://github.com/pajaydev/awesome-performance-budget/blob/master/CONTRIBUTING.md) 接着 [open a pull request](https://github.com/pajaydev/awesome-web-performance-budget/issues/new)! 

## License

[![CC0](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0)
