オンサイトSEO

20WordPress Webサイトの加速を数分で学びます

所有人都知道页面加载速度很重要他是PC端以及移动端谷歌排名要素之一它影响着用户体验对流量有直接的影响优化网站速度能够提升SEO排名

但是大多数 WordPress 网站都有有速度慢的问题

注記:下面的许多优化使用的是 WPRocket プラグイン。这是一个付费插件可用于加快 WordPress 网站的运行速度我在可能的地方列出了免费的替代方案但请务必注意插件有时会相互冲突并导致各种问题在对站点进行任何更改之前你需要在测试站点中测试它们是否会影响你的站点。存在する此处了解如何设置测试站点

在本指南中我将通过几个简单的步骤讲解如何去做

Step 1. 移除不必要的插件

除非你使用的是全新的 WordPress 网站否则你可能已经安装了许多未使用的插件其中一些会影响页面速度因此最好停用和卸载你不需要的插件

这样做时要小心如果不确定是否需要某些插件时最好保留在那里

Step 2. 将DNS服务商换成 Cloudflare

网站其实是连接到互联网的硬盘驱动器(服务器)上的文件每个连接到互联网的设备都有一个IP地址(例如123.123.12.1)

由于IP地址很难记住因此使用DNS(域名系统)来将域名映射到IP地址你可以将其视为互联网通讯录在浏览器中键入域名时将进行DNS查找以找到服务器的IP地址

実は,大多数人使用的是其域名注册商提供的免费DNS提供程序这通常很慢

如果是这样请切换到更快的DNS提供商,例えばCloudflare

この目的を達成するために,你要注册一个免费的 Cloudflare 帐户单击 “添加站点”,ドメイン名を入力してください,然后单击按钮

5 cloudflare dns

选择免费计划然后点击 “Confirm plan”

Cloudflare 现在会显示你当前的DNS设置如果没有警告通常可以继续操作

现在剩下要做的就是将你的域名服务器与注册商的提供的做替换在不同的注册商之间可能执行此操作的方式会有所不同,したがって,如果你不确定如何操作最好咨询之前的域名注册商

如果你使用的是 Google Domains请按以下步骤操作

6 nameservers

Step 3. 安装缓存插件

缓存是一个临时存储文件的过程因此可以将资源更有效地提供给访问者

主要有两种类型

  • 浏览器缓存将常用的文件(例如 Logo)保存在用户的硬盘驱动器上这样他们就不必在重复访问时重新下载它们
  • 服务器缓存在服务器上保存页面的完全构建的“静态”版本因此不必在每次新访问者请求时都重新构建页面

WP Rocket 插件可以使启用缓存变得简单只需购买安装并激活它。デフォルトでは,基本缓存(服务器和浏览器)都处于启用状态如果你的站点是响应式的就请转到缓存设置然后选中相应的框以启用对移动设备的缓存

7 wp rocket caching

想找免费的解决方案?试试W3 Total Cache 插件吧

Step 4. 压缩代码

压缩可从将代码中的空格和注释删除以减小文件大小较小的文件可缩短加载时间

wp pagespeed

如果你使用的是 WPRocket 插件请勾选设置中的压缩 CSS 和 JavaScript 选项

8 minify

如果你没有使用 WPRocket则可以使用Autoptimize 插件实现相同的效果

認識しなければならないのは,你进行实时部署之需要先利用测试站点进行测试因为有时压缩会导致代码损坏尤其是在涉及 Javascript 时

Step 5. 整合 CSS 和 JavaScript 资源

大多数 WordPress 网站都包含多个 CSS 和 JavaScript 文件有些是主题的有些是插件的甚至有一些是自定义的

整合这些文件会加快速度但这取决于你的服务器设置

  • 使用HTTP / 1.1,CSS和JavaScript文件将连续加载这意味着一个文件需要完全加载后下一个文件才能开始加载
  • 使用HTTP / 2,文件可以同时加载这意味着可以同时开始加载多个 CSS 和 JavaScript文件

如果你的服务器使用的是 HTTP / 1.1,则合并文件可以加快速度因为需要加载的文件变少了如果使用HTTP / 2,则合并文件并不一定会有太大区别因为无论如何文件都可以同时加载

要查看你的网站使用的版本请将你的域名输入Key CDN’s tester 中查看

9 http1 http2

如果不支持 HTTP / 2,则有必要合并CSS和JavaScript文件

この目的を達成するために,请在 WPRocket 的设置中勾选 “Combine JavaScript files” 和 “Combine CSS files” 的复选框

10 wprocket combine css

如果你使用的是 Autoptimize 插件则有两个复选框可以 “整合”文件有时这些可能会 “破坏” 你网站上的内容因此值得再次检查一下所有内容和功能和之前是否保持一直并请记住事先清除缓存并用隐身模式中检查更改。さもないと,所做的更改可能不会直接反映在你看到的内容中

Step 6. 去除阻碍渲染的资源

渲染是将代码转换为可见网页的过程

这里的关键词是“可见的”因为网页在可见之前并不总是需要完全加载

したがって,为 “首屏” 内容优先分配加载资源是有意义的

你可以通过设置 “below the fold” 将非关键 CSS 和 JavaScript 文件的加载推迟到以后再执行。この目的を達成するために,请在 WPRocket设置中勾选 “Load JavaScript deferred” 和 “Optimize CSS delivery” 复选框

11 wprocket optimize css

如果您不使用WPRocket则需要两个插件Autoptimize そしてAsync JavaScript

在 Autoptimize 的设置中选中 “Inline and Defer CSS”。それから,在 Async JavaScript 的设置中点击 “Enable Async JavaScript”

如果你以前在 PageSpeed Insights工具中看到 “eliminate render-blocking resources(去除阻碍渲染的资源)” 的问题则可以通过上述方法解决

12 render blocking pagespeed insights

Step 7. 延迟加载图片和视频

懒加载通过延迟图像和视频的加载从而提高了页面整体的速度如果你运行的是 WordPress 5.5 以上版本默认情况下会启用图片延迟加载功能但不会启用视频功能

如果你使用的是 WPRocket 插件请在 “LazyLoad” 设置下选中 “Enable for iframes and videos”框以解决此问题

13 lazy loading videos

如果不是 WPRocket则免费的Lazy Load for Videos 插件可以起到相同的效果

Step 8. 优化 Google Fonts(谷歌字体)

许多主题都在使用谷歌字体并且每次有人访问你的网站时都必须从谷歌的服务器下载这些字体这可能是一个耗时的过程因为你的服务器必须发出HTTP请求下载CSS文件然后从样式表中引用的位置下载字体同时它也必须对页面上的每种字体都执行此操作

如果你使用的是 WPRocket它将自动优化谷歌字体请求。さもないと,最好替换谷歌字体

Step 9. 开启预加载

预加载让你可以定义基本资源因此浏览器就知道要加载的文件的优先级

例えば,假设您的代码如下所示

<html> 
<head> 
<script type=”text/javascript” src=”somefile.js”></script>
<link rel=”stylesheet” href=”/style.css”>
</head>
<body>
Content
</body>
</html> 

基于此代码由于层次结构需要首先加载 JavaScript 文件这不是理想的因为 CSS文件 几乎可以肯定比 JavaScript 代码更重要

解决此问题的最简单方法是添加另一行代码如下所示

<link rel="preload" href="/style.css" as="style">

这就告诉浏览器不管层次结构如何优先加载CSS文件然后再处理优 JavaScript 文件

你可以通过编辑代码方法手动添加预加载的属性但是除非你真的知道自己在做什么否则可能会造成混乱要不然就直接安装 WPRocket因为这些它可以自动完成

Step 10. 使用CDN

内容分发网络(CDN)是分布在世界各地的服务器组这些都存储了你网站的副本因此用户在请求网页时可以更快地进行连接

例えば,假设你的网络托管服务器位于英国如果有人从美国访问你的网站而你没有使用CDN则他们的设备与服务器之间的连接会很慢如果有人从美国访问而你使用CDN则他们的设备将连接到最近的服务器这有助于加快连接速度

CNS供应商很多因此你要做的就是选择一个然后在 WPRocket 中启用它然后输入对应的CNAME

14 wprocket cdn

Step 11. 优化图片

虽然懒加载解决了一些图像相关的问题但是并没有解决图片本身的加速速度问题因为图片体积越大对加载时间的负面影响就越大

要解决此问题请使用类似Shortpixel 的压缩图像插件你只需安装它激活转到设置输入你的API密钥单击 “Save and Go to Bulk Process”然后单击“Restart optimizing”即可

15 shortpixel

如果发现图片质量太低请转到设置然后将压缩类型更改为 glossy(有光泽)或 lossless(无损)

16 shortpixel compression

优化结果

今,经过约20分钟的页面速度优化后,让我们来看下优化后的结果如何

以下是我在谷歌的 PageSpeed Insights 中网站数据的前后统计

1 pagespeed insights slow
3 pagespeed insights fast

下面是 GTMetrix 中的数据:

18 gtmetrix before
17 gtmetrix after

你可以看到该页面先前在5.9秒内已完全加载页面大小为1.89MB共67个请求优化之后三个指标均有下降页面大小为 695 KB完全加载时间为4秒请求数量减少了近50%

如果我们在 AhrefsSite Audit(网站诊断)中查看所有的页面我们发现平均加载时间缩短了40%加载时间缩短了95%

4 site audit fast

结论总结

上面的所有方法对于我的网站都运行良好对于其他网站也是如此。しかし,请务必记住每个WordPress 配置都是不同的你可能拥有更多的插件笨拙的主题较慢的托管速度或更多的第三方脚本等所有的这些都会使你的网站变慢

如果进行了这些优化后你的页面速度仍需要进行一些改进则你可能需要在网站上进行自定义的工作。したがって,有必要聘请我们的开发人员或页面速度专家来仔细研究一下这些事情

について 編集部

kuajinggu の編集スタッフは WordPress の専門家チームです,ディラン率いる,WordPress で、仮想ホスト、電子商取引、SEOとマーケティングにおける10年以上の経験。クアジンググは年に作成されました 2014 年,現在、業界最大の無料 WordPress リソース Web サイト,WordPress の Wikipedia と呼ばれることが多い。

返信を残す