建站第六篇 小站优化访问速度二三事

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

1 网站部署情况

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

2 问题分析与定位

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

cdn解析时间过长，每个资源的cdn解析时间超过了1s；

页面内嵌的GoogleAnalytics的js代码，访问google地址时间过长超过了4s；

js和css等静态资源加载时间过长；

图片资源加载时间过长

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

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

尽量将静态资源分流出去，使浏览器不需要通过海外主机即可获取到资源;

GoogleAnalytics方式由页面加载js，改成nginx转发，以减少页面的无关资源；

nginx加缓存，减少主机转发的时间；

下面就一步一步来落实。

3 静态资源分流

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

依赖的js和css组件库，引用地址换成BootCDN提供的CDN 加速服务；

自定义的js、css和img文件，放到阿里云的oss中；

整站上cdn。

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

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

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

整站上cdn遇到的问题

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

按照提示，添加域名，一路完成设置，等生效；

添加子域名解析，等生效。

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

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

Cloudflare的SSL配置

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

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

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

客户端到 Google Analytics 之间的网络问题，包括 analytics.js 脚本加载缓慢、向 Google Analytics 发送信息速度缓慢乃至失败等问题。由于各地网络情况不一，唯一通用的解决方案需要自己反向代理一个 analytics.js 脚本，并且由服务器中转向 Google Analytics 发送信息的通讯。

客户端屏蔽 Google Analytics 的相关问题，包括常见的 adblock 扩展等自带的屏蔽列表，利用 userscript 进行屏蔽等方式，这些客户端的手段都会导致统计的偏差问题。

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

此方案的优点是：

只需考虑服务器到 Google Analytics 的速度，不影响客户端的体验。

统计数据真实准确，不受干扰与屏蔽。

用户使用的语言可以通过浏览器发送的 Accept-Language 获得用户设定的 Preferred language，而 js 脚本只能获得浏览器安装时选择的语言。

配置简单方便，不需要额外安装 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;
    }
	...
}

重要配置项介绍：

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

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

6 优化效果

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

国内网站测速

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

本文链接：https://deewooo.github.io/post/%E5%BB%BA%E7%AB%99%E7%AC%AC%E5%85%AD%E7%AF%87-%E5%B0%8F%E7%AB%99%E4%BC%98%E5%8C%96%E8%AE%BF%E9%97%AE%E9%80%9F%E5%BA%A6%E4%BA%8C%E4%B8%89%E4%BA%8B/

本作品由 IvyWooo 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可，转载请注明出处。

参考文章

《本博客零散优化点汇总》，https://imququ.com/post/summary-of-my-blog-optimization.html
《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/
《Nginx 异步处理Google Analytics》，https://www.gubo.org/nginx-forward-google-analytics-optimized-loading-speed/
《在Nginx中配置Google-Analytics》，https://moonagic.com/google-analytics-with-nginx/
《Nginx 对接 Google Analytics》，https://blog.huguotao.com/post/google-analytics-with-nginx
《Nginx 内配置 Google Analytics 指南》，https://darknode.in/network/nginx-google-analytics/
《nginx proxy_cache 缓存配置》，https://blog.csdn.net/dengjiexian123/article/details/53386586

「真诚赞赏，手留余香」

本文总阅读量次

建站第六篇小站优化访问速度二三事