利用七牛云存储缓存Gravatar头像加速 WordPress

2017年2月16日01:03:12 技术分享 1 1,968

WordPress默认集成的头像系统是:gravatar,如果您的网站上评论较多,而又没有使用第三方的评论系统,那么因为gravatar在国内打开速度很慢的原因,会影响你的网站载入速度,甚至会把你的网站速度拖的很慢。

利用七牛云存储缓存Gravatar头像,是一种很完美解决头像速度的办法,可以大大的提升头像的载入,也提升了网站的速度,让评论的用户更加有评论的欲望。

利用七牛云存储缓存Gravatar头像加速 WordPress

原理很简单,就是借助七牛云的“对象存储”拉取Gravatar的SSL服务器上的头像图片转存到七牛空间来实现,如果再在“对象存储”空间上再开启七牛云的融合CDN的话那就超级完美了,当然不使用CDN单就七牛空间的速度也比原有的强出了很多。

首先,当然是注册个七牛云账号(https://qiniu.com)并通过实名认证了,然后登陆七牛云账号新建一个“对象存储”空间,空间名字可以任意英文组合即可,镜像源要设成https://secure.gravatar.com/以便拉取 Gravatar 官网的头像图片(当然你也可以设定成多说 Gravatar 头像服务器地址),如下图:

利用七牛云存储缓存Gravatar头像加速 WordPress

然后根据自己WordPress主题使用到的头像尺寸设定七牛云对象存储空间的“图片样式”,参照 Gravatar 官方头像不同 size 的图片,依次是?s=40、60、80、100、120(你可以审查元素看看):

利用七牛云存储缓存Gravatar头像加速 WordPress

就明月使用的 Begin 主题来说32、40、60、80、100尺寸是最合适的,所以分别创建“图片样式”如下图:

利用七牛云存储缓存Gravatar头像加速 WordPress

这是全部创建完成后的处理样式列表:

利用七牛云存储缓存Gravatar头像加速 WordPress

每个图片处理样式就参照上图设定即可,样式名称即为尺寸数字即可。

至此七牛云存储端设置全部完成,剩下的就是在 WordPress 所使用的主题下根目录下的function.php里添加如下代码替换 WordPress 默认评论头像地址:

//缓存Gravatar 头像到七牛云存储,WordPress 4.0+ 适用
function qiniu_avatar($avatar) {
$avatar = preg_replace('/.*\/avatar\/(.*)\?s=([\d]+)&.*.srcset=.*/','',$avatar);
return $avatar;
}
add_filter( 'get_avatar', 'qiniu_avatar', 10, 3 );

记得要把你自己的七牛空间域名或者绑定的自定义域名在代码里填上(代码内紫色字部分替换即可),然后保存,浏览一下评论页面后,对评论头像地址进行验证是不是已经替换为七牛云空间缓存的图片了。这时登录七牛云可以看到空间里面已经缓存了头像图片了,如下图:

利用七牛云存储缓存Gravatar头像加速 WordPress

最后就是体验博客载入速度了,如果你是七牛付费用户还可以给头像缓存的七牛空间开启融合 CDN(前提是你的域名备案了,否则不能使用七牛的融合CDN服务) ,这样头像调用会选择离你最近、速度最快的节点链接,这样就可以避免Gravatar被“墙”以来头像总是获取失败和载入龟速的尴尬了,也算是变相的给我们的 WordPress 提了速!话说也不知道啥时候 WordPress 才会考虑在国内架设服务器,但愿这个愿望可以实现。

如果遇到 Gravatar 头像缓存到七牛后会造成用户更换头像后不能同步更新的问题,这个同步更新估计是没戏了,但我们可以通过设定 Gravatar 头像的缓存有效期来避免出现这样的尴尬,只需设定缓存 Gravatar 头像的七牛空间的“文件客户端缓存 maxAge”就可以了,如下图:

利用七牛云存储缓存Gravatar头像加速 WordPress

文件客户端缓存 maxAge的值是以秒为单位的,为了方便大家根据不同情况设定不同的天数,下面直接给出不同天数对应的秒数,以方便大家填写:

1天=86400秒
3天=259200秒
7天=604800秒
10天=86400秒
14天=1296000秒
20天=1728000秒

为什么可以这样设定,这是因为前文讲到的缓存 Gravatar 头像的七牛存储空间镜像源是 Gravatar官方的https://secure.gravatar.com/服务器,七牛会重新拉取对应的头像图片的。

转载于:明月登楼博客

目前评论:1   其中:访客  1   博主  0

    • 试一试的人 试一试的人 0

      试一试

    发表评论

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: