DarkNode

Life, the Universe and Everything

Hexo 博客的访问速度相关配置优化

本文发表于:
最后修改于:
分类:network
合计信息量:4.17kb

总体思路

作为一个搭在廉价 VPS 上的静态博客,我希望尽可能优化博客的 HTTPS 访问速度,为此,我在最近一个月对博客进行了一系列改进。

配置 HTTP/2

在 Ng­inx 配置项中加入 http2 即可完成:

lis­ten 443 de­fault_server ssl http2 fastopen=3 reuse­port;
lis­ten [::]:443 de­fault_server ssl http2 fastopen=3 reuse­port ipv6only=on;

配置 Gzip

在 Ng­inx 配置文件中加入:

gzip on;
gzip_sta­tic on;
gzip_http_ver­sion 1.1;
gzip_vary on;
gzip_min_length 256;
gzip_buffers 16 8k;
gzip_comp_level 9;
gzip_prox­ied any;
gzip_types
    text/xml ap­pli­ca­tion/xml ap­pli­ca­tion/atom+xml ap­pli­ca­tion/rss+xml ap­pli­ca­tion/xhtml+xml im­age/svg+xml
    text/javascript ap­pli­ca­tion/javascript ap­pli­ca­tion/x-javascript
    text/x-json ap­pli­ca­tion/json ap­pli­ca­tion/x-web-app-man­i­fest+json
    text/css text/plain text/x-com­po­nent
    font/open­type ap­pli­ca­tion/x-font-ttf ap­pli­ca­tion/vnd.ms-fonto­b­ject
    im­age/x-icon;
gzip_dis­able msie6;

SSL 配置与优化

本站目前使用了如下的 SSL 配置:

ssl on;
ssl_cer­tifi­cate /etc/ng­inx/ssl/cert.pem;
ssl_cer­tifi­cate_key /etc/ng­inx/ssl/cert.key;
ssl_ses­sion_tick­ets on;
ssl_sta­pling on;
ssl_sta­pling_ver­ify on;
ssl_trusted_cer­tifi­cate /etc/ng­inx/ssl/ca.pem;
re­solver 8.8.4.4 8.8.8.8 valid=300s;
re­solver_time­out 10s;
ssl_dh­param /etc/ng­inx/ssl/dh­param.pem;
ssl_pre­fer_server_ci­phers on;
ssl_pro­to­cols TLSv1.1 TLSv1.2;
ssl_ci­phers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AES­GCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:!aN­ULL:!eNULL:!EX­PORT:!DES:!RC4:!3DES:!MD5:!PSK';
ssl_ses­sion_time­out 1d;
ssl_ses­sion_cache builtin:1000 shared:SSL:20m;
ssl_buffer_size 1400;

上面用到的允许使用的算法参数来自与 Mozilla 的一个 项目,由于我的网站本体大量使用 HTML5 元素与 CSS3 选择器,所以在 SSL 算法的浏览器兼容性上直接选择了 mod­ern,索性直接避免老浏览器的访问。

以下设置用于启动 OCSP sta­pling 的特性:

ssl_sta­pling on;
ssl_sta­pling_ver­ify on;
ssl_trusted_cer­tifi­cate /etc/ng­inx/ssl/ca.pem;
re­solver 8.8.4.4 8.8.8.8 valid=300s;
re­solver_time­out 10s;

值得注意的是 ca.pem 文件与一般的 SSL 证书文件合并顺序不同,一般的 SSL 证书文件要求按照「网站证书-中间证书-CA 证书」的顺序合并,OCSP sta­pling 使用 ca.pem 的顺序是「CA 证书-中间证书」,不包含网站证书。

缓存优化

由于本站是一个静态博客,大部分文件都可以直接设置一个较长的缓存时间:

lo­ca­tion ~ .*\.(ico|gif|jpg|jpeg|png|bmp|swf|wav)$ {
    ex­pires 30d;
}

lo­ca­tion ~ .*\.(js|css)$ {
    ex­pires 10d;
}

lo­ca­tion / {
    ex­pires 1d;
    try_files $uri $uri/ =404;
}

设置较长的缓存时间后,用户体验有了很大的提高。

网页优化

使用 In­stantClick 项目,当用户鼠标指向一个链接时就预先加载链接本身,根据测量,从用户鼠标指向一个链接到点击链接,中间有约 500ms 的时间差,利用这个时间差可以节约访问时间。

使用 APP Cache 技术强制现代浏览器缓存 js 与 css 文件,为所有网页的 html 元素添加 man­i­fest 属性:

<html lang="zh-Hans" man­i­fest="/ex­am­ple.ap­p­cache">

并创建对应 ex­am­ple.ap­p­cache 文件:

$ cat ex­am­ple.ap­p­cache 
CACHE MAN­I­FEST
# v1.0.0
ex­am­ple.css
ex­am­ple.js
ap­ple-touch-icon.png
fav­i­con.ico
NET­WORK:
*

上述文件中提及的 4 个资源文件将被浏览器强制缓存,从而避免可能出现协商缓存以加速载入。当上述资源文件被修改后,只有修改 ap­p­cache 文件本身才会触发资源文件的重新下载并缓存,可以通过修改注释部分的版本号完成此工作。

以上的优化集中在加速后续多次访问,而当第一次访问网页时,js 文件和 css 文件可能阻碍网页加载与渲染,为 js 文件链接添加 de­fer 关键字以防止 js 文件阻碍网页的加载与渲染。使用 link 元素的 me­dia 属性使网页内容优先渲染显示,待 css 文件加载完成之后触发 re­flow 重新渲染网页。

<script src="/ex­am­ple" de­fer="de­fer">
<link rel="stylesheet" type="text/css" href="/ex­am­ple.css" me­dia="none" on­load="me­dia='all'">
<no­script><link rel="stylesheet" type="text/css" href="/ex­am­ple.css"></no­script>

调整网页结构,将 header、con­tent、footer 的顺序修改为 con­tent、header、footer 以加快主要内容的渲染与呈现。