提高 Web 性能和 Lighthouse 性能结果

从今年开始，谷歌将性能作为在谷歌搜索和广告中对您的网站进行排名的关键指标，请看一看。

现在的问题是 lighthouse/google 使用什么标准来衡量性能。

灯塔标准（请查看下图）

谷歌主要关注这些标准

FCP（首次内容绘制）
LCP（最大内容绘制）
CLS（累积布局偏移）
互动时间

让我们逐一讨论一下

FCP（首次内容绘制）

据灯塔First contentful paint marks the time at which the first text or image is painted.

根据web.dev FCP measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. Images, non-white <canvas> elements, and SVGs on your page are considered DOM content; anything inside an iframe isn't included.

Lighthouse FCP 评估标准

如何提高FCP

通过 CDN 传送您的网站。
确保块很小。

LCP（最大内容绘制）

据灯塔Largest Contentful Paint marks the time at which the largest text or image is painted.

根据web.dev LCP measures when the largest content element in the viewport is rendered to the screen. This approximates when the main content of the page is visible to users. See Largest Contentful Paint defined for more details on how LCP is determined.

Lighthouse LCP 评估标准

如何改善LCP

推迟 JS。
延迟加载图像和其他资产。
响应式图像实践优先使用（使用srcset）。
缓存
预连接和预加载实践。

CLS（累积布局偏移）

据灯塔Cumulative layout shift measures the movement of visible elements within the viewport.

根据web.dev CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next.

Lighthouse CLS 评估标准

为了计算布局偏移分数，浏览器会查看视口大小以及两个渲染帧之间视口中不稳定元素的移动情况。布局偏移分数是该移动的两个测量指标的乘积：影响分数和距离分数（定义见下文）。

layout shift score = impact fraction * distance fraction

## 互动时间

据灯塔Time to interactive is the amount of time it takes for the page to become fully interactive.

TTI 测量什么

TTI 衡量页面完全可交互所需的时间。以下情况可视为页面完全可交互：

页面显示有用的内容，以首次内容绘制 (First Contentful Paint) 来衡量，
为大多数可见的页面元素注册事件处理程序，并且
页面在 50 毫秒内响应用户交互。

Lighthouse TTT 评估标准

感谢 Bearing，
我将撰写有关 React Hooks 和 Web 性能的文章，请关注即将发布的文章以保持联系。

文章来源：https://dev.to/amankumarsingh01/improving-web-performance-and-lighthouse-performance-results-2fel