WordPress网站性能优化:WP-Rocket插件(上)

WP-Rocket是业界赫赫有名的关于网站性能优化的WordPress插件，由于其非常优秀，官方也不再提供试用的功能，所以我本次测试找了以前的版本，目的是用来测试了解其功能（不会深入其代码细节验证测试）。

缓存功能

关于它的缓存功能，主要有这三个功能选项，分别是：手机缓存（Mobile Cache），用户缓存（User Cache）和缓存寿命（Cache Lifespan）

使用此功能的前提是你需要充分理解其功能的原理和对应服务提供商是否支持，在这种情况下才能轻松应对，如果你是购买正版软件遇到问题可以联系它们的售后支持。

关于此功能选项的一些官方解释注意事项可参考：https://docs.wp-rocket.me/article/708-mobile-cache

移动缓存功能是WP Rocket插件提供的一项优化措施，旨在为使用移动设备访问网站的用户提供更快的页面加载速度。该功能默认在激活WP Rocket时可以按需启用，并且会为移动设备创建独立的缓存文件，确保移动特定内容能够被独立缓存和提供。

主要功能点：

WP Rocket会为移动设备生成独立的缓存文件，如index-mobile.html_gzip和index-mobile-https.html_gzip。
如果预加载缓存选项开启，移动缓存文件也会被预加载。
默认情况下，平板电脑不被视为移动设备，但可以通过辅助插件将其视为移动设备。
如果遇到问题，可以使用辅助插件来停用移动缓存选项。
停用移动缓存可能会导致移动特定内容显示问题，特别是在使用某些优化功能时。
如果从旧版本升级到WP Rocket 3.16且之前停用了移动缓存，可以在工具选项卡中重新启用。
使用额外的缓存层（如Varnish、NGINX、Cloudflare等）时，需要确保这些缓存层能够区分移动和桌面访问者，否则可能会导致显示问题。
某些托管提供商（如WP Engine和Kinsta）已配置为对移动设备有单独的缓存，但并非所有托管提供商都如此。
使用Cloudflare APO时，需要启用按设备类型缓存选项。

技术细节：

移动设备通过HTTP用户代理检测。
WP Rocket 3.16之前的版本中，移动缓存选项位于缓存选项卡中，并且有一个子选项用于为移动设备分离缓存文件。
如果网站不是响应式的，不应启用移动缓存。
启用“为移动设备分离缓存文件”选项时，WP Rocket会为每个缓存的文档为移动设备创建专用缓存文件。
某些插件（如WP Touch、Jetpack等）会默认启用“为移动设备分离缓存文件”选项。

建议：

通常建议启用移动设备缓存，除非网站不是响应式的。
如果有额外的缓存层，应确保这些缓存层能够区分移动和桌面访问者。
在启用移动缓存时，可以考虑同时启用“为移动设备分离缓存文件”选项，特别是当网站有移动特定内容时。

文件优化

针对文件优化的主要操作是对CSS和JavaScript文件的各种优化处理，具体有如下操作方式：

CSS文件（CSS Files）
- 压缩CSS文件（Minify CSS files）
- 合并CSS文件（Combine CSS files）
- 优化CSS加载（Optimize CSS delivery）
JavaScript文件（JavaScript Files）
- 压缩JavaScript文件（Minify JavaScript files）
- 合并JavaScript文件（Combine JavaScript files）
- 延迟加载JavaScript（Load JavaScript deferred）
- 延迟JavaScript执行（Delay JavaScript execution）

压缩和合并CSS文件

在Web优化中，”Minify”（压缩）和”Combine”（合并）是两个重要的技术术语：

Minify（压缩）：指的是通过移除代码中的空白字符和注释来减小文件大小，从而加快文件的下载速度。压缩操作本身并不会减少网站上的HTTP请求数量。
Combine（合并）：当启用合并CSS时，所有CSS文件会被合并成一个单一的CSS文件，这样可以显著减少网站上的HTTP请求数量。合并是使用HTTP/1时的最佳实践，但在使用HTTP/2时则不一定必要。

WP Rocket的处理方式：

WP Rocket会自动搜索网页HTML中的CSS文件，并将第三方CSS文件托管到本地进行压缩和合并处理。
处理后的优化版本CSS文件会被存储在特定的缓存目录下，并使用时间戳或随机字符串进行缓存破坏，以确保客户端获取到最新的文件。
如果只启用压缩，页面上的文件顺序不会改变；如果启用合并，合并后的文件会被插入到页面中紧跟在标签之后。
一些特定的文件会被自动排除，不会进行处理，例如通过@import加载的第三方文件、包含.min的文件等。

特殊情况：

当启用移除未使用的CSS功能时，合并CSS文件会自动禁用，以确保兼容性和最佳结果。
启用压缩或压缩/合并时，WP Rocket会自动将font-display: swap;应用于CSS文件中引用的任何字体，以改善字体加载，确保文本在网页字体加载期间保持可见。

总结：

压缩：通过移除空白字符和注释来减小文件大小，加快下载速度。
合并：将多个CSS文件合并为一个文件，减少HTTP请求数量，提高加载速度。
WP Rocket的处理：自动处理HTML中的CSS文件，进行压缩和合并，存储优化后的文件，并应用特定的缓存破坏策略。
自动排除：某些特定文件不会被处理，以避免潜在的问题。
合并与移除未使用的CSS：启用移除未使用的CSS时，合并CSS文件会自动禁用。
字体加载优化：自动应用font-display: swap;改善字体加载，确保文本在字体加载期间保持可见。

优化CSS加载

优化CSS加载消除了您网站上的渲染阻塞CSS。只能选择一种方法。推荐使用移除未使用的CSS以获得最佳性能。

优化CSS加载旨在消除网站上的渲染阻塞CSS。
只能选择一种方法来优化CSS加载。
推荐使用“移除未使用的CSS”以获得最佳性能。
“移除未使用的CSS”功能按页面移除未使用的CSS，从而减少页面大小和HTTP请求，提升性能。
建议在实施前进行彻底测试。
提供CSS安全列表功能，允许指定不应被移除的CSS文件名、ID或类，以确保关键样式不被误删。

压缩和合并JavaScript文件

压缩和合并的含义跟上面解释压缩和合并CSS文件类似，下面是相关的解释和功能：

压缩：通过移除代码中的空白字符和注释来减小文件大小，加快下载速度，但不减少HTTP请求数量。
合并：将所有JavaScript文件和内联脚本合并成一个文件，减少HTTP请求数量，是使用HTTP/1时的最佳实践，但在HTTP/2中不一定必要。
WP Rocket的处理：自动搜索并处理HTML中的JavaScript文件和内联脚本，将外部JavaScript托管到本地并进行压缩和合并，存储在特定目录下，使用时间戳或随机字符串进行缓存破坏。
自动排除：某些特定文件不会被处理，如包含.min的文件、带有特定属性的script标签等，以避免潜在的问题。

延迟加载JavaScript

当启用“延迟加载JavaScript”功能时，浏览器会先渲染页面，然后再加载脚本。

延迟加载JavaScript的作用是什么？这个选项有助于实现PageSpeed的“消除渲染阻塞资源”建议。

为了性能考虑，最好是将JavaScript文件加载在网站的页脚，或者延迟加载，这样它们就不会阻塞网站上其他资源的下载，从而减慢网站速度。

通过启用“延迟加载JavaScript”，页面上的所有JavaScript文件，包括WP Rocket压缩的文件，都将使用以下属性加载：

defer 属性。
自定义的 data-rocket-defer 属性，以标识WP Rocket是此优化的发起者。

总结

延迟加载JavaScript：通过在页面渲染后再加载JavaScript文件，有助于消除渲染阻塞资源，提升页面加载性能。
启用方法：在WP Rocket的文件优化选项卡中启用“延迟加载JavaScript”功能。
作用：所有JavaScript文件（包括压缩的文件）都将使用defer和data-rocket-defer属性加载，确保它们不会阻塞其他资源的下载。
解决问题：根据需要排除一些关键脚本不被延迟加载，以避免功能问题。
技术说明：WP Rocket会查找并延迟加载与jQuery相关的内联脚本，确保在DOMContentLoaded时执行，忽略包含特定内容的内联脚本。

延迟JavaScript执行

延迟JavaScript执行通过延迟加载所有JavaScript文件和内联脚本，直到有用户交互（例如移动鼠标、触摸屏幕、滚动、按键、鼠标滚轮滚动）来提高性能。

所以如果在使用PageSpeed测试的过程中仍然看到“减少未使用的JavaScript”审计，可能是因为你排除了太多脚本没有被延迟，请考虑减少排除项以优先考虑性能。

延迟JavaScript执行是WP Rocket最强大的JavaScript优化功能。它延迟脚本的执行，以优先渲染网站。

技术说明

此功能不兼容IE 11。使用IE 11的访问者将被重定向到未缓存的页面版本，URL附加查询字符串?nowprocket=1。
这些URL将出现在网站的分析中。你可以在我们的文档中阅读更多关于这方面的信息。
所有JavaScript（无论是带有src属性还是不带）都将添加type=”rocketlazyloadscript”属性。这个假类型值阻止浏览器执行脚本。
如果脚本已经有类型值，它将被复制到data-rocket-type属性中以保留。
延迟脚本为所有带有src属性的脚本添加预加载，以确保它们在用户交互时准备好。
src属性被替换为data-rocket-src属性，其值被保留。
data-rocket-status参数将添加到内联和JavaScript文件中。其值将在脚本被延迟并按预期执行时为“executed”，在脚本因某些原因未执行时为“failed”。
在Chrome和Safari中，内联脚本将有一个src=”data:text/javascript;base64,…”属性，用于在延迟后加快脚本处理速度。
在用户交互时，我们的延迟脚本要么移除假类型，要么用原始类型替换它，浏览器执行所有脚本。
延迟脚本旨在保留页面脚本的顺序和优先级，考虑到defer和async等属性。
JavaScript将在检测到以下任何交互时执行：
- keydown：按键时触发事件。
- mouseover：当指针设备（如鼠标或触控板）将光标移动到文档（页面）上时触发事件。
- touchmove：当一个或多个触摸点在触摸表面上移动时触发事件。
- touchstart：当一个或多个触摸点放置在触摸表面上时触发事件。

总结

延迟JavaScript执行：通过延迟加载所有JavaScript文件和内联脚本，直到有用户交互，提高页面加载性能。
启用方法：在WP Rocket的文件优化选项卡中启用“延迟JavaScript执行”功能。
作用：延迟加载所有脚本，帮助改善PageSpeed中的多个建议，并可能改善其他核心Web指标。
工作原理：仅应用于缓存或优化的页面，禁用合并JavaScript文件功能，延迟页面HTML中存在的所有脚本。
故障排除：通过一键排除、添加排除文件或程序化排除来解决使用中的问题。
技术说明：不兼容IE 11，添加假类型属性阻止执行，预加载脚本，保留脚本顺序和优先级，在用户交互时执行脚本。

媒体

懒加载（Lazyload）
- 启用图像（Enable for images）
- 启用 iframe 和视频（Enable for iframes and videos）
图像尺寸（Image Dimensions）
- 添加缺失的图像尺寸（Add missing image dimensions）

懒加载

在图像优化中，”Lazyload” 翻译为中文是“懒加载”或“延迟加载”。懒加载是一种优化技术，用于在网页上延迟加载图像或其他资源，直到用户滚动到它们所在的位置时才进行加载。这种技术可以显著提高网页的加载速度和性能，因为它减少了初始页面加载时的请求数量和数据量。

在图像优化中，”启用图像（Enable for images）” 和 “启用 iframe 和视频（Enable for iframes and videos）” 这两个短语的含义如下：

启用图像（Enable for images）：开启图像懒加载
启用 iframe 和视频（Enable for iframes and videos）：开启 iframe 和视频懒加载

这两个短语指的是在网页中启用懒加载技术，分别应用于图像、iframe 和视频资源。懒加载技术通过延迟这些资源的加载，直到用户即将浏览到它们所在的位置，从而提高网页的加载速度和性能。

懒加载解决了Google PageSpeed建议的“延迟加载屏幕外图像”的问题。WP-Rocket以Google推荐的对SEO友好的方式进行此操作。

注意：从WordPress 5.5版本开始，WordPress将懒加载引入核心功能。当WP Rocket的懒加载功能激活时，这将自动禁用。

参考：https://web.dev/explore/fast#lazy-load-images-and-video

标准图像

所有图像，包括来自外部域的图像，在标签中添加到您的内容中，如帖子、小部件等，应自动懒加载。从JavaScript加载的图像不会被懒加载。

背景图像

背景图像是一个特殊情况，更复杂，因为它们可以通过多种方式添加到页面中。 WP Rocket的懒加载功能将在以下元素的内联HTML中应用的背景图像上工作：

div
span
section
li
figure
a

CSS背景图像

如果背景图像是通过CSS文件或内部CSS样式标签添加的，您可以使用WP Rocket 3.15中提供的CSS背景图像懒加载功能。如果您使用的是WP Rocket 3.15之前的版本，通过CSS文件和样式标签添加的背景图像不会被懒加载。这包括一些Elementor背景图像。

Picture元素和WebP

使用picture元素添加的图像将被懒加载，包括通过这种方式添加的WebP图像。 picture元素中的每个source元素都将被懒加载。

总结

图像懒加载：延迟加载网页上的图像，直到用户滚动到页面并实际需要查看它们。
帮助网站：减少初始页面加载时间、初始页面重量和系统资源使用，提高性能。
标准图像：在标签中添加的图像自动懒加载。
背景图像：在特定元素的内联HTML中应用的背景图像懒加载。
CSS背景图像：通过CSS文件或内部CSS样式标签添加的背景图像懒加载。
Picture元素和WebP：使用picture元素添加的图像和WebP图像懒加载。
检查懒加载：使用浏览器的网络标签和开发者工具检查懒加载是否在工作。
问题解决：通过禁用特定图像、帖子、移动设备或背景图像的懒加载来解决问题。
技术说明：懒加载使用特定脚本，在特定钩子上应用，支持srcset，并可以调整阈值。

图像尺寸

在图像优化中，”图像尺寸（Image Dimensions）” 和 “添加缺失的图像尺寸（Add missing image dimensions）” 这两个短语的含义如下：

图像尺寸（Image Dimensions）：图像尺寸
添加缺失的图像尺寸（Add missing image dimensions）：添加缺失的图像尺寸

这两个短语指的是在网页中处理图像尺寸的相关操作。”图像尺寸” 是指图像的宽度和高度，而 “添加缺失的图像尺寸” 是指在网页的 HTML 代码中为图像元素添加缺失的 width 和 height 属性。这样做可以提高网页的渲染性能，因为浏览器在加载图像之前就可以预留出适当的空间，从而减少页面布局的抖动。

技术原理

WP Rocket会在图像缺少高度、宽度或两者都缺失时添加缺失的属性。

这个功能仅在缓存/优化页面中应用 – 请在未登录状态下检查您的网站以查看效果。

WP Rocket扫描HTML以找到以下图像：

有src属性但没有width或height属性
可访问（即没有404错误）
托管在您的域名上（要在外部托管的图像上应用此功能，请参阅此指南）

我们使用PHP函数getimagesize获取图像尺寸，并使用这些值添加width/height属性。对于SVG图像，需要SimpleXML PHP扩展。

如果您使用AVIF图像，必须确保使用的PHP版本是8.2.X。以下图像将被排除：

带有width=”auto”或height=”auto”值的图像
宽度或高度被添加两次的图像，例如width=”100″ width=”100″
作为picture标签一部分的图像（要在这类图像上应用此功能，请参阅此指南）
带有data-lazy-original、data-no-image-dimensions或data-height-percentage属性的图像
托管在外部域名上的图像
URL中带有查询字符串的图像
动态添加的图像，即源代码中不存在但在DOM中注入的图像
Base64编码的图像如下：

<img src="data:image/png;base64, ...">

总结

启用图像尺寸：在图像元素上添加缺失的宽度和高度属性，以提高网页渲染性能和用户体验。
添加缺失的图像尺寸：通过预留图像空间，减少布局偏移，提高网页加载速度和稳定性。
工作原理：WP Rocket扫描HTML，为缺失宽度和/或高度属性的图像添加这些属性，使用PHP函数获取图像尺寸。
排除规则：特定类型的图像（如外部托管、动态添加、Base64编码等）不会被处理。
示例：展示如何将缺失尺寸的图像更新为包含宽度和高度属性的图像。
排除图像：提供指南以禁用特定图像的添加缺失图像尺寸功能，以解决可能出现的问题。