Firekylin博客优化指南

Firekylin 博客

Firekylin 博客是一个基于 ThinkJS 的博客系统，本身对博客的优化已经非常不错，很多资源都已经进行了压缩或者缓存策略。

但是本着能缓存就要缓存的策略，Firekylin 还是有一点优化空间的，下面就是优化的要点。

优化步骤

首先打开网站首页https://excaliburhan.com。右键检查(或者审查元素)，选择Network查看资源加载情况：

alt

可以看到，加载的资源主要有几种，首页logo，iconfont字体，google统计代码，因为我没有设置首页背景图，如果有，处理应该是和 logo 一致的，这里就不展开了。

我们首先从首页logo开始。

我采用的 logo 已经是压缩过的图片，但是还有 10k 左右的大小，我们的目标是图片加载一律走缓存。

首先采用了使用 base64 编码的方式，这样图片是会被缓存的。来看一下效果：

alt

嗯，很好，图片被缓存了。不过，等等！index.html从原来的 6.8kb 变成了 17.4kb，反而加载的资源大小更大了！究其原因，就是图片从 jpg 转变成 base64 图片，大小变成 12kb 左右，而首页 logo 采用的是 img 标签，等于说 12kb 的文本加载到了index.html中，这显然不是我们需要的。

如果改成 background 的形式，理论上可以解决，但是加载的大小转移到了 css 样式文件中，1 是没有解决根本问题(base64 本身带来的字节大小)，2 是需要改写博客源代码，成本太高，换另外一种方案。

由于之前给 Firekylin 提了 mr，现在图片上传可以支持 cdn，而我一直采用的是七牛的 cdn，现在换成七牛 cdn 看看。

alt

可以看到图片已经被缓存了，这里图片走的是 cdn 的缓存机制，所以它的有效时间是由 cdn 设置决定的。如果你看的比较仔细，你可以发现index.html的大小也变小了，那是因为我之前忘记截图了，更新新版本的 Firekylin 导致的，看来 Firekylin 也一直在优化呢(笑)。而这里，我们就把它还当作是 6.8kb 吧。

iconfont

Firekylin 采用了 iconfont 来处理一些全局用到的图标，首页的菜单会用到这个文件。

由于这个文件以后可能会有变化，所以 Firekylin 给它添加了?v=的版本信息。

那这个文件我们要怎么缓存呢，结论是采用 nginx 缓存！其实类似图片如果没有 cdn 的服务，也是可以采用这个方案的，配置大概如下：

首先在http里配置缓存信息

1
2
3
proxy_cache_path   /etc/nginx/proxy_cache levels=1:2 keys_zone=pnc:300m inactive=10m max_size=5g;
proxy_temp_path    /etc/nginx/proxy_temp;
proxy_cache_key    $host$uri$is_args$args;

然后在server中配置相关的内容，这里我把图片的也贴出来，但是本站实际走的是 cdn 配置，nginx 并不会生效，如果你有需要，可以按照这个进行配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
location ~ .*\.(gif|jpg|jpeg|png)(.*) {
        proxy_cache               pnc;
        proxy_cache_valid         200 304 1d;
        proxy_cache_valid         any 1m;
        proxy_cache_lock          on;
        proxy_cache_lock_timeout  5s;
        proxy_cache_use_stale     updating error timeout   invalid_header http_500 http_502;
        etag                      on;
        expires                   1d;
}
location ~ .*\.(ico|svg|ttf|eot|woff)(.*) {
        proxy_cache               pnc;
        proxy_cache_valid         200 304 1y;
        proxy_cache_valid         any 1m;
        proxy_cache_lock          on;
        proxy_cache_lock_timeout  5s;
        proxy_cache_use_stale     updating error timeout invalid_header http_500 http_502;
        etag                      on;
        expires                   1y;
}

这里需要注意的是，server中的proxy_cache的名称要和http中配置的keys_zone一致。

上面的server配置，第一条是对常见图片结尾的文件进行一天的缓存，这里不建议把缓存时间定很长，否则你的同路径同名称的图片可能很久都不会改变。第二条就是对字体文件结尾的文件进行一年的缓存。这个可以设置久一些，因为一般这个文件是不会变动的，如果变动，版本信息导致的变动也会让 etag 改变，从而刷新缓存。

重启 nginx 看下效果：

alt

google 统计代码

下面就是 google 的统计代码了。由于是异步获取的 google 官方的 analytics.js 文件，其实对于网站加载是完全没有影响的。而 google 设置的缓存时间是 2 小时，这个时间太短了，以至于 google 自己的官方检测给出的意见是提高该 js 的缓存时间- -，检测的地址是:

https://developers.google.com/speed/pagespeed/insights/

那么对于这个 js 文件怎么办呢？分析一下，主要有两点，一是延长 js 的缓存时间，而是保证 js 是最新的。

google 官方是提供自定义请求来达到统计功能的，屈屈的零散优化点汇总这篇文章就是采用这个方法的。

但是这个方法有一定的局限性，一是需要改写服务端的代码，添加统计逻辑，二是你的服务器必须能 ping 通 google 的 api 地址，所以说并不太实用。

我这里采用了nginx缓存+定时任务将 google 统计代码本地化，从而达到优化的目的。

首先，当然是 nginx 缓存配置：

1
2
3
4
5
6
7
8
9
10
11
location ~* (analytics\.js)$ {
        alias                     /path-to-static/analytics.js;
        proxy_cache               pnc;
        proxy_cache_valid         200 304 7d;
        proxy_cache_valid         any 1m;
        proxy_cache_lock          on;
        proxy_cache_lock_timeout  5s;
        proxy_cache_use_stale     updating error timeout invalid_header http_500 http_502;
        etag                      on;
        expires                   7d;
}

由于 Firekylin 的路由是用来做 post 的，所以需要一个 alias 的设置，将path-to-static替换成你存放的目录即可。我这里设置的缓存时间是一周，你也可以根据需要改变这个时间，但是不宜过长。

这样我们得到了一个本地的 analytics.js，但是它不会自动更新文件，这时候就需要定时任务了。

crontab -e添加定时任务如下：

1
0 0 * * 0 wget https://www.google-analytics.com/analytics.js -O /path-to-static/analytics.js

我这里设置的是每周日 0 点自动去 wget 需要的 analytics.js，替换自己目录的该文件。你也可以根据自己的缓存时间来编写自己的定时任务。

配置结束，来看下效果：

alt

放下初次加载没有缓存的对比图：

alt

结束

看我截图的加载时间，发现缓存之后，index.html有时候会加载比较久的时间，这是和网络相关的。但是，可以确定的是，走缓存的资源都是秒加载的，是不是很爽？

如果你也用 Firekylin 的博客，可以按照这个方法进行下优化，如果不是这个博客系统，一些方法也可以参考。如果你有什么意见或建议，欢迎一起探讨～