提高 WordPress 网站性能的高级技巧（带视频）

最后更新 - 2021 年 7 月 26 日

网站的性能受到一长串直接和间接因素的影响。 从图像尺寸到缓存设置，每个因素都有助于核心用户的体验。

分析这些因素中的每一个的影响是困难的，而在它们之间取得平衡则更加困难。 但值得庆幸的是，我们可以使用在线工具来消除对我们 WordPress 网站幕后真实情况的猜测，并采取有针对性的有效措施来提高其性能。

在本文中，您将了解可以遵循的各种高级技巧来提高 WordPress 网站的性能。

WordPress网站性能工具

当网站所有者或管理员想要对其 WordPress 网站进行性能审计时，最大的挑战是检测整个系统落后的地方。 毕竟，使用性能镜头检查每一个插件、主题、WordPress 设置和一段代码可能既耗时又无效。

当你不知道要修复什么时，你不知道如何修复它。

这就是为什么您应该考虑使用Google 的 PageSpeed Insights和GTmetrix等在线工具来收集有关您网站性能的可靠且有用的数据的原因。 以下是它们的工作方式：

1. 这些工具仅使用一个 URL，就可以分析影响网站性能的所有因素并分配分数或等级。

2. 这两个工具都在 3 个主要方面（或核心网络生命力）测试您的 WordPress 网站性能：

• 最大内容绘制——通过报告视口中可见的最大图像或文本块的渲染时间来衡量加载性能。 理想情况下，这应该发生在前 2.5 秒内。
• 第一次输入延迟——通过测量用户第一次交互和浏览器第一次事件处理程序处理之间的时间来衡量交互性。 理想情况下，该指标应小于 100 毫秒。
• 累积布局偏移——通过考虑页面生命周期内发生的意外布局偏移来衡量视觉稳定性。 您的页面应争取低于 0.1 的 CLS 分数。

3. 三个核心网络生命力进一步直接和间接地受到几个因素的影响。 因此，该工具还建议您可以关注哪些因素来提高网站的性能。

当然，这些建议因网站而异。 但是您总是会注意到一些对网站性能有很大影响的频繁出现的因素。 让我们来看看它们。

预加载密钥请求

Preload 是一个系统，它为 Web 浏览器提供有关加载网页所必需的资源或文件的提示。 通过预加载关键请求，这些文件和资源会在浏览器执行其他操作时同时下载。

这是通过将 rel=”preload” 属性添加到页面标题中的 <link> 元素来完成的。 Pre* Party Resource Hints等插件可以轻松预加载关键请求。

在 PageSpeed Insights 报告页面上，展开“预加载密钥请求”建议。 然后，将链接复制到提供的资源。

接下来，前往 Pre* Party > 在您的 WordPress 仪表板中插入提示。 将复制的链接粘贴到 URL 字段中并启用“预加载”选项。 然后，单击插入资源提示。

对 PageSpeed Insights 报告中弹出的所有资源重复该过程。

优化 JavaScript 和 CSS

JavaScript 和 CSS 构成了网页结构的重要组成部分。 因此，尽管它们需要渲染网页，但它们也有助于减慢速度。 因此，尽可能优化它们的使用非常重要。

您通常会在 PageSpeed Insights 中看到以下 4 个 JavaScript 和 CSS 优化建议：

• 删除未使用的 JavaScript – 删除未使用的 JavaScript 以减少网络活动消耗的字节数。
• 删除未使用的 CSS – 从样式表中删除无效规则并延迟加载未用于首屏内容的 CSS，以减少网络活动消耗的不必要字节。
• 缩小JavaScript – 缩小 JavaScript 文件可以减少有效负载大小和脚本解析时间。
• 缩小CSS – 缩小 CSS 文件可以减少网络负载大小。
• 消除渲染阻塞资源——资源会阻塞页面的第一次绘制。 考虑交付关键的 JS/CSS 内联并推迟所有非关键的 JS/样式。

您可以使用Asset Cleanup插件轻松解决这些问题。 安装后，前往 Asset Cleanup > CSS/JS Manager 部分。 在这里，您可以选择从特定页面或整个网站中删除特定的 CSS 和 JavaScript 文件。 该插件可让您优化来自各个主题、插件、WordPress 核心和第三方来源的脚本。

在“设置”部分，您会找到进一步缩小 CSS 和 JavaScript 的选项。 此外，您只需向下滚动即可启用内联和延迟选项，这有助于消除渲染阻塞资源。

减少初始服务器响应时间

当用户在浏览器中访问 URL 时，浏览器会发送一个网络请求以获取该内容。 您的服务器接收请求并返回页面内容。

在这个阶段，服务器可能需要执行许多耗时功能才能返回包含所有请求内容的页面。 减少用户等待页面加载时间的一种方法是优化服务器，以便尽快完成此过程。

PageSpeed Insights 提出以下建议：

• 使用优化的主题，如 Astra 和 GeneratePress。
• 使用 W3 Total Cache 等优化插件。
• 升级你的服务器。

图像优化

图片占 WordPress 页面平均页面重量的一半以上。 此外，散布在帖子和页面上的数百张未优化图像确实会降低您的网站速度。

您可以操纵各种图像属性，例如大小、尺寸、服务位置和格式，以确保图像对您的 WordPress 网站性能的负面影响最小。 而且，您可以在上传图像之前进行一些更改，或者使用插件来自动化该过程。

您可以使用下面列出的一些图像优化技术：

• 图像压缩——通过删除相机细节和元数据等不必要的信息，在不影响质量的情况下减小文件大小。
• 调整图像大小- 将图像分辨率降低到网页所需的大小。
• 图片 CDN – 通过缩小服务器与用户之间的差距，更快地提供图片。
• 最佳图像格式- 为透明背景、不透明度以及徽标和图标选择 PNG。 对其他一切使用 JPEG。

您可以阅读我们关于该主题的深入图像优化文章以获取更多信息。

浏览器缓存

浏览器缓存可以通过减少每页的请求数来帮助减少服务器负载。 因此，无需每次都下载可缓存资源，如图像、CSS、JavaScript 等。 您可以使用W3 Total Cache之类的浏览器缓存插件来利用 WordPress 网站上的浏览器缓存。

安装插件后，前往其设置页面。 在这里，您需要启用浏览器缓存选项。 接下来，从侧边栏中转到浏览器缓存设置。 并确保启用过期标头、缓存控制标头并设置电子标签选项。

如果您进行了任何更改，请保存设置。

查看我们关于WordPress 浏览器缓存的文章以了解有关该主题的更多信息。

结论

除此之外，您网站的 PageSpeed Insights 报告可能还有许多其他改进建议。 但是，您可以简单地扩展报告页面上的建议，以了解有关实施它们的更多信息。 如果您仍有疑问，请随时在下面的评论中与我们联系。

如果您喜欢视频版本，请查看以下视频：

进一步阅读：

• 今天加快 WooCommerce 网站速度的 5 个简单步骤（带视频）
• 提高网站性能的顶级免费 CDN 服务
• 如何通过 7 个简单的步骤构建 WordPress 网站
• 如何使用 GTmetrix？