MENU

Gravatar头像CDN加速

February 7, 2019 • Read: 13069 • 网站优化

  • 本篇文章主要告诉大家如何通过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

51 Comments
  1. Vergil Vergil     Windows 10 /    FireFox

    啊博主好人啊,授人渔还授人鱼

  2. 于文 于文     Android /    Google Chrome

    CDN是命中缓存才快的。而你通过F12看到的只不过是命中缓存的情况,而对于访问量低的博客,是无法命中缓存的,未命中访问CDN都要回源,也就是你图上的600ms。头像CDN还是建议用公共的。

    1. 左岸 左岸     Windows 10 /    Google Chrome

      @于文当然了,我又不是一辈子只打开一次博客@(笑尿)

    2. 于文 于文     Windows 10 /    Google Chrome

      @左岸只是你打开快而已,恕我直言,你当真能从1S内拉网页到评论页吗.....CDN是内容分发网络,是需要预热的,只是有了更优的路由线路到gravatar的服务器,基于博客的访问量,访客头像请求绝大部分都是回源请求,这与未开启CDN差别并不大。

    3. 于文 于文     Windows 10 /    Google Chrome

      @左岸反代只是有更优的回源线路(除非你主动全国预热(或被动)),这与静态资源CDN不一样,静态资源可以主动预热到L2节点,头像除非你手机所有你站点头像的链接进行预热,不然基本都是快那么几十毫秒的回源请求。

    4. 左岸 左岸     Windows 10 /    Google Chrome

      @于文至少你在访问这篇文章之前,评论里面的所有gravatar头像,已经被预热过了,也就是已经缓存到又拍云的cdn节点里了,这样后面访问的人就不需要回源,而是直接从cdn节点里面拉取头像了,不知道我这样理解对不对

    5. 于文 于文     Windows 10 /    Google Chrome

      @左岸并不是....CDN节点是分布式(非常多),用于反代的CDN对于一般博客的访问量,数据基本不可能被缓存。唯一的优势就是有一条更优线路回源(可能)。我这里有张测试图,https://imgchr.com/i/J8igsA,是用你的头像的连接做测试的,你可以注意下红框内容,你会发现,绝大多数的加载时间是0.8秒。

    6. 于文 于文     Windows 10 /    Google Chrome

      @左岸博客的静态资源可以上CDN(缓存期越长越好,资源变更记得刷新),而对于头像(如果能导出URL),唯一有效的方法的去CDN设置里面手动预热,CDN都支持手动预热到L2节点的,模拟用户请求预加载可以使用17CE之类的网站。所以对于自建头像CDN,积极意义仅在于有一条更优的回源路由,最好的方法缓存头像到本地(可以压到一两百毫秒的延迟(或更低,HTTP2协议))。

  3. h3110w0r1d h3110w0r1d     Windows 10 /    QQ浏览器

    大佬,我弄的时候,源地址填写secure.gravatar.com不行,换成cn.gravatar.com就可以了。而且您的接口好像也不能用了,我是的https://avatar.h3110w0r1d.cn/avatar 不想自己弄的朋友可以用我的@(哈哈)

  4. xinxin xinxin     MacOS /    Google Chrome

    测试

    1. xinxin xinxin     MacOS /    Google Chrome

      @xinxin删除账号

  5. xinxin xinxin     MacOS /    Google Chrome

    ganxie

  6. xinxin xinxin     MacOS /    Google Chrome

    感谢

  7. Leao9203 Leao9203     Windows 10 /    Google Chrome

    大佬...这个用的人多了我感觉流量费会很高唉...

  8. 锴     Windows 10 /    Google Chrome

    感谢大佬无偿分享!!已经用上了,等我域名备案了在自己整@(吐舌)

  9. 悦风 悦风     Windows 10 /    Google Chrome

    感谢!!!

  10. hqweay hqweay     Linux /    Google Chrome

    感谢!!