搭建博客(四) —— 优化博客加载速度

Author Avatar
xiaoLit Created: May 09, 2019 Updated: May 14, 2020

一、优化博客加载速度

由于静态资源放置于独立域名之下的好处等具体情况,我们的Hexo博客有许多种搭配方案。比如:1.将博客资源放到对象存储中进行CDN加速;2.还有域名全站CDN加速。
出于我已经购买过了腾讯云的云服务器,使用nginx反向代理,博客资源在云服务器中,所以直接采用的第二种域名全站CDN加速,省时省力。

二、内容分发网络(Content Delivery Network)

CDN及其工作原理

1. CDN加速域名

前提先在工信部备案域名哦。
CDN快速接入

2. 注意事项:

(1) 对应CDN加速域名的解析

需要给你的域名www.domain.comdomain.com都添加到CDN加速列表中

然后在域名解析中分别填入对应的CDN加速后的域名。

(2) 在CDN中将HTTPS证书配置好



把之前我们申请的HTTPS证书配置上去,并且开始HTTPS2.0

(3) 可以开启强制HTTPS

那么我们在服务器中nginx.conf文件中的rewrite ^(.*) https://$host$1 permanent代码就可以去掉了。

(4) 缓存刷新

当启用了CDN加速后,更新网站内容之后一定要记得刷新CDN的缓存。
腾讯云支持:URL刷新和目录刷新,其他云应该也有类似机制。
一般我们博客更新提交后,只需要使用URL刷新首页。

这里填写上我们的域名即可。

更多详情:缓存刷新

三、静态资源压缩优化

I want a profect page to show for my blog, so I made this.

hexo-neat静态资源压缩优压缩插件。

1. 安装

npm install hexo-neat --save

2. 注意事项

配置参考

四、“节能省排”

做完加速后,我们可以通过chrome的无痕式窗口来做速度校验。并且可以通过“检查”-“Network”来具体查看网页加载中要素的耗时,来具体分析问题。