[译] Google 的 Pagespeed 的工做原理：提高你的页面分数和搜索引擎排名

时间 2019-12-07

标签 google pagespeed 原理提高页面分数搜索引擎排名栏目 Google 繁體版

原文原文链接

原文地址：Google 的 Pagespeed 的工做原理：提高你的分数和搜索引擎排名

原文做者：Ben Schwarz

译文出自：掘金翻译计划

本文永久连接：github.com/xitu/gold-m…

译者：Jerry-FD

校对者：weberpan，Endone

经过这篇文章，咱们将揭开 PageSpeed 最为重要的页面速度评分的计算方法。javascript

毫无疑问，页面的加载速度已经成了提高页面收益和下降流失率的关键性因素。因为 Google 已经将页面的加载速度列入影响其搜索排名的因素，如今更多的企业和组织都把目光聚焦在提高页面性能上了。html

去年 Google 针对他们的搜索排名算法作了两个重大的调整：前端

三月，搜索结果排名以移动端版本的页面为基础，取代以前的桌面端版本。
七月，SEO 排名算法更新为，增长页面的加载速度做为影响其搜索排名的因素，如移动端页面排名和广告排名。

经过这些改变，咱们能够总结出两个结论：java

手机端页面的加载速度会影响你整站的 SEO 排名。
若是你的页面加载很慢，就会下降你的广告质量分，进而你的广告费会更贵。

Google 道：react

更快的加载速度不只仅会提高咱们的体验；最近的数据显示，提高页面的加载速度也会下降操做成本。和咱们同样，咱们的用户就很重视速度 — 这就是咱们决定将页面的速度这一因素，加入搜索排名计算的缘由。android

为了从页面性能的角度搞清楚这些变化给咱们带来了什么影响，咱们须要掌握这些基础知识。PageSpeed 5.0 是以前版本的一次颠覆性的改动。如今由 Lighthouse 和 CrUX 提供技术支持（Chrome 用户体验报告部）。webpack

此次升级使用了新的评分算法，将会使得到 PageSpeed 高分更加困难。ios

PageSpeed 5.0 有哪些变化?

5.0 以前，PageSpeed 会针对测试的页面给出一系列指导意见。若是页面里有很大的、未经压缩的图片，PageSpeed 会建议对图片压缩。再好比，漏掉了 Cache-Headers，会建议加上。git

这些建议是与一些指导方针对应的，若是听从这些指导方针，极可能会提高你的页面性能，但这些也仅仅是表层的，它不会分析用户在真实场景下的加载和渲染页面的体验。github

在 PageSpeed 5.0 中，页面在 Lighthouse 的控制下被载入到真实的 Chrome 浏览器中。Lighthouse 从浏览器中获取记录各项指标，把这些指标套入得分模型里计算，最后展现一个总体的性能分。根据具体的分数指标来给出优化的指导方针。

和 PageSpeed 相似，Lighthouse 也有一个性能分。在 PageSpeed 5.0 中，性能分直接从 Lighthouse 里获取。因此如今 PageSpeed 的速度分和 Lighthouse 的性能分同样了。

既然咱们知道了 PageSpeed 的分数从哪里来，接下来咱们就来仔细研究它是如何计算的，以及咱们该如何有效的提升页面的性能。

Google Lighthouse 是什么?

Lighthouse 是一个开源项目，由一只来自 Google Chrome 的优秀团队运做。在过去的几年里，它已逐步变成免费的性能分析工具。

Lighthouse 使用 Chrome 的远程调试协议来获取网络请求的信息、计算 JavaScript 的性能、评估无障碍化级别以及计算用户关注的时间指标，好比首次内容绘制时间 First Contentful Paint、可交互时间 Time to Interactive 和速度指标。

若是你想要深刻了解 Lighthouse 的总体架构，请看来自官方的教程。

Lighthouse 如何计算性能分数

在性能测试中，Lighthouse 聚焦于用户所见和用户体验，记录了不少指标。

下面这 6 个指标构成了性能分数的大致部分。他们是：

可交互时间 Time to Interactive (TTI)
速度指标 Speed Index
首次内容绘制时间 First Contentful Paint (FCP)
首次 CPU 空闲时间 First CPU Idle
首次有效绘制 First Meaningful Paint (FMP)
预计输入延迟时间 Estimated Input Latency

Lighthouse 会针对这些指标运用一个 0 – 100 的分数模型。这个过程会收集移动端第 75 和第 90 百分位的 HTTP 档案，而后输入到对数正太分布函数（校对者注：这样的话只要性能数据低于 25% 的线上移动端页面，也就是排位在 75% 如下，都给 0 分，而只要比 95% 的移动端页面得分高，就得满分）。

根据算法和可交互时间的计算所得数据，咱们能够发现，若是一个页面在 2.1 秒内成为“可交互的”，那么它的可交互时间分数指标是 92/100。

当每一个指标完成计分后会被分配一个权重，用权重调整后算出页面总体的性能分数。权重规则以下：

指标	权重
可交互时间 (TTI)	5
速度指标	4
首次内容绘制时间	3
首次 CPU 空闲时间	2
首次有效绘制	1
预计输入延迟时间	0

这些权重取决于每一个指标对移动端用户的体验的影响程度。

在将来，这些权重在参考来自于 Chrome 用户体验报告的用户观测数据以后，还可能会被进一步优化。

你可能想知道究竟这每个指标的权重是如何影响总体得分的。Lighthouse 团队打造了一款实用的 Google 电子表格计算器来阐述具体的细节：

使用上面的例子，若是咱们把可交互时间从 5 秒变为 17 秒 (全球移动端平均 TTI)，咱们的分数会下降到 56% (也就是 100 分之中的 56 分)。

然而，若是咱们把首次内容绘制时间变为 17 秒，咱们的分数会是 62%。

可交互时间 (TTI) 是对你的性能分数影响最大的指标。

所以，想要获得 PageSpeed 的高分，你最须要的是下降 TTI。

剑指 TTI

深刻来讲，有两个对 TTI 影响极大的重要因素：

传输到页面的 JavaScript 代码的总大小
主线程上 JavaScript 的运行时间

咱们的可交互时间文章详细说明了 TTI 的工做原理，但若是你想要一些快速无脑的优化，咱们建议：

下降 JavaScript 总大小

尽量地，移除无用的 JavaScript 代码，或者只传输当前页面会执行的代码。这可能意味着要移除老的 polyfills 或者尽可能采用更小、更新的第三方库。

你须要记住的是 JavaScript 花费的不只仅是下载它所须要的时间。浏览器须要解压、解析、编译而后才最终执行，这些过程都会消耗不容忽视的时间，尤为在移动设备上。

能下降你的页面脚本总大小的有效措施是：

检查并移除对你的用户来讲并不须要的 polyfills。
搞清楚每个第三方 JavaScript 库所花费的时间。使用 webpack-bundle-analyser 或者 source-map-explorer 来可视化分析他们的大小。
现代 JavaScript 工具（好比 webpack）能够把大的 JavaScript 应用分解成许多小的 bundles，随着用户的浏览而动态加载。这就是所谓的 code splitting，它会极大地优化 TTI。
Service workers 会缓存解析和编译后所得的字节码。若是善加利用这个特性，用户只需花费一次解析和编译代码带来的时间损耗，在那以后的结果就会被缓存优化。

监控可交互时间

为了较好的展现用户体验的差别性，咱们建议使用监控系统（好比 Calibre），它能够测试页面在两个不一样设备上的最小评分；一个较快的桌面端设备和一个中等速度的移动端设备。

这样的话，你就能够获得你的用户可能体验到的最好和最差两种状况下的数据。是时候意识到，你的用户并无使用和你同样强大的设备了。

深度剖析

为了得到剖析 JavaScript 性能的最好结果，能够刻意使用较慢的移动设备来测试你的页面。若是你的抽屉里有一部老手机，你会发现一片新的天地。

Chrome DevTools 的硬件仿真模块能够很好的替代真实设备来进行测试，咱们写了一个详细的性能剖析指南来帮你开始学习分析运行时的性能。

其余的指标呢？

速度指标、首次内容绘制时间和首次有效绘制都是以浏览器绘制为基础的指标。他们的影响因素很类似，每每能够被同时优化。

显然，优化这些指标会相对比较容易，由于他们是经过记录页面的渲染速度来计算的。仔细听从 Lighthouse 的性能考核准则就能优化这些指标。

若是你尚未对字体进行预加载或者优化那些关键请求，那从这里入手会是一些很好的切入点。咱们的文章，关键请求，详细说明了浏览器针对你的页面是如何发起请求以及渲染关键资源的。

跟踪过程作出优化

Google 最近更新了搜索控制台、Lighthouse 和 PageSpeed Insights 针对你的页面的首屏的性能分析有独到之处，可是对于那些须要持续跟踪页面来提高页面性能的团队来讲，就显得捉襟见肘了。

持续的性能监控能够保证速度优化，当页面又变差的时候团队也会马上知晓。人为的测试会对结果引入大量的不可预期的变量，在不一样区域、不一样设备上的测试在没有专业的实验室环境下几乎是不可能完成的。

速度已经变成影响了 SEO 排名的关键因素，尤为是目前大约 50% 的页面流量来自于移动设备。

为了不排名降低，确保你正在使用最新的性能分析套件来跟踪你的关键页面（哈，咱们打造了 Calibre 来作你的性能提高伙伴。他以 Lighthouse 为基础。天天都有不少来自全球的团队在使用它）。

若是发现译文存在错误或其余须要改进的地方，欢迎到掘金翻译计划对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。