hexo - 优化你的博客速度

1,434 阅读3分钟

今天迁移博客的时候,顺便用Google的Pagespeed Insights来检测了一下自己网站的体验,果不其然,虽然用了hexo框架搭建,但还是没有达到80分的及格线。出现了两个非常严重的问题,如下图所示:

问题1: 服务器压缩文件

待解决的问题

打开Google的提示解决办法链接,就明白了我们需要做的什么了,我们需要在http的请求头中,给Content-Encoding进行编码。那么来通俗的解释一下这个请求头的作用。

Content-Encoding基本上就是用来对于实体内容进行压缩,类似于我们压缩文件一样,它也有几种格式,比如Apache的mod_deflate,也有我现在的服务路nginx的HttpGzipModule,还有一种就是IIS的配置了。相当于我们把我们服务器的部分内容进行压缩,然后发送给我们浏览器解析,这样就大大减小了文件传递速度,帮助我们更快地响应页面。当然,如果老式浏览器不能解析我们的压缩包怎么办,我们的服务器会非常智能的传递非压缩文件格式。

下面我以我自己的centos7在Nginx配置为例子:vi /etc/nginx/conf.d/gzip.conf

### `gzip` Settings##gzip on;gzip_disable "msie6";gzip_vary on;gzip_proxied any;gzip_comp_level 6;gzip_http_version 1.1;gzip_min_length 256;gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;

然后 systemctl restart nginx 然后重启你的Nginx代理服务器。

我们可以看到Content-Encoding的值已经是gzip了。

问题2: 首屏加载问题

这个问题前端的小伙伴们应该非常熟悉!js放在footer底部就可以解决js问题了,那么css我们如何做异步加载呢?

先贴出答案css async load
解析:我们先给这个样式设置一个媒体查值为false的情况,当一个媒体查询的结果值计算出来是false的时候,浏览器虽然仍然然会下载样式表,但是不会在渲染页面之前等待样式表的资源可用。这样我们就实现了无异步加载了。

问题3: 浏览器缓存问题

其实就是我们HTTP标头中的cache-control参数设置过期日期或最长存在时间,可让浏览器从本地磁盘中加载以前下载的资源,而不是通过网络加载。

同样这个问题需要在我们的服务器上面去设定,以我自己Nginx服务路为例子: vi /etc/nginx/nginx.conf

location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ {    root /var/www/hexo;    access_log   off;    expires      30d;}location ~* ^.+\.(css|js|txt|xml|swf|wav|ttf)$ {    root /var/www/hexo;    access_log   off;    expires      10d;}

我们只需要给expires设置值就好

实测网站的加载速度快了近一倍。网站的访问速度,不仅仅取决于代码的优化,运维部署的时候还是很多东西值得学习的。如果有好的建议或者解释错误的地方,请提issue