优化WordPress提升访问速度

相比于其他的程序，WordPress确实太臃肿了。最近花功夫优化了一下WordPress, 终于让自己这个博客的响应速度快了不少。这里记录一下优化的步骤。

本文链接为https://qing.su/article/153.html, 作者为香菇肥牛，转载请注明原文链接，谢谢!

优化之前，我们的博客访问速度比hostloc.com慢1-2秒左右；优化之后，我们博客的访问速度比hostloc.com快1秒左右。

我们的博客：

Hostloc:

1, 使用LSCache + OPCache

安装OpenLiteSpeed服务器后，已经自动开启OPCache; LSCache需要手动去Wordpress插件里面安装。

这两层缓存的安装步骤可以参考这篇文章：https://qing.su/article/146.html

如果您没有使用OpenLiteSpeed服务器，您可以用WP Super Cache来替代LSCache，不过效果会比LSCache差一些。

2, 使用对象缓存

使用对象缓存Memcached或者Redis能让系统缓存更多的内容。

这一层缓存的安装方法可以参考这篇文章：https://qing.su/article/152.html

安装完毕后，在后台LSCache控制页面找到缓存设置，然后选择[6] Object, 开启对象缓存。

3, 缩小CSS和JS文件

LSCache里面默认自带了缩小和合并CSS/JS文件的功能，在Page Optimization里面找到CSS Settings和JS Settings即可对应设置CSS/JS最小化。如果您的主题支持合并CSS/JS, 则也应开启合并CSS/JS.  如果您的主题支持异步加载CSS/JS, 也应开启异步加载。

如果您用的不是LiteSpeed, 您可以安装WP Super Cache, 同样能够实现最小化与合并CSS/JS、异步加载的功能。

4, 开启LazyLoad

首先说明一下：LazyLoad治标不治本。如果您的页面上图片较多，您应该首先考虑缩小图片大小（比如webp, 降低分辨率，模糊，等等）。如果实在没有办法缩小或者数量太多，那么可以考虑LazyLoad.  LazyLoad的作用是在页面加载的时候先用一张占位空白图片代替，然后逐渐载入页面中的图片，这样能够让用户暂时跳过图片加载，很快地先打开网页，然后再慢慢加载图片。

如果您使用LSCache, 那么LazyLoad配置很简单，仅需在Page Optimization – 多媒体设定里面开启延迟加载即可。如果您没有使用LSCache, 则需要安装额外的插件（比如这个https://wordpress.org/plugins/wp-lazy-loading/）实现LazyLoad.

5, 开启InstantClick

InstantClick真的是神器。它的原理是检测到用户的鼠标悬浮在链接上的时候就开始预加载链接对应的内容，这样大幅减少了页面之间跳转的响应时间。如果您的WordPress主题没有特别大的问题，我建议都开启InstantClick.  需要注意的是，开启InstantClick会显著提升CPU负载。因此，如果您的服务器采用的是Apache MPM-Prefork, 则不建议开启InstantClick.

如果您使用LSCache, 那么配置InstantClick很简单，仅需在缓存规则 – 高级设定中开启即时点击即可。

如果您没有使用LSCache, 则需要安装额外的插件（比如https://wordpress.org/plugins/wp-instant-links/）来实现InstantClick.

6, 配置自定义Headers

这里仅适用于OpenLitespeed用户

在后台VirtualHost的Context里面配置如下四条记录。

第一条：

• URI: /wp-content/cache/js/
• Location: $DOC_ROOT/wp-content/cache/js/
• Accessible: yes
• Enable Expires: yes
• Expires By Type: application/x-javascript=A15552000, text/javascript=A15552000, application/javascript=A15552000
• Header Operations:
  • unset Cache-control
  • set Cache-control public, max-age=15552000
  • set Access-Control-Allow-Origin: *

第二条：

• URI: /wp-content/cache/css/
• Location: $DOC_ROOT/wp-content/cache/css/
• Accessible: yes
• Enable Expires: yes
• Expires By Type: text/css=A15552000
• Header Operations:
  • unset Cache-control
  • set Cache-control public, max-age=15552000
  • set Access-Control-Allow-Origin: *

第三条：

• URI: exp:^.*(gif|ico|jpeg|jpg|png|webp|woff|woff2|fon|fot|ttf)$
• Location: $DOC_ROOT/$0
• Accessible: yes
• Enable Expires: yes
• Expires By Type: text/css=A15552000, image/gif=A15552000, image/x-icon=A15552000, image/jpeg=A15552000, application/x-javascript=A15552000, text/javascript=A15552000, application/javascript=A15552000, image/png=A15552000, image/webp=A15552000, font/ttf=A15552000, font/woff=A15552000, font/woff2=A15552000, application/x-font-ttf=A15552000, application/x-font-woff=A15552000, application/font-woff=A15552000, application/font-woff2=A15552000
• Header Operations:
  • unset Cache-control
  • set Cache-control public, max-age=15552000
  • set Access-Control-Allow-Origin: *

第四条：

• URI: /
• Location: $VH_ROOT
• Accessible: yes
• Index Files: index.php
• Rewrite Rules: rewriteFile /srv/www/example.com/public_html/.htaccess

7, 其他

如果有条件，选择一个更快的服务器可能是提升速度的好办法。您也可以使用CDN来分发图片和静态文件(比如JSDelivr可以用来分发JS和CSS文件)。

综上，通过多层缓存, LazyLoad, InstantClick, 我们实现了WordPress响应速度的优化。如果您有其他疑问，欢迎在这里留言，我将尽力解答。本文链接为https://qing.su/article/153.html, 作者为香菇肥牛，转载请注明原文链接，谢谢!