分类：学习

如何实现WordPress图片和视频懒加载（图文教程）
如果您的WordPress网站严重依赖视觉内容，您可能需要为其添加懒加载功能。此WordPress功能有助于提高网站的页面速度和性能，使其对您的SEO工作至关重要。

根据HTTP Archive，网页平均体积为3719 kB，其中图像和视频占总体积的近78％。这对于网站访问者的浏览器下载和渲染来说是很多字节，并且未来的趋势网页越来越大及使用更多的图像或者视频内容。在共享媒体和将媒体文件整合到网站设计中时，WordPress正在引领潮流。使用WordPress，可以轻松地将图像和视频集成到文章，页面甚至主题的背景中。

但是，过多的媒体资源使得网页加载变得非常缓慢，因为用户在查看网页之前必须等待下载大文件（包括最初未显示的文件）。这是为什么我们要对WordPress做图片或者视频懒加载（延迟加载）的原因。
什么是懒加载以及它如何工作？

延迟加载（又称懒加载）是一种加载可见内容的优化技术，即延迟下载和呈现在首屏下方需要显示的内容。延迟加载不是一次加载所有图像，而是仅下载用户屏幕上可见的图像。它用占位符图像或空白区域替换所有其他图像。当用户向下滚动时，您的网站会加载在浏览器查看区域中可见的图像。

这也是谷歌极力推广的网页优化策略“缩减首屏内容的大小”，如果您的WordPress文章和页面包含大量嵌入式视频和高分辨率图像，这是一种应该考虑的技术。

延迟加载的工作方式如下：
- 浏览器在不下载图像和预加载视频下构建网页DOM而。
- JavaScript用于确定要下载哪些图像以及根据页面加载时最初可见的内容预加载哪些视频。这些图像和视频会根据需要下载和预加载。
- 下载和呈现其他视频会延迟，直到网站访问者向下滚动页面并且其他内容进入视图。
最终结果是，在实际需要之前，不会下载图像和加载视频。这可以为包含大量高分辨率图像和嵌入视频的网站实现显着的性能提升。

延迟加载对您的WordPress网站非常有利。
- 它减少了初始网页加载时间，因此用户会更快地看到您的网站
- 它通过仅提供可查看的图像来节省带宽，并可节省托管成本
WordPress 5.5的发布添加了延迟加载作为默认功能。

但是，如果您想自定义图像延迟加载和背景图像延迟加载的方式，则需要使用WordPress插件。

注意：虽然延迟加载有助于提高网站加载速度，但在上传到WordPress之前，您应该始终针对网络优化图像以获得最佳性能。

WordPress懒加载的优缺点

如果您仍然想知道是否应该在WordPress中实现图像延迟加载，以下是该功能的优缺点：

优点：
- 减少带宽使用，降低托管成本。
- 提高网站速度，使访问者的浏览体验更好。
- 提升移动体验。
- 优化最大内容绘制分数
- 改进SEO工作，提高您网站的搜索排名。
缺点：
- 导致内容缓冲，影响加载速度。
- 减慢快速滚动。
为什么要做图像懒加载？

延迟加载您的WordPress图片可以加快您的网站速度并提供更好的用户体验。

没有人喜欢慢速网站。事实上，一项性能研究发现，页面加载时间延迟一秒会导致转化次数减少7%，页面浏览量减少11%，客户满意度降低16%。

任何搜索引擎也不喜欢加载缓慢的网站。这就是速度越快的网站在搜索结果中排名越高的原因。

与其他网络元素相比，图像在您的网站上加载所需的时间最长。如果您在文章中添加大量图片，那么每张图片都会增加您的页面加载时间。

处理这种情况的一种方法是使用CDN服务，例如又拍云CDN。CDN将让用户从离他们最近的Web服务器下载图像并降低网站加载速度。

但是，您的图像仍将被加载并影响整体页面加载时间。为了解决这个问题，您可以通过在您的网站上实现延迟加载来延迟图像加载。

如何为您的WordPress添加懒加载

与许多其他网站性能问题一样，WordPress延迟加载也是可以通过插件来解决。实际上，WordPress插件库有许多插件可用于懒加载图像和视频。这样的插件林林总总，我们从中挑了五个可以显着提高网站性能的插件。如果您已准备好实施懒加载，可以考虑这五个插件。

图像和视频真的会让网站变慢吗？

首先，在将任何图像上传到WordPress之前，请确保已经执行了优化（关于图片体积优化，可以参考文章《如何做到Google PageSpeed Insights测试满分/100分》里面的图片优化章节）。

我们需要一个基线分数，以便可以看到添加图像和视频的对网站加载速度的影响。如果开始就没有问题，就没有解决问题的必要。为了测试我在测试主机上安装标准的WordPress，并启用了默认主题TwentySixteen，且没有启用优化插件或缓存等技术。

以下截图是在添加任何图片或视频之前，使用Pingdom（查阅更多网站测速工具）对网站进行速度测试的结果。

不添加任何图片或视频网站测速

正如您所看到的，页面非常小，只有不到155 kb，并且在不到半秒的时间内加载。如果网站加载包含大型图片文件和嵌入式YouTube视频，测速结果将会如何？

不使用懒加载插件执行网站测速

在测试网站添加图片和视频后，我们可以看到页面体积到了1.7 MB，页面加载时间增加到1.3秒。我们可以看到添加图像和视频后使页面体积变大，并大大降低了页面加载速度。

1. 升级到WordPress 5.4或更高版本

WordPress 5.4及更高版本默认包含延迟加载图像。将您的WordPress更新到最新版本将自动启用延迟加载。

尽管是最简单的方法，但它不允许您配置要延迟加载的图像。因此，您的网站可能会过度使用该功能，从而表现出上述缺点。

另一个需要考虑的因素是每个 WordPress 版本中延迟加载功能的不同性质。最近，WordPress发布了WordPress 5.9进行了改进，以解决旧版本的大型内容绘制分数不佳的问题。

这意味着在旧WordPress版本上运行的网站不会获得与使用WordPress 5.9相同的好处。

2.通过浏览器启用本机懒加载

Chrome、Firefox和Opera等流行浏览器支持原生图像懒加载。您只需将<img loading= “lazy”>加载属性添加到目标图像和视频即可自动启用它。

在原生WordPress延迟加载中，loading属性支持这三个值：
- Auto ‒ 触发默认的延迟加载，这与不包括加载属性相同。
- Lazy ‒ 分配资源的加载，直到每个资源都达到与视口的指定距离。
- Eager ‒ 页面加载后立即加载所有资产，无论其位置如何。
以下是如何使用它的示例：

<img src=”image-name.png” loading=”lazy” alt=”alt attribute” width=”200″ height=”200″>

<img src=”image-name.png” loading=”lazy” alt=”alt attribute” width=”200″ height=”200″>
```
<img src=”image-name.png” loading=”lazy” alt=”alt attribute” width=”200″ height=”200″>
```
此方法非常适合延迟加载某些图像，为每个图像提供一个加载属性，指示它们在视口中出现的时间。但是，延迟加载单个图像可能需要一些时间，尤其是在您的网站有大量媒体文件的情况下。

3. 使用懒加载插件提高页面加载速度

这次我们将对五个WordPress延时加载插件BJ Lazy Load，Lazy Load XT，a3 Lazy Load和Lazy Load（Lazy Load for Videos）进行测试。让我们来看看每个插件变现如何。当你尝试使用WordPress延迟加载插件时，一定要做一个前后测试，以确保能够达到你预期的结果。
1. BJ Lazy Load

BJ Lazy Load是一个非常受欢迎的懒加载插件。目前它在超过9w+个启用安装，获得4星评分。

WordPress延时加载插件-BJ Lazy Load

该插件安装和设置都非常简单。只需通过“插件-安装插件”搜索该插件，并安装启用。启用后，通过“设置 ”>“BJ Lazy Load”即可进入插件设置界面。默认情况下会选择所有延迟加载选项，除非您在启用插件后，网站前端遇到问题，否则您无需对插件执行过多的设置。

此插件提供了一个选项，其他两个选项都无法为图像添加URL，以用作延迟加载的图像和视频的占位符，直到下载实际的图像和视频资源。当然，如果您使用此选项，您将需要使用非常小的文件而不是高分辨率图像。

为了页面美观不破坏页面整体，建议您创建一个与您的网站背景颜色相同的纯色图像，并将其保存为png格式。

您还可以指定排除延迟加载的HTML类。然后，您可以将该类应用于您希望从延迟加载中排除的任何图像或视频。最后，您可以设定懒加载图片和视频下载的时机（即触发图片和视频离下载渲染的目标离当前可视窗口位置值）

在使用了懒加载插件BJ Lazy Load后，页面加载速度变化如下：

使用延时加载插件BJ Lazy Load后的测速

再经过多次测试统计后，结论是使用BJ Lazy Load插件可以让页面加载时间保持在300到400毫秒之间。

虽然安装此插件后页面加载速度惊人，但页面的大小实际上还是增加。怎么回事？理论上，激活延迟加载后，页面大小也应该会减少，因为并非所有图像都是在初始页面加载时下载的。

在对这种情况进行一些调查后，发现：

WordPress默认的图片读取规则

WordPress嵌入图像时会img元素添加srcset属性，向浏览器显示各种尺寸的图像。浏览器根据不同的设备分辨率加载最合适的尺寸的图片。

这意味着如果您上传一个非常大的图像文件，WordPress将自动为您的网站访问者提供该图像的多个尺寸版本，浏览器再根据设备分辨率选择其中一个最合适的图片Size。

BJ Lazy Load改变WordPress图片读取规则

BJ Lazy Load会覆盖WordPress默认的图片读取。 srcset属性已替换为与插件脚本一起使用的data-lazy-srcset属性。然而，最终结果是，不是下载最佳尺寸版本的图像，而是下载和渲染全分辨率图像。

这也就解释了前面的页面速度测试，为什么页面体积大小变化不大的现象问题。所以建议你使用此插件执行懒加载时，确保在上传图片之前对图片进行最优化，即上传较为合适分辨率的图片。

2. Lazy Load XT

Lazy Load XT在我们的测试中表现良好，是另一个值得考虑的WordPress延迟加载插件。但需要注意的是这个插件不像BJ Lazy Load那么受欢迎，且已经有三年未更新了（鉴于技术支持保障及安全性考虑，不建议优先考虑此插件）。

WordPress懒加载插件-Lazy Load XT

启用插件后，通过WordPress仪表盘“设置> Lazy Load XT”配置插件。你会注意到这个插件不仅仅提供延迟加载图片和视频支持，还提供压缩JS和CSS文件，使用Cloudflare CDN加载JavaScript和CSS库，并将脚本移动到站点页脚等功能。

您可以使用其他选项来微调网站性能。但由于我们本次只是测试延迟加载，此次仅采用了默认设置，并没有缩小或移动CSS和JavaScript，清除服务器缓存。最终通过Pingdom网站运行速度测试结果如下：

WordPress延时加载插件Lazy Load XT后测速

启用Lazy Load XT插件后页面体积大小还是2 MB，页面加载时间不如BJ Lazy Load快，但相对于未启用懒加载，页面加载时间减少50％。

快速浏览一下测试结果中的文件树，启用Lazy Load XT插件与我们在BJ Lazy Load中看到的那样。启用这两个插件均不是加载图像的优化版本，而是下载并呈现图像的全分辨率版本。

虽然插件没有产生与BJ Lazy Load相同的速度提升，但是Lazy Load XT支持眼球测试。与BJ Lazy Load不同，Lazy Load XT使用的占位符是透明的。因此，在加载图像和视频时，没有难看的空白框，您不必担心创建和上传占位符图像。

3. a3 Lazy Load

a3 Lazy Load是WordPress插件市场其中一个非常流行的WordPress延迟加载插件。此插件目前已有超过10w+个有效激活安装，并且得到了4.5星评分。

WordPress懒加载插件-A3 Lazy Load

启用插件后，在WordPress仪表盘新增了“设置>a3 Lazy Load”菜单。出于测试目的，使用了插件的默认设置，但有一个例外，“Loading Background Colour ”选项将占位符颜色与网页背景的颜色相匹配。

安装启用A3 Lazy Load插件后的测速状况

启用插件后再次测速，页面加载时间不到半秒。考虑到此网页上包含的图像和视频数量，这样的效率还是非常不错的。

测速结果对比

毫无疑问，您会注意到页面大小和请求数量已大大减少。是什么造成不同插件之间的这种戏剧性的差异？我们通过Pingdom提供内容大小的快照，快速比较后发现了其中的答案。首先，这是激活a3 Lazy Load时内容大小快照如下图所示：

启用A3 Lazy Load插件的页面内容大小

启用A3 Lazy Load插件后页面图像占用空间很小，超出150 kb一点点。 BJ Lazy Load和Lazy Load XT都生成了2.0 MB的页面大小。以下是启用Lazy Load XT插件页面内容的组成分析截图。

启用Lazy Load XT插件的页面内容大小

启用A3 Lazy Load和Lazy Load XT延时加载插件后页面的脚本，HTML，CSS和其他内容大小几乎相同。但是后者的页面图像大小为1.86 MB – 而不是前者的仅仅150 kb。发生什么了？正如我之前提到的，WordPress自动提供各种尺寸的图像，浏览器根据设备屏幕分辨率呈现不同尺寸的图像版本。

BJ Lazy Load和Lazy Load XT都会覆盖WordPress默认的读图规则并最终提供全分辨率图像。但是，a3 Lazy Load保留了默认的WordPress读图规则，传送的图像文件要小得多。

奇怪的是，尽管页面大小不同，但激活BJ Lazy Load时网站加载速度比激活a3 Lazy Load时加载速度快。安装了每个插件后，对该站点进行了多次测试，以确保测速结果不是例外情况。最终将差异归结为加载页面所需的HTTP请求数。乍一看，看起来BJ Lazy Load需要更多请求。但是，如果我们看一下文件树，我们才能看到实际所发生的事情。

启用Lazy Load插件的Data URIs

激活了BJ Lazy Load的站点文件包含大约20个以 data:image/gif 开头的请求。这些是数据URIs而不是HTTP请求。实际上，它们告诉浏览器在本地创建一个gif，而不是从服务器请求那个gif。因此，BJ Lazy Load实际上只需要17个HTTP请求来构建页面而不是a3 Lazy Load所需的27个。这就解释了为什么页面加载速度为什么可以做到那么快。

Lazy Load XT采用了类似的策略，但仍需要比BJ Lazy Load插件更多的请求，这就解释了为什么它不能产生完全相同的结果。

4. Lazy Load

推荐的第四个插件是Lazy Load，这是知名的WP Rocket团队开发的免费插件。该插件目前已经有4w+的激活安装，并且获得了4星评分。如果您正在寻找一个速度很快且简单WordPress延迟加载方案，这个插件是一个很好的选择。

由WP Rocket开发的WordPress懒加载插件-Lazy Load

此插件适用于缩略图，文章内容或小部件文本中的所有图像，头像和表情符号。这个插件的最大优点是没有使用JavaScript库，例如jQuery，脚本大小不到10 KB。没有配置选项，只需安装插件，延迟加载即可实现。

5. Lazy Load for Videos

如果您只需要延迟加载视频，Lazy Load for Videos 插件即可。虽然上面的一些插件也支持视频延迟加载，但对于视频内容来说Lazy Load for Videos是一个很好的解决方案。

Lazy Load for Videos plugin

6. WP Rocket

我们建议使用WP Rocket插件在 WordPress 中延迟加载图像。它是市场上最好的WordPress缓存插件，可让您轻松打开图像延迟加载。

除此之外，它还是一个非常强大的插件，可以帮助您优化网站速度，而无需了解复杂的技术术语。

开箱即用，他们所有的默认推荐缓存设置将大大加快您的WordPress网站。

要启用图像延迟加载，您只需选中几个框即可。您甚至可以为视频启用延迟加载，这将进一步提高您的网站速度。

有关更多详细信息，请参阅有关如何在WordPress中正确安装和设置WP Rocket的指南。

7. Optimole

此方法使用免费的Optimole插件。它是最好的WordPress图像压缩插件之一，可让您轻松启用图像延迟加载。

如果您每月有超过5,000名访客，那么您将需要高级版。

首先，您需要安装并启用插件。转到媒体»Optimole，然后您需要注册一个API密钥。

只需单击“Register & Email API key”，它就会通过电子邮件发送给您。

然后，输入您的API密钥并单击“Connect to Optimole Service”。

之后，单击“Setting”选项卡。

在这里，您可以确保启用了“Scale images and & Lazy load”设置。这将根据访问者的屏幕尺寸生成图像并提高加载速度。

接下来，单击“Advanced”菜单选项并选择“Lazyload”。

在此屏幕上，有一些不同的设置可让您自定义图像延迟加载的方式。

首先，您可以调整“Scale images and & Lazy load”设置。这将阻止延迟加载文章或页面顶部的图像，因此折叠上方的图像将始终显示。

如果您希望每个图像都延迟加载，您可以将其设置为0。

接下来，您可以启用“Scale Images”开关。

这会将图像缩放到访问者的屏幕大小，并使您的页面加载速度更快。

之后，您可以打开“Enable lazyload for background images”设置。

这将延迟加载您的背景图片，这可能是您网站上一些最大的图片。

您可以启用的另一个设置是延迟加载嵌入式视频和 iframe。如果您有很多嵌入的视频内容，那么您需要启用此设置。

这将加载占位符图像代替视频。当它被点击时，完整的视频将加载。

您可以继续自定义这些设置，并查看最适合您的网站和图像的设置。

在退出插件设置之前，请确保单击“保存更改”按钮。

懒加载对SEO的影响

无论你最终使用哪个插件进行WordPress延迟加载，都要考究到对SEO的影响。需要确保以下两件事：
1. 确保搜索引擎仍然可以抓取延迟加载的图片。您可以使用Google Search Console中抓取菜单下的“Fetch as Google” 工具进行检查。其实如果可以在源代码中看到图像内容，那么很可能就没问题。
2. 确保懒加载图片上使用alt，因为这对搜索引擎图片搜索排名很重要
WordPress延迟加载技巧

充分利用延迟加载的关键是正确使用它。以下是在您的WordPress网站上执行延迟加载的一些技巧：
- 不要延迟加载折叠上方的图像。由于放置在页面顶部的图像在加载时可见，因此延迟加载它们没有任何好处。
- 选择适当的占位符。我们建议使用纯色、主色或低质量图像作为图像的占位符。
- 添加图像加载的缓冲时间。这样，您的图像就可以在进入访问者的视口之前准备就绪，从而消除任何等待时间。
- 定义图像容器的尺寸。这样做将有助于避免突然的布局变化，使您的网页在加载时看起来整洁。
- 仅在长页面上实现延迟加载。长页面包括那些需要超过两个卷轴才能到达末尾并且首屏下方有超过五个图像的页面。
小结

那会给我们留下什么？所有这四个选项都通过延迟加载图像和视频来提高页面加载速度。选择哪个最好取决于个人偏好以及如何在将图像上传到WordPress网站之前准备图像。
- 如果在上传前没有对图像进行任何优化 – 建议使用a3 Lazy Load，因为该插件内置图像优化功能。
- 如果在上传前优化图像且是个懒人，那么BJ Lazy Load和Lazy Load比较适合。
- 如果在上传前优化图像，并希望有额外的选项给到你配置CSS和JS资源发送处理，那么建议你选择Lazy Load XT。
延迟加载只是一种可用于优化WordPress网站的技术。但是，如果您使用大量图像和视频，它可能会对网站速度产生深远影响。尽管如此，一旦您实施了延迟加载，您可以考虑并实施几种其他技术来提升网站性能。关于WordPress延迟加载解决方案？或者你有更好的建议，欢迎留言交流。

除此之外，WordPress要获得更好的性能，我们其实还有很多事情可以做，比如CDN加速，WP缓存，CSS和JS等文件极简化，必要的Gzip压缩等等。要知道您的WordPress网站的性能如何，你可以通过一些专业的网站测速工具进行全面的检测，然后有针对性地进行优化。如果你能够做到Google PageSpeed Insights测试满分（其实90分以上），网站就很OK了。
2023年1月5日
通过缩放图像以提高WordPress网站性能
网站速度对其成功至关重要，因为47%的访问者可能会离开加载时间超过两秒的网站。

虽然有几个因素会影响您的网站性能，但图像需要特别注意。除了使用适应不同屏幕尺寸的图像外，您还应该提供缩放图像。

提供缩放图像涉及通过将图像重新调整为完美尺寸来优化图像——不要太小，也不要太大。使用正确缩放的图像将对网站速度和性能产生积极影响，从而改善您网站的SEO（搜索引擎优化）。

本文将解释如何在您的WordPress网站上提供缩放图像。我们还提供了插件推荐，以帮助您自动提供缩放图像。
什么是缩放图像？

缩放图像是经过调整以适合网站所需的确切尺寸的图像。

如果您使用小图像填充较大的区域，则放大时会变得模糊。另一方面，如果你使用过大的图像，浏览器会缩小它们以适应给定的尺寸，但图像尺寸会保持不必要的大。

例如，如果您将500 x 500像素的图像用于50 x 50像素的缩略图，则浏览器必须先下载并缩小图片，然后才能将其显示给访问者。此过程效率低下，并且会减慢网站加载时间。

但是，如果您通过提供缩放图像来优化图像，则不会出现此问题。

如何提供缩放图像？

现在是时候学习如何在您的WordPress网站上正确提供缩放图像了。有两种方法可以做到这一点——手动或使用插件。本节将向您展示如何手动缩放图像。

步骤 1-分析网站

如果您想在完全优化整个媒体库之前尝试使用少量图像，请尝试缩放在您网站的多个页面上重复出现的图像。例如，网站徽标或标题图像。

首先，您需要在网站上找到需要重新缩放的图像以及要使用的适当尺寸。为此，我们将使用GTMetrix。

1. 打开GTMetrix并输入您的WordPress网站URL。单击Test Your Site按钮。

2. 完成网站分析后，转到“Structure”选项卡并单击“Properly size images”部分。

3. 本部分将显示您网站中的哪些图像需要优化。Potential Savings列将显示提供缩放图像后的潜在节省。保存图像的URL以备后用。

步骤 2-使用检查工具找出最大显示尺寸

WordPress已经包含一个名为srcset的用于图像优化的本机功能，它可以使您的图像具有响应性。

srcset为上传到站点的每个图像创建多种尺寸。例如，如果您上传2000 x 2000像素的图片，WordPress会自动创建其他几种尺寸的副本，例如：
- 中等尺寸– 400 x 400 像素
- 缩略图– 200 x 200 像素
然后，它向浏览器提供这些不同的尺寸，浏览器只会下载最优化的尺寸。

但是，完全依赖 srcset并不能像提供缩放图像那样显着提高站点性能。为了进一步优化您的WordPress网站，仍然需要找出显示图像的最大尺寸。

例如，如果最大显示尺寸为500 x 500像素，则无需上传2000 x 2000像素的图像。因此，要找出图像的最大显示尺寸，请使用检查工具：

1. 在Chrome中，右键单击图像并单击Inspect。如果您使用Firefox，请选择Inspect Element，或者在Edge中选择Developer Tools。在本例中，我们将使用Chrome。

2. DevTools面板将显示在浏览器窗口的右侧。在那里，图像代码将突出显示。将鼠标悬停在代码上以查看图像的Rendered size和Intrinsic size。

3. 记下Rendered size，因为它是最大显示尺寸。同时，Intrinsic size是图像的实际尺寸，是用户浏览器下载的尺寸。

步骤 3-重新缩放图像

下一步是重新调整大小不正确的图像。有多种方法可以做到这一点：使用图像编辑器、WordPress媒体库或媒体设置。让我们看看他们中的每一个。

通过图像编辑器

在WordPress网站中缩放图像的第一种方法是使用图像编辑器。有大量可用的在线和离线图像编辑器工具。

用于编辑图像的离线工具的示例包括Photoshop和GIMP。在本教程中，我们将使用在线图像编辑器PicResize。

1. 打开PicResize并选择From URL。

2. 粘贴您要编辑的图像的URL，然后单击Continue to Edit Picture。

3. Select a new size for your picture选项下有一个下拉菜单。选择Custom Size。

4. 对于新的图像尺寸，根据检查工具建议的渲染尺寸输入Width和Height。

5. 向下滚动并点击I’m Done, Resize My Picture! 按钮。

6. 通过单击Save to Disk来保存图像。立即执行，因为PicResize会在20分钟后自动删除图像。

7. 通过删除文件名开头的rsz_将图像重命名为其原始名称。

通过WordPress媒体库

要使用此方法提供缩放图像，您将使用WordPress媒体库裁剪图像。这样做的方法如下：

1. 在WordPress仪表盘上，转到文章选项卡。

2. 找到包含您要重新缩放的图像的文章，然后点击编辑。

3. 在文章上，单击要缩放的图像。选择替换->打开媒体库。

4. 将出现一个媒体库弹出窗口。在那里，导航到右列，然后单击编辑图像链接。

5. 在Scale Image部分下，您将看到原始图像的大小。在其下方的字段中输入新的缩放尺寸 – 基于上一步中的Rendered size。请注意，当您键入水平尺寸时，垂直尺寸会自动调整。单击Scale。

图像现在已成功缩放。

通过管理媒体设置

最后一种方法是通过直接调整媒体设置来缩放图像：

1. 在WordPress站点仪表盘上，导航到Settings -> Media。

2. 您将看到“Media Settings”页面，其中设置了默认图像尺寸。它包括中等和大的尺寸，以及缩略图设置。

3. 设置每个图像尺寸的最大宽度和高度。设置首选图像尺寸后，单击保存更改按钮。

这些设置将提示 WordPress 自动缩放您将来上传的图像。

步骤 4-替换图像

要手动缩放图像，您还必须替换现有图像。在这个例子中，我们将使用一个名为Enable Media Replace的WordPress插件。

1. 从插件菜单安装并启用插件Enable Media Replace。

2. 导航到Media -> Library并将布局从Grid更改为List。

3. 将鼠标悬停在要替换的图像上，然后选择Replace Media。

4. 单击Choose File按钮以选择您保存的缩放图像。
1. 设置Replacement和Date选项，然后单击Upload。
对于Replacement Options ，如果缩放的版本使用相同的格式，请选择Just replace the file 。同时，对于Date Options，建议保留原来的日期。

5个提供缩放图像支持的插件

现在您已经学会了如何手动缩放图像，让我们来看看如何使用 WordPress 插件来做到这一点。

虽然手动过程允许更高的精度，但这种方法可以更轻松、更快速地提供缩放图像，因为插件将自动执行该过程。

以下是我们挑选的五个在WordPress中提供缩放图像的最佳插件。

1.Smush

Smush是用于WordPress图像优化目的的最受欢迎的插件之一。它有助于在不影响图像质量的情况下调整图像大小和压缩图像。

该插件有助于在您的WordPress网站上提供缩放图像，具有以下功能：
- 批量压缩 – 一次为多达50张图像提供高质量的图像压缩和优化，以帮助节省时间。
- 尺寸不正确的图像检测– 查找会降低站点速度的未优化图像。
- 指定目录压缩 – 压缩位于WordPress媒体库之外的目录中的图像。这包括来自其他WordPress插件和主题包的图像，以便您可以在整个站点上有效地提供缩放图像。
- 内置懒加载– 仅提供网站访问者正在查看的图像，同时延迟页面下方的其他图像。懒加载功能有助于显着提高网站速度，尤其是在网站有大量图像的情况下。
- Smush配置– 只需单击几下即可保存您首选的Smush配置设置并将其应用到站点，从而改进您的工作流程。
Smush的免费版本提供了出色的工具来在WordPress网站中提供缩放图像。它优化无限图像，只要每个图像大小不超过5MB。

同时，高级计划具有许多附加功能，例如与免费版本相比优化速度提高200%以及保持EXIF数据完整的选项，这对于摄影师来说是理想的选择。

2.Optimole

Optimole是另一个在WordPress中提供缩放图像的优秀插件。设置完成后，它将自动调整图像大小以适应各种屏幕尺寸。

借助以下工具，使用Optimole缩放图像非常简单：
- 基于格式的优化– 根据访问者浏览器支持的格式优化无限图像。例如，如果访问者使用支持WebP的浏览器，Optimole会将图像文件转换为WebP。
- 水印添加– 自动为图像添加水印。这对于保护图像免遭未经授权的使用非常有用，特别是如果您打算在网站上上传原始图像，例如您自己的插图或照片。
- 为较慢的连接降级质量– Optimole在检测到较慢的网络时会将图像大小减少到多达40%。
- 云库支持– 将您的站点图像保存在Optimole Cloud上，这将有助于节省服务器存储空间并在多个Optimole连接的网站之间交叉共享图像。
- 视网膜支持——检测视网膜屏幕并在适用时自动加载视网膜图像。
使用Optimole的免费计划，为每月最多5,000名访问者的WordPress网站缩放图像。要在流量较高的网站上使用它，必须订阅高级计划。

3. EWWW Image Optimizer

EWWW Image Optimizer是一种图像优化工具，可帮助您在WordPress网站上缩放图像。

通过使用EWWW Image Optimizer的一系列出色功能来提供缩放图像，例如：
- 无限文件大小优化– 优化所有大小的图像。如果您想优化比EWWW Image Optimizer测试过的尺寸更大的图像，只需联系他们。
- 批量优化– 通过优化单个页面上的所有图像（包括媒体库目录之外的图像）来更有效地工作。
- 删除元数据——从不必要的数据中去除图像。
- 自适应转换——EWWW图像优化器支持JPG、PNG、GIF和WebP图像格式。它的智能转换会自动检测最佳图像格式，例如，将PNG转换为JPG或WebP格式（如果适用）。
- 与其他插件的兼容性 – 该插件与数百个 WordPress 插件和主题兼容，例如Perfect Images Retina，可在上传过程中自动优化视网膜图像。
EWWW Image Optimizer的核心插件是免费的，但付费计划提供更强大的功能。他们可以处理多个网站上的图像优化，并增加带宽限额。

4.ShortPixel

Shortpixel通过提供高质量的图像压缩来有效地提高WordPress网站的性能。

该插件将通过使用以下功能来帮助提供缩放图像：
- 自动调整图像大小– 在您上传图像时自动调整图像大小，以实现更有效的工作流程。
- 光泽优化——这种类型的图像压缩提供一流的图像质量，但可能会导致页面加载速度略有下降。这对摄影师很有用，因为它有利于图像质量而不是页面速度。
- 保留或删除 EXIF 数据– 非常适合摄影师仅提供所选图像的必要数据，从而优化网站性能。
- 跳过优化的图像——ShortPixel不会过度优化站点图像，因为它会跳过任何已经优化的图像。
- 批量优化– 只需单击一下即可优化媒体库选项卡或其他站点目录中的图像。
它的免费版本每月优化多达150张图像。同时，其付费版本包括具有各种图像配额的月度和一次性计划。此外，ShortPixel为非营利组织提供免费的优化积分。

5.Perfect Images

Perfect Images有助于优化WordPress的视网膜显示图像。该插件的功能包括：
- 高清缩放图像——自动生成视网膜图像，为超高分辨率屏幕提供优化图像。
- 媒体库视图– 更容易查看需要将哪些图像转换为视网膜图像。对于具有大量图像的网站特别有用。
- 缩略图再生– 帮助为每次图像更改重新生成缩略图。这可以批量完成以节省时间。
- 图像阈值控制——WordPress可能会自动调整大图像的大小，而视网膜图像会故意在分辨率和大小上保持较大。Perfect Images可让您通过禁用图像阈值来控制此功能。
- 图像替换– 使用视网膜版本快速轻松地替换图像。
除了免费计划外，这个WordPress插件还提供付费版本，支持延迟加载、自动调整站点媒体库中的图像大小，并可在多个网站上使用。

小结

提高WordPress网站性能的最佳方法之一是提供缩放图像。这意味着调整站点图像的大小以适合放置它们的区域的确切尺寸。

优化图片可以显着改善您网站的加载时间和在搜索引擎结果中的排名，从而增加网站流量并降低跳出率。

此外，在WordPress网站中提供缩放图像并不难。您可以手动完成，也可以使用 WordPress 插件。

如果您选择遵循手动方法，则步骤包括：
1. 分析网站——在网站上找到需要重新缩放的图像。
2. 找出图像的最大显示尺寸——使用检查工具找出图像的最大显示尺寸。
3. 缩放图像——通过使用图像编辑器或通过媒体设置指定最大图像尺寸，将图像缩放到适当的尺寸。或者，通过WordPress媒体库裁剪图像。
4. 替换原始图像– 用正确缩放的图像替换现有图像。
如果您更喜欢使用更实用的方法提供缩放图像，请使用插件。这样做会自动在WordPress网站中提供缩放图像，这样您就可以专注于其他重要的网站方面。
2023年1月5日
如何清除WordPress网站缓存
拥有一个快速加载的网站对于用户体验和SEO（搜索引擎优化）至关重要。具有优化速度的网站往往具有较低的跳出率，从而导致更高的参与度和转化率。谷歌也偏爱快速网站，并在搜索结果页面上排名更高。

从编码标准到托管服务提供商，许多组件都会影响网站速度。因此，有很多方法可以提高网站性能，而Web缓存是最有效的方法之一。

Web 缓存存储站点数据的副本以供将来请求。Web缓存不是从服务器下载原始数据，而是将这些缓存文件提取给您的网站访问者。因此，您的内容显示得更快。

但是，缓存文件可能会过期——这将阻止访问者看到您网站的更新版本。

为了解决这个问题，我们将向您展示如何使用流行的WordPress插件清除缓存。我们还将包括删除浏览器缓存以获得更有效结果的步骤。让我们先解释一下什么是缓存以及它是如何工作的。
- 解释WordPress缓存是什么以及它是如何工作的
- 清除浏览器中的缓存
解释WordPress缓存是什么以及它是如何工作的

缓存是静态内容的临时存储位置，例如HTML、Javascript、CSS和媒体文件。

每当您访问网站时，您的浏览器都会向该网站的服务器发送请求。服务器可能需要一两分钟来获取和显示请求的内容——网络缓存使这个过程更快。

Web 缓存下载站点的静态内容并将其存储为缓存文件。因此，您的浏览器可以向服务器创建更少的请求，因为它已经有缓存的内容。

Web缓存有两个主要系统：
- 客户端缓存——也称为浏览器缓存，这种类型的缓存将静态内容存储在本地存储中。当用户重新访问网站时，它会加载得更快，因为缓存的版本已经存储在浏览器缓存文件夹中。
- 服务器端缓存——具有与客户端缓存类似的概念。但是，它使用服务器来存储网站的缓存数据。服务器缓存可以存储来自多个数据库的各种站点数据，使其成为高流量网站的绝佳解决方案。
总而言之，Web缓存通过存储网站的静态版本来减少对服务器的请求，从而提高网站性能。

它还减少了您的网络资源，因为处理更少的请求需要更少的带宽，这可以使资源有限的网站受益。

清除WordPress中的缓存

有时您更改和调整您的WordPress网站，但您的内容没有在前端更新。这可能是因为您的WordPress服务器仍在显示页面的缓存版本。

幸运的是，清除WordPress缓存通常可以解决此问题。当您的网站缓存为空时，缓存系统可以存储更新的数据并将其显示给您的访问者。

清除WordPress网站缓存的最简单方法是安装插件。以下部分将说明如何使用四个流行的WordPress缓存插件清除缓存，并展示如何在您的域指向Cloudflare时清除缓存。

使用LiteSpeed清除缓存

使用LiteSpeed Cache for WordPress (LCWP) 插件来有效管理缓存的存储和使用方式。这个缓存插件使用LiteSpeed服务器缓存来改善站点加载时间，并带有LiteSpeed独有的功能。

LiteSpeed Cache插件提供了多种清除WordPress缓存的方法。从根据特定条件设置自动缓存清除到为计划清除包括特定网站URL。请按照以下说明进行操作：
1. 安装并激活插件后，访问您的WordPress管理仪表盘。然后，转到LiteSpeed Cache。
1. 选择工具箱菜单，将出现LiteSpeed缓存工具箱窗口。
1. 您可以清除各种类型的缓存，从页面缓存到CSS/JS缓存。选择您要执行的缓存清除类型。
1. 如果您想完全清除WordPress缓存，请选择Purge All。请注意，它不会删除您WordPress网站上的关键数据——您可以继续清除缓存。
2. 但是，如果您只想清空站点某些部分的缓存，请向下滚动到“Pure By”部分。从那里，使用类别、标签或URL输入您的内容。
除了访问您的WordPress仪表盘之外，您还可以通过访问它来清除特定页面的缓存——请记住，您需要以管理员身份登录。只需将鼠标悬停在管理栏上的LiteSpeed图标上，然后选择Purge this page。

使用WP Super Cache清除缓存

WP Super Cache使用三种缓存模式修改WordPress站点中的缓存系统：WP caching, Simple和Expert。

Expert和Simple方法服务于超级缓存文件，因此它们是高流量网站的绝佳解决方案。唯一的区别是专家方法涉及重写.htaccess文件中的规则以获得更快的性能。同时，WP缓存方法缓存登录用户，例如在您的网站上发表评论或存储个人信息的访问者。

这个WordPress缓存插件还可以通过单击刷新缓存文件。只需按照以下步骤操作即可：
1. 从您的WordPress管理后台，转到设置-> WP Super Cache。
1. 在WP Super Cache Settings页面中，向下滚动到Delete Cached Pages部分。然后，单击Delete Cache按钮。
此外，WP Super Cache插件提供了广泛的缓存功能，其中最突出的功能是垃圾收集。用户可以设置缓存超时时间，系统会相应地清除缓存文件。为此，请按照以下说明操作：
1. 转到设置 -> WP Super Cache -> Advanced。然后，向下滚动到Expiry Time & Garbage Collection。
1. 根据需要设置缓存超时和间隔。
如果您不经常更新您的WordPress网站，将其设置为3600秒将是理想的选择。但是，拥有大量动态内容的繁忙网站（例如电子商务网站）的所有者应将其设置为600秒，以防止性能下降。
1. 接下来，单击Change Expiration以保存更改。
1. 如果要禁用垃圾收集，只需将缓存超时设置为0秒。
使用W3 Total Cache清除缓存

W3 Total Cache是最受欢迎的缓存插件之一，以其定制和节省带宽的功能而闻名。该插件通过缩小、提要优化和HTTP压缩节省高达80%的带宽使用量。它提供多种缓存功能，包括浏览器、数据库和站点缓存。

此缓存插件还附带有助于提高SEO性能的AMP支持。此外，用户可以使用其WP-CLI支持命令界面来执行各种任务，例如缓存清除和查询字符串更新。

以下是使用W3 Total Cache清除WordPress缓存的方法：
1. 安装此缓存插件后，访问您的WordPress管理后台并转到Performance -> Dashboard。
1. 单击位于页面顶部的empty all caches。
2. 系统将开始清除您的WordPress缓存。结束后，您应该会看到此消息。
1. 除了empty all caches按钮外，还有其他用于删除多种缓存类型的按钮，包括仅从数据库中清除Memcached缓存。只需单击按钮即可开始相应的操作。
使用WP Fastest Cache清除缓存

WP Fastest Cache是另一个流行的缓存插件，以其各种优化和缓存功能而闻名，例如缩小、缓存预加载和GZIP压缩。它带有一个直观的仪表板并使用mod_rewrite来提供最快的缓存解决方案。

用户可以开启缓存超时，省去手动清缓存的麻烦。每当发布新页面或帖子时，该插件还可以自动删除所有缓存文件——这可以防止过时的数据显示在您的WordPress网站上。

按照以下步骤使用WP Fastest Cache执行自动缓存清除：
1. 从您的WordPress管理后台，导航到WP Fastest Cache。它将打开WP Fastest Cache Options页面。
1. 勾选Cache System设置旁边的框。启用缓存后，该插件将定期清除您的缓存。
1. 如果您想在发布文章或页面时清除缓存文件，只需检查“New Post”和“Update Post”设置。
1. 要启用更多功能，请继续并勾选每个设置的框。请务必单击提交按钮以保存更改。
此外，还有一个手动删除WordPress缓存的选项：
1. 转到WP Fastest Cache并选择Delete Cache选项卡。
2. 从那里，按Delete Cache按钮。
3. 同时，如果您刚刚编辑了CSS或JavaScript文件，请选择Delete Cache and Minified CSS/JS按钮。
4. 在页面底部，您将找到Timeout Rules设置。只需单击Add New Rule即可设置到期时间。
1. 将出现一个弹出窗口。在那里，您可以配置要缓存的页面或帖子的条件以及删除它们的频率。单击保存以添加规则。
使用Cloudflare清除缓存

除了使用WordPress缓存插件外，您还可以使用Cloudflare清除缓存。这是一项内容交付网络 (CDN)服务，具有多种功能来提高您的网站性能，包括缓存控制、快速缓存清除和Web缓存保护。

要使用此方法清除WordPress缓存，请将您的域指向Cloudflare。

如果您的WordPress主机没有自动为您设置Cloudflare，请按照以下步骤操作：
1. 创建一个Cloudflare帐户。
2. 添加您的域名并等待系统识别您的DNS记录。
3. 选择计划级别。
4. 当Cloudflare提供所需的名称服务器时，只需复制值并从您的托管帐户仪表板更新您的名称服务器。
将您的域指向Cloudflare后，请按照以下步骤清除WordPress缓存：
1. 登录您的Cloudflare仪表盘并单击您的WordPress站点的域。
1. 导航到Caching菜单并单击Configuration。
1. 选择您喜欢的清除缓存的方法。要清除所有缓存文件，请单击“Purge Everything”按钮。如果要选择特定页面，请选择Custom Purge并填写要清除的页面。
清除浏览器中的缓存

清除您自己的浏览器缓存也有助于解决加载和格式问题。它将删除过时的文件，允许您的浏览器获取您网站的新版本。这样做还可以修复与服务器相关的问题，包括502 bad gateway和504 gateway timeout。

请记住，删除浏览器缓存也可能会删除您的浏览器数据，例如书签和设置首选项。因此，请务必从浏览器中导出数据，并在清除缓存后将其重新导入。

以下步骤将向您展示如何清除Google Chrome中的缓存。请注意，相同的步骤也适用于其他浏览器。
1. 打开您的Chrome应用程序。
2. 单击屏幕右上角的三点(⋮)菜单。
3. 选择更多工具 -> 清除浏览数据。
4. 它将带您到一个页面，您可以在其中执行基本或高级缓存清除。
1. 选择您喜欢的方法，设置时间范围，并根据需要选中相应的框。取消选中密码和其他登录数据选项以保留您的登录凭据。
2. 最后，单击清除数据按钮。
小结

缓存是让您的网站加载更快的好方法——它存储您网站静态内容的副本以供将来重用。但是，过时的缓存文件可能会阻止访问者在您的网站上看到新的更改。

幸运的是，清除您的网站缓存可以解决这个问题。本教程向您展示了如何使用WordPress流行的缓存插件清除WordPress缓存。如果删除WordPress服务器缓存不能解决问题，请尝试删除浏览器缓存。

请注意，一旦缓存的文件被删除，浏览器和服务器将需要一些时间来再次下载它们——这可能会导致加载时间比以前稍长。
2023年1月5日
如何合并WordPress网站外部JavaScript
加载缓慢的网站是一个巨大的问题，但是，有很多方法可以克服它。在众多解决方案中，您可以尝试在WordPress中正确合并外部JavaScript 。

虽然解决方案可能很简单，但它会像魅力一样发挥作用。在本文中，我们将向您展示为什么必须在WordPress中合并外部JavaScript文件以及如何使用几个简单的步骤来完成。

为什么必须合并外部JavaScript文件？

您可能知道，当您请求一个HTML页面时，浏览器将发送一个对所有所需资源的查询。所有文件，包括JavaScript文件，都将从服务器获取并再次加载到浏览器中。

在每个请求中，JavaScript文件会一起下载，但会按照它们在HTML中出现的顺序执行。虽然单独下载本身可能会减慢网站速度，但顺序过程可能会让您等待更多。

JavaScript文件和CSS文件都是渲染阻塞资源——除非所有文件都完全加载，否则不会加载其他组件。由于这些文件通常位于网页的头部，因此可能会导致问题。

为确保您是否遇到这些问题，您需要通过进行速度测试来检查您网站的性能。

有许多网站，如Pingdom、GTMetrix和Google PageSpeed Insights可以帮助您做到这一点。您所要做的就是放置您的网站链接，然后单击分析。

以下是我们测试站点结果的示例：

理想情况下，结果应该在绿色类别内（快速）。或者至少，确保您的网站不在红色类别中。如果发生这种情况，请立即采取行动。

大多数情况下，如果找到超过五个JavaScript文件，您会收到警告。通过定位问题，您已准备好解决问题。

HTTP/2

实施HTTP/2等最新技术总是有益的。如果您的托管服务提供商支持它 – 您可能不需要合并文件，因为它支持并行下载。

HTTP/2（超文本传输协议第2版）于2015年发布，是作为HTTP/1.1的增强版开发的，自1989年以来一直是在线通信的标准。新协议的增强旨在：
- 提高页面加载速度
- 启用并行下载
- 启用多路复用
- 压缩请求头
- Head-of-line或包裹阻塞
这个新版本有几种方法可以减少延迟，这会影响网站的整体性能。

请记住，这个合并外部JavaScript文件的教程是为那些使用HTTP/1.1的人准备的。

如何在WordPress中合并外部JavaScript文件？

如前所述，在进行页面加载速度测试时，多个JavaScript文件会增加总渲染时间并触发警告。

作为一种解决方案，您可以在WordPress中合并外部Javascript文件，将它们全部变成一个文件并删除其余文件。如果您复制并粘贴正确的脚本，则JavaScript组合文件将像单独的文件一样正常工作。

虽然复制和粘贴的想法可能看起来很简单，但手工编码的工作具有挑战性。由于JavaScript的学习曲线很陡峭，因此粗心地执行这些任务将弊大于利。

因此，您可以使用插件在WordPress中结合外部JavaScript，让您的生活更轻松。

最好的插件之一是Autooptimize。

这个插件可以帮助您处理HTML、CSS或JavaScript文件的缩小任务。定期更新，超过900,000次活跃安装，强烈推荐此插件。

虽然您可以免费使用它，但您可以获得其高级版本以获得更多功能：Autooptimize Pro Configuration ( $167 ) 和Complete Speed Optimization ( $671.74 )。

安装并激活后，您可以转到WordPress仪表盘 -> 设置 -> Autooptimize。在JS、CSS & HTML菜单下，您可以启用Optimise JavaScript Code。之后，单击Save Changes。优化是自动的，因此您可以立即再次测试您的网页加载速度以查看改进。

除此之外，如果要合并CSS文件，还可以启用Optimise CSS Code选项。如果您使用的是CDN，则可以启用所有选项，包括CDN选项。

小结

加载速度对于任何网站都非常重要。如果您在本部门遇到任何问题，请尽快尝试解决。

您可以在WordPress中合并外部JavaScript文件，以加快您的网站加载速度。但是，它可能需要您手动处理代码。

如果您想避免意外错误，建议使用插件来完成任务。Autooptimze是最好的WordPress插件之一。安装后，它将自动优化您的网站。
2023年1月5日
使用LiteSpeed缓存插件将WordPress优化到极致
页面速度优化应该是每个网站所有者的首要任务，因为它直接影响WordPress SEO。此外，网站加载的时间越长，跳出率就越高。这可能会阻止您产生转化并为您的网站带来流量。

使用正确的工具和配置，缓存您的网站可以显着提高其性能。因此，我们将向您展示如何使用LiteSpeed Technologies的最佳缓存插件优化您的页面得分。

我们测试了LiteSpeed Cache插件并配置了三个不同网站的设置。本文将引导您完成我们为获得最佳结果而应用的配置。

在深入了解设置之前，让我们先简要概述一下LiteSpeed缓存插件。
什么是LiteSpeed？

LiteSpeed是旨在加速网站性能的网络服务器软件。LiteSpeed服务器采用事件驱动架构构建，可以用更少的进程处理更高的流量，从而减少资源使用并提高页面速度。

LiteSpeed服务器还具有内置的Apache替代品，支持.htaccess，让用户可以从Apache切换并使用现有配置。此外，它还可以与几个流行的主机控制面板一起使用，例如WHM、DirectAdmin和Plesk。

有两个版本的LiteSpeed Web服务器可用：
- LiteSpeed Enterprise – 适用于托管多个网站或共享托管环境。它会自动检测对.htaccess文件的更改并调整设置，而无需重新启动服务器。
- OpenLiteSpeed – 具有所有基本功能的LiteSpeed Enterprise的开源版本。每次加载新的.htaccess文件时都需要重新启动。因此，此Web服务器通常用于单个网站。
在优化页面速度和性能时，LiteSpeed使用称为LiteSpeed Cache的内置服务器级缓存。

LiteSpeed Cache是LiteSpeed Technologies的产品，可优化网页上的动态内容。它具有高级缓存功能和优化功能。LiteSpeed Cache也可作为插件在包括WordPress在内的多个平台上使用。

LiteSpeed Cache for WordPress (LSCWP) 通过存储网站内容的副本以供将来请求使用。结果，服务器必须处理更少的请求并且可以更快地显示网页。

请注意，需要服务器缓存的功能仅在LiteSpeed服务器中可用。另一方面，优化功能可用于任何Web服务器，包括OpenLiteSpeed、Nginx和Apache。这些功能包括图像优化、CDN（内容交付网络）集成和CSS/JS修改。

在我们继续之前，让我们看看在设置LiteSpeed Cache之前，Google PageSpeed Insights给测试网站的移动版和桌面版打分：

为WordPress配置LiteSpeed Cache 后，两个版本都获得了满分：

OpenLiteSpeed、LiteSpeed Web服务器、Nginx和Apache上的LiteSpeed缓存插件性能

尽管LSCache插件可以在LiteSpeed环境之外工作，但它的功能会因您使用的Web服务器而异。因此，结果和过程测量也将有所不同。

为此，我们对LiteSpeed Web Server、Nginx和Apache进行了大小规模的压力测试。我们将向您展示其性能的三个指标——完全处理时间、每秒请求数和每秒兆字节数。

重要的！压力测试是在立陶宛在位于美国的服务器上完成的。

如上所示，LiteSpeed网络服务器得分最高。将LiteSpeed网络服务器与WordPress的LiteSpeed Cache配对肯定会为您的网站提供最佳性能。

安装LiteSpeed缓存插件

请按照以下说明安装 LiteSpeed Cache for WordPress。
1. 登录到您的WordPress管理仪表板并转到插件部分。
2. 搜索LiteSpeed Cache，单击立即安装并启用。
3. 刷新页面 – LiteSpeed缓存部分将在您的仪表板上。
安装WordPress插件后，您必须对其进行配置。阅读以下部分，找出最适合您的WordPress网站的LiteSpeed缓存设置。

LiteSpeed Cache for WordPress插件的最佳设置

我们已经在三个由共享主机提供支持的网站上测试了这些LiteSpeed缓存设置——一个简单的博客网站、一个电子商务网站和一个在线投资组合。

重要的！在GTmetrix上测试性能时，无论您使用的是什么缓存插件，都要执行几次，因为缓存可能不会在第一次被命中或加载。此外，请务必在测试任何新设置之前清除缓存。

我们还将包含每个设置的详细说明，以帮助您决定是否需要对其进行调整。

让我们从完成基本设置开始。

1. 完成基本设置

在我们进入完成基本设置的步骤之前，让我们比较三个网站的性能测试结果。

上图显示了激活和配置LiteSpeed Cache插件后网站性能的显着提升。

出于这个原因，我们将引导您了解LiteSpeed Cache插件的特性和功能，以及应用的最佳设置 – 从“常规”页面开始。

此页面上的第一个选项是Automatically upgrade。顾名思义，将此按钮切换到On会提示系统安装最新版本的LSCache插件。

接下来，有一个字段可以添加您的域密钥，也称为API密钥。如果您想使用QUIC.cloud功能和服务，这一点很重要。只需单击请求域密钥按钮。

我们将在下一节中详细讨论如何设置QUIC.cloud。现在，转到下一部分，您将看到访Guest Mode。

此选项为客人的首次请求提供自动可缓存登录页面。当您启用访客模式时，服务器将不必获取访问者的信息，而是为他们提供默认的缓存页面。因此，页面加载时间会更短。

提供缓存页面后，服务器将进行Ajax调用以获取访问者请求的正确版本的网页。要启用访客模式，只需将其打开即可。

要优化访客模式，请使用Guest Optimization选项。

启用此设置后，服务器不仅会提供默认的缓存页面，还会执行图像和页面优化，即使这些功能被禁用。

但是，访客模式优化可能会占用您的一些 WordPress 网站资源，因此最好在激活此设置之前咨询您的托管服务提供商。

在下方，您的站点IP地址有一个服务器IP字段。包含您的IP地址将允许爬虫直接从您的服务器检索资源，从而提高您网站的性能。

有关您网站的IP地址的信息，请联系您的托管服务提供商。

再往下，有通知设置。通过启用它，您将获得有关LSCache插件开发的最新信息，包括促销和新版本。

请务必在配置设置后保存更改。

2.调整缓存设置

LiteSpeed缓存设置页面包括主要适用于LiteSpeed Web服务器或QUIC.cloud CDN的功能。LiteSpeed缓存设置页面中有多个功能 – 本节将介绍所有缓存功能，以帮助您选择最佳方法。
- 启用缓存（Enable Cache） – ON。打开此选项将触发系统自动缓存您的WordPress站点。虽然关闭此功能不会影响您网站的内容，但所有缓存的文件都将被清除。我们建议保留默认设置以获得更好的加载时间。
- 缓存登录用户（Cache Logged-in Users） – OFF。此设置会自动缓存已登录用户的网页。但是，启用此设置会占用服务器资源。除非您运行会员网站，否则最好禁用此选项。
- 缓存评论者（Cache Commenters） – OFF。此函数的输出取决于您的评论审核设置。如果同时启用缓存评论者和缓存审核设置，用户将不会立即看到他们的评论。相反，如果缓存评论功能被禁用，用户将看到他们的待处理评论。
- 缓存REST API（Cache REST API） – ON。这使您能够缓存来自WordPress REST API调用的请求。这些调用通常由与WordPress集成的第三方Web应用程序进行，包括主题、插件和区块编辑器。
- 缓存登录页面（Cache Login Page） – ON。它提供登录页面的缓存版本。最好启用此功能，因为每次访问者登陆您的页面时，它都会使您的 WordPress 网站加载速度更快。
- 缓存favicon.ico – ON。保持启用此功能将有助于避免不必要的PHP调用并使服务器响应更快。否则，系统将查找favicon.ico文件并强制WordPress PHP后端运行，从而降低您的WordPress网站速度。
- 缓存PHP资源 – ON。该函数缓存静态元素，包括WordPress主题生成的CSS和JS文件。保持启用设置以加快性能并避免不必要的PHP脚本。
- 缓存移动 – ON。它允许您在桌面和移动设备上提供不同的缓存内容。除非您的WordPres网站有AMP（加速移动页面）版本，否则我们建议您关闭此功能。
- 移动用户代理列表。此设置仅在您打开缓存移动功能时可用。您可以以重写规则友好的格式添加移动用户代理列表。例如，每个用户代理可以写在一行上。
- 私有缓存URI。包含将被私有缓存的路径。但是，此功能类似于也处理私有缓存URI的缓存登录用户选项。除非您想私下缓存与用户无关的特定页面，否则请将该字段留空。
- 强制缓存URI。无论任何不可缓存的设置如何，系统都会强制缓存写入提供的字段中的每个路径。通常，您不必担心此功能，因为您不需要为大多数页面强制缓存。
- 强制公共缓存URI。强制将特定内容类型缓存为公共，无论其设置如何。
- 删除查询字符串。忽略字段中添加的任何查询字符串并加快网站加载时间。默认设置已经列出了一些最常生成的字符串。但是，如有必要，您始终可以添加更多查询字符串。
总而言之，LSCache插件应用了适用于大多数WordPress网站的默认设置。也就是说，我们建议根据您的需要调整它们。

除了LiteSpeed缓存设置页面，让我们简要概述其他可用部分及其主要功能：
- TTL（生存时间） ——此函数控制特定内容类型在缓存中存储多长时间。默认设置应该可以正常工作，但您可以根据需要减少或增加数字。
- 清除– 提供从缓存中删除某些内容类型的所有设置。我们建议在所有升级上启用清除，以允许系统在更新可用时清除过时的缓存。如果您有足够的资源，请启用服务器陈旧以获得更好的性能。
- 排除– 帮助指定要从缓存中排除的内容类型。需要填写各种字段，包括站点URI和查询字符串。相应地填写字符串，系统将阻止它们被缓存。
- ESI（Edge Side Includes） ——将网站页面的特定部分分成片段。您可以选择将这些部分存储在公共或私人缓存中。一旦启用，系统将在将页面提供给浏览器之前重新组合页面。
- 对象– 默认情况下禁用对象缓存功能。但是，启用此功能将提示服务器更快地检索和显示频繁的数据库查询。由于启用此功能涉及技术参数，请先咨询您的托管服务提供商。
- 浏览器——启用浏览器缓存允许系统自动将您的WordPress站点的动态内容存储在用户的浏览器缓存中。服务器将处理更少的浏览器请求并更有效地为页面提供服务。
- 高级– 此选项卡上的设置是为高级用户指定的。在这里，您可以启用HTTP/HTTPS功能以避免与登录cookie发生冲突。此外，当访问者将鼠标悬停在网页上时，即时点击功能可以在后台加载网页。
3.优化页面和图像优化选项

LiteSpeed Cache插件包括WordPress网站上动态内容的优化工具，包括图像和网页。花时间配置这些设置很重要，因为它们会影响您网站的SEO。

本节将引导您了解每个优化选项卡上的每个功能和设置。

图像优化

每当访问者访问您的WordPress网站时，浏览器都会请求资源并下载您的图像，然后再显示它们。因此，浏览器将花费更长的时间来加载、调整大小和渲染未优化的图像。

幸运的是，LiteSpeed Cache插件可以通过调整图像大小来单独或批量优化图像。

警告！使用LiteSpeed Cache插件时不要使用其他优化插件，因为它可能会触发系统和处理错误。

进入图像优化页面后，您将看到Image Optimization Summary选项卡。此选项卡监控多个指标，例如尺寸缩小和从您的网站提取的图像总量。

此外，您还可以使用其他一些功能，例如：
- 收集图像数据（Gather Image Data）– 上传新图片后可用。完成后，将出现“Send Optimization Request”按钮，使您能够将图像发送到LiteSpeed云服务器。重要的！此功能仅在您添加域密钥并激活QUIC.Cloud CDN后可用。
- 拉取图像（Pull Images）——将优化后的图像从云端拉回您的WordPress站点。
- 清理未完成的数据（Clean Up Unfinished Data）– 擦除未完成的进程并在优化过程卡住时重新启动它们。
- 计算备份磁盘空间（Calculate Backups Disk Space）– 计算备份文件的可用磁盘空间。
- 删除原始映像备份（Remove Original Image Backups）– 删除原始映像的备份以释放磁盘空间。我们建议在选择此功能之前将备份下载到您的本地计算机。删除所有备份后，您将无法恢复优化设置。
- 重新扫描新缩略图（Rescan New Thumbnails）– 扫描您网站上新添加的图像并向系统发送优化请求。
- 使用原始文件和使用优化文件（Use Original Files & Use Optimized Files）– 提供在您网站上的未优化和优化图像之间切换的选项。
- 销毁所有优化数据（Destroy All Optimization Data）– 删除所有数据并将所有设置恢复为原始值。
现在，让我们继续下一个选项卡并为您的 WordPress 网站应用最佳优化设置。只需单击Image Optimization Settings，您将看到多个需要调整的功能：
- 自动请求Cron – ON。每当上传新图像时，此功能会自动通过WordPress cron作业发送优化请求。
- Auto Pull Cron – ON。它与前面的功能一起工作。因此，您应该启用这两个功能。否则，您将需要使用Pull Images按钮发送每个新上传的图像。
- 优化原始图像 – ON。您应该始终打开此功能，因为它会优化.png和.jpg图像并生成备份文件。仅当您不想优化图像时才禁用它。
- 删除原始备份 – OFF。请记住，此功能是不可逆的。启用它将删除所有备份，防止您恢复任何优化设置。
- 无损优化 – ON。这将使用无损压缩优化您的图像。
- 保留EXIF/XMP数据 – OFF。默认情况下启用此设置。但是，保留EXIF/XMP数据可能会增加优化图像的大小。因此，最好禁用此功能。
- 创建WebP版本 – ON。打开此功能将生成图像的.webp文件。这会导致更大的尺寸减少高达30%，从而加快您的网站加载时间。
- 图像WebP替换 – ON。如果您启用了之前的设置，您还应该打开此选项，因为它会将.jpg和.png图像替换为.webp文件。
- 要替换的WebP属性。控制要替换为.webp的图像格式。只需在框内每行输入一个图像属性。
- 用于额外srcset的WebP – ON。它可以将带有srcset元素的自定义代码作为.webp版本提供服务。
- WordPress图像质量控制。默认图像质量应该可以正常工作。您可以根据需要调整设置，但请记住将值保持在100以下。
页面优化

设置图像优化设置后，下一步就是调整页面优化功能。如果不这样做，可能会导致加载时间变慢和页面得分变差。

幸运的是，在页面优化方面，LiteSpeed Cache插件提供了多种选项来提高您的WordPress网站性能。此页面包含优化HTML、CSS和JS文件的最重要设置。

页面优化页面有几个部分——我们将概述每个部分及其功能。

CSS设置
- CSS最小化 – ON。此设置会去除不必要的元素，例如CSS文件中的多余空格和换行符。
- CSS合并 – OFF。启用此选项将提示系统将所有单独的CSS文件合并到一个CSS文件中。但是，除非您有额外的空间，否则我们建议禁用它，因为此功能会占用资源。
- 生成UCSS – OFF。此设置与CSS合并功能一起使用。因此，如果您决定禁用之前的功能，您还应该关闭此设置。
- UCSS内联 – OFF。它通过将UCSS与HTML内联存储来减少额外的CSS文件加载。此功能还可以与CSS合并协同工作，因此只有在您打开之前的设置后才能启用它。此外，启用此功能将绕过Load CSS Asynchronously选项。
- CSS结合外部和内联 – OFF。此选项有助于将外部CSS文件与带有HTML内联元素的文件结合起来。为避免错误，请使用CSS合并启用此选项。
- 异步加载CSS – OFF。启用此选项可让您的CSS和HTML元素同时加载。但是，它们可能会在没有格式化的情况下加载。这可能会导致布局偏移或无样式内容 (FOUC) 的闪现。
- CCSS每个URL – OFF。关闭此功能将为每个文章类型而不是单个页面生成关键CSS。这将节省CCSS配额和磁盘空间。
- 内联CSS异步库 – ON。此选项通过内联异步CSS库来避免渲染阻塞。
- 字体显示优化。保留默认值，因为修改此设置可能会导致FOUC问题。
JS设置
- JS最小化– ON。它删除了用于JS优化的不必要脚本。
- JS合并 – OFF。这会将所有单独的JS文件编译成一个文件。
- JS结合外部和内联 – OFF。此功能的工作方式类似于合并的CSS外部和内联选项。仅当您还打开了先前的功能时才启用此功能。
- 加载JS延迟 – 取决于. 在调整此选项之前，请进行一些测试，因为结果可能会有所不同。如果选择Deferred，系统将在HTML之后立即加载JS。同时，延迟选项仅在系统检测到用户活动时才会启动。
HTML设置
- HTML缩小 – ON。删除HTML代码中不必要的字符。
- DNS预取。在访问者请求之前对列出的域进行DNS解析，从而减少页面加载时间。这对于加载外部链接很有用，例如AdSense或Facebook。
- DNS预取控制 – ON。如果您在之前的设置中添加链接，此功能将自动预取列出的DNS以及您的帖子和页面中的所有URL，包括CSS、JavaScript和图像。
- HTML延迟加载选择器。通过在提供的字段中每行添加一个来指定要延迟加载的类或ID。
- 删除查询字符串 – OFF。此选项通常不会直接影响您网站的性能，因此将其关闭应该没问题。
- 异步加载Google字体 – OFF。它异步加载Google字体，同时保持其他CSS元素不变。但是，我们建议禁用此选项，因为大多数Google字体已经缓存在访问者的浏览器中。
- 删除谷歌字体 – ON。仅当您在本地存储字体并且不希望在您的WordPress站点上加载任何第三方字体时才启用此设置。
- 删除WordPress表情符号 – ON。激活此功能将阻止系统加载WordPress.org表情符号并改为加载默认表情符号。
- 删除Noscript标签 – OFF。保持此选项打开有助于确保与所有浏览器的兼容性，包括旧版本。
媒体设置
- 延迟加载图像 – ON。此选项允许系统延迟加载您网站上的图像。虽然这样做可以加快加载时间，但可能会影响用户体验。
- 基本图像占位符。当您启用延迟加载时，将显示一个灰色图像占位符。但是，您也可以通过定义图像的base64并将其添加到字段来自定义它。使用在线工具找出图像的base64。
- 响应式占位符 – ON。此选项使您的图像占位符能够适应图像的尺寸，从而减少布局重组。
- 响应式占位符SVG。指定要用作占位符图像的SVG文件。系统会自动将其转换为base64占位符。
- 响应占位符颜色。默认值工作正常。或者，通过移动颜色选择器自定义颜色。
- LQIP云生成器 – OFF。启用此功能将生成一个低质量的图像占位符，在加载时显示图像的模糊版本。如果您喜欢使用纯色作为占位符，请关闭此设置。
- LQIP质量。定义LQIP的质量。取值范围为1到20，数值越高，分辨率越高。但是，将其设置为较大的值可能会增加加载时间。
- LQIP最小尺寸。LQIP只会出现在与设置中指定的尺寸相同的图像上。它不会加载到具有较小高度和宽度的图像上。
- 在后台生成LQIP – ON。开启此选项允许系统通过基于cron的队列在后台加载LQIP。将其关闭可能会增加您的加载时间。
- 延迟加载帧 – ON。它的工作原理类似于延迟加载图像。此功能有助于延迟加载帧，例如地图和视频。
- 添加缺少的尺寸 – ON。为您的图像设置定义的宽度和高度，并帮助LiteSpeed Cache插件自动添加缺少的图像尺寸。此设置仅在图像延迟加载打开时有效。
- 内联延迟加载图像库 – ON。启用此功能有助于提高您的页面得分。
媒体除外

这些设置将排除某些图像被延迟加载。排除首屏图像（例如徽标和背景图像）可以改善用户体验。这是因为您希望这些元素在页面的其余部分之前加载。

要从延迟加载中排除媒体，只需相应地在提供的字段中填写信息。例如，按类和父类名称排除图像。

本土化
- Gravatar缓存 – ON。这允许系统在本地存储gravatar。这对于有很多带有gravatar的评论的WordPress网站最有效。
- Gravatar缓存Cron – ON。如果您启用了上一个选项，您还应该启用此选项以通过cron作业刷新gravatar缓存。
- Gravatar缓存TTL。定义gravatar的缓存时间。默认值应该可以正常工作。但是，您可以自定义此值，只要它高于3600秒即可。
Tuning

本节中的所有设置都用于排除特定元素（例如CSS、JS和URL）被缩小和组合。

通常，除非在最小化或合并CSS/JS后在源代码中发现不寻常的文件，否则您不必过多地调整这些设置。在这种情况下，您可以相应地在提供的字段中列出文件。

完成配置设置后，请务必点击Save Changes。

4.设置QUIC.cloud CDN（可选）

QUIC.cloud是LiteSpeed Technologies的内容交付网络，提供动态缓存。该CDN使用世界各地的服务器来缓存网站内容。每当访问者发出请求时，服务器将从最近的服务器位置获取资源。

将QUIC.cloud CDN与LiteSpeed Cache的缓存功能配对可以大大提高您的页面速度。本节将说明激活此内容交付网络的步骤。

为此，首先为WordPress设置Cloudflare。这样做可确保以最佳方式缓存您的所有网站内容——QUIC.cloud CDN将缓存所有动态页面，而Cloudflare CDN将处理静态内容。

在服务器上设置Cloudflare后，下一步就是获取域密钥。转到“General”页面，然后单击“Request Domain Key”按钮。

然后，等待系统处理您的请求。

刷新您的 WordPress 管理页面。该过程完成后，系统将自动填充域密钥。接下来，单击Link to QUIC.cloud按钮。

这将带您进入注册页面。继续相应地填写所有信息。

如果您还没有QUIC.cloud帐户，请注册一个新帐户。完成后，系统将向注册地址发送一封验证电子邮件。打开电子邮件并单击附加的链接。

如果您看到上面的消息，则您已成功将您的WordPress网站与QUIC.cloud CDN配对。现在，单击“我的仪表板”按钮返回。

尽管您已完成注册过程，但您仍需要正确配置DNS设置。为此，请导航到CDN部分并查找QUIC.cloud选项。

将其打开以启用QUIC.cloud CDN API功能。

接下来，使用Cloudflare详细信息配置QUIC.cloud。在此之前，请访问您的Cloudflare仪表板以获取全局API密钥。

现在您已经有了信息，只需相应地填写字段即可。

完成后，单击Save Changes。

5. 通过CDN获取静态内容（可选）

通过CDN获取静态内容可以降低您的网络延迟。这是因为CDN将跨全局缓存服务器复制请求最多的资源。每当访问者访问这些资源时，最近的服务器都会提供它们。

要从CDN获取静态内容，您需要创建一个提供资源的子域，例如- cdn.your-website.com。此子域需要与您的主域位于同一文件夹中。

此外，确保CDN子域运行良好至关重要。否则，您的静态资源将不会被加载，并且可能会破坏您的网站。

如果您确定子域工作正常，请为新创建的子域启用Use CDN Mapping选项：

现在我们已经完成了LiteSpeed Cache插件的配置，让我们看看下面的图表：

它们展示了三个测试网站在应用适当的LiteSpeed配置设置之前和之后的表现。

在应用图像和页面优化之前，投资组合网站在PageSpeed移动类别中仅获得45分。优化后，得分飙升至100分。同时，同样的变化将电子商务商店的得分从53分提高到99分。

在GTMetrix性能方面，博客网站的得分从84提高到100。

重要的！在为WordPress启用LSCache并应用图像和页面优化后，所有网站（博客、电子商务商店和投资组合网站）都显示出更好的结果。

LiteSpeed还能做什么？

配置完所有LiteSpeed Cache for WordPress插件设置后，系统应该可以正常运行。因此，几乎不需要进一步的缓存管理。但是，LiteSpeed提供了更多功能，可以根据需要进行调整。

以下部分将讨论LiteSpeed的数据库优化、爬虫和工具箱，以帮助您进一步提高网站性能，

数据库优化

Database部分提供的功能可帮助您更方便地在WordPress数据库中执行各种任务。这包括通过单击清除旧的帖子修订和删除pingback。

此外，DB Optimization Settings控制后期修订的数量，以清除和自动化该过程。

例如，如果您想为每个帖子保存两个较旧的修订，请将Revision Max Number值更改为2。同时，要在特定时期保留旧的帖子修订，请更改Revisions Max Age。

Crawler

LSCache插件包含一个Crawler功能，可以浏览您网站的后端，搜索过期页面并在此过程中刷新它们。它可以防止访问者看到任何未缓存的页面。

此功能默认禁用，需要从服务器端启用 – 您必须咨询您的服务器管理员或托管服务提供商。这是因为在没有足够服务器资源的情况下激活爬虫功能可能会对您网站的性能产生负面影响。

工具箱

使用LiteSpeed缓存工具箱部分手动配置您的缓存设置。它提供了更具体的缓存功能，从清除403错误页面到编辑.htaccess文件的路径。

尽管Purge选项卡包含简单的功能，但Edit .htaccess和Heartbeat等其他选项卡适用于高级用户。因此，最好保留这些设置的默认值或在进行任何更改之前咨询您的网络主机。

有关更多详细信息，让我们扩展每个部分的功能：
- 清除。此选项卡列出了不同的内容类型，供您有选择地清除。这些函数对于更改正在缓存的文件特别有用。这样，只有选定的文件会被清除，不会影响您的其余内容。
- 导入/导出。包括用于导出或导入各种LiteSpeed配置的工具。如果您正在试验您的站点并希望稍后恢复以前的配置，这些工具会派上用场。此外，您还可以将站点配置传输到本地文件并在另一个网站上使用。
- 查看 .htaccess。使用此选项卡中的可用工具直接编辑您的.htaccess文件，而无需配置FTP或SSH客户端。请记住，更改.htaccess文件可能会破坏您的网站。如果您不确定，请务必在进行任何更改之前咨询您的网络托管服务商。
- 心跳。WordPress Heartbeat API使您的浏览器能够使用AJAX调用与服务器通信。此功能允许您管理服务器负载。但是，在调整WordPress心跳间隔时要小心，因为它会占用大量CPU资源。
- 报告。如果您在使用LiteSpeed Cache插件时遇到问题，您可以通过按此选项卡中的发送到LiteSpeed按钮来发送报告。然后，系统会将您的环境报告副本发送给LiteSpeed团队。
- 调试设置。如果您想禁用LiteSpeed Cache插件来调试您的网站，请相应地使用此选项卡中提供的工具。
结论

Web缓存是提高网站性能的最有效和最有效的方法之一。如果实施得当，它可以加快加载时间并减少服务器负载。设置Web缓存的最简单方法是安装缓存插件。

LiteSpeed Cache是具有高级缓存技术的最佳WordPress插件之一。此外，与 LiteSpeed 服务器搭配使用时，其服务器级页面缓存可以有效提升性能。

在本文中，我们解释了为WordPress配置LiteSpeed Cache的最佳设置。尽管应用最佳设置会给您带来优化的性能，但如果您觉得这样做不自在，则无需调整默认设置。

我们希望本文能帮助您为WordPress配置LiteSpeed Cache并充分利用它。
2023年1月5日
如何优化WordPress网站的关键渲染路径
关键渲染路径是浏览器首先在屏幕上渲染页面所执行的一系列任务，即下载、处理并将HTML、CSS和JavaScript代码转换为实际像素并将它们绘制在屏幕上。

关键渲染路径优化是最小化浏览器执行序列的每个步骤所花费的时间的过程，优先显示与当前用户操作相关的内容。

此过程的大部分与无需向下滚动浏览器窗口即可看到的页面部分有关。该部分也称为“折叠上方（Above the Fold）”。为了更好的可用性，应该尽快渲染ATF，这可以通过至少减少网络往返次数来实现。渲染ATF所需的资源被认为是关键的，优化Above the Fold意味着将关键资源对首页渲染时间的影响降至最低。

在这篇文章中，我们将介绍关键渲染路径优化序列。
- 首先，我将概述浏览器呈现页面内容的任务。
- 接下来，我将剖析我们可以执行的最相关的操作来优化关键渲染路径。
- 最后，我将列出一些有用（且流行）的WordPress优化插件。
关键渲染路径序列

以下是浏览器为呈现页面而执行的一系列步骤：
- 首先，浏览器下载并解析HTML标记并构建DOM
- 然后它下载并处理CSS标记并构建CSS对象模型
- 它在渲染树中结合了渲染页面所需的DOM和CSSOM节点，渲染树是所有可见节点的树形结构
- 它计算页面上每个对象的尺寸和位置
- 最后，它在屏幕上绘制像素
DOM

正如Google的关键渲染路径优化指南中所解释的那样，浏览器按四步顺序构建文档对象模型：
- 首先，浏览器读取行字节并将它们转换为单个字符。
- 然后它将尖括号内的字符串转换为标记。
- 这些标记被转换为节点对象。
- 节点对象以树状数据结构链接，其中包含HTML内容、属性和节点之间的关系。这个结构就是文档对象模型。
这里需要注意的重要一点是浏览器是逐步构建DOM的。这允许我们通过创建高效的DOM结构来加速页面的渲染。

DOM结构

CSSOM

当解析器遇到一个引用外部CSS样式表的标签link时，它会阻止解析并发出对该资源的请求。收到CSS文件后，浏览器开始构建CSS节点的树形数据结构。
- 浏览器读取 .css 文件的行字节并将它们转换为单个字符
- 它将大括号内的字符串转换为标记
- 这些标记被转换为节点对象
- 节点对象以树状数据结构链接，其中包含每个节点的CSS属性以及节点之间的关系。这种结构就是CSS对象模型( CSSOM )。
与DOM构建不同，CSSOM构建不是增量的。浏览器不能使用样式表的一部分，因为样式可以在同一个样式表中进行细化和重新声明。出于这个原因，浏览器会阻塞渲染过程，直到它接收并解析所有CSS。这意味着CSS是渲染阻塞的。

CSSOM结构

渲染树

浏览器将DOM和CSSOM组合到渲染树中，最终的树结构包含用于将页面渲染到屏幕的所有节点和属性。

渲染树仅包含渲染页面所需的节点。结果，忽略了不可见的节点。

浏览器使用渲染树计算节点尺寸和位置作为绘画过程的输入。

渲染树结构

布局和绘制

在布局阶段，浏览器计算渲染树每个节点的尺寸和位置。浏览器从根开始遍历渲染树，并在此阶段生成一个盒子模型。该信息最终用于将渲染树的每个节点转换为屏幕上的实际像素。

关键渲染路径优化

运行整个过程所需的时间是可变的。这取决于文档大小、请求数量、应用的样式、用户设备等。最相关的Google建议之一是优先考虑可见内容以尽可能快地呈现“首屏”，并提供两个主要规则跟随：
- 构建HTML以首先加载关键的首屏内容
- 减少HTML、CSS和JS资源使用的数据量
正如Google的PageSpeed指南中所解释的那样，如果渲染ATF所需的数据量超过了初始拥塞窗口 (14.6kb)，则需要在服务器和浏览器之间进行额外的网络往返。在具有高延迟的移动网络上，这将显着延迟页面加载（阅读有关延迟的更多信息）。浏览器以增量方式构建DOM，允许我们通过构建HTML以首先加载首屏并延迟页面的其余部分来减少渲染ATF所需的时间。

折叠上方的内容因用户设备而异

但是优化并不会随着构建有效的DOM结构而结束。相反，它是一个涉及整个关键渲染路径序列的改进和测量过程。

让我们深入研究。

最小化资源维度

我们可以通过压缩、压缩和缓存HTML、CSS和JavaScript资源来减少浏览器要下载的数据量：
- 最小化是从源代码中删除不必要的字符（如注释和空格）的过程。这些字符在开发中很有帮助，但它们对于渲染页面没有用。
- 压缩是Web服务器和客户端减小传输文件大小以提高速度和带宽利用率的能力
- 缓存：每个浏览器都带有一个HTTP缓存的实现。我们需要做的是确保每个服务器响应都提供正确的HTTP标头，以指示浏览器何时以及应缓存请求的资源多长时间
优化CSS

现在我们知道浏览器必须等到它获取并处理CSS代码才能呈现页面（CSS是render-blocking）。但并不是所有的CSS资源都是渲染阻塞的。

CSS可以限定在特定条件下，我们可以使用媒体类型和媒体查询对其进行优化。如果您在屏幕上查看网页，浏览器将发送打印媒体类型请求，但不会阻止此资源的页面呈现。获取以下link标签：

<link href=“style.css” />

<link href=”style.css” />
```
<link href="style.css" />
```
此标记的引用样式表适用于任何条件，独立于当前媒体类型、屏幕分辨率、设备方向等。这意味着CSS资源始终是渲染阻塞的。

幸运的是，我们可以在特定条件下发送对CSS资源的请求。我们可以将打印样式移动到一个单独的文件中，并使用media属性告诉浏览器指定的样式表只应在打印页面时加载，并且不需要阻塞屏幕上的呈现：

<link href=“print.css” media=“print” />

<link href=”print.css” media=”print” />
```
<link href="print.css" media="print" />
```
浏览器仍会下载print.css样式表，但不会阻止呈现。此外，浏览器必须为主要的CSS文件下载更少的数据，这将有助于我们加快下载速度。我们可以在link属性上指定任何媒体查询，因此我们可以将CSS拆分为多个文件并有条件地加载它们：

<link href=“style.css” media=“screen” />

<link href=“portrait.css” media=“orientation:portrait” />

<link href=“widescreen.css” media=“(min-width: 42rem)” />

<link href=”style.css” media=”screen” />
<link href=”portrait.css” media=”orientation:portrait” />
<link href=”widescreen.css” media=”(min-width: 42rem)” />
```
<link href="style.css" media="screen" />
<link href="portrait.css" media="orientation:portrait" />
<link href="widescreen.css" media="(min-width: 42rem)" />
```
确保您的样式实际上是呈现页面所必需的。您可以将适当的值添加到媒体标签属性并取消阻止呈现（如果不是）。

媒体类型和查询可以帮助我们加快页面渲染，但我们可以做的更多。
- 最小化CSS：空白和注释只能帮助我们阅读CSS声明。通过从样式表中删除注释和空格，我们可以显着减少CSS文件的字节数。
- 合并多个CSS文件：这将减少HTTP请求的数量。此操作在移动连接中非常重要，其中性能受到高延迟的影响（阅读更多关于延迟的内容）。
- 内联关键CSS：某些样式很关键，因为它们需要呈现页面的首屏。最好始终将内联关键样式直接考虑到HTML标记中，以避免额外的HTTP请求。但是避免内联大型CSS文件，因为这可能需要额外的往返来呈现首屏，从而导致PageSpeed警告。
加快布局和渲染过程

浏览器布局文档所花费的时间取决于要布局的DOM元素的数量以及这些布局的复杂性。
- 如果你有很多DOM元素，浏览器可能需要很长时间来计算它们的位置和尺寸：尽可能避免布局。
- 更喜欢新的Flexbox模型，因为它比旧的Flexbox和浮动布局更快。
- 避免使用JavaScript强制同步布局。
计算元素大小和位置需要时间并降低性能。使DOM尽可能简单并避免使用JavaScript来预测布局过程将有助于浏览器加速页面呈现（阅读更多关于布局优化的内容）。

与Layout紧密相连的是Paint过程，这可能是关键渲染路径序列中最耗时的阶段。每当您更改元素或任何非几何属性的布局时，浏览器都会触发绘制事件。在这个阶段使事情尽可能简单可以帮助浏览器加快绘画过程。例如，需要计算的box-shadow属性比纯边框颜色需要更长的时间来绘制。

Chrome DevTools允许识别正在绘制的页面部分

优化页面绘制过程可能并不容易，您应该使用浏览器的开发工具来测量浏览器触发每个绘制事件所需的时间。您可以在Google的渲染性能指南中阅读有关此主题的更多信息。

使JavaScript解除阻塞

当浏览器遇到脚本标签时，它必须停止解析HTML代码。内联脚本在文档中的确切位置执行并阻止DOM构建，直到JS引擎完成运行。换句话说，内联JavaScript会显着延迟页面的初始呈现。但是JavaScript也允许操作CSS属性，因此浏览器必须暂停脚本执行，直到它完成下载和构建CSSOM。这意味着JavaScript是解析器阻塞的。

在外部JS文件的情况下，解析器还必须等到从缓存或远程服务器获取资源，这可能会大大减慢第一页渲染的时间。话虽如此，我们可以做些什么来最小化浏览器加载和执行JavaScript所花费的时间呢？
- 异步加载JavaScript：script标签的布尔async属性指示浏览器异步执行脚本，如果可能，不阻塞DOM构造。浏览器发送脚本的HTTP请求并继续解析DOM。此外，该脚本不会阻塞CSSOM构建，这意味着它不会阻止关键渲染路径（有关脚本标签属性的更多信息，请参阅MDN 文档）
- Defer JavaScript：script标签的布尔defer属性告诉浏览器在解析文档之后、触发事件DOMContentLoaded之前执行脚本。如果src属性不存在，则不得使用此属性，即内联脚本（在Mozilla Hacks上阅读更多信息）
- 推迟内联 JavaScript：许多脚本不操作DOM或CSSOM，因此没有充分的理由阻塞解析。不幸的是，我们不能为内联脚本使用async和defer属性，所以在文档加载后加载它们的唯一方法是将它们移动到底部。优点是内联脚本不需要额外的HTTP请求。但是，在多个页面中使用内联脚本会导致代码冗余。
总结优化规则

这是很多东西，不是吗？让我们喘口气，写下到目前为止描述的优化操作列表。
- 最小化、压缩和缓存HTML、CSS和JavaScript资源。
- 尽量减少使用渲染阻塞资源（特别是CSS）
  - 在link标签上使用媒体查询
  - 拆分样式表和内联关键CSS
  - 合并多个CSS 文件
- 尽量减少使用解析器阻塞资源 (JavaScript)
  - 在脚本标签上使用defer属性
  - 在脚本标签上使用async属性
  - 内联JavaScript并将script标签移动到文档底部
现在我们知道了关键渲染路径优化的基本概念，我们可以看看一些WordPress流行的优化插件。

优化WordPress中的关键渲染路径

WordPress用户可以利用几个插件，这些插件几乎涵盖了优化过程的各个方面。您可以安装一个功能齐全的插件或一次安装多个插件，每个插件都提供特定的优化功能。

W3 Total Cache

这个插件几乎涵盖了关键渲染路径优化过程的每个阶段。乍一看，插件配置可能会让人不知所措。不过，一旦您更加熟悉关键渲染路径序列，您将能够利用强大的性能工具集。

WordPress插件W3 Total Cache

以下是一些插件功能的列表：
- HTML（文章和页面）、CSS和JavaScript缓存在内存、磁盘或CDN中
- 缓存提要、搜索结果、数据库对象、WordPress对象和片段
- HTML（文章和页面）缩小
- JavaScript和CSS缩小
- 使用async和defer进行JavaScript优化
- 使用缓存控制、未来过期标头和实体标签的浏览器缓存
- HTTP (gzip)压缩
- WordPress仪表板上的Google PageSpeed结果
这些只是W3TC众多功能中的一小部分。在本详细指南中，您可以阅读有关插件的所有功能、设置和选项的更多信息。

W3 Total Cache-JavaScript最小化设置

WP Super Cache

WP Super Cache是另一个流行的网站性能插件。

WordPress插件-WP Super Cache

它具有许多优化功能，但不如以前的W3 Total Cache全面，并且对于新手和中级用户来说可能看起来更实惠。

WordPress Super Cache测试器

基本上，它提供缓存功能和HTTP压缩，但缺乏资源压缩和JavaScript优化async以及defer属性。然而，超过一百万的活跃安装证明该插件值得一试。

WP Super Cache中的GZIP选项

Autoptimize

拥有超过1,000,000次活动安装，Autooptimize是最受欢迎的免费缩小插件之一。

WordPress插件Autoptimize

它带有一个选项页面，分为几个部分，站点管理员可以在其中分别配置HTML、CSS和JavaScript缩小。

Autoptimize-HTML优化选项

您还可以聚合独立的脚本或样式表并为特定资源设置例外。此外，Autooptimize允许在磁盘或CDN上缓存缩小的资源，并将优化的资产保存为静态文件。要为您的WordPress网站找到最佳设置，您可以在此处遵循我们详细的Autoptimize指南。

Above the Fold Optimization

这个插件为Above the Fold优化提供了一个全面的工具集。它是专业人士和高级用户在Google PageSpeed测试中获得满分的工具。

WordPress插件Above the Fold Optimization

以下是一些最有趣的功能：

关键的CSS工具：
- 条件CSS加载
- 通过文本编辑器进行关键CSS管理
- Gulp.js关键CSS创建者
- 关键CSS质量测试
CSS负载优化：
- 异步加载CSS
- 从HTML中提取CSS
- 外部样式表缓存
JS加载优化：
- 异步JS加载
- localStorage缓存
- 延迟加载JavaScript
- 外部脚本缓存
此外，该插件还支持Google的Progressive Web App和Google Web Font优化。下面几个优化插件，您也可以尝试一下：
Swift Performance

Swift Performance是您可能想要查看的另一个插件。这个高级插件可以帮助提高您的性能分数，并且专门开发用于帮助您尝试并实现Google PageSpeed Insights满分。

WordPress插件Swift Performance

它的一些主要功能包括：
- 您不仅可以缩小和合并CSS和javascript文件，还可以为您的页面动态创建关键的CSS。
- 智能缓存，以及AJAX和动态请求。
- 内置无损图像压缩。
- CDN支持。
您将在如何移除阻塞渲染的JavaScript和CSS中更深入地了解WordPress优化插件。

小结

关键渲染路径优化是一个改进和衡量的过程，需要清楚地了解浏览器执行的每项任务，以将代码转换为像素并在屏幕上渲染页面。您可以在Google的优化指南中了解有关关键渲染路径的更多信息。

下面文章清单涵盖性能优化的多个方面，对WordPress性能优化有需求的站长可以进一步阅读：
2023年1月5日
如何在WordPress中设置W3 Total Cache连接CloudFlare CDN？
W3 Total Cache (W3TC) 是您的WordPress网站的顶级缓存插件之一。它将通过流行服务的CDN支持帮助您进行开箱即用的缓存和缩小。另一方面，CloudFlare是Bluehost和SiteGround等大多数托管公司提供的免费CDN。结合缓存和 CDN 的强大功能来提高站点的速度是一个好主意。

在本文中，让我们讨论如何在WordPress站点中设置W3TC以连接CloudFlare CDN。
需要准备什么？

您需要以下东西才能将CloudFlare和W3TC连接起来：
- 对WordPress管理面板的管理员访问权限。
- W3 Total Cache插件安装在您的站点上。查看我们关于如何在您的站点上设置W3 Total Cache的文章。
- 免费或高级CloudFlare帐户。
配置W3TC以连接CloudFlare CDN

W3 Total Cache不提供CloudFlare CDN设置的任何默认设置。事实上，它推荐StackPath的MaxCDN，这是WordPress用户的另一个流行的CDN选项。您必须在W3TC中启用扩展才能使用CloudFlare。

安装CloudFlare扩展

登录到您的WordPress管理面板并导航到“Performance > Extensions”部分。在这里，您将找到W3TC的所有可用扩展并激活CloudFlare扩展。

为W3TC激活CloudFlare扩展

激活后，单击“Settings”链接转到CloudFlare设置。首先，您应该将您的CloudFlare帐户与W3TC连接并验证连接。

使用W3TC对CloudFlare进行身份验证

单击“Authorize”按钮，系统将提示您输入CloudFlare帐户中的API密钥。

在CloudFlare帐户中获取API密钥

登录到您的CloudFlare帐户并导航到您的帐户设置。向下滚动到“API Key ”部分，然后单击“View API Key ”按钮对“Global API Key ”。将API密钥复制到剪贴板。

从CloudFlare获取Global API Key

连接CloudFlare和W3TC

现在回到WordPress管理面板并在W3TC授权框中输入API密钥。

在W3TC授权框中输入CloudFlare API Key

单击“Next”按钮，您应该会看到该区域作为您在CloudFlare帐户中激活的域名。

在W3TC中查看区域信息

现在您已成功连接CloudFlare和W3TC。点击“Next”按钮进入完整设置页面。

配置CDN设置

CloudFlare中的所有现有设置都应默认显示。您还将获得W3TC的其他设置以优化缓存。在这里，我们将展示一些您应该注意的重要设置。

通用设置

在“General”部分下，您可以启用缓存时间和页面缓存选项。缓存时间是CloudFlare日期应存储在W3TC缓存中的时间（以分钟为单位）。页面缓存选项允许您在站点上的页面内容发生更改时刷新CloudFlare缓存。

常规CloudFlare设置缓存设置

在“CloudFlare：Caching”部分，您可以配置缓存级别、浏览器缓存时间等选项。

W3TC中的CloudFlare缓存设置内容处理设置

在“CloudFlare：Content Processing”部分，您可以启用HTML、JS和CSS资源的最小化。另一个重要的选项是启用“Rocket Loader ”。这是一个异步加载JavaScript文件以提高页面加载速度的性能增强器。

在W3TC中启用Rocket Loader SSL设置

如今， SiteGround和Bluehost等所有托管公司都提供预装在WordPress安装上的Let’s Encrypt SSL。CloudFlare帐户和主机帐户中的SSL设置可能会干扰并产生问题。因此，请确保在此处设置正确的SSL设置。还。只有高级帐户持有人才能从W3TC设置中设置SSL级别，即使您的主机支持使用CloudFlare的SSL。

使用CloudFlare配置SSL

配置设置完成后保存所有更改。请记住，CloudFlare就像您的服务器和用户之间的中介。激活CloudFlare需要更改DNS，这可能需要48小时才能正确传播。尤其是，使用CloudFlare进行DNS传播对于具有SSL证书的站点将需要很长时间。您的站点将关闭，直到DNS更改完全传播。

小结

尽管有许多可用于WordPress的CDN服务，但CloudFlare是最简单的解决方案之一。它可以通过许多托管计划免费使用，并且设置非常简单。您需要更改名称服务器并在W3 Total Cache等插件中链接您的帐户。您可以从插件配置所有设置并增加您网站的内容交付。
2023年1月5日
如何在WP Rocket插件中使用安全模式？
顾名思义，安全模式表示有助于在不完全禁用功能的情况下解决问题。例如，您可以在PC中以安全模式打开Word和Excel文档，通过禁用扩展程序和其他不必要的功能来打开应用程序。现在越来越流行，像WP Rocket这样的WordPress插件也提供安全模式。

在本文中，我们将解释如何在WP Rocket中启用安全模式以及如果这样做会发生什么。

排查WP Rocket问题

作为一个强大的缓存插件，WP Rocket可能会破坏您的网站布局或禁用某些功能。当您启用合并JavaScript、删除未使用的CSS等设置时会发生这种情况。每当您想确认问题是由于WP Rocket缓存引起的，您可以轻松绕过WP Rocket缓存来检查您网站上未缓存的页面。好的部分是您可以在不停用插件的情况下执行此操作。

但是，确认问题后，唯一的选择是停用插件或逐一禁用功能以缩小问题范围。为了使此故障排除更容易并最大程度地减少工作，WP Rocket引入了一项称为安全模式的新功能。使用此功能，您可以在不停用插件的情况下禁用整个站点上的某些功能。

在WP Rocket中启用安全模式
- 当您遇到问题时，请转到仪表盘中的“插件 > 已安装插件”部分。
- 找到WP Rocket插件，然后点击插件名称下方的“停用”链接。
停用WP Rocket插件
- 如果您使用的是3.11.0.3之前的版本，您将看到如下消息。
旧插件版本中的消息
- 这意味着您必须首先将插件更新到3.11.1或更高版本。之后，您将在停用时看到以下消息。
- 现在，选择“Yes, apply Safe Mode”选项，然后单击“Confirm”按钮。
- 您已在WP Rocket 插件中启用安全模式并继续检查问题是否已解决。
WP Rocket中的安全模式选项

安全模式会发生什么？

确认安全模式选项时，WP Rocket将禁用以下功能。
- 在“Media > Lazy Load”下的图片、iframe和视频的延迟加载选项将禁用。
- 所有CSS和JavaScript优化，如“File Optimizations”下的最小化、合并、关键CSS生成、删除未使用的CSS、延迟JS会被禁用。
- 在“CDN”下“Enable Content Delivery Network”选项将禁用。
禁用所有这些功能后，您应该能够使站点恢复工作状态。之后，您可以一一启用这些选项并检查哪个选项造成了问题。

如何禁用安全模式？

这一点很重要，因为WP Rocket不提供任何禁用安全模式的选项。由于它只是禁用一组选项，因此您需要重新启用这些设置以禁用安全模式。这意味着您应该在使用安全模式之前记住之前的设置。否则，您可能会对您之前是否使用过某个功能感到困惑。在这种情况下，我们不建议使用安全模式，除非您知道自己的设置或使用WP Rocket进行了登台/本地主机设置。

小结

在完全停用插件之前，您可以轻松地在WP Rocket中启用安全模式。它可以帮助您在不丢失缓存功能的情况下恢复您的站点。但是，您必须逐个启用这些功能才能恢复以前的手动设置。
2023年1月5日
如何使用WP Rocket插件正确设置Cloudflare？
WP Rocket是WordPress网站最简单有效的缓存插件之一。它提供一键式功能，用于删除未使用的CSS、延迟JavaScript和优化缓存以加速您的网站。另一方面，Cloudflare是一项免费的CDN服务，可从最近的位置向用户访问者提供内容。将WP Rocket缓存的强大功能与Cloudflare CDN相结合以提高您网站的性能是一个好主意。

Rocket CDN与Cloudflare

WP Rocket还提供自己的RocketCDN，您可以将CDN部分集成到WP Rocket设置中。RocketCDN来自StackPath，您每月需要7.99美元才能开始使用这项仅限高级服务。要使用RocketCDN，您需要通过在您的DNS区域中设置CNAME来创建CDN重定向，并在CDN设置页面添加CNAME。但是，Cloudflare是一个免费的CDN，您无需创建CNAME记录即可在WordPress中使用Cloudflare。

来自WP Rocket的RocketCDN

您需要更改指向Cloudflare服务器的域的名称服务器，并通过它们路由整个流量。这有助于保护您的网站并改善向用户的内容交付。要将Cloudflare与WP Rocket一起使用，您需要启用附加组件且无需使用CDN部分。

WP Rocket Cloudflare附加组件

要将WP Rocket与Cloudflare一起使用，您必须启用默认情况下随WP Rocket插件提供的附加组件。将Cloudflare CDN与WP Rocket一起使用时，不必使用该插件。但是，该插件有助于优化您的Cloudflare帐户中的设置，以便通过缓存正确使用CDN设置。

启用Cloudflare插件

登录到您的WordPress管理面板并导航到“Setting > WP Rocket”部分。导航到“附加组件”菜单并向下滚动到“Rocket Add-ons”部分。此时，WP Rocket提供了两个附加组件——Cloudflare和Sucuri。默认情况下，所有加载项状态都设置为关闭。通过单击“Add-ons status”按钮打开Cloudflare加载项，如下所示。

WP Rocket插件中的Cloudflare插件

使用WP Rocket设置Cloudflare

启用插件后，单击“Modify Options”按钮查看配置设置。有三个部分可用于优化Cloudflare的设置。
- Cloudflare凭据
- Cloudflare设置
- Cloudflare缓存
相关文章：
- 使用W3 Total Cache插件设置Cloudflare
- WordPress网站的Cloudflare设置初学者指南
Cloudflare凭证

要将WP Rocket与Cloudflare一起使用，您需要允许插件访问您的Cloudflare帐户。这可以通过添加Cloudflare全局API密钥、区域ID以及您的登录电子邮件地址来完成。

连接Cloudflare和WP Rocket

转到您的Cloudflare帐户并选择您的站点以查看仪表盘。您将登陆“Overview”部分并向下滚动以查看“API”部分（这将显示在右侧边栏上）。您可以在此处找到Zone ID，将其复制并粘贴到您的WP Rocket Zone ID文本框中。之后单击显示在您的帐户ID下方的“Get your API token”链接。

获取Cloudflare区域ID

这将带您进入帐户资料中的“API Tokens”部分。您可以在“API Keys”部分看到“Global API Key”和“Origin CA Key”。单击Global API Key选项的“View”按钮。

在Cloudflare中获取Global API Key

您需要输入您的Cloudflare帐户密码才能查看Global API Key。因此，输入您的密码，然后单击弹出窗口中的“View”按钮。

输入Cloudflare密码

现在，您将获得您的全局API密钥，您可以将其复制并粘贴到WP Rocket的“Global API Key”文本框中。

复制全局API密钥

注意：对于帐户电子邮件，请确保向您提供Cloudflare帐户电子邮件，而不是WP Rocket或WordPress管理员电子邮件地址。

Cloudflare设置

下一部分，您将拥有如下所示的三个选项。关闭开发者模式和相关协议选项并启用“Optimal settings”选项。

Optimal Cloudflare设置

开发模式将在您的Cloudflare帐户中打开开发模式并禁用缓存/缩小设置。您可以使用开发模式立即测试更改，而不会干扰Cloudflare缓存。否则，只需禁用此选项即可。启用最佳设置以自动打开Cloudflare中的以下功能：
- 自动缩小 – 启用 CSS、JSS和HTML最小化选项。
- 将浏览器缓存TTL从默认值4小时更改为1年。
- 禁用WP Rocket功能。
- 使缓存级别达到标准。
Cloudflare最佳设置

相对协议选项会将所有静态文件（如图像）的URL更改为使用//而不是http://或https://。WP Rocket建议仅在Cloudflare中的SSL状态设置为灵活时才使用此选项。您可以在Cloudflare帐户仪表盘的“SSL/TLS > Overview”部分下查看SSL/TLS状态。

在Cloudflare中检查SSL状态

如果您使用完整或严格模式，则禁用相关协议选项。

Cloudflare缓存

这是最终设置，只有当您想要删除Cloudflare缓存的内容时，才可以单击“CLEAR ALL Cloudflare CACHE FILES”。这与Cloudflare帐户的“Caching > Configuration”部分下的“Purge Everything”选项相同。

从WP Rocket清除所有Cloudflare缓存

完成设置后，单击“Save Changes”按钮以连接WP Rocket和Cloudflare。您将在您的Cloudflare帐户中看到更改的最佳设置摘要，并且WP Rocket将开始预加载页面。

Cloudflare设置状态

小结

如您所见，WP Rocket通过附加组件简化了Cloudflare设置。您只需连接您的Cloudflare帐户并启用最佳设置即可无缝使用CDN。如果您的网站出现问题，您可以禁用该插件并直接在Cloudflare帐户中进行更改。
2023年1月5日
如何实现WordPress评论延迟加载（懒加载）？
WordPress带有默认的评论系统，您可以使用它在您的博客上进行互动讨论。您可以选择启用或禁用站点范围内的评论以及单个博客文章。当您对文章有大量评论时，用户需要滚动浏览整个评论部分才能到达页脚。

在本文中，我们将解释如何在WordPress中延迟加载评论以仅在需要时加载它们。

懒加载评论

延迟加载是仅在有用户交互时才加载内容的功能。虽然WordPress用户主要使用延迟加载图像，但您也可以使用此功能进行评论。以下是您需要在WordPress网站中延迟加载评论的一些原因。
- 评论仅在您的博客文章底部可用，因此在初始页面加载期间不需要加载它们。
- 长长的评论列表会增加DOM元素，从而影响您网站的页面加载速度。
- 当用户不想发表评论时，评论表单可能会影响用户在您网站上的体验。
- 冗长的评论列表会在移动设备上占据很大的空间，这是可以避免的。
- 默认情况下，评论将显示gravatar图像，如果您从设置中禁用gravatar，大多数主题将无法正确对齐评论部分。由于gravatar图片是从第三方网站加载的，因此会影响您网站的速度。
总之，在需要时隐藏和加载评论表单将改善页面加载时间和用户体验。由于这些是谷歌搜索算法中的排名因素，您可以通过延迟加载评论来提高排名。

评论分页的默认选项

WordPress 在“设置 > 讨论”部分提供了一些默认设置来管理评论。例如，您可以设置在博客文章中显示的最大评论数。当评论数量超过设置限制时，这将创建分页评论。但是，它并没有提高多少速度，因为评论表单将在初始页面加载期间加载。

在WordPress仪表盘中启用分页评论

对于gravatar图片，您可以通过WP Rocket或Perfmatters等插件使用图片延迟加载功能。此外，大多数免费缓存和优化插件都提供图像延迟加载功能，您可以使用它来延迟加载gravatar图像。

在WordPress中延迟加载评论

懒加载评论可以解决很多速度问题，包括懒加载gravatar图片。为此，您必须使用延迟加载评论插件并选择方法。登录到您的WordPress仪表盘部分后，转到“插件 > 安装插件”区域。搜索“lazy load comments”并向下滚动以找到lazy load comments插件。

单击“立即安装”按钮，然后单击“启用”按钮开始在您的站点上使用该插件。

安装lazy load comments插件

自定义评论延迟加载选项

该插件提供了一种简单的设置来决定您希望如何延迟加载评论部分。转到“设置 > 讨论”部分并向下滚动到底部。在“头像”部分上方，您可以找到“Lazy Load Comments”的新选项。

延迟加载评论设置

单击“lazy load comments”的下拉菜单以找到三个可用选项。

选择滚动延迟加载评论
- On Scroll – 当用户到达页面上的评论部分时，延迟加载滚动评论。这是一个默认选项，类似于延迟加载图像。
- On Click – 这将显示“Load Comments”按钮，用户可以单击它以显示评论和表单部分。
- No Lazy Load – 这将禁用延迟加载功能，因此不要选择此选项。
我们建议选择“On Click”选项以显示一个按钮，该按钮可以通过两种方式提供帮助。首先是只有感兴趣的用户想要留下或阅读评论才会点击按钮。其次，它可以通过隐藏评论和表单来节省空间，从而改善手机上的用户体验。选择选项后，向下滚动并单击“保存更改”按钮以在您的站点上应用设置。

在您的网站上进行测试

我们建议您在测试或临时站点中测试延迟加载按钮。这是因为按钮的外观取决于您主题的样式，并且大多数主题不支持正确的样式。下面是“Load Comments”按钮在默认的WordPress主题二〇二二中的外观。单击按钮时，您将看到一个旋转的加载程序，然后将出现评论部分。

在默认WordPress主题中加载评论按钮

这是按钮在我们测试过的第三方主题之一上的外观。它只是显示为没有清晰可见性的文本。

加载评论按钮未对齐

如果您的主题没有正确显示“Load Comments”按钮，您需要使用自定义CSS调整填充和边距细节。该插件使用llc_comments_button的CSS类ID来定义按钮样式。例如，下面是我们用来对齐breek主题上的按钮的CSS代码。

#llc_comments_button {

padding: 15px;

margin: 100px;

border-radius: 5px;

font-size: 18px;

background: rgb(255 241 118);

}

#llc_comments_button {
padding: 15px;
margin: 100px;
border-radius: 5px;
font-size: 18px;
background: rgb(255 241 118);
}
```
#llc_comments_button {
padding: 15px;
margin: 100px;
border-radius: 5px;
font-size: 18px;
background: rgb(255 241 118);
}
```
您可以在浏览器中使用检查选项检查源代码，并在实时站点上调整填充、边距、边框半径和其他参数。

在浏览器中自定义按钮CSS

如果要在悬停时更改按钮背景，请使用以下CSS。由于我们在上面的CSS中使用黄色变体作为默认按钮背景，这里我们使用白色来显示悬停。这与黑色文本颜色混合，以便用户可以清楚地看到按钮并阅读文本。

#llc_comments_button:hover {

background: rgb(255 255 255);

}

#llc_comments_button:hover {
background: rgb(255 255 255);
}
```
#llc_comments_button:hover {
background: rgb(255 255 255);
}
```
准备好CSS后，转到WordPress管理仪表盘并导航到“外观 > 自定义”部分。将CSS代码粘贴到“附加CSS”部分下，然后单击“发布”按钮。

在定制器部分添加额外的CSS

请注意，定制器不会反映按钮，因为延迟加载仅适用于实时站点。

评论链接的问题

许多主题在文章标题下方显示“评论”链接作为文章元数据。延迟加载评论时，此评论链接将不起作用，因为当您在文章标题部分时不会加载评论部分。

标题下方的评论元链接

不幸的是，这里唯一的选择是禁用评论元链接。Astra、GeneratePress和Kadence等流行的轻量级主题提供了一个选项来切换您想要在标题下方显示的元数据。但是，如果您的主题不提供此功能，您可能需要使用CSS来隐藏链接。如上所述，您可以右键单击链接并使用检查选项在开发人员工具部分中找到相关的CSS类。拥有评论元数据的CSS类后，在“外观 > 自定义 > 附加CSS”部分下添加以下CSS以隐藏链接。

.my_comments_meta {

display: none;

}

.my_comments_meta {
display: none;
}
```
.my_comments_meta {
display: none;
}
```
如果需要，请从主题开发人员那里获得有关如何隐藏元链接的帮助。

延迟加载第三方评论设置

一些网站所有者使用Facebook或Disqus评论而不是默认的WordPress评论表单。虽然这有助于减少评论垃圾邮件，但它会通过发送额外的HTTP请求以从第三方站点加载评论，从而极大地影响速度。如果您使用Facebook或Disqus评论，那么您可以使用不同的插件延迟加载它们。您可以使用Facebook的Lazy Social Comments插件和Disqus的Disqus Conditional Load插件。

FB和Disqus评论延迟加载插件

这些插件也来自同一作者，但是提供了大量的自定义设置。对于Facebook评论延迟加载，安装插件后转到“设置 > Lazy FB Comments”部分。填写应用ID的详细信息、要显示的评论数量、选择配色方案并选择点击选项。您还可以添加一个“Comments Div Class”以将按钮包装在 div元素中，您可以使用其他CSS进行自定义，如上所述。

Lazy FB Comments设置

Disqus Conditional Load插件需要在延迟加载之前完全集成Disqus。它将在仪表盘侧边栏中创建名为“Disqus”的附加菜单项。您可以浏览不同的部分并自定义设置以延迟加载Disqus评论。

Disqus Conditional Load插件设置
2023年1月5日