网络

核心网络要素:谷歌的网络性能指标指南

克雷格的盾牌
分享

谷歌希望人们有一个良好的网络体验，所以它在搜索结果中排名靠前。当然，这是一个粗略的简化，但是，假设你比较的是两个内容和受众相似的网站，速度更快的那个应该在结果中显得更高。但谷歌如何衡量这一点一直有点像猜谜游戏，所以它引入了核心Web vital，为网站所有者和开发人员提供一些急需的清晰度。

不幸的是,“性能”是一个涵盖了许多指标的术语……第一个字节的时间，开始渲染，CPU使用率，JavaScript堆大小，第一次内容绘制，第一次有意义的绘制，第一次CPU空闲，DOM加载，页面完全加载，交互时间，每秒样式重新计算，以及更多。

不同的工具返回不同的结果集，很难知道从哪里开始。

谷歌的Web vital计划旨在简化性能评估，并帮助您专注于最重要的改进。核心Web vital是反映真实用户体验的关键性能指标。有些是由Chrome DevTools中的Lighthouse面板报告的，PageSpeed见解，以及谷歌搜索控制台．

的web-vitals JavaScript库可以帮助从访问您网站的真实用户中衡量更现实的指标。结果可以发布到谷歌Analytics或其他端点进行进一步分析。

谷歌建议使用第75百分位，即为同一指标记录多个结果，将它们从最好到最差排序，然后在四分之三点分析数字。因此，四分之三的网站访问者将体验到这种水平的性能。

当前的核心Web vital是最大的内容油漆，第一次输入延迟,累积布局移位据此评估负载，交互性和视觉稳定性。

最大含量涂料(LCP)

LCP测量加载性能-内容出现的速度．

历史指标，如页面加载和DOMContentLoaded在这方面有困难，因为它们并不总是代表用户体验。例如，启动画面几乎可以立即出现，但通过Ajax请求加载的可用内容可能需要更长的时间才能出现。

最大内容绘制(LCP)报告视口中可见的最大图像或文本块的渲染时间。2.5秒以下为好，4.0秒以上为差。

LCP中考虑的元素类型有:

  • < img >元素
  • <图片>中的元素svg < >
  • 海报图片的一个< >视频元素
  • 使用CSS加载的带有背景图像的元素url ()财产
  • 包含文本节点的块级元素。

最大的元素是在内容加载时确定的，大小是根据它在浏览器视口中可见的尺寸计算出来的。

LCP可受以下因素影响:

  • 服务器响应时间
  • 资源加载时间
  • 渲染阻塞CSS或JavaScript
  • 客户端大小的处理时间

LCP的改进可能通过以下方式实现:

  1. 使用内容分发网络(CDN)将请求路由到更近的服务器
  2. 通过最小化昂贵的呈现时间进程数量来优化服务器响应
  3. 最小化资产的文件大小
  4. 在本地缓存资产，并且可能首先使用service worker返回本地版本。

首次输入延迟(FID)

FID测量响应性-页面对用户操作的响应速度有多快．

这个度量记录了从用户与页面交互(点击、点击、按键等)到浏览器开始处理该事件处理程序的时间。小于100毫秒的延迟被认为是好的，超过300毫秒的延迟被认为是差的。

FID只有在应用程序提供给实际用户时才能准确测量。此外，它只测量事件处理中的延迟——而不是运行处理程序或更新UI所花费的时间。

谷歌和各种工具因此使用总阻塞时间(TBT)作为一个替代指标，可以在没有实际用户输入的情况下计算。TBT衡量的是以下两者之间的总时间:

  1. 第一次内容绘制(FCP) -页面内容的任何部分被渲染的时间，以及
  2. 交互时间(TTI)——页面能够可靠地响应用户输入的时间(没有长时间的任务正在运行，并且尚未解析的GET请求不超过两个)。

FID/TBT的改进可能通过以下方式实现:

  1. 减少JavaScript的执行时间，通常通过延迟非关键代码
  2. 拆分长时间运行的任务
  3. 使用web workers在后台线程中运行任务
  4. 按需加载第三方JavaScript。

累积布局位移(CLS)

CLS测量视觉稳定性查看页面时内容的意外移动．

CLS会评估那些令人讨厌的情况，即内容在没有警告的情况下移动——通常是在当前滚动位置上方的广告或图像完成加载后DOM发生变化时。这个问题在移动设备上尤其明显，可能会导致你找不到位置或点击错误的链接。

CLS的计算方法为:

  1. 冲击分数:视口中不稳定元素的总面积(那些将移动的元素)。冲击分数为0.5表示总共占视口一半的元素将被移位。
  2. 距离分数:视口中任何单个元素移动的最大距离。距离分数为0.25表示至少有一个元素移动了视口的四分之一(水平或垂直)。

考虑下面的例子，在logo、菜单和英雄图像渲染后不久加载广告:

CLS的例子

logo和菜单不会移动——它们是稳定的元素。广告被添加到DOM中，它的起始位置没有改变，所以它也是稳定的。然而，英雄形象会移动:

  1. 英雄是360 x 510像素在360 x 720视口。因此，它的冲击分数为(360 x 510) / (360 x 720) = 0.71
  2. 它在720px的视口高度中垂直移动90个像素，所以它的距离分数是90 / 720 = 0.125

因此，CLS为0.71 x 0.125 = 0.089

CLS分数低于0.1被认为是好的，高于0.25被认为是差的。在这种情况下，CLS刚好在可接受的范围内，因为尽管有很大的区域受到影响，但它移动了相对较小的距离。不过，更大的广告需要进一步关注。

在任何用户交互后，CLS算法不会在500毫秒内记录布局移位，这可能会触发UI更改或视口调整大小。因此，您的页面不会因为操作所需的界面更新、过渡和动画而受到惩罚，例如从汉堡图标打开全屏菜单。

的呈现面板在Chrome DevTools(菜单>更多的工具>渲染)提供了一个布局移位区域选择。选中复选框并刷新页面-布局偏移以蓝色突出显示。中也可以修改网络速度网络面板减缓加载。

FID/TBT的改进可能通过以下方式实现:

  1. 通过添加维度来为图像、视频和iframe元素保留空间宽度而且高度属性,CSS纵横比财产，或旧的填充技巧适当的
  2. 避免FOUT (Flash of unstyles Text)和FOIT (Flash of Invisible Text)加载网页字体。预加载或使用相似大小的备用字体会有所帮助
  3. 在初始页面加载时，不要在现有内容之上插入DOM元素，例如，通讯注册和类似的通知框
  4. 使用CSS变换而且不透明度对于成本较低的动画。

性能优先

核心Web vital将随着时间的推移而发展，但评估LCP、FID和CLS指标可以帮助确定最关键的问题。首先解决快速简单的问题——它们通常有最大的投资回报:

  • 激活服务器压缩和HTTP/2或HTTP/3
  • 通过设置HTTP过期头，确保使用浏览器缓存
  • 预加载早期的资产
  • 连接和缩小CSS和JavaScript
  • 移除未使用的资产
  • 考虑使用CDN或更好的主机
  • 使用适当的图像大小和格式
  • 优化图像和视频文件大小(专业CDN可以提供帮助)

Site必威西盟体育网页登录Point的书快速开始Web性能提供数十个技巧，以提高网站速度，降低成本，并保持用户满意。

Baidu