如何提高 WordPress 的速度指数 (SI)

Lighthouse的速度指数是多少？

速度指数是一个 Lighthouse 性能指标，显示页面内容加载和用户可见的速度。

速度指数表示网页折叠上方（在视口中）可见部分的加载时间。它测量用户在滚动之前看到的整个加载过程。

事实上，Lighthouse 会拍摄加载过程的视频并计算所有帧之间的差异。然后，Lighthouse 使用 Speedline Node.JS 模块计算最终的 SI 分数。（您可以在 Github 上找到有关此模块的更多信息）。

速度指数是计算的结果：它是网页的平均渲染速度及其视觉进度，也称为 视觉完成度。

这是一个有意义的实验室指标，用于测量加载时间，直接影响用户 对网站性能的看法。

让我们用两个场景来说明这种视觉完成：页面 A 已优化，而页面 B 未优化：

解释 SI 和视觉完成 – 来源： fasterize

较低的速度指数分数意味着您的页面呈现可见内容的速度相当快，让访问者感觉页面加载速度更快。

SI 指标以用户为中心：它跟踪视觉进展。

速度指数对性能有什么影响？

速度指数是一种加载性能指标，显示页面元素在视口中可见的速度。 您的网站对访问者来说速度有多快？ 这正是您在衡量网络性能时想要回答的问题！

速度指数如下图所示，几乎在视觉完成过程的最后：

解释加载过程 – 来源： dev.to

现在，让我们看看速度指数与 Lighthouse 测量的其他 5 个 KPI 的比较情况。

速度指数对灯塔得分的权重

在 Lighthouse v8 性能评分中，SI 的权重从 15% 降低到了 10%。

Lighthouse 的速度指数是如何计算的？

Web.Dev 解释说，您的速度指数得分是“页面速度指数与真实网站速度指数的比较”。

V8 Lighthouse 版本计算六个指标来生成最终的性能分数。它包括核心网络指标、总交互时间、总阻塞时间，最后是 速度指数：

关键指标	比重	好成绩
首次内容绘制（FCP）	10%	0-2秒
速度指数	10%	0-3.4秒
最大内容绘制 (LCP)	25%	0-2.5秒
交互时间 (TTI)	10%	0-3.8秒
总阻塞时间 (TBT)	30%	< 200 毫秒
累积布局偏移 (CLS)	15%	0 – 0.1

速度指数是一个重要的实验室指标，因为 它定义了您的页面被认为是快还是慢。

速度指数公式：间隔时间*（1-视觉完整度/100）

在我们为您提供一些技术建议以提高您的速度指数（如果需要）之前，我们应该根据 Lighthouse 确定什么是良好的 SI 分数。

这引导我们进入下一部分：速度指数阈值。

什么是良好的速度指数分数？

良好的速度指数得分应低于 3.4 秒。

SI 阈值 – 来源：Web.dev

速度指数与首次内容绘制

如果您熟悉最近的 Core Web Vitals 更新，速度指数指标可能看起来与首次内容绘制 (FCP) KPI 类似。让我解释一下主要区别以及为什么这两个指标都很重要。

First Contentful Paint 也是一个视觉指标，用于测量浏览器首次呈现任何内容之前的时间。速度指数描述了完整内容出现在首屏的速度。

FCP 与 SI KPI

因此，无论什么加速 FCP 都会提高您的速度指数指标（用户最好能看到一些东西，而不是可怕的白屏。）

速度指数与累积布局偏移

任何能够稳定首屏内容并提高交互性的方法都将有助于保持良好的速度指数。为了测量视觉稳定性，Google 使用页面体验信号中的累积布局偏移 (CLS) 。CLS 衡量页面上用户不想要的突然变化，例如破坏用户体验的弹出窗口或侵入性广告：

说明 CLS

因此，良好的 CLS 分数意味着良好的视觉稳定性，并且可以对您的 SI 产生积极影响。

保持良好的 SI 对于绩效和营销都非常有利。让我们看看如何。

保持良好速度指数的四大营销优势

1.降低跳出率

好吧，想象一下您正在尝试访问一个网站，但您没有立即看到任何内容，而是盯着空白屏幕。你做什么工作？你走。

这种情况（我们都希望避免）称为“反弹”。有人访问您的网站并立即离开，没有与您的网站进一步互动。

📖 保持良好的 FCP 和 SI 分数将显着降低您的跳出率，因为用户会认为您的网站速度很快。

2. 增加“页面停留时间”KPI

如果您降低速度指数，那么访问您网站的用户将愿意在您的网站上停留更多时间并访问更多页面。

3. 提高转化率

当用户由于良好的速度而在您的网站上花费时间时，您还有另一个好处：他们更有可能购买。您正在满足他们的需求：尽快找到他们想要的答案或产品。

4. 提升你的搜索引擎优化

如果您的访问者喜欢您网站的体验，Google 也会喜欢它，并会奖励您在搜索引擎结果中获得更好的位置。

如何测量速度指数

Lighthouse 是一款开源工具，可帮助开发人员测量速度指数和其他性能指标。该自动化工具可创建有关速度、性能、可访问性、UX 和 SEO 的深入报告。

🚀 您需要帮助来衡量您的 SI 并执行您的网站审核吗？请遵循我们的完整指南，该指南解释了如何提高 WordPress 上的 Lighthouse 性能分数。

哪些工具可以测量速度指数？

要测量速度指数和总体性能得分，您可以使用 Google PageSpeed Insights 和 GTmetrix，这两种由 Lighthouse 技术提供支持的流行工具。

使用 Google PageSpeed Insight (PSI) 测量 SI 指标：

使用 GTmetrix 获得 SI 等级：

这些工具都提供不同的 SI 分数，但它们都位于绿色区域：

SI 分数 (PSI)：0.8 秒
SI 分数 (GT Metrix)：1.1 秒

🚀 进行绩效审计并不总是那么容易。查看我们有关测试 WordPress 网站性能和速度的完整指南。它将帮助您确定所需的工具以及每个指标的可接受阈值。

什么影响速度指数？

SI 得分高的原因可以在 Google PageSpeed Insights 的诊断部分中找到。通常，有四个主要问题会导致 SI 得分不佳，即：

JavaScript 代码和未使用的 JS
JavaScript 执行时间
主线程工作
第三方代码

借助 Lighthouse 生成的“机会”和“诊断”部分，您可以找到如何提高 SI 和绩效等级。

机会和诊断部分 – 来源：PSI

该报告确定每个错误对您的性能有多大影响。解决这些问题将大大降低您的速度指数等级并提高 WordPress 网站的整体用户体验。

我们的目标很简单： 我们希望访问者尽快看到首屏内容。

为了提高速度指数，我们列出了 PSI 的主要建议：

如何提高速度指数：8 个性能技巧

为了提高 WordPress 网站的速度指数和整体速度，需要遵循八种性能技术，即：

让我们深入研究它们中的每一个。

1.延迟JS

JS 文件将在浏览器显示最相关的内容后加载。此过程允许浏览器加载完整内容，而无需等待脚本加载。

通过推迟 JS 文件，您还可以优先考虑要首先显示的内容类型。在我们的例子中，我们应该关注首屏之上的所有内容：首屏下的所有非必要 JS 都应该被推迟。

🚨 Lighthouse 报告的问题： “消除渲染阻塞资源”、“删除未使用的 JavaScript ”和“避免链接关键请求”。

✅ 使用流行插件推迟 JavaScript：

WP Rocket 可以选择推迟 JS WordPress 文件。
Asset CleanUp – 这个免费插件会优先扫描并检测要加载到页面上的内容。只需选择不应该首先渲染的 CSS 或 JS 代码即可。 插件作者建议将 Asset CleanUp 与 WP Rocket 等缓存插件一起使用，以获得最佳性能结果。
Speed Booster Pack – 在渲染整个 HTML 后延迟 JS 文件。
Async JS – 让您可以控制要添加“defer”属性的脚本。

✅ 使用手动方式延迟 JavaScript

Defer 属性： 在 HTML 中的 script 标签中使用布尔属性“defer”，它将延迟你想要定位的 JS。有了 defer 属性，脚本文件就会在 HTML 文档仍在解析的同时并行下载。好处是，在 HTML 解析完成之前，脚本不会被执行。

<script src=”library.js” defer></script>

defer 属性如何工作

2. 延迟JS并删除未使用的JS

延迟 JS 执行并删除未使用的 JS 可以提高性能和 SI 分数。Chrome DevTools 中的 Coverage 选项卡可以帮助您找到未使用的 JavaScript 代码：

代码覆盖率报告 – 来源：DevTools

另一种执行审计并识别要优化的 JS 的方法是使用 PSI 或 GTmetrix：

用于识别最重 JS 脚本的瀑布功能 – 来源：GTmetrix

🚨 Lighthouse 报告的问题： “减少未使用的 JS ”和 “避免链接关键请求”。

✅ 手动解决方案：

使用 setTimeout() 方法函数在 JS 执行中创建延迟。这将在您在ms中指定的时间之后调用函数。您可以使用这些代码片段来延迟您选择的 JS 函数。

注意：Lighthouse 会标记任何包含超过 20kb 未使用 JS 代码的文件， 因此手动延迟每个 JS 文件可能会有点令人反感。

✅ 使用 WordPress 插件来延迟 JS：

Flying Scripts：延迟 JS 并为关键 JS 文件提供更多资源的插件。它有助于优先考虑需要优先加载的JS内容。
WP Meteor：推迟JS脚本的插件，大大提高访问者的感知速度。
Gonzales – 允许有条件地禁用 CSS 和 JS。
Perfmatters – 通过禁用可能不使用的脚本来帮助加快您的网站速度。
Plugin Organizer – 更改插件的加载顺序。
Asset CleanUp – 让您选择不需要加载的 CSS/JS。
WP Rocket – 最佳无缝解决方案。借助WP Rocket插件，利用Delay JS功能来减少未使用的JS。只需单击一下即可轻松延迟 JS 文件：

3. 缩小 JS 和 CSS

缩小是从 JavaScript 代码中删除所有不必要的字符而不改变其功能的过程。用简单的英语来说，缩小代码意味着删除任何无用的标点符号和混乱，例如换行符、注释、空格、分号等。

减少膨胀将为主线程释放时间。 同样，这是为首屏内容腾出空间和时间。

🚨 Lighthouse 发现的问题： “减少 JavaScript 执行时间”、“最小化主线程工作”、“Minify JS”和“Minify CSS”。

这里有一些供您选择。

✅ 手动缩小代码：

重要提示：我们建议您备份您的网站或要压缩的文件。最好是在开发环境中进行此类操作。如果您对技术不熟悉，那么我们鼓励您使用插件。

使用Sublime Text 或 Visual Studio Code等文本编辑器。
打开包含代码的文件并删除注释、空格、换行符和缩进。
尽可能缩短 ID、类或变量名称并优化条件语句。
再次保存文件。

✅ 使用在线工具 缩小代码：

访问 minifycode.com 并打开您选择的选项卡：JS、CSS、HTML 等。
将文件中的代码粘贴到主字段中，然后单击 Minify JS 按钮。

✅ 最好的 JS 和 CSS 缩小工具：

Google 的Closure Compiler 是一个值得考虑的可靠选择，它可以解析和分析 JavaScript，在需要时重写代码，然后缩小 JS。
UglifyJs 缩小、解析和优化您的 JavaScript。
Autoptimize 是优化 CSS 和 JS 的一个非常流行的选项。
Yahoo 的YUI Compressor Tool 既是 CSS 又是 JavaScript 缩小工具。
WP Super Minify 组合、缩小并缓存内联 JavaScript 和 CSS 文件。
CSS Nano （CSS 预处理器）
CSSO （CSS 预处理器）
UNCSS （CSS 预处理器）
WP Rocket 允许您通过几次点击来缩小 JS 和 CSS 文件。

4.优化CSS交付并减少未使用的CSS

WordPress是一个庞大的生态系统，大多数主题作者提供了大量的布局选项和设计效果，导致使用了大量的CSS。问题是，我们都需要 CSS，因为它是为我们的 Web 内容设计样式的代码。一方面，我们不想要一个2000年代的丑陋网站，但同时，我们需要确保良好的性能。这一切都是为了找到完美的平衡并优化 CSS 在页面上的渲染/交付方式。

CSS 文件确实会影响您的网站加载时间 – 您应该解决该问题以提高性能和 SI 分数。让我们看看优化 CSS 交付的不同策略。

🚨 Lighthouse 发现的问题：

“最小化主线程工作”、“减少未使用的 CSS ”、“消除渲染阻塞 CSS ”。

✅ 手动解决方案：

组合、压缩和内联 CSS 脚本：这意味着页面不会加载单独的 CSS 文件。相反，页面中 包含所有必要的样式信息（并且不会加载无用的样式表。）
优先考虑 CSS 规则：首屏内容应首先加载。
通过检查代码手动删除/减少未使用的 CSS。

✅ 可用于优化 CSS 交付的 WordPress 插件：

Autoptimize – 只需激活 WordPress 仪表板中的“优化 CSS 代码”复选框即可。
Speed Up – Optimize CSS Delivery – 嗯，这就是名字！
WP Rocket – 通过直接从“文件优化”选项卡删除未使用的 CSS 来帮助您优化 CSS 交付。

5.优化图像并使用延迟加载功能

您需要优化网站的图像，因为它们是加载时间最大的消耗之一。值得庆幸的是，有一些工具可以帮助您调整大小和压缩它们，而不会造成明显的质量损失。

优化图像的另一种方法是对其实施 延迟加载。这是一组技术，当这些图像需要对用户可见时，可以推迟在页面上加载图像。

🚨 Lighthouse 发现的问题：

正确调整图像大小 – 将大图像调整为正确的尺寸。
有效地编码图像 – 意味着您应该压缩它们。
以下一代格式提供图像 – 将 JPEG/PNG 转换为 WebP。
延迟屏幕外图像 – 延迟加载图像和背景图像。

✅ 使用应用程序和在线工具手动调整图像大小：

GIMP – Windows 和 Mac 免费。
Mac 预览版 – 免费且已安装。
Photoshop – 可能令人难以抗拒，但它是最完整的设计软件。
BeFunky – 一款基于网络的图形设计软件。
Picmonkey.com – 编辑和制作视觉内容，包括徽标。
Pixlr.com – 免费且易于使用的照片编辑器。
Fotor.com – 一体化视觉创作平台。
Photopea – 直接从浏览器免费打开 PSD (photoshop) 文件。

✅ 在将图像 上传到您的 WordPress 网站之前， 使用在线工具压缩图像：

GIMP（缩放图像 选项）
Photoshop（另存为网页 选项）
JPEG 优化器（基本压缩 选项）
Tiny PNG（智能有损压缩 选项）
JPEG.io（高级 JPEG 优化 选项）

✅ 使用 WordPress 插件优化图像（现有图像和新图像）：

Imagify – 一键优化图像的最先进工具：在不损失质量的情况下获得更轻的图像，转换 WebP 并批量压缩它们（批量优化功能）。Imagify 可以优化所有图像格式：jpg、png、pdf 和 gif。Imagify 可以免费提供大约 200 张图像，然后您需要升级到高级版本。
Imsanity – 对您的 WordPress 库设置上传大小限制，并自动调整大图片的大小。它还在使用标准 WordPress 压缩调整 JPG 图像大小的过程中对其进行压缩。然而，他们仍然建议使用更面向压缩的插件，例如 EWWW Image Optimizer 或 Imagify。
EWWW Image Optimizer – 使一切自动化，图像自动压缩、缩放以适合页面，并转换为下一代格式。

✅ 使用 WordPress 插件对图像应用延迟加载：

LazyLoad Plugin – 我们开发的免费插件帮助程序，可在图像上应用延迟加载脚本。您还可以用预览缩略图替换 Youtube iframe，以加快您的网站速度。

重要提示： WP Rocket 缓存插件附带 LazyLoad 功能，因此如果您已经是 WP Rocket 用户，则不需要 WP Rocket 插件的 Lazy Load。

WP Rocket – 我们的缓存插件还具有照片和视频的延迟加载功能。
其他延迟加载插件：查看我们撰写的有关可用于实现延迟加载功能的最佳插件的文章。

6. 数据压缩

压缩是减小网站文件大小以提高性能分数的过程。很简单：当您向浏览器发送较轻的文件时，渲染时间会更快。

HTML 语法是重复的，并使用 <p>、<span>、<img>、<div> 等标签，因此，使用称为“GZIP 压缩”的方法来压缩和解压缩代码可能很有用。

✅ 使用 WordPress 插件启用 GZIP 压缩：

Enable Gzip Compression 使您能够在 WordPress 网站上启用和禁用 Gzip 压缩。
WP Rocket 在激活插件后立即使用 mod_deflate 模块在 .htaccess 文件中启用 GZIP 功能。再一次，您可以选择我们的一体化解决方案，而不是安装多个插件。

7.使用CDN（内容分发网络）

CDN 允许您从位于世界各地的多个服务器分发文件。由于该系统，您网站的加载时间得到了改善，特别是对于国际访问者而言。我们建议阅读我们的文章以了解有关CDN 工作原理的更多信息。

8. 预加载和优化字体

字体预加载意味着您“要求”访问者的浏览器尽早加载重要字体并延迟所有次要字体。速度指数依赖于首屏上方发生的情况，因此，预加载字体可确保为访问者正确显示可见内容。

自定义网络字体也会导致突然的布局变化，而谷歌并不喜欢这样。事实上，您的访客可能面临两个主要问题：

FOUT（未应用样式，因此字体没有吸引力）
FOIT（文本不可见且等待时间较长才能在屏幕上看到字体）

为了保持良好的用户体验并避免此类情况，我们建议预加载您的网络字体。

🚨 Lighthouse 发现的问题： “预加载关键请求”和“确保文本在网页字体加载期间保持可见”。

✅ 使用手动解决方案预加载字体：

您可以使用 rel=”preload” 标签和属性来要求浏览器预加载字体。

现实生活中的例子：

<link rel=”preload” as=”font” href=”/fonts/custom-font.woff” type=”font/woff2″ crossorigin=”anonymous”>

rel=”preload” 标签应该放在哪里？

在 HTML 上每个 CSS 脚本的 head 标签和网站上加载的字体文件之间。