原文：www.smashingmagazine.com/2021/01/fro…
QUICK SUMMARY ↬ Let’s make 2021… fast! An annual front-end performance checklist (available as PDF, Apple Pages, MS Word), with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016. Ah, you can also get useful front-end tips in our email newsletter.
概要：好快，已经2021年了。年度的前端性能清单包括了你现在需要知道的用来创建更好体验的web的指标，工具和技术等等。从2016年就开始，这里就持续更新给大家了。
Web performance is a tricky beast, isn’t it? How do we actually know where we stand in terms of performance, and what exactly our performance bottlenecks are? Is it expensive JavaScript, slow web font delivery, heavy images, or sluggish rendering? Have we optimized enough with tree-shaking, scope hoisting, code-splitting, and all the fancy loading patterns with intersection observer, progressive hydration, clients hints, HTTP/3, service workers and — oh my — edge workers? And, most importantly, where do we even start improving performance and how do we establish a performance culture long-term?
搞web 性能真事个麻烦事。怎样我们才能准确知道当前我们的性能搞得怎么样，哪里才是性能瓶颈呢？耗时的js，加载字体慢了，太多的图片 还是渲染慢了呢？我们是否已经使用了足够的tree-shaking, 作用域提升，代码切割，通过复杂设计的加载模式，渐进操作，客户端提示，http3,service workers - edge workers(边际服务？）等技术？最重要的是，从哪里开始优化性能，还有是否做到稳定持续的优化文化。
Back in the day, performance was often a mere afterthought. Often deferred till the very end of the project, it would boil down to minification, concatenation, asset optimization and potentially a few fine adjustments on the server’s config file. Looking back now, things seem to have changed quite significantly.
以前的日子，搞优化经常只是一些事后工作。经常是拖延到了项目结尾才做，一般做一些资源压缩，服务端配置优化。再看看现在，事情已经有了很大的变化。
Performance isn’t just a technical concern: it affects everything from accessibility to usability to search engine optimization, and when baking it into the workflow, design decisions have to be informed by their performance implications. Performance has to be measured, monitored and refined continually, and the growing complexity of the web poses new challenges that make it hard to keep track of metrics, because data will vary significantly depending on the device, browser, protocol, network type and latency (CDNs, ISPs, caches, proxies, firewalls, load balancers and servers all play a role in performance).
性能不再是一个技术概念：它影响了搜索引擎的如何做最大优化，从进入到使用的全部事情，应该把优化嵌入到工作流里面，设计方案的时候就要根据性能优化经验做决定。（理想情况，我们希望）性能是能被度量，监控和不断优化的，但另一方面，因为数据来自于各种渠道，例如浏览器，硬件设备，网络协议，其他潜在因素（CDN，ISPs, 各种代理，防火墙，负载均衡，应用服务等都扮演了性能优化中的一个角色），这使web 一直有新的难题并使其复杂度不断增长，导致根据（现有固定的）指标去跟踪（性能变化）变得非常困难。
So, if we created an overview of all the things we have to keep in mind when improving performance — from the very start of the project until the final release of the website — what would that look like? Below you’ll find a (hopefully unbiased and objective) front-end performance checklist for 2021 — an updated overview of the issues you might need to consider to ensure that your response times are fast, user interaction is smooth and your sites don’t drain user’s bandwidth.
所以，如果当我们需要提高性能的时候，已经存在一份从项目最开始到最后发布上线的（关于提高性能的）总览手册，会是长什么样呢？下面你就能找到一份前端性能清掉（2021年版），一份持续更新的，包括你所关心的，怎么给到用户快速响应，用户体验是平滑流程的，而且不太占用用户带宽的总览手册。
- 开始：计划和指标
- 制定现实的目标
- 定义环境
- 资源优化
- 构建优化
- 传送优化
- 网络，http2，http3
- 测试和监控
- 快要胜利了
- 出发
Getting Ready: Planning And Metrics # Micro-optimizations are great for keeping performance on track, but it’s critical to have clearly defined targets in mind — measurable goals that would influence any decisions made throughout the process. There are a couple of different models, and the ones discussed below are quite opinionated — just make sure to set your own priorities early on.
开始：计划和指标
微优化便于跟踪性能变化，但想准确为其制定目标是困难的 - 那一堆影响着各种优化决定的“可度量”的小目标还经常遍及到整个（优化计划）进程里面。下面有一些模型，部分模型经过讨论后是十分推荐使用的，因为他们能够更早帮助你设置好优先级（顺序）
Establish a performance culture.
In many organizations, front-end developers know exactly what common underlying problems are and what strategies should be used to fix them. However, as long as there is no established endorsement of the performance culture, each decision will turn into a battlefield of departments, breaking up the organization into silos. You need a business stakeholder buy-in, and to get it, you need to establish a case study, or a proof of concept on how speed — especially Core Web Vitals which we'll cover in detail later — benefits metrics and Key Performance Indicators (KPIs) they care about.
稳定的性能文化
在很多公司组织里面，前端开发知道实际遇到的常见问题应该怎么解决。但是，却没有什么稳定的让其他人认可的性能文化能够传承下来，每一项决定都会在部门直接激烈讨论，把组织分解为多个孤岛。为此，如果你想在商业上可以有人和你合作，你需要证明你的”web 优化核心方案“有学习例子，足够的指标，才能让你的合作者认可你的方案。后面，我们会把相关的web 核心细节都拿出来讨论的。
For example, to make performance more tangible, you could expose the revenue performance impact by showing the correlation between the conversion rate and time to application load, as well as rendering performance. Or the search bot crawling rate (PDF, pages 27–50).
举个例子，为了让性能更加直观，你可以通过展示你的应用的加载时间（亦称渲染性能）和转换率的关系，从而表达出性能对收入的影响。（又或者把搜索引擎）爬虫查询的概率（和性能的关系表达出来）
Without a strong alignment between dev/design and business/marketing teams, performance isn’t going to sustain long-term. Study common complaints coming into customer service and sales team, study analytics for high bounce rates and conversion drops. Explore how improving performance can help relieve some of these common problems. Adjust the argument depending on the group of stakeholders you are speaking to.
如果 开发/设计 团队 和 商务/市场 团队直接没有紧密的配合（或 达成一致），那么性能就难以持续得到支持。客户服务和销售团队研究普通投诉，研究分析高反弹率和转换率，探索性能如何有助于缓解其中一些常见问题。为你的股东论证其中的关系。
Run performance experiments and measure outcomes — both on mobile and on desktop (for example, with Google Analytics). It will help you build up a company-tailored case study with real data. Furthermore, using data from case studies and experiments published on WPO Stats will help increase sensitivity for business about why performance matters, and what impact it has on user experience and business metrics. Stating that performance matters alone isn’t enough though — you also need to establish some measurable and trackable goals and observe them over time.
同时在移动设备和桌面设备上运行性能实验和得到测试结果，将会更好地帮你为公司量身定做的研究提供数据支持。此外，在WPO Stats公布的一些关于性能如何提高商务能力的实验数据也能提高自己公司的商务敏感性。只关注那些重要的性能是不足够的，你还要去花时间论证并找到那些可度量课跟踪的目标。
How to get there? In her talk on Building Performance for the Long Term, Allison McKnight shares a comprehensive case-study of how she helped establish a performance culture at Etsy (slides). More recently, Tammy Everts has spoken about habits of highly effective performance teams in both small and large organizations.
在长期构建高性能里面，Allison McKnigh分享了广泛的关于持续性能优化的学习案例，ppt 在(slides)。最近Tammy Everts 也提及到在小型和大型组织如何搞有效的性能团队
While having these conversations in organizations, it’s important to keep in mind that just like UX is a spectrum of experiences, web performance is a distribution. As Karolina Szczur noted, "expecting a single number to be able to provide a rating to aspire to is a flawed assumption." Hence performance goals need to be granular, trackable and tangible.
当在组织中出现如下对话的时候，”我们期望通过单一的数字来为一些假设做评价。“，我们需要谨记web 性能遍布各处，就像用户体验一样. 因此性能目标需要可度量可追踪的。
Goal: Be at least 20% faster than your fastest competitor.
According to psychological research, if you want users to feel that your website is faster than your competitor’s website, you need to be at least 20% faster. Study your main competitors, collect metrics on how they perform on mobile and desktop and set thresholds that would help you outpace them. To get accurate results and goals though, make sure to first get a thorough picture of your users' experience by studying your analytics. You can then mimic the 90th percentile’s experience for testing.
目标：要比你的竞争对手至少快20%
根据psychological research这项调查显示，如果你希望用户感受到你的网站是明显比你竞争对手的网站要快，你需要做到至少快20%。挑选你最主要的竞争对手，收集他们在移动和桌面设备的一些限制，这将帮助你超越他们。在得到实际效果和达成目标前，你需要先通过研究你的分析资料并得出一份详细深入的用户体验画像。接下来，你就能模拟超过90%的体验去做测试了。
（日更，待续。。。）
