Awesome performance budget

Awesome Web Performance Budget ¶

> Web性能预算是对影响网站性能的某些值的一组限制，在任何Web项目的设计和开发中都不应超过这些限制. 通过设置效果预算，我们可以将更多精力放在性能上，从而可以提高网站的速度和整体用户体验. 此列表可帮助我们提供各种文章，项目，工具和技术的链接，以维护绩效预算.

Why We need Performance Budget¶

• JavaScript Start-up Performance -Addyosmani的绩效预算.

Articles¶

• Performance Budget -Addyosmani的绩效预算.
• Your first performance budget -说明了如何通过几个简单的步骤定义您的首个效果预算.
• Designing for Performance -性能对设计师而言多么重要.
• Web Performance for Designers and developers -网页设计师和前端开发人员的前端性能.
• Performance as design -将性能视为基本设计功能的最佳实践.
• Inside Design - Setting a web performance budget -通过Invision设置绩效预算.
• Real-world Web Performance Budgets By Alex Russel -您负担得起吗？：实际的Web性能预算.
• Performance Budget using Angular CLI -在Angular项目中实施绩效预算.
• Incorporate performance budgets into your build process -在您的构建过程中设置性能预算.
• How to make Performance Budget -制定绩效预算的说明.

Tools to measure Performance Budget¶

• Performance Budget Calculator -计算您网站的性能预算.
• Web Page Test -测试您的表现.
• Speed Curve -测量网络性能，获取当今的性能指标.
• Yellow Lab Tools -在线测试可帮助加快繁重的网页.
• Sitespeed.io -易于监视和衡量您网站的性能.

Build Tools to set up performance budget¶

• Bundle Size -检查包的大小.
• Webpack Perf Budget -如果您在项目中使用Webpack，则可以选择此选项.
• Grunt-perfbudget -用于性能预算的艰巨任务.
• Size Limit -计算运行JS应用或lib来保持良好性能的实际成本. 如果费用超出限制，则在拉取请求中显示错误.
• Size Plugin -随时间跟踪压缩的Webpack资产大小.
• Performance Budget Builder -布置模板类型，为每种模板类型设置大小预算，然后为将在模板中加载的每种资产类别插入大小.
• Progressive Web Metrics -布置模板类型，为每种模板类型设置大小预算，然后为将在模板中加载的每种资产类别插入大小.
• rollup-plugin-size-snapshot -CLI工具和lib以通过Lighthouse收集性能指标.
• ImportCost - VS Extension -扩展以在VS代码编辑器中内联显示导入包的大小.

Bundle Analyzers¶

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

Videos¶

• Concept of Performance Budget -与Tim Kadlec共同制定的绩效预算.
• Implementing Performance Budgets -如何实施效果预算以避免回退-Google Chrome开发者.
• Design Decisions Through The Lens Of A Performance Budget -从项目开始就如何做出更明智的设计决策，以确保我们的网站表现良好.

Case Studies¶

• Zillow's Performance Budget -关于Zillow如何使用绩效预算的真实故事.
• Tinder Web App Performance -Tinder渐进式Web应用程序性能案例研究.
• Pinterest Web App Optimization -Pinterest渐进式Web应用性能案例研究.
• Casper.com Self-hosting Optimization -如何通过自托管Optimizely将casper.com缩短1.7秒.
• BBC - Cutting the mustard -在构建响应式网站时进行了优化.
• Treebo PWA Case Study -Treebo-React and Preact PWA性能案例研究.
• Twitter Lite -大规模的Twitter Lite Web App.
• Netflix - Performance Improvement by shipping less JS -Netflix网络性能案例研究.
• Telegraph - Creating a web performance culture -改善《电讯报》的第三方网络性能.
• Uber Eats - Performance Improvements -计算卡路里：我们如何改善UberEats.com的性能和开发人员体验.
• Analyzing the Walmart site performance -改善沃尔玛产品页面的性能.
• Walmart - Turbocharging the Speed -毫不妥协地为沃尔玛网站速度加价.
• Wehkamp.nl - How performance budgets and SpeedCurve are helped us通过使用速度曲线实施效果预算来保持我们网站的高性能.

Contribution¶

随时添加一个很棒的列表. 请阅读 contribution guidelines 接着 open a pull request!

License¶