2020年 Wordpress 网站优化工具和方法总结

本文说明

本站 LweeinTalk 使用 Wordpress 作为主要的媒体平台,在2020年初经历了一顿折腾,总结出一系列的主题,插件,性能,SEO,伪静态,缓存,CDN静态资源加速等等一系列的优化方案和方式,目的是使用最普通,最低成本,也最能价值最大化的方式,进行 Wordpress 的优化和使用。

本文作者 lweein,文章编写于2020年2月17日,字数约3800字。

默认标题_全屏海报_2020-02-17-0(1).png

Wordpress 的使用历程

自己的博客生涯从2007年7月开始正式进入wordpress的时代,经历了很多,当年的Pjblog,Zblog,Emlog,甚至后来的Typecho,Hexo,Ghost,还有论坛 Discuz,Leadbbs,Dvbbs,Phpwind 等等吧,一系列的跟内容相关的CMS也好,论坛也好。自己不是专业的计算机背景和技术出身,纯粹是处于兴趣和爱好,折腾了十多年吧。 目前长期写作一个博客平台,已经十一年不间断更新 ,本来打算从 Hexo开始开启自己一个新的 lweeinTalk 时代,折腾大半个月就触碰到了天花板,这个天花板一方面,看到了大多数和hexo博客到这个层面已经是相对的功能局限,另一方面确实作为一个单纯的纯静态+博客来说,已经做得很好了。但是我的目的是希望可以做得跟多。所以最后还是选择回到了 Wordpress 的路线上来。

Wordpress 安装基础操作

基础安装和配置

因为 Wordpress 的安装比较简单,推荐环境是 Nginx + PHP 7.2 以上的方式进行安装,2020年我会考虑基于Docker方式进行构建和发布,目前还在测试中。目前是在BT宝塔面板中标准方式安装 Wordpress应用。

鉴于现在2020年初 Wordpress 程序更新和插件更新处于崩溃状态,这里推荐大家使用 Nicetheme 平台的积木盒子,里面有 Wordpress 镜像功能,镜像了整个插件市场和程序主体,使用之后可以当做国内平台来直接进行更新,非常的方便,目测好像9.9元,也不算贵吧。

Nicetheme 积木盒子链接地址:https://www.nicetheme.cn/jimu

image.png

HTTPS 的全站配置

比较推荐使用搭配的CDN上的HTTPS自动配置。记得在配置HTTPS的时候,CDN和宝塔面板上的SSL要同步处理一下。最好是协议回源设置一下,这样宝塔和CDN。同时要配置SSL证书,否则会出现重定向报错问题。

下面有腾讯云的CDN配置简单截图,这样就不会有问题了。证书免费的就行了。

image.png

image.png

伪静态的配置和固定链接的处理

在Nginx 的Rewrite 中进行伪静态的处理,使用固定链接,有利于SEO,也有利于速度和体验。如果是宝塔面板,则放在下放截图位置即可,代码可以直接复制。

location / {
    index index.html index.php; 
    if (-f $request_filename/index.html){ 
        rewrite (.*) $1/index.html break; 
    } 
    if (-f $request_filename/index.php){ 
        rewrite (.*) $1/index.php; 
    } 
    if (!-f $request_filename){ 
        rewrite (.*) /index.php; 
    } 
} 

rewrite /wp-admin$ $scheme://$host$uri/ permanent;

image.png

同时在 Wordpress程序中,在固定链接位置,选择一个模式即可,这里我选择的是最简单的post_id 的方式,那么处理完之后的链接地址就是 xxx.abc.xxx/xxx.html 这样的格式

image.png

总结一下,至此比较简单的基础配置已经处理完了。接下来是插件和优化方面

Wordpress 主题的选择和插件的使用

国内几大主题平台推荐

  • Nicetheme 苏醒团队 - 代表作 Cosy,Grace 等
  • 我爱水煮鱼团队 - 代表作 WPJAM,Xintheme等

推荐是很多的,其他还有很多不错的,比如知更鸟,大前端Dux,黑糖等等吧。但是重点推荐的就是他们两家,主要原因在于,他们具备整体解决方案,不只是一个主题一个插件,而是提供的一整套国内优质的 Wordpress 解决方案,同时提供一定的商业服务,这样可以保证他们可以长期维护和生存下去,并能保证相关插件和主题的更新和维护。

我们的LweeinTalk站点 使用的是苏醒团队的 Cosy 3.1.3 版本,目测已经4个月没更新了。不过依然还是不错的。付费买来的。同时搭配他们自家的优化插件 积木盒子,已经在最大程度上做到了国内优化的旗舰配置。

综合优化插件推荐

  • 积木盒子 - 苏醒团队出品
  • WPJAM - 我爱水煮鱼出品

链接自己搜吧。这两家名气已经很大了。随便都能找得到。都是免费的。里面有些个别增值服务需要付费而已。如果使用苏醒的主题,最好搭配积木盒子使用。WPJAM 感觉优化更加彻底,但是偏向于技术方向多一些。积木盒子相对来说颜值一流,功能上也很好。

积木盒子的配置说明

这里做两张截图。大概展示一下。可以根据自己的需要去处理。常用的功能都有了。比如SEO SMTP CDN 微信分享等等吧。

同时他们做了一个插件平台,可以自主开发或者使用他们的各类插件。可以更加方便的增加自己需要的功能。

image.png

image.png

image.png

这里在主题和插件上告一段落,主题选择看个人喜好。接下来会介绍一下我们网站自己平台的优化方案和性能取舍,以及静态资源的处理方案。

Wordpress 性能优化和静态资源处理

性能方案和插件使用

有一个原则就是,能不使用插件的时候就不要使用插件。所以在我们自己的站点上,我们一共使用了三个插件。

  • WP Editor.MD 这个是用来改造文本编辑器到MD编辑器的,这个应该是市面上最优秀的MD 版本的 Wordpress 编辑器了,这里也是重点推荐一下。
  • WP Super Cache 市面上最优秀的缓存插件之一,其他也有一堆,但是所谓的测评和差距,在目前带宽,服务器性能,Wordpress 文章数等客观条件下,插件的区别估计也就是1-3%之间。还是这个省事。
  • 积木箱子 基于搭配苏醒团队主题 Cosy使用,同时提供一系列的优化方案

WP Editor.MD 是个Markdown 编辑器,这里我只做一个截图,说明一些他确实很不错,值得推荐使用。因为古腾堡实在是目前还不太适应。

image.png

WP Super Cache 缓存插件的配置

这里注意两点,一个是看截图里面的高级配置里面的设置方式,照着来就行了。另一个就是可以考虑增加预缓存方案。后面会重点说一下预缓存的方案配置。

image.png

预缓存的配置方式

先在WP Super Cache上进行开启相对的功能。然后理论上是可以了。但是如果想更加速一下。可以给一个思路,就是缓存是放在硬盘上,如果可以把这部分内容加载在内存中,则读取速度会继续提高。这里我是参考了一个博主的设置方式。文章在这里:https://www.mom1.cn/6360.html

image.png

就是在宝塔面板中的Linux 工具箱里面。把内存盘功能用起来。目录配置好。然后开启即可。注意里面的说明,如果服务器重启则数据将被清空。其他没什么了。这样就可以了。

image.png

Opcache PHP加速缓存 和 Memcached 缓存

opcache比较简单,宝塔面板安装一下就行了,这个对php的提升还是比较大的,推荐php 7.2以上版本。性能更好。

image.png

Memcached 缓存很多人有点不太会弄。其实也简单。有这么一个文件,放在对应目录下,然后加一个配置就行。具体如下

  1. object-cache.php 文件放置在 Wordpress 根目录下面的 wp-content下即可。看截图
  2. 在根目录下的 wp-config.php 里面找一下。增加一行代码
define('ENABLE_CACHE', true);  # 具体可以看截图

这样就可以开启 Memcached了,这个 object-cache.php 文件我这里放一个下载地址,可以直接拿去用。

Object-cache.php 压缩文件下载:https://cos.lweein.cn/files/object-cache.zip

image.png

image.png

这样就可以顺利开启 Memcached 缓存了。总结一下。至此程序上的优化已经基本上可以了。以我们自己的程序首页为例,在Chrome浏览器下,未登录状态下,使用 Ctrl+F5方式反复测试10-20次,基本上加载时间都在150-350 ms 以内。

image.png

接下来就是静态资源的处理和CDN动静分离加速的处理

静态资源的安排和处理

首先需要说明的是,最好动静分离,且动静全部加速,也就是整站直接使用CDN接入,而不是直接调用服务器带宽,那太艰难了。所以全站CDN这里就不具体说明了。说一下静态解决方案。

首先,并不是很推荐静态资源直接放在 Wordpress上,即便是使用第三方 OSS 或者 COS 方式进行加速,因为服务器容量总是有限的。而且上G之后,越来越大也不好维护,同时Wordpress 的媒体管理真的是一言难尽。所以最好是所有的静态资源尽可能全部直接在 三方平台上存放,保证速度效率和费用成本以及安全存储。保证 Wordpress程序本身的便捷性和程序本身的独立性。

同时,我在编写文章时候,是在语雀平台 + Picgo 图床 的模式下,也就是我每张静态素材,在存放到wp之前,已经在图床中,也就是 Cos 里面进行了储存,所以我丢过去的其实是图床链接,那么其实对wp来说,媒体库里面是不会存有我的文章媒体的。

这里针对复制过来的文章,应该涉及到一个远程图片本地化的问题,这个其实网上也有一些方案,这里不做具体描述。主要说一下静态思路。

所以在静态资源目前的处理上基本上对wp做任何改动。少数媒体在wp的媒体库里面的也已经是CDN加速状态了。

这里选择在编辑之前直接媒体资源已经改造成基于链接的格式插入到了文章中。所以在发表和维护上,Wordpress并不直接对图片进行处理和储存,所以整个 Wordpress 非常的高效和便捷。

静态资源的样式处理优化和腾讯万象的使用

这里简单说一下基于腾讯云的COS + 万象数据进行上传图片优化方案,有些图片过大的情况下,最好上传之后做一次缩放处理,裁剪就别了。图片都少内容了。这里截图一下万象数据的配置方式,这里注意几点

  • cos+cdn 是一种方式,cos+万象+cdn 是第二种方式,因为万象也可以配置cdn域名,所以要基于万象的域名配置的调用,才能正确调用样式优化,直接使用cos上的域名调用是不行的。

  • 样式使用方式比较推荐下面的截图方式,只等比缩放,宽1920即可,因为现在都是高清,太小了也不太好。同时转成WebP格式即可

  • 使用方式其实简单,如果这个样式保存成 style01 的名字,同时样式分隔符设置成 ! 的时候,如果一张图片应该是 xxx.abc.com/111.jpg 的情况下,调用样式的格式应该是 xxx.abc.com/111.jpg 这样就可以了。可以自己尝试一下。

image.png

image.png

image.png

总结一下,这里面在不停调试和配置的时候,比较糟心的就是CDN缓存。导致要不停的刷新预热才能看到最新的改变。。。。不过总的来说,这次的配置和改动还是比较成功的。

本文总结

至此,基于 Wordpress 的安装,性能,插件,主题,静态处理,加速,缓存等等第一个阶段的处理已经优化完毕,总的来说还是比较顺利的。接下来在输出高质量文章的同时,要考虑的是下一个阶段工作,涉及到比如 数据安全,SEO优化,Docker自动构建,Wordpress REST API 接口的调用方案整理等等方案。

接下来可能涉及到小程序 / APP 封装等方面的考虑和优化。现在市面上已经有一定的解决方案,但是考虑整个网站运营的核心诉求应该是这么几点。

  1. 内容为王
  2. 性能极限
  3. 用户体验
  4. 数据安全

这四个诉求和方面,是接下来的工作方向。希望 LweeinTalk 可以越做越好。

上一篇
下一篇