Technology / Website Enhancement · 2018年9月14日

网站优化之 – Reduce TTFB

今天又手欠地把这个网站放到测试工具(https://tools.pingdom.com/https://www.webpagetest.org/)里跑了一下,结果页面载入速度回到了17秒……

首先发现图片还是最大延迟的部分 – 尽管之前使用了Smush,但是首页载入的图片大小依旧很大。正好赶上Smush要更新版本,就细细地阅读了一下他的说明,然后……我发现Free的版本是不压缩原文件的!只压缩各种缩微图……

我的首页使用的都是裁剪的原图,所以Smush根本没压缩……

好吧,我立刻在网上搜索了一下,换了一个TinyPNG公司的Compress JPEG & PNG images插件,当然用的也是免费版,但是人家免费版可以压缩原图,只是有单月500张图片的限制。够用了。

再回头看测试工具给的报告,我发现图片在Load的时候,Wait time特别的长。有的图片要Wait 个6、7秒,然后用不到1秒来传输……

于是我搜索了一下如何减少wait time,发现了这个文章《How to Reduce TTFB to Improve WordPress Page Load Times》。

TTFB是Time to First Byte的简写,意思就是首字节返回的时间,也就是Wait Time。里面提到了几个方法,其实一个是使用CDN,我知道这个很有效,但是需要额外支付费用,但是我用不到。另外提到一个方法,使用Wordpress Cache。

我对于Wordpress Cache并不是十分理解,可能是把动态的内容变成静态,这样减少了动态读取部分的时间。文章里推荐了一个插件,叫Cache Enabler,很简单粗暴的一个名字。我启用后并没有发现在本地创建了任何静态页面的内容,细读介绍了之后,发现这个插件其实把Cache内容放到了KeyCDN里。

哦呦?还是用了CDN嘛?但是为什么是免费的呢?我上KeyCDN里查价格并没有看到免费的选项啊……

不过结果还是立竿见影的。在WebPageTest新的报告里,First Byte Time一下子从F跃升到A,但是总时间并没有减少太多,从17秒减到15秒左右。

图片传输的时候还是有Wait Time,可能进一步的瓶颈来自于主机的资源了,这个有时间再研究吧。

Tips

我在使用Cache Enabler插件的时候,出现了“Unable to create directory”的错误。

很明显,是因为权限不正确,导致后台创建文件夹失败。但是我不知道需要在哪个路径创建哪个文件夹。后来发现有人也问了同样的问题。其实答案就在其自己的文件里:cache-enabler.php。

define(‘CE_CACHE_DIR’, WP_CONTENT_DIR. ‘/cache/cache-enabler’);