SinaLian

2019-04-03 15:45

加速Wordpress网站终极版-评分达到90+

加速Wordpress网站-终极版-全网站Pagespeed 90+

WordPress 比较消耗服务器资源是众所周知的事实，特别是一些高级 WordPress 主题，如果不经过正确的优化，网站打开速度会慢到让人崩溃。

用心做网站的朋友都知道，打开速度对 SEO 效果和转化率是有一些影响的，特别是对于做付费广告的朋友来说，速度就是金钱。

惯例，先放网站优化结果：

网站：https://www.gkrailway.com/

Pagespeed Insight测试结果：

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.gkrailway.com%2F&tab=desktop

Dotcom-Tools测试结果（没有使用CDN的情况全球速度大概在3秒左右，用了应该还能更快，没用是因为还在尝试哪个CDN又便宜又好）：

https://www.dotcom-tools.com/website-speed-test.aspx#68822C91FA494ECCA97C6CE961FCDB07

今天我们就详细说明一下怎么正确的优化 WordPress 网站，提高网站打开速度，某些设置针对AVADA主题，其他设置可通用。

1. 选择在VPS上建站

VPS建站有些难度，比较适合已经有建站经验的同学。

关于如何操作VPS建站，料神的博客有非常详细的说明，按照博客一步步操作基本没有什么问题。以下为学习VPS建站的大概流程：

1)关于如何购买Linode：

https://www.liaosam.com/linode-vps-intro.html

2)关于如何使用SSH链接VPS，搭建LNMP系统，安装wordpress的方法：

https://www.liaosam.com/linode-vps-greenhand.html

3)LNMP下安装Wordpress主题可能碰到的问题：

https://www.liaosam.com/lnmp-wordpres-problems-records.html

4)安装好Wordpress后，如何将网站从虚拟主机迁移到VPS

https://www.liaosam.com/how-to-migrate-website-from-bluehost-to-linode.html

注意：一定要确认网站已经全部迁移到VPS后，再更改DNS记录，不然会导致原站无法访问。先修改DNS的话，如果碰到备份的文件有问题，又得返回去重新改DNS，重新备份，再重新迁移，很麻烦。DNS记录直接可以修改成域名商的dns,只要添加域名解析指向到VPS的IP，网站即可正常访问。

一步步按照料神的步骤，有建站基础的同学基本能在2天内搞定这些问题。本人花了2天时间迁移了8个网站，

建议使用VPS是因为，虚拟主机的速度和VPS不是一个级别的，而且很多优化配置可以直接在搭建的系统中进行，这也就意味着，优化系统的话，这个可以作用于所有的网站。

操作上刚开始有些不习惯，大多靠指令完成，但是google基本都有指令教程，搜一下试试就懂了。

如果不愿意自己操作的话，可以找帮助本站优化的大神代劳，@一刀

评分：

重要性 8 分

操作难度 6 分

2. 移除不必要的前端文件 (avada主题)

Avada 主题提供了一些选项，可以让我们禁用掉一些不必要的功能，来减少前端加载的文件、从而减少 HTTP 请求数量。设置方法如下。

在后台 Avada 菜单下面的 Theme Options 子菜单中，找到 Advanced -> Theme Features, 仔细阅读一下这个选项下面的每一项介绍，如果我们的站点没有使用某一项功能，就把他关掉。

评分：

重要性 5 分

操作难度 1分

3. 增加浏览器缓存有效期

浏览器可以把图片、CSS、JavaScript 等不需要服务器处理的静态资源缓存到网站访问者的电脑中，访问者再次打开页面的时候，不用再次请求服务器，而是直接从自己的电脑中读取这些资源。

浏览器缓存有一个有效期、过了有效期之后，浏览器会重新从服务器上下载过期的资源。对于不需要经常修改的静态资源，增加缓存有效期可以减少资源重新下载的次数。Google 推荐把这些静态资源的有效期设置为 1 年以上，我们按照这个推荐来设置就可以了。

使用VPS的同学使用以下办法：

在 Nginx 的主机配置文件中（usr/local/nginx/conf/vhost/ 下，找到域名命名的 .conf 文件）、找到以下配置项，按照截图中的配置就可以了。

使用虚拟主机的同学使用以下办法：

编辑 .htaccess 文件

找到＃END WordPress行，添加以下代码：

ExpiresActive On

ExpiresByType image/jpg “access 1 year”

ExpiresByType image/jpeg “access 1 year”

ExpiresByType image/gif “access 1 year”

ExpiresByType image/png “access 1 year”

ExpiresByType text/css “access 1 week”

ExpiresByType text/html “access 1 month”

ExpiresByType text/x-javascript “access 1 week”

ExpiresDefault “access 1 month”

评分：

重要性 10 分

操作难度 2 分

4. 使用高效的缓存插件

想要提高 WordPress 的打开速度，使用服务器缓存是必不可少的一步，根据缓存内容保存位置的不同，WordPress 缓存可以分类：内存缓存、硬盘缓存和数据库缓存这三大类。就缓存读取速度来说，内存缓存 > 硬盘缓存 > 数据库缓存。

流行的 WP Super Cache 使用的就是硬盘缓存。WP Super Cache 的使用方法在网上很多，在这里就不再介绍了。

特别的推荐一款比较小众的缓存插件－ Cachify，这个插件同时支持把缓存保存在 Memcached（一种内存数据库）、硬盘和数据库中。同时这个插件提供的设置选项也非常简单，可以避免因为设置错误而出现相反的效果。

如果服务器支持 Memcached，建议大家使用 Cachify 插件把缓存保存在内存中，以达到最佳的速度优化效果。具体设置方法可参考：https://www.wpzhiku.com/cachify/

使用VPS的同学需要在服务器上先安装Memcached。

下面上这款插件使用前后对比；

未使用Cachify情况下加载情况：

使用Cachify的情况下网站内页加载速度：

效果不用我说，很明显的一点就是Cachify这个插件明显缩短了TTFB的时间。

TTFB是网站速度的一个重要指标，最好能控制在200ms以内，否则网站会明显感觉加载缓慢。

测试TTFB指标的一个工具：https://tools.keycdn.com/performance

这个工具的测试数值比pagespeed的偏大一些。下面是本站的测试数据，如果明显大于本站数据，还是最好优化一下。

评分：

重要性 10 分

操作难度 8分

3. 图片处理

1）图片进行压缩，压缩网站很多人都知道https://tinypng.com/

2）使用合适的大小。过大的图片对于网站也是负担。

3）图片延迟加载。使用虚拟主机的同学可以靠插件 BJ Lazy Load，使用VPS的同学可继续往下看。

4）再推荐一个一键抠图神器：https://www.remove.bg/

直接上传图片可以一键抠图，有处理产品图片需求的同学，赶紧试试吧。

评分：

重要性 5 分

操作难度 1分

4. 视频处理

1）YouTube 上托管的视频虽然播放速度足够快，但是放到自己的网站上时，会加载一些额外的 JS，这些 JS 在某种程度上会拖慢自己的网站速度。

如果您需要放到网站上的视频不多，自己的服务器流量又足够用的话，完全可以把视频上传到自己的网站上。这样可以避免加载 YouTube 的 JS（文件大小高达1.1Mb)，从而加快了网站的打开速度。下面是用youtube托管的带视频页面测试：

下面是用自己网站托管的带视频页面测试情况，没有了Youtube加载的JS，可以明显缩小网站大小。

2）在 WordPress 中添加视频非常简单，直接把视频像上传图片那样插入到 WordPress 的文本编辑器中即可。

3）如果是虚拟主机的同学，视频用格式工厂处理一下再上传，可以明显缩小视频大小。

4）使用VPS的同学，需要用到H264视频解码器，否则视频上传后无法显示。解码后不能再用格式工厂压缩，否则上传无法显示。H264自带视频压缩效果。

5）视频上传后有时候会碰到加载慢的情况，这个可以咨询专业人士，@一刀

评分：

重要性 5 分

操作难度 1分

7. 使用 HTTP2

针对 HTTP 1.x 优化网站打开速度的一条重要原则是：减少 HTTP 请求数量，以降低浏览器并发请求限制导致的资源阻塞。减少 HTTP 请求数量势必要合并文件，而合并文件带来的问题就是文件变大了，文件变大就导致了下载时间的增加。

减少请求数量带来的下载时间减少和文件变大带来的下载时间增加之间怎么平衡、是一个很困难的问题。HTTP 2 普及以后，这个问题就不存在了，HTTP 2 很重要的一个特性就是多路复用，简单来说，如果 HTTP 1.x 中同时可以下载 6 个文件的话，HTTP 2 同时可以下载的文件数量可能是 60 个，这种情况下，减少 HTTP 请求的意义就不是很大了（适当减少 HTTP 请求数对提高网站打开速度还是有帮助的，只要不会因为减少请求数而导致合并后的文件过大就行）。

现代浏览器大部分已经支持 HTTP 2 了，我们只需要在服务器上开启 HTTP 2 支持，就可以利用 HTTP 2 的这个特性来加快网站打开速度了。开启方法很简单，参考下图为 Nginx 增加一项设置即可。

如果自己不会设置，可以联系服务器提供商进行设置，HTTP 2 可以节约服务器资源，相信有追求的服务器提供商都会非常乐意帮你设置。

如果确认您的服务器已经支持 HTTP 2，可以在 Avada 设置中关闭 JS Compiler 以加快网站打开速度。

注意：关闭此项可能会导致 PageSpeed 或其他网站速度检测工具评分降低，这是因为这些测试工具还没有针对 HTTP 2 进行优化，而不是网站打开速度真的降低了。

评分：

重要性 10 分

操作难度 3分

8. 部署 ngx_pagespeed 组件 +30

PageSpeed 服务器组件可以针对网页自动进行多项优化（如 JS 延迟加载、图片懒加载、图片压缩等等）来提高网页打开速度，在服务器上部署 PageSpeed 是一项事半功倍的优化举措。

ngx_pagespeed 模块的主要功能如下

ngx_pagespeed 几乎为我们提供了优化网站前端页面所需要的所有功能，下面是一些比较常用和重要的功能，其他功能可以到 ngx_pagespeed 官方文档查看。

· 图像优化：移除图片元数据、动态调整，重新压缩

· CSS 和 JavaScript 压缩、合并、级联、内联，把当前页面需要的 CSS 直接放在页面中，符合 PageSpeed Insights 提出的 “清除首屏内容中阻止呈现的 JavaScript 和 CSS” 原则。

· 小资源内联，比如比较小的图片，直接转换成 base64 格式的，放在 HTML 中。

· 推迟图像和 JavaScript 加载，只加载当前屏幕显示的图像，异步加载 JavaScript

· 对HTML重写、压缩空格、去除注释等，吧 HTML 页面中不必要的内容都移除了，减少了 HTML 的体积。

· 提升缓存周期，把静态资源的缓存过期时间提高了。

下面是本站使用 ngx_pagespeed 优化过后，通过 PageSpeed Insights 测试出来的分数，不管是移动端、还是桌面端，均达到了100分，这是手工优化前端页面很难达到的高度。当然，优化的过程是动态的，也不是每个页面随时都能达到这个分数，但是整体上来看，使用 ngx_pagespeed 优化后，前端页面的打开速度确实快了许多，用肉眼就能分辨出来。