Awesome web performance budget

Awesome Web Performance Budget ¶

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

Articles¶

• JavaScript Start-up Performance - Addyosmani 的绩效预算.
• 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 - 你能负担得起吗？：真实世界的网络性能预算.
• Performance Budget using Angular CLI - 在 Angular 项目中实施绩效预算.
• Performance budgets 101 - 如何通过设置绩效预算来开始一段旅程.
• Incorporate performance budgets into your build process - 在构建过程中设置性能预算.
• How to make Performance Budget - 制定绩效预算的说明.
• Impact of Page Weight on Load Time - 页面重量对加载时间的影响.

Tools to measure Performance Budget¶

• Performance Budget Calculator - 计算您站点的性能预算.
• Web Page Test - 测试你的表现.
• lightest app - 可视化网络性能与竞争对手的对比.
• Speed Curve - 衡量网络性能，获取今天的性能指标.
• Yellow Lab Tools - 在线测试以帮助加速繁重的网页.
• Sitespeed.io - 易于监控和衡量您网站的性能.
• Perf Track - 大规模跟踪框架性能.

Open source tools¶

• Perfume.js - 将现场数据报告回您最喜欢的分析工具的微型网络性能监控库.
• Falco - 帮助您监控、分析和优化您的网站.

Build Tools to set up performance budget¶

• Bundle Size - 控制您的捆绑包大小.
• Webpack Perf Budget - 如果你在你的项目中使用 Webpack 那么你可以更喜欢这个.
• Lighthouse - 如何设置绩效预算使用 lighthouse 并自动使用 Lighthouse bot.
• Grunt-perfbudget - 绩效预算的艰巨任务.
• Size Limit - 计算运行 JS 应用程序或库以保持良好性能的实际成本. 如果成本超过限制，则在拉取请求中显示错误.
• Size Plugin - 随着时间的推移跟踪压缩的 Webpack 资产大小.
• Performance Budget Builder - 布置您的模板类型，为每个模板类型设置大小预算，然后插入将加载到模板中的每个资产类别的大小.
• Progressive Web Metrics - 布置您的模板类型，为每个模板类型设置大小预算，然后插入将加载到模板中的每个资产类别的大小.
• rollup-plugin-size-snapshot - 通过 Lighthouse 收集性能指标的 CLI 工具和库.
• ImportCost - VS Extension - 扩展以在 VS 代码编辑器中内联显示导入包的大小.

Bundle Analyzers¶

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

Website Analyzers¶

• Lighthouse Metrics - Lighthouse Metrics 可以轻松了解您网站的性能. 通过从多个位置运行测试来获得所需的宝贵见解，从而节省您的时间.
• UITest.com Site Check - 使用 80 多种工具（基于网络和免费）测试您的网站.

Blogs¶

• Web Performance Calender - Speed geek 一年中最喜欢的时间.

Podcasts¶

• Chasing Waterfalls - 与人交谈，使网络更快 Tim kadlec
• Shoptalk Show - 关于建立网站的播客.

Videos¶

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

Books¶

• Web Performance Warrior
• Designing for Performance

Case Studies¶

• Web Performance Optimization case studies - 案例研究和实验，展示网络性能优化 (WPO) 对用户体验和业务指标的影响.
• BBC - Cutting the mustard - 在构建响应式网站时进行优化.
• Casper.com Self-hosting Optimization - 我们如何通过自托管 Optimizely 将 casper.com 缩短 1.7 秒.
• Netflix Performance Improvement by shipping less JS - Netflix 网络性能案例研究.
• Pinterest Web App Optimization - Pinterest 渐进式 Web 应用程序性能案例研究.
• Smashing Magazine's Web Performance - 改进 Smashing Magazine 的 Web 性能案例研究.
• Tinder Web App Performance - Tinder 渐进式 Web 应用程序性能案例研究.
• Treebo PWA Case Study - Treebo - React 和 Preact PWA 性能案例研究.
• Twitter Lite - 大规模的 Twitter Lite Web 应用程序.
• Telegraph - Creating a web performance culture - 改善 The Telegraph 的第三方 Web 性能.
• Zillow's Performance Budget - Zillow 如何使用绩效预算的真实故事.

License¶