WordPress优化加载速度调试实战

在没有调试之前,几乎所有的 js,css 文件都是从 cdn 上面加载的,请求数在 25 到 30 之间,有时候可能 cdn 加载问题会导致页面重新渲染,因此将小的 js,css 文件使用源站加载,用了 Autoptimize 合并了这些文件,目前请求数在 7 个左右,减少了页面发送请求的数量,也避免了某个文件没有加载完成导致的页面加载过慢的问题。

删除了评论部分的 emoji 图标,这些图标数量在 20 个左右,都是单独加载的,因此若有个别图标没有加载完成的话页面速度会慢一些,这里直接砍掉。

调整了一下页面的字体,删除了 font-aweasome 这个字体,因为这个字体大小在 75kb 左右,而且仅有返回顶部与菜单这部分引用了该字体,感觉没有必要,删除了这个字体的引用,以及将返回顶部的文字修改为文字类型。

php-fpm 方面,调整了性能参数,最大进程数设置为 30,初始进程数为 5,并且增加了定时任务,每两小时清理一次内存。

wordpress 方面,调整了 Autoptimize 插件的参数,具体参数这里就不截图了,根据自己站点的需求调整即可。删除了 W3 Total Cache,新增了 WP Super Cache 插件缓存所有页面,实测使用 W3 Total Cache 缓存页面,页面加载时间在 100-200ms,也就是那个 / 文件,如果使用 WP Super Cache 缓存页面的话,除了首次缓存的时候页面加载时间在 150ms 左右,其他的时间均在 30ms 内即可加载完成 html 页面,相比来说 WP Super Cache 速度提升比 W3 Total Cache 要好一些。

删除了一些页面的图片文件,其中首页上方背景图片之前是 90kb 左右,通常是在最后加载,时间大约为 300ms 才加载完,这里使用的是新浪的图床,初步预估可能是图片过大的原因,压缩图片质量到 30kb 左右,仍然需要 300ms 左右才可加载完成,这里就先砍掉这张图片了,有空的话再加。

目前有个比较奇怪的问题是页面会加载一个 favicon 文件,但是查找了磁盘和 wordpress 目录都没有找到该文件,预估可能是缓存的问题,这里暂不处理。

经过以上的优化,页面的首次加载时间压缩到了 200ms 内,但是仍然有几率出现握手时间过长的问题,这个问题有点迷,正好 https 证书要到期了就换了一个证书,握手时间过长的问题从之前的百分百降低到了偶发的程度,不过暂时不影响体验,就不做优化了。

经过上述的优化流程,目前页面的首次加载速度大幅提升,之前大约是 400-800ms 加载完毕,现在是 200ms 内加载完毕。继续打开页面其他的内容可以保持秒开状态,初步预估首次加载握手时间过长的问题可能是 http 重定向到 https 的设置问题,这里有待考究,另外我个人看到有些博客的秒开,他们的有些做法很不错。

小图片,图标,使用 base64 编码,直接放到页面,这样可以享受 gzip 压缩,而且不需要浏览器发送额外请求加载文件。
js,css 文件合并,大小在 20kb 以内的 js,css 文件压缩到一个文件中,大小超过这个范围的,例如 bootstrap 的 js,css 文件,可以使用 cdnjs,七牛云这些提供的前端公共库的地址来加载,避免从源站请求。
其他的页面静态化,页面压缩这些这里就不再概述了。

由于本人是做Java开发的,对于PHP及WordPress性能调优可能并不专业,此处仅为建议。