该材料（我们今天发布的翻译）专门用于网站速度评级，可以使用Google PageSpeed Insights计算得出。
在我们这个时代，网站的速度已成为其最重要的特征之一已不是什么秘密。 网站加载并准备工作的速度越快，它给所有者带来的收入就可能越高。 加快网站访问速度意味着减少刚浏览过该网站而又厌倦了等待下载资料的用户数量。 对网站性能特别重要的事实是，现在Google PageSpeed指标被用作对搜索结果中的网站进行排名的因素之一。 结果，当今许多组织都在密切关注其站点的速度。
网站排名算法的变化
去年，Google对搜索索引和网站排名算法进行了两项重大更改。
- 3月，索引基于页面的移动版本而不是桌面。
- 7月，对SEO排名算法进行了更新 。 在针对移动和广告页面进行计算时，他们开始使用页面速度评级。
这些事实使我们得出以下结论：
- 该网站的移动版本的速度将影响其整体SEO排名。
- 如果网站页面加载缓慢，这将降低广告质量得分，并且广告费用会更高。
这就是Google所说的：“更快的网站不仅可以增强用户体验，还可以提高用户体验。 最近的数据表明，提高站点速度还可以降低其支持成本。 我们非常感谢您的速度。 关于我们的用户也可以这样说。 这就是为什么我们决定在计算搜索排名指标时会考虑网站速度的原因。
为了了解这些更改如何在优化项目性能方面影响我们的项目，我们需要了解作为评估站点速度的基础的技术。
PageSpeed 5.0是此系统的完整修订版。 现在，它基于Lighthouse和
CrUX （Chrome用户体验报告）。
此外，此更新还带来了一种新的评分算法，该算法极大地提高了在PageSpeed中获得高分的任务。
PageSpeed 5.0发生了什么变化？
在5.0版之前，PageSpeed工具会检查页面，并分析其是否符合一系列启发式规则。 如果页面上有大的未压缩图像，PageSpeed可能会建议Web开发人员压缩这些图像。 没有缓存头？ 系统可以建议他们添加。
建议与这些页面检查有关。 遵循以下建议可以提高页面性能。 但是启发式规则是肤浅的，它们的目的不是探索页面的加载和呈现页面给网站带来的真正印象。
在PageSpeed 5.0中，页面被加载到一个真正的Chrome浏览器中，该浏览器由Lighthouse控制。 Lighthouse记录从浏览器获得的指标，将分数模型应用于它们，并显示总体性能得分。 根据研究页面对各个指标的得分，给出了改进性能的建议。
像PageSpeed一样，Lighthouse具有站点性能评估系统。 在PageSpeed 5.0中，性能评估直接来自Lighthouse。 现在，PageSpeed输出的性能得分与Lighthouse产生的得分相同。
PageSpeed的性能等级基于Lighthouse产生的等级现在我们知道PageSpeed得分的来源，让我们来谈谈该得分是如何计算的，以及如何提高网站速度。
什么是Google Lighthouse？
Lighthouse是一个开源项目，由一个特别小组处理，从Google Chrome的开发人员中挑选出来。 在过去的几年中，Lighthouse已成为分析站点性能的标准免费工具。
Lighthouse使用Chrome远程调试协议（Chrome远程调试协议）读取有关网络请求的信息，以衡量JavaScript代码的性能，以验证是否符合页面内容可访问性标准。 该工具测量时间指标，重点关注用户对页面的感知。 这些包括，例如，“
第一内容涂料” ，
“交互时间”和“速度索引”。
如果您对Lighthouse感兴趣，请查看官方项目资源库中的
该材料，
该材料专门用于其灯塔的一般描述。
灯塔站点性能等级的计算
作为页面性能研究的一部分，Lighthouse编写了许多指标，这些指标专注于评估用户看到的内容以及用户在使用页面时的体验。 以下是用于得出总体性能得分的六个指标：
- 互动时间（TTI，互动下载时间）。
- 速度指数。
- 第一个内容丰富的绘画（FCP，第一个内容下载时间）。
- 第一个CPU空闲。
- 首次有意义的绘画（FMP，下载足够内容的时间）。
- 估计的输入延迟。
这些指标中的每一个都以0到100的等级进行评估，评估是通过从
HTTP档案库获取移动页面的第75和第95个百分位数并使用
log normal功能来进行的。
遵循此算法并考虑用于计算TTI的数据，您可以看到，如果页面可以在2.1秒内变为“交互式”（适合用户交互），则TTI等于92/100。
TTI在计算完每个指标之后，将为其分配一定的权重，该权重将用作总指标的修正值。 这是分配给各种指标的权重。
权重指示每个指标如何影响移动用户的页面体验。
将来，该集合可能会扩展为包括从“ Chrome用户体验报告”数据集中获取的与用户对网站的感知有关的指标。
您可能有兴趣了解权重的使用如何影响最终的性能等级。 如果是这样，请查看Lighthouse团队创建的
这张表 。 经过分析，您可以更好地了解此过程。
一张表的片段，演示页面性能评级的计算如果您将上面示例中的
interactive指标（此处称为TTI）从5秒更改为17秒（即移动页面的全球平均TTI水平），则页面评分将降至56％（也就是说-她将在100分中获得56分）。
如果您将
first-contentful-paint指示器设置为17秒，则评分将降至62％。
结果，我们可以得出结论，TTI指标对最终站点评级具有最大的影响。 因此，为了获得高评价的PageSpeed页面，您需要演示一个不错的TTI。
TTI改进
如果我们广泛地考虑改善TTI的问题，那么可以说有两个因素极大地影响了该指标：
- 页面上加载的JavaScript代码的数量。
- 在主线程中完成各种JavaScript任务所花费的时间。
您可以
在此处找到有关TTI的详细信息，但是如果您希望在不进行额外研究的情况下快速提高网站的TTI，我们建议您减少JavaScript代码的数量。
尽可能删除未使用的JavaScript代码，或尝试确保该页面仅加载该页面上使用的脚本。 履行此建议可能意味着放弃旧的polyfill或用更紧凑，更现代的替代方法替代第三方库。
重要的是要记住，所谓的“
JavaScript价格 ”不仅是下载代码所花费的时间。 浏览器需要解压缩，解析，编译并最终执行加载的JavaScript代码。 所有这些操作都可能花费大量时间。 特别是在移动设备上。
在减少页面使用的JS代码数量的有效措施中，应注意以下几点：
- 分析使用的填充料并拒绝听众不再需要的填充料。
- 找出所使用的每个第三方库的“成本”。 要了解项目中使用的库的大小，可以使用诸如webpack-bundle-analyser和source-map-explorer之类的工具 。
- 现代的JavaScript工具（例如webpack）可以将大型JS应用程序分解为小捆绑包，并在必要时自动加载。 特别是当用户从一个页面转到另一个页面时。 这种优化站点性能的方法称为代码分割 。 它的使用对TTI有很好的效果。
- 使用服务工作者，他们缓存由解析和编译脚本产生的字节码。 如果您可以在项目中包括这样的缓存机制，那么只有当您第一次访问资源时，站点访问者的系统资源才会用于解析和编译代码。 在重复访问该站点时，将从缓存中获取必要的资料。
TTI监控
为了成功探索浏览用户如何看待您的网站，我们建议使用网站性能监控系统（例如
Caliber） 。 特别是，我们谈论的是以下事实：至少在两种设备上测试了站点-快速台式计算机和移动电话，其性能处于中速中型设备水平。
使用这种方法，您将获得用于与站点协作的最佳选择的数据，而对于最差的数据则具有数据。 同时，您将不得不适应以下事实：您网站的访问者使用的功能与团队使用的功能不同。
仔细的手动分析
为了最大程度地利用JS代码性能分析，请在速度特别慢的移动设备上对测试页进行测试。 如果您的办公桌抽屉里放着一个旧电话，这个想法的实现可以使它恢复美好的生活。
Chrome开发者工具的功能可以很好地替代实际设备。
这是使用这些工具对React应用程序进行性能分析的材料。
其他指标
诸如“速度指数”，“第一个有意义的绘画”和“第一个有意义的绘画”之类的指标基于浏览器呈现页面的方式。 它们受到类似于我们已经讨论过的因素的影响。 对这些因素的影响通常会导致所有这些指标的改善。
客观地说，改善这些指标比TTI容易。 事实是，它们的计算基础是浏览器呈现页面的速度。 通过完全遵循使用Lighthouse分析页面后给出的准则，可以改进这些指标。
考虑到关键查询的特征，如果您不是预加载字体或优化页面，则可以很好地从这两个方向开始改善网站的渲染性能。 在本文中，您可以找到有关浏览器如何加载和显示用于形成网页的关键资源的详细信息。
结果：在监测现场并切实改善其工作
更新后的Google搜索控制台，Lighthouse和PageSpeed Insights是出色的工具，可让您立即评估网站的整体性能。 但是，它们并不适合需要不断监视和改善项目绩效的团队。
持续监视性能是工作流的重要组成部分，旨在不断保持高水平的站点性能。 通过这种方法，项目团队可以立即了解性能问题。 通过手动性能测试，可能会出现意料之外的结果分散。 结果，如果不创建专门的测试环境，几乎不可能使用不同的设备或模拟潜在用户系统的其他变化参数来测试站点性能。
页面速度已成为页面SEO排名的关键因素。 如今，当移动设备产生近50％的Web流量时，这一声明尤为突出。
为防止您的网站在搜索结果中失去位置，请尝试使用现代版本的工具来分析其最重要页面的性能，并将其速度保持在适合您的水平。
亲爱的读者们！ 您是否在考虑影响Google PageSpeed等级的指标的改进的情况下优化Web项目？
