小站优化访问速度二三事

自己的小站还是一个实验田，没有明确的目的，更不想费心运营，所以并不想去备案，希望保持一个自由的初心，所以就把主机放到 aws 的美东机房。但是由于众所周知的原因，访问速度慢到令人发指，不上缓存的话，一次打开时间超过了 1 分钟，因此不得不认真考虑优化的问题。

1 网站部署情况

• aws 美东主机，免备案，作为域名源站，使用 nginx 转发；
• 阿里云 ecs，建站，可通过 ip+ 端口访问；

2 问题分析与定位

用 firefox 检查了一下小站主页的加载耗时情况，发现存在几个问题：

1. cdn 解析时间过长，每个资源的 cdn 解析时间超过了 1s；
2. 页面内嵌的 GoogleAnalytics 的 js 代码，访问 google 地址时间过长超过了 4s；
3. js 和 css 等静态资源加载时间过长；
4. 图片资源加载时间过长

分析一下，发现根本原因都是资源要访问在美国的主机造成的。因为一次国内的请求，要先解析到美东 aws 主机，再通过 nginx 转发到杭州 ecs，光建立连接就往返了两次太平洋。

针对主机在海外这个情况，分析目前的问题，我的想法是：

1. 尽量将静态资源分流出去，使浏览器不需要通过海外主机即可获取到资源;
2. GoogleAnalytics 方式由页面加载 js，改成 nginx 转发，以减少页面的无关资源；
3. nginx 加缓存，减少主机转发的时间；

下面就一步一步来落实。

3 静态资源分流

所谓静态资源是指不需要后端服务处理，服务器直接把相应资源发送到客户端。一个网站的静态资源一般包括 js/css/img/webfont 这些，将这些资源放到访问性能更好的地址，用户的浏览器就不用通过 aws 获取了。
我用以下几个方法来对资源做分流：

1. 依赖的 js 和 css 组件库，引用地址换成 BootCDN 提供的 CDN 加速服务；
2. 自定义的 js、css 和 img 文件，放到阿里云的 oss 中；
3. 整站上 cdn。

前两个方法本身不用多说。

BootCDN 是 Bootstrap 中文网支持并维护的前端开源项目免费 CDN 服务，致力于为 Bootstrap、jQuery、Angular、Vuejs 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。BootCDN 所收录的开源项目主要同步于 cdnjs 仓库。

感谢 BootCDN 免费提供这么好的服务，有兴趣的朋友请点击这里。

整站上 cdn 遇到的问题

我选择了 CloudFlare，原因还是坚持免备案原则，国内就没有免备案的服务商。

1. 按照提示，添加域名，一路完成设置，等生效；
2. 添加子域名解析，等生效。

等了一个晚上，访问各个子域名对应的站点发现悲剧了，几乎全部子域名的网站都提示“将您重定向的次数过多”，Chome 中的报错信息为「ERR_TOO_MANY_REDIRECTS」，这是怎么回事？ 仔细分析之后找到了原因。
这种错误是由 Cloudflare SSL 设置不当造成的。
这个问题在《WordPress 网站使用 CloudFlare 后提示“将您重定向的次数过多” 的原因及解决办法》这篇文章里有详细说明。

Cloudflare Crypto 的 SSL 中有 4 个选项（如下），其中 Off 就是不启用 SSL，通过 HTTP 协议访问网站。另外 3 种是通过 HTTPS 协议访问网站。

我将 SSL 的设置选择了 Full。之后，问题解决。

4 使用 Nginx 将请求转发至 Google Analytics 实现后端统计

原有页面加载统计 js 这种方案的缺点是：

1. 客户端到 Google Analytics 之间的网络问题，包括 analytics.js 脚本加载缓慢、向 Google Analytics 发送信息速度缓慢乃至失败等问题。由于各地网络情况不一，唯一通用的解决方案需要自己反向代理一个 analytics.js 脚本，并且由服务器中转向 Google Analytics 发送信息的通讯。
2. 客户端屏蔽 Google Analytics 的相关问题，包括常见的 ad­block 扩展等自带的屏蔽列表，利用 user­script 进行屏蔽等方式，这些客户端的手段都会导致统计的偏差问题。

如果将 Google Analytics 的统计工作从前端转移到后端完成，就可以有效避免上述问题，直接使用 Nginx 自身的功能就可以完成这一工作。

此方案的优点是：

1. 只需考虑服务器到 Google Analytics 的速度，不影响客户端的体验。
2. 统计数据真实准确，不受干扰与屏蔽。
3. 用户使用的语言可以通过浏览器发送的 Accept-Language 获得用户设定的 Preferred language，而 js 脚本只能获得浏览器安装时选择的语言。
4. 配置简单方便，不需要额外安装 Nodejs 等程序和包管理器，使用 Nginx 自身的功能即可完成。

Nginx 配置

nginx 配置 server 块内加入以下内容

userid on;
userid_name cid;
userid_domain moonagic.com;
userid_path /;
userid_expires max;
if ($http_accept_language ~* '^(.+?),') {
    set $first_language $1;
}

location @tracker {
    resolver 8.8.8.8 ipv6=off; # 需要设定dns,不然无法解析.不支持ipv6的机器需要关闭ipv6
    internal;
    proxy_method GET;
    proxy_pass https://www.google-analytics.com/collect?v=1&tid=UA-*******-*&$uid_set$uid_got&t=pageview&dh=$host&dp=$request_uri&uip=$remote_addr&dr=$http_referer&ul=$first_language&z=$msec;
    proxy_set_header User-Agent $http_user_agent;
    proxy_pass_request_headers off;
    proxy_pass_request_body off;
}

并在指向 root 的时候添加

location / {
    root   /content/path/;
    post_action @tracker;
    ...
}

或者 bypass 的时候

location / {
  proxy_pass http://127.0.0.1:8081;
  post_action @tracker;
  ...
}

这样配置以后各种文件的访问都会被记录,其中就包括 js,css,xml 这种实际上我们不需要统计的访问.
解决的办法也很简单,利用 Nginx 配置将这些静态资源的访问过滤掉就好.
比如:

location ~ .*\.(css|js|ico|jpg|woff|png|txt|xml|ttf)$ {
    root   /content/path/;
    or
    proxy_pass http://127.0.0.1:8081;
}

不过我的小站目前的静态资源已经全放出去了，所以这个问题还好。

5 给 nginx 加缓存

这个就不分析了，直接上配置。

在 http 块中加上这段配置

http{
	proxy_cache_path /path/to/cache levels=1:2 keys_zone=my_cache:10m max_size=10g inactive=60m use_temp_path=off;
	
	server{
	...
	}
}

在 server 配置中的 location 块，增加这段配置

server{
    ...
	location / {
	    proxy_cache my_cache;
        proxy_pass http://127.0.0.1:8081;
        proxy_cache_valid 200 206 304 301 302 10d;
        proxy_cache_valid any 1m
        proxy_buffer_size          128k;
        proxy_buffers              32 256k;
        proxy_busy_buffers_size    256k;
    }
	...
}

重要配置项介绍：

1. Proxy_cache my_cache：使用名为 my_cache 的对应缓存配置
2. proxy_cache_valid 200 206 304 301 302 10d： 对 httpcode 为 200…的缓存 10 天

至此，最基本的 nginx 缓存功能就配置成功了

6 优化效果

什么都不如实测有力量，用站长工具中的国内网站测速跑一下，下面是测速结果图

效果比之前已经好太多了。第一次整站优化，已经达到初步效果。

参考文章

1. 《本博客零散优化点汇总》，https://imququ.com/post/summary-of-my-blog-optimization.html
2. 《WordPress 网站使用 CloudFlare 后提示“将您重定向的次数过多” 的原因及解决办法》，https://www.wpzhiku.com/wordpress-wang-zhan-shi-yong-cloudflare-hou-ti-shi-jiang-nin-chong-ding-xiang-de-ci-shu-guo-duo-de-yuan-yin-ji-jie-jue-ban-fa/
3. 《Nginx 异步处理 Google Analytics》，https://www.gubo.org/nginx-forward-google-analytics-optimized-loading-speed/
4. 《在 Nginx 中配置 Google-Analytics》，https://moonagic.com/google-analytics-with-nginx/
5. 《Nginx 对接 Google Analytics》，https://blog.huguotao.com/post/google-analytics-with-nginx
6. 《Nginx 内配置 Google Analytics 指南》，https://darknode.in/network/nginx-google-analytics/
7. 《nginx proxy_cache 缓存配置》，https://blog.csdn.net/dengjiexian123/article/details/53386586