九、启用CDN加速

一般国内网站建站做速度优化，还会做一下动静分离。动静分离是将网站静态资源（HTML，JavaScript，CSS，img 等文件）与后台 PHP 应用分开部署，提高用户访问静态文件或代码的速度，降低对后台应用访问。比如把静态文件全部放在一个二级域名上，如 static.xyz.com 或 img.xyz.com，给静态文件做缓存，并对二级域名开启 CDN 加速。

这种用单独的二级域名存放静态文件，Yahoo 的 YSlow 则之为 cookie-free domain。

当然，也有不做动静分离，直接全站 CDN 加速的。对于我们使用虚拟主机的建站者来说，动静分离在虚拟主机上是不太好弄的，其实也不需要动静分离这么多复杂的技术活，直接全站开启 CDN 即可。

CDN的原理

前面我们讲到了客户端浏览器的缓存，只是对访问过的资源，提升二次或重复访问的速度。而对于首次访问的加速不起作用，所以从网络层考虑，最常见的手段就是CDN（Content Delivery Network，内容分发网络）加速。CDN 通过骨干网络把一组服务器连接起来，存储客户数据或内容的副本（缓存）。

图18

而通过将静态资源缓存到离用户很近的相同网络运营商的CDN节点上，不但能提升用户的访问速度，还能节省服务器的带宽消耗，降低负载。不同地区的用户会访问到离自己最近的相同网络线路上的CDN节点，当请求达到CDN节点后，节点会判断自己的内容缓存是否有效，如果有效，则立即响应缓存内容给用户，从而加快响应速度。如果CDN节点的缓存失效，它会根据服务配置去源站获取最新的资源抓取到CDN节点上，呈现给访问用户。并且，它会把内容缓存下来，以便响应给后续访问的用户。

图19

之所以不同地区的用户访问同一个域名却能得到不同 CDN 节点的 IP 地址，这要依赖于 CDN 服务商提供的智能域名解析服务，浏览器发起域名查询时，这种智能 DNS 服务会根据用户 IP 计算并返回离它最近的同网络 CDN 节点 IP，引导浏览器与此节点建立连接以获取资源。

使用CDN的好处

使得分布在各个地方的访客都能从离得最近的 CDN 节点服务器上获取网页内容。另外，如果是全站 CDN，那么对于源站，相当于是套了一层防护，可以抵御流量攻击，更安全。

废话不多说，来说说具体怎么使用 CDN，如何操作和设置吧。我们所用的 SiteGround，登录后台之后，在 Information & Settings 那里，有个 Cloudflare CDN。这是免费的方案。如果要购买付费的方案，要点击 Get Plus 按钮。

图20

点击后跳转到 Cpanel 下的 Cloudflare CDN 界面，点击 Activate Free 按钮。

图21

在弹出的窗口里，确认你的邮箱作为 Cloudflare CDN 账户。激活 Free account 后，你邮箱会收到一封提示邮件，告知你，你的域名已经添加到 Cloudflare 里了。

点击 Manage 按钮，

图22

在管理设置页面，找到 Speed。开启 CSS 和 HTML 的 Auto Minify，以及 Railgun（这个是加快 Cloudflare 去你的 SiteGround 上的源站资源的）。
注：如果已经在 SG Optimizer 中开启了 Minify CSS files 和 Minify HTML output，这里就不用再开启 CSS 和 HTML 的 Auto Minify Web Optimization 了。

图23

SSL Support 选择 Full (strict)，点击 Change 按钮。我就不截图了。很简单的设置，强制所有连接必须为 https。

OK，CDN免费账户设置完成！

不过 CDN 免费的服务全球节点有限，如果你要开通付费的 CDN 服务，则需要付费。每个月 20 美金左右，觉得需要的话还是可以开通这个付费 CDN 服务的，付费以后 CDN 线路和节点多很多。如果你的网站访客没有固定来源，分散在世界各地，那么一个付费的 CDN 服务还是有价值的。

如果预算足够，建议升级付费的 Cloudflare PLUS

建站预算不那么紧张的，建议升级付费的 CDN 吧。付费的 Cloudflare CDN才是真CDN，存储在云服务器上；Cloudflare 免费CDN，其实文件并没有真的存储到云服务器才去，效果真的只能呵呵。

除了 Cloudflare CDN 之外，还有一个老牌的商家 MaxCDN (现在叫 StackPath CDN) 也是很不错的。

检查CDN解析是否生效

我们看一下 CDN 智能解析生效了没有。在本地电脑命令提示符中，输入网址：ping www.xyz.com 返回 www.xyz.com.cdn.cloudflare.net [ CDN 节点 IP ]

图24

OK，大功告成！

最后再用 GTMetrix 测一下：

图25

十、有针对性地排查网站速度问题

如果你对技术有一点兴趣，可以尝试学着使用 F12 Developer Tool。会用基本的 Console、Networks 就差不多了，基本可以很有针对性地排查网站速度问题了。

图26

其它的部分如 Audits 和 Application 也很有用，但是暂时用不到，以后再讲解吧。

十一：手动设置预解析（DNS Prefetch）和预加载（Preload）

说明：手动设置预解析（DNS Prefetch）和预加载（Preload），这一条操作可能比较难，需要进行一定分析。这一步也非必须，觉得操作复杂可以略过。

如果你是 SiteGround 虚拟主机用户，如上文所说无需再购买安装 WP Rocket 插件，因为 SG Optimizer 里自带很多功能和 WP Rocket 已重合。但是有些 WP Rocket 含有的功能，SG Optimizer 并没有，比如预解析（DNS Prefetch）功能。

1 DNS Prefetch

DNS Prefetch，即 DNS 预解析，或者也叫 DNS 预获取，是根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度。DNS Prefetch，也是前端优化的一部分。格式通常是：

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//a1.com">
<link rel="dns-prefetch" href="//a2.com">
<link rel="dns-prefetch" href="//a3.com">

DNS Prefetch 尽量的放在网页的前面，推荐放在<meta charset=”/>后面。

我们要做的重要工作，就是在 GTmetrix 的 Waterfall 里，找到速度特别慢的外部文件资源的域名，记录速度上拖后腿的外部文件的域名。

这里我们先记录 https://platform.twitter.com 和 https://www.youtube.com 这两个域名。同时，我们也可以继续看看  Waterfall 下，速度比较慢的文件的 URL 里面所有外部资源的域名。

在下图中，ALL 的下方，有个 Domain 的竖列表，可以很快地看到各个文件资源来自哪些域名。

图27

OK，经过梳理，我们记录了这些外部资源的域名：

• https://platform.twitter.com
• https://www.youtube.com
• https://www.gstatic.com
• https://www.googletagmanager.com
• https://www.googleadservices.com
• https://www.google-analytics.com
• https://cdn.syndication.twimg.com
• https://syndication.twitter.com
• https://s.ytimg.com
• https://googleads.g.doubleclick.net
• https://pbs.twimg.com

可见，这个网站启用了 Google Analytics，投了 Google Adwords，用了一些 Twitter 的工具，使用了 Google Tag，以及 Google Captcha。。那么可以考虑给这些域名预加载，使得网页打开速度更快速。

但是，注意：DNS Prefetch 不能选择太多，只能选择最多3-4 个域名，否则会拖慢 DNS 查询的时间，反而拖慢网页加载速度。我们可以选几个重复度高的域名。

在 Cpanel 的 File Manager 中，找到你的 WP 主题文件夹下的 Header.php，点击鼠标右键，用 Code Edit 打开编辑（或者用 FTP工具下载 header.php 到本地，用代码编辑器 notepad++打开编辑修改）。

在 <?php wp_head(); ?> 上面添加几行代码：（注意，你按照你网站的外部资源域名来填写，不要照抄我下面的代码）

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//platform.twitter.com">
<link rel="dns-prefetch" href="//www.youtube.com">
<link rel='dns-prefetch' href='//www.gstatic.com'>
<link rel='dns-prefetch' href='//syndication.twitter.com'>

每一行填写一个域名地址。不带 http 或 https，注意引号是英文符号。

点击 Save 保存。这样，网页刚加载时，还没有加载需要的外部资源，DNS解析服务已经开始在处理预解析了，会优化页面加载速度。

2 Preload

Preload 作为一个新的 web 标准，旨在提高性能。预加载当前页的资源，浏览器会优先加载它们。有了 preload，它相当于告诉浏览器说，这个资源你后面会用到，现在就加载它吧。
上面提到的 Asset CleanUp 对字体文件的预加载也是使用的 Preload 这一个新的 HTML 机制。

格式：<link rel="preload" href="文件URL地址" as="资源类型" crossorigin>

文件 URL 地址：完整 URL 地址，如：https://www.google.com/……./check.js

as资源类型：

• script(js),
• image(png,jpg,jpeg,gif),
• style(css),
• font(woff,ttf,woff2)

更多的具体的见下表：

图28

图29

我们可以用 GTmetrix 的测速结果中，Waterfall 的功能，来看看有哪些外部资源文件。比如，有这么一个网站，得分特别低（C,E），页面加载速度也达到 8S，因为这个网站在页面里调用了多种外部资源。比如 youtube 视频，比如 twitter 最新动态，还有外部图片等等，都造成了速度缓慢。比如，最常见的是联系表单使用了 Google Captcha 验证机制，但这会调用谷歌的 JS，造成速度减慢。

比如下图这个网站，问题很多。不过 17 秒的加载速度，真的是够慢的了！
（这个外贸建站者在国内的阿里云注册的域名，他竟然不怕麻烦地在阿里云域名解析管理里面做 SiteGround 主机上的英文网站的解析记录，也不怕解析慢啊！我也是醉了啊。。正常来说用国外虚拟主机，都是直接把域名商默认的 NS 改成主机商的 NS 来转移域名解析权）

图30

这里有些小疑问：看这个网站，已经在 SG Optimizer 的设置里开启了网页压缩 Gzip，怎么 GTmetrix 的 gzip 压缩这里得分还是这么低呢？
这是因为你网站外部的文件，你是无法进行压缩的，因为这些文件是存放在外部网站上，不是你自己网站的文件，所以没办法的，可以忽略这些外部文件无法 Gzip 压缩（除非你把所有外部文件都下载存到网站目录下，修改网站调用这些文件的链接，不过这太麻烦了！！）。

再比如：这个网站使用了 Twitter 的 widget 工具，调用了来自 https://platform.twitter.com 的各类 JS 和 CSS 文件。同时，还有 https://www.youtube.com 的 iframe_api 接口。

我们可以记录并预加载 Waterfall 中严重拖慢速度的文件：把这些文件的 URL 放到 href=”” 中，并根据文件类型，填写 as 类型。一些明显的 CSS 和 JS 或 图片，最容易分辨。有些可能 as 类型比较难判断，比如涉及到一个外部网址，或 ？查询符跟着特别长一串 URL，如果感觉像是获取数据，这些你可以尝试填写 as=”fetch”。

比如，上面这个网站，通过 Waterfall 的分析，有一些资源严重拖慢了速度，于是我们每个需要预加载的资源，分行写好，每一行文件资源都要写 as 类型和 crossorigin。
碰到不确定的 as 类型，情愿整个这条资源放弃不写也不要留空不写 as 类型，否则会二次加载获取，反而耗费时间。

图31

在 Cpanel 的 File Manager 中，找到你的 WP 主题文件夹下的 Header.php，点击鼠标右键，用 Code Edit 打开编辑（或者用 FTP工具下载 header.php 到本地，用代码编辑器 notepad++打开编辑修改）。

粘贴到上面 DNS Prefetch 代码的下面。保存！

最终，在 Header.php 中添加代码如下：

图32

DNS预解析和资源预加载，搞定！（按照本篇教程的优化，上面截图网站页面的载入时间最终从 17S 优化到 4S 左右）

注意，有时候可能会出现部分资源你在 Header 这里写了预加载的文件，但是缓存插件里，你又设置了 JS 或 CSS 的 Render-blocking（即 JS/CSS 异步加载，放到 footer 去加载），这样会有冲突。资源会在页面刚加载的时候尝试去 Preload 一次资源，但是获取失败。最终资源在 footer 最后加载，成功载入。
这个不要紧，但是你要知道，异步加载是特地把一些文件放到加载顺序的最后才加载。并非一定是载入速度慢。加载后可以在 Chrome F12 开发者工具里看看，或者 GTmetrix 里看看，什么资源预加载失败（你可以从 header.php 里移除那一行预加载资源代码）。如果你不明白或者新手，可以略过这段文字。

保存完毕后，由于每次浏览网站都要调用 header.php，这个也会被缓存。所以要清理缓存，点击 WP 后台顶部的 Purge SG Cache 按钮，清理缓存。完毕！

十二、如果调用很多外部youtube视频，可以让视频懒加载

如果你的网站上嵌入了一些 youtube 视频的话，建议装个 lazy load for video 插件（插件作者：Kevin Weber），因为外部嵌入视频会拖累页面速度，安装这个插件可以提高页面加载速度。

图33

用法很简单，就不多说了。怎么用，自己看插件介绍或者作者主页。

温馨提示：WP Rocket 插件支持 iframe嵌入框架和视频的 lazyload，所以如果你安装了 WP Rocket 插件，这个插件可能就不用安装了。

图34

当然了，具体效果怎么样，启用功能后要用 F12 Developer Tool 下的 Network 看看加载的情况。上面都说了怎么查看，就不多说了。

注意：如果你用的是 SiteGround 虚拟主机，既用了 SG Optimizer 又装了付费的 WP Rocket 插件。那么 SG 只开启控制 MemCached 就好。HTML的 Gzip 压缩和图片懒加载等等这些都交给 WP Rocket 插件来做。即前面提到的，如果同时用 SG Optimizer 和 WP Rocket 插件，那么 SG 只控制 MemCached，把所有其他缓存的杂七杂八的设置工作让 WP Rocket 来做。

十三、最后的话

这篇 WP 加速教程可以说算是比较全面，写了大半天时间，关于 WordPress 网站优化，速度优化是很重要的一方面，所以写的非常认真，希望对各位有帮助！

如果有不理解的问题，可以留言区提问。就这样吧。

本教程完！

本文转载自https://www.liaosam.com/speed-up-wordpress-website.html

1 2 3

感谢您的来访，获取更多精彩文章请收藏本站。