运用谷歌PageSpeed性能检测提升网站速度得分

本文将详细分析如何利用谷歌的PageSpeed性能检测来分析并且提升WordPress网页的加载速度。

Google Page Speed

关于 PageSpeed Insights

Google Page Speed Insight（PSI）是一款旨在优化所有设备上的网页、提高网页加载速度的工具。
PageSpeed Insights 先分析网页的内容，然后提供关于如何提升网页加载速度的建议。Google Page Speed工具如下图：

Google PageSpeed Insights

Google PageSpeed在线官网：https://developers.google.com/speed/pagespeed/insights/   

（可提前安装好 Ghelper工具，方可访问）

通过pagespeed检测网页在所有设备上都能快速加载，通过分析可以找出影响网站速度的代码和因素进行改进。

PageSpeed使用与分析

PageSpeed通过多端网页的抓取并对各项进行单独的诊断分析：

1、桌面PC设备                  2，移动端设备

该工具会对网页进行诊断，并提供页面总体速度的分数，然后该工具会告诉你哪些地方需要优化。此外，该工具会对你的网页在0到100之间评定一个分数，使你确切地知道网页的运行状况。下图是某个网站评测得分情况，红色状态得分11分，相对来说是一个非常差的得分结果。

通过对网站的各项指标进行优化的速度，可以提升网站的得分，比如下图网站就是通过优化提升到96分的高得分（绿色状态）。

网页加载速度得分

使用PageSpeed工具分析和优化您的网站：PageSpeed Insights 会整合 Chrome 用户体验报告 (CrUX) 中的数据，以显示网页的实际性能数据。PSI 会报告两项指标，即首次内容绘制 (FCP) 和文档内容加载 (DCL)。

该工具会将每项指标（FCP 或 DCL）的中间值与通过 CrUX 报告监控的所有网页的数据进行比较，并根据每项指标在分布图中所处的位置为其指定一个类别：

• 快：指标的中间值在所有网页加载速度分布图中位于前三分之一的位置。
• 慢：指标的中间值在所有网页加载速度分布图中位于后三分之一的位置。
• 中等：指标的中间值在所有网页加载速度分布图中位于中间三分之一的位置。

通过查看每项指标的类别，可计算出总体速度得分：

• 快：如果网页的每项指标都是“快”。
• 慢：如果网页的每项指标都是“慢”。
• 中等：所有其他情况。

“网页加载分布图”部分会显示相应网页的 FCP 和 DCL 指标在 CrUX 数据集中的分布情况。每项指标的分布都分为三个类别：快（前三分之一）、中等（中间三分之一）和慢（后三分之一）该分布图每周更新一次。

优化程度得分

PageSpeed Insights 会评估相应网页对常用的性能优化最佳做法的遵循情况，并计算出一个得分（分值介于 0 到 100 之间）来估算相应网页的性能优化空间。它评估的是相应网页是否可以从以下两个方面提升性能：

• 首屏加载时间：从用户请求打开新网页到浏览器呈现出首屏内容所用的时间。
• 完整网页加载时间：从用户请求打开新网页到浏览器完全呈现出相应网页所用的时间。

得分会被归类为“良好”、“中等”或“偏低”。在进行此项计算时，该工具会假定开发者希望网页的外观和功能保持不变。

• 良好：相应网页采用了大多数性能优化最佳做法，进一步优化的空间很小。网页得分为 80 分或更高。
• 中等：相应网页未采用某些常用的性能优化建议，进一步优化的空间为中等。网页得分在 60 到 79 分之间。
• 偏低：相应网页未经过优化，有相当大的优化空间。网页得分在 0 到 59 分之间。

优化程度得分估算的是网页的性能优化空间。有些网页虽然加载速度较慢，但可能会获得较高的优化程度得分，这是因为相对于相应网页使用的资源总量，阻碍呈现的资源所占的比重较小。另一方面，加载速度较快的网页也可能会获得较低的优化程度得分，这是因为相对于相应网页的资源总量，阻碍呈现的资源非常多。

6项核心指标分析出得分

First Contentful Paint

首次内容渲染时间标记了渲染出首个文本或首张图片的时间。

Time to Interactive

Speed Index

Total Blocking Time

Largest Contentful Paint

Cumulative Layout Shift

页面优化建议

由于网络连接性能有很大差异，因此优化建议针对的是网页性能中与网络无关的方面，例如服务器配置、网页的 HTML 结构，以及网页使用外部资源（例如，图片、JavaScript 和 CSS 内容）的情况。实现这些建议应该能够改进网页的相对性能。不过，网页的绝对性能仍将受用户网络连接的影响。

速度性能受多种因素影响，但最为重要的是以下两个因素：

• 阻碍呈现的往返次数：加载阻碍呈现的资源所需的往返次数。如果网页的大部分资源都会阻碍呈现，PageSpeed Insights 会认为相应网页有较大的优化空间。开发者可以调查以下规则，以进行优化：避免着陆页重定向、清除阻碍呈现的 JavaScript 和 CSS 内容、使用浏览器缓存、优先加载 可见内容以及缩短服务器响应时间。
• 响应大小：响应的总体大小，包括 HTML 主要资源和所有子资源。如果通过压缩或缩减大小可清除响应主体的大部分内容，PageSpeed Insights 会认为相应网页有较大的优化空间。开发者可以调查以下规则，以进行优化：启用压缩功能、缩减资源大小和优化图片。

如何改善网页提升PageSpeed得分

• 图像尺寸

每个网站都含有一定数量的图像，以使网站更加人性化、更具吸引力或更加生动有趣。但是，图像通常可能是导致网站运行以及加载时间缓慢的原因。

• 浏览器缓存

每次浏览器加载网页时，下载网页文件的过程都会在后台进行。浏览器需要下载正确显示网页所需的所有文件：

HTML；图片； CSS；JavaScript。

此过程会使整个过程变慢，并拉低分数。但是，浏览器缓存可以帮助你减少或消除此问题：它将文件存储在用户的浏览器中；用户重新进入网站时就无需再次下载此类文件；网站加载速度更快。

1. 停止加载CSS和JavaScript资源

JavaScript文件也可能会拖慢网页加载速度，这是一个不容忽视的常见问题。要阻止这种情况的发生，你需要先停止加载CSS和JavaScript资源。

• 精简代码

Page Speed Insight工具可能会警告你的另一个问题是源代码占用的空间。编码会占用一定的空间，如果能对其进行精简，则可以加快网页加载时间。

好了，关于利用谷歌PageSpeed性能检测提升网站速度得分就分享这么多，如果你也想为自己的网站进行评测和提升可以使用一下谷歌PageSpeed工具，帮助快速分享和建议。