但是缓慢的WordPress网站是一个常见问题。
这是PageSpeed Insights中我的页面的移动得分。

优化之前。
如果我们通过Ahrefs的Site Audit(显示所有页面的页面加载时间)来运行整个网站,我们会发现这也不是唯一加载缓慢的页面。它们均无法快速加载,平均加载时间为570ms。

优化之前。
现在,经过约20分钟的页面速度优化后,这是同一页面:

经过优化。
以及站点审核中的其余页面:

经过优化。
区别是白天和黑夜。PageSpeed Insights的得分接近完美,并且每个页面的加载速度都非常快。
在本指南中,我将通过几个简单的步骤向您确切地说明我是如何做到的。
- 删除未使用的插件
- 将DNS提供程序切换到Cloudflare
- 安装缓存插件
- 缩小代码
- 合并CSS和JavaScript文件
- 消除渲染阻止资源
- 延迟加载图像和视频
- 优化Google字体
- 启用预加载
- 使用CDN
- 优化图像
下面建议的许多优化使用WPRocket,这是一个付费插件,可用于加快WordPress网站的运行速度。我在可能的地方列出了免费的替代方案,但请务必注意,插件有时会相互冲突并导致问题。在对现场站点进行任何更改之前,您应始终测试它们在暂存环境中如何影响您的站点。在此处了解如何设置登台站点。
步骤1.删除未使用的插件
除非您拥有全新的WordPress网站,否则您可能已经安装了许多多年来未使用的插件。其中一些会影响页面速度,因此值得停用和卸载您不需要的任何内容作为起点。
这样做时要小心。如果不确定是否需要某些东西,请留在那儿。
步骤2.将DNS提供程序切换到Cloudflare
网站是连接到互联网的硬盘驱动器(服务器)上的文件。每个连接到Internet的设备都有一个IP地址(例如123.123.12.1)。
由于IP地址很难记住,因此域名使用DNS映射到IP地址,DNS表示域名系统。您可以将其视为网络电话簿。在浏览器中键入域时,将进行DNS查找以找到服务器的IP地址。
事情是这样的:大多数人使用其域名注册商提供的免费DNS提供程序,这通常很慢。
如果是您,请切换到更快的DNS提供商,例如Cloudflare。
为此,请注册一个免费的Cloudflare帐户。单击“添加站点”,输入您的域名,然后单击按钮。
选择免费计划,然后单击“确认计划”。
Cloudflare现在将使您有机会在继续之前检查DNS设置。如果没有警告,通常可以安全继续。
现在剩下要做的就是将您的域名服务器与域注册商交换。在不同的注册商之间,您执行此操作的方式会有所不同,因此,如果您不确定如何操作,请不要犹豫地询问其支持。
如果您使用的是Google域,请按以下步骤操作:
步骤3.安装一个缓存插件
缓存是一个临时存储文件的过程,因此可以将文件更有效地交付给访问者。
主要有两种类型:
- 浏览器缓存: 将常用的文件(例如徽标)保存在用户的硬盘驱动器上,这样他们就不必在重复访问时重新下载它们。
- 服务器缓存: 在服务器上保存页面的完全构建的“静态”版本,因此不必在每次新访问者请求时都重新构建页面。
WP Rocket使启用缓存变得简单。只需购买,安装并激活它。默认情况下,基本缓存(服务器和浏览器)处于启用状态。如果您的站点响应迅速,请转到缓存设置,然后选中相应的框以启用对移动设备的缓存。
寻找免费的选择?尝试W3 Total Cache。
步骤4.缩小您的代码
缩小可从代码中删除空格和注释,以减小文件大小。较小的文件可缩短加载时间。
如果您使用的是WPRocket,请勾选复选框以最小化设置中的CSS和JavaScript。
如果您不使用WPRocket,请安装并激活Autoptimize并执行相同的操作。
只是知道您应该在进行实时部署之前始终测试这会对您的网站产生怎样的影响。缩小通常会导致代码损坏,尤其是在涉及Javascript时。
步骤5.合并CSS和JavaScript文件
大多数WordPress网站都包含多个CSS和JavaScript文件。有些是主题的,有些是插件的,您可能也有一些自定义的主题。
合并这些文件可能会加快速度,但这取决于您的服务器设置。
- 使用HTTP /1.1时,将连续加载CSS和JavaScript文件。这意味着一个文件需要完全加载,下一个文件才能开始加载。
- 使用HTTP / 2时,文件会同时加载。这意味着可以同时开始加载多个CSS和JavaScript文件。
如果您的服务器使用HTTP /1.1,则合并文件可以加快速度,因为需要加载的文件较少。如果它使用HTTP / 2,则合并文件并不一定会有很大的不同,因为文件仍然可以同时加载。
要查看您的网站使用的版本,请将您的域插入Key CDN的测试器。
如果不支持HTTP / 2,则值得合并CSS和JavaScript文件。
要在WPRocket中执行此操作,请在设置中选中“合并JavaScript文件”和“合并CSS文件”复选框。
如果您使用的是Autoptimize,则有两个复选框可以“聚合”文件。只是知道这些有时可能会“破坏”您网站上的内容,因此值得再次检查一下,一旦启用,所有内容和功能仍然相同。并请记住事先清除缓存并在隐身窗口中检查更改。否则,更改可能不会反映在您看到的内容中。
步骤6.消除渲染阻止资源
渲染是将代码转换为可见网页的过程。
这里的关键词是“可见的”,因为网页在可见之前并不总是需要完全加载。
因此,为“首屏”内容优先分配加载资源是有意义的。
您可以通过将“折叠以下”内容所需的非关键CSS和JavaScript文件的加载推迟到以后再执行。为此,请在WPRocket中选中“延迟加载JavaScript”和“优化CSS交付”复选框。
如果您不使用WPRocket,则需要两个插件:Autoptimize和Async JavaScript。
在“自动优化”设置中,选中“内联和延迟CSS ”框。然后,在“异步JavaScript”设置中,点击“启用异步JavaScript。
如果您以前在PageSpeed Insights中看到“消除渲染阻止资源”问题,通常可以解决该问题。
步骤7.延迟加载图像和视频
延迟加载通过延迟图像和视频的加载,直到它们在屏幕上可见为止,从而提高了页面速度。如果您运行的是WordPress 5.5以上版本,则默认情况下会启用图片延迟加载功能,但不会启用视频功能。
如果您使用的是WPRocket,请在LazyLoad设置下选中“为iframe和视频启用”框,以解决此问题。
如果您不使用WPRocket,则免费的“视频延迟加载”插件会做同样的事情。
步骤8.优化Google字体
许多主题使用Google字体,并且每次有人访问您的网站时,都必须从Google的服务器下载这些字体。这可能是一个耗时的过程,因为服务器必须发出HTTP请求,下载CSS文件,然后从样式表中引用的位置下载字体。它必须对页面上的每种字体都执行此操作。
如果您使用的是WPRocket,它将自动优化Google字体请求。否则,交换Google字体显示是一个很好的起点。
步骤9.启用预加载
预加载允许您定义必要的资源,因此浏览器知道要加载的文件的优先级。
例如,假设您的代码如下所示:
<html>
<头>
<script type =” text / javascript” src =” somefile.js”> </ script>
<link rel =” stylesheet” href =“ // style.css”>
</ head>
<身体>
内容
</ body>
</ html>
基于此代码,由于层次结构,需要首先加载JavaScript文件。这不是理想的,因为CSS文件几乎可以肯定比JavaScript代码更重要。
解决此问题的最简单方法是添加另一行代码,如下所示:
<link rel =“ preload” href =“ / style.css” as =“ style”>
这告诉浏览器优先于CSS文件优先于CSS文件,而不管层次结构如何。
您可以通过编辑代码手动添加预加载属性,但是除非您知道自己在做什么,否则可能会造成混乱和混乱。仅安装WPRocket即可轻松得多,它可以自动完成。
步骤10.使用 CDN
内容交付网络(CDN)是分布在世界各地的服务器组。这些都存储了您网站的副本,因此用户在请求网页时可以更快地进行连接。
例如,假设您的网络托管服务器位于英国。如果有人从美国访问您的网站,而您没有使用CDN,则他们的设备与服务器之间的连接会很慢。如果有人从美国访问而您使用CDN,则他们的设备将连接到最近的服务器,这有助于使连接速度更快。
CNS提供程序很多,因此您只需选择一个,在WPRocket中启用它,然后输入 CNAME即可。
步骤11.优化您的图像
延迟加载解决了许多与图像有关的问题,但是它并没有做任何事情来帮助折叠后的图像加载。它们越大,对加载时间的负面影响就越大。
要解决此问题,请使用类似Shortpixel的插件压缩图像。只需安装它,激活它,转到设置,输入您的API密钥,单击“保存并转到批量处理”,然后单击“重新启动优化”。
如果发现它们的质量太低,请转到设置,然后将压缩类型更改为有光泽或无损。
结果
让我们根据一些流行的工具,看看这些优化如何影响我们的页面速度。
以下是我在Google的PageSpeed Insights中发布信息的前后统计:
这与GTMetrix相同:
您可以看到该页面先前在5.9秒内已完全加载,页面大小为1.89mb,有67个请求。优化之后,所有三个指标均下降。页面大小为695 KB,完全加载时间为4秒,请求数量减少了近50%。
如果我们在Ahrefs的Site Audit中检查网站上的所有页面,则可以看到平均时间缩短了40%,加载时间缩短了95%。
最后
上面的所有内容对于我的网站都运行良好,对于其他网站也是如此。但是,请务必记住,每个WordPress配置都是不同的。您可能拥有更多的插件,一个笨拙的主题,较慢的托管速度或更多的第三方跟踪脚本,所有这些都会使您的网站变慢。
如果进行了这些优化后,您的页面速度仍可以进行一些改进,则可能您需要在网站上完成自定义工作。因此,有必要聘请开发人员或页面速度专家来仔细研究一下这些事情。