0x01 前言

我建站都适用Wordpress ,而无论是Wordpress 本体还是模版甚至是插件或多或少都有使用Google 的fonts 库与ajax 库。其实Wordpress 正常情况下是很快的、效率是很高的,因为使用了Google 某些服务的原因而导致某些资源不断处于加载状态。

如果你的网站并没有使用HTTPS协议,也可以选择免费的360的前端公共库服务。如果你启用了HTTPS协议,又不想自己配置反向代理,请选用由中国科学技术大学ustclug 提供的服务。地址如下:

还有一种选择就是像我一样,在有足够资源的情况下自行配置反向代理。

0x02 链接结构

0x02.1 fonts.googleapis.com

首先来看看Google 的字体库,以下是这次用来做分析的链接:

如果你需要别的字体,可以到以下地址去自行配置并获取相应的引用地址:

0x02.2 fonts.googleapis.com 返还内容

注意里面的url 引用地址:fonts.gstatic.com ,正是这个地址,在某些地区被禁止访问,我们需要对其进行替换。

这样一来,我们需要用一个域名对两个Google 地址进行反向代理,有点复杂,但不难。

0x02.3 ajax.googleapis.com

ajax 的情况比fonts 要好,直接通过代理就好了,并不需要过多分析:

0x03 反向代理 fonts.googleapis.com

因为我所配置的所有的网站都使用HTTPS 协议,所以配置文件中包含有nginx SSL 部分。但这里并不对nginx SSL 展开分析说明,请注意。

0x03.1 逻辑

  1. 用户浏览访问https://fonts.odin.org.cn/css?family=Open+Sans ;
  2. nginx 检测到/css 这个路径适配其中一个location ,将请求转发到fonts.googleapis.com;
  3. nginx 接收fonts.googleapis.com 返还的内容,并将其中的https://fonts.c4.hk 替换为 //fonts.odin.org.cn ,并将内容重新打包转发给用户;
  4. 用户接收到修改过的内容并按需获取字体文件,但地址访问的地址是修改过的fonts.odin.org.cn;
  5. nginx 再次接受到用户的请求并检测到路径/ 适配其中一个location ,所以将这个请求转发到https://fonts.c4.hk;
  6. nginx 接收到fonts.gstatic.com 返还的内容,原封不动地转发给用户。

0x03.2 配置server 块

0x03.3 反向代理 fonts.googleapis.com

需要先获取fonts.googleapis.com 返还的内容,才能对其中的内容作出修改,所以先配置反向代理fonts.googleapis.com 的location 块。

因为要通过一个私有地址代理两个Google 地址,所以要通过链接结构进行区分,而所有字体都在(fonts.googleapis.com/css )css 目录下,所以对css 目录下的文件进行反向代理:

注意:请将上面代码中的地址fonts.odin.org.cn 替换为你自己的地址!

0x03.4 反向代理fonts.gstatic.com

0x04 反向代理ajax.googleapis.com

通过同样的方法对ajax.googleapis.com 进行反向代理:

0x05 缓存

因为以上内容都是静态内容,并不会因为请求时间或地点的不同而不同,每个链接都对应唯一的响应内容,所以缓存是极其重要的。缓存可以减少对Google 服务器访问的次数,从而减少响应时间。

首先要在nginx.conf 的http 块中添加以下内容:

然后在每个location 添加以下内容:

0x06 结语

我将我自己反向代理fonts.gstatic.com 、ajax.googleapis.com 和gravatar.com 的配置文件放在Github ,有需要的朋友请到以下链接查看:

0x07 相关视频

https://www.bilibili.com/video/av11438151/