MENU

Gravatar头像CDN加速

February 7, 2019 • 网站优化

  • 本篇文章主要告诉大家如何通过cdn来缓存Gravatar头像以达到网页加速的效果。
  • 原理是通过对cdn节点的请求从官方Gravatar服务器拉取Gravatar头像,缓存到cdn节点,以实现加速的目的。

一. 何为Gravatar头像?

Gravatar是Globally Recognized Avatar的缩写,意为“全球通用头像”。如果在Gravatar的服务器上放置了你自己的头像,那么在任何支持Gravatar的blog或者留言本上留言时,只要提供你与这个头像关联的email地址,就能够显示出你的Gravatar头像。

二. 为什么要加速Gravatar头像?

目前几乎所有的博客都支持Gravartar解析,在这里我建议关闭博客里将qq邮箱解析为qq头像的接口,并且在官网申请并创建自己的账号、上传Gravatar头像。因为首先Gravatar头像是全球通用的,可以在自己评论时采用统一头像,而不会因为qq头像变化导致评论头像的改变。其次qlogo接口速度实在太慢,而且时常抽风,导致博客加载速度很不理想,在下图可以看到采用qq邮箱接口的加载速度已经到了普遍300ms左右。
QQ20190207-174426.png

Gravatar由于国内被墙,目前友人C老哥推荐使用 https://secure.gravatar.com/avatar 或者 https://cdn.v2ex.com/gravatar 镜像源,但是经过我的测试(河北联通200M宽带),前者的加载速度似乎并不理想,时常突破600ms大关,这必然是不能忍的!我看了一下好多童鞋都在用第一个,虽然会根据地区不同有所差异,但是第一个真的不要再直接用了!!!真的太慢了!!!
QQ20190207-150048.png

再来看我们用又拍云cdn加速后的加载速度,哇和前面比简直是鸟枪换大炮!几乎都在100ms以内,是不是很心动呢? ::quyin:1huaji::
13212323.png

我这里的ping值对比

QQ20190207-173427.png

下面我们就系统的介绍通过又拍云cdn加速Gravatar头像的方法(其他cdn操作方法类似

三. 又拍云cdn加速Gravatar头像

首先进入又拍云cdn创建服务,加速地址填写你想要加速的域名,源站地址填写secure.gravatar.com,端口号填443。
QQ20190207-180724@2x.png
创建完成后在域名解析处添加一条cname解析
QQ20190207-180819@2x.png
然后申请域名证书,绑定域名证书(这一步必须要做,否则浏览器会判定不安全)
QQ20190207-180919.png

添加一条缓存规则,天数自定义。
QQ20190207-190908@2x.png

开启智能压缩以及webp自适应,其他无需设置。

handsome模板直接然后进入后台,在速度优化里设置Gravatar镜像源地址,前面部分填写你自己的加速域名,这样就大功告成了。
QQ20190207-185748@2x.png

如后台不能直接设置,直接打开Typecho安装目录下的config.inc.php文件,将以下代码加到文件末尾即可。(镜像源地址替换成自己的)

/** 定义Gravatar头像源 */
define('__TYPECHO_GRAVATAR_PREFIX__', 'https://avatar.zrahh.com/avatar/');

清除一下浏览器缓存,现在sourse里就变成自己的源了。
QQ20190207-190015@2x.png

四. 个人的Gravatar头像加速接口分享

如果大家觉得麻烦不想整的话,这里我把我的镜像源无偿奉献出来,直接在后台把镜像源修改成 https://avatar.zrahh.com/avatar 即可体验飞一般的感觉 ::quyin:witty::

Leave a Comment

52 Comments
  1. 她与空白 她与空白     Android /    Google Chrome

    博主的博客好多干货,果断收藏了,感谢

    1. 左岸 左岸     MacOS /    Google Chrome

      @她与空白互相学习#(脸红)

  2. 小彦 小彦     Windows 10 /    Google Chrome

    hi,博主你有兴趣加入『个站商店』吗?是一个精致的个人网站展示平台,上面有300个站长加入了哦!邀请你加入~~
    http://storeweb.cn

    1. 左岸 左岸     MacOS /    Google Chrome

      @小彦好的,已经在申请了 ::aru:shy::

  3. 沃茨博客 沃茨博客     Windows 10 /    Google Chrome

    本来还嫌弃Gravatar的速度的,以后就用博主的接口好了 ::quyin:1huaji::

    1. 左岸 左岸     MacOS /    Google Chrome

      @沃茨博客拿走不谢! ::quyin:1huaji::

  4. typecho模板 typecho模板     Windows 7 /    Google Chrome

    我记得以前这个邮箱有头像的,现在又没了

    1. 左岸 左岸     MacOS /    Google Chrome

      @typecho模板可以进官网再看一下 ::quyin:witty::

  5. 苏小宇 苏小宇     Android /    QQ浏览器

    感谢大佬的指点 ::quyin:witty::

    1. 左岸 左岸     MacOS /    Google Chrome

      @苏小宇不客气 ::quyin:1huaji::

  6. 撩人的无眠兔 撩人的无眠兔     Android Pie /    QQ浏览器

    很棒
    非常感谢大佬的 教程
    学了以后 腿不疼了 腰也不酸了

    1. 左岸 左岸     Android Pie /    Google Chrome

      @撩人的无眠兔哈哈哈,互相学习互相学习 ::quyin:witty::

  7. 微信抢房 微信抢房     Android Pie /    QQ浏览器

    我来测试邮件回复

    1. 左岸 左岸     MacOS /    Google Chrome

      @微信抢房嘿嘿,谢谢老哥 ::quyin:maimeng::

  8. w w     Android Oreo /    QQ浏览器

    看下我头像 ::twemoji:cry::

    1. 左岸 左岸     MacOS /    Google Chrome

      @w莫得 ::quyin:1huaji::

  9. Cinema Cinema     iPhone /    QQ浏览器

    为何不考虑缓存一下qlogo ::aru:proud::

    1. 左岸 左岸     MacOS /    Google Chrome

      @Cinema不建议用qlogo,qq头像一变,评论头像就变了,像我的qq头像我并不想用它来做评论头像(qq头像是女朋友喜欢才改的 ::quyin:die:: )

    2. 的咖啡 的咖啡     Android Oreo /    Google Chrome

      @左岸[secret]唔,我看到了哦[/secret]

    3. 左岸 左岸     MacOS /    Google Chrome

      @的咖啡[secret]宝贝别在意,爱你爱你mua(这是私密评论)[/secret]