hexo博客优化,提高网页打开速度

一个网站打开网页的速度至关重要,如果加载时间过长,严重影响用户的体验,也许用户直接放弃了。如果打开一个网站经常需要10秒以上,那么我下次肯定不会再来了。
本文介绍hexo next主题优化打开速度。

概述

常见的网站提速方案有 压缩源文件,nginx gzip压缩,cdn加速,减少网站一些不必要的引入,图片大小等。

nginx gzip压缩

首先需要一台云服务器按照nginx,nginx按照参考:[Linux Centos7安装nginx](http://www.itcto.cn/jc/linux-nginx

  • 修改nginx.conf,在http模块中增加gzip配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#打开gzip压缩
gzip on;

#最小压缩文件大小
gzip_min_length 1K;

#压缩缓冲区
gzip_buffers 4 8k;

#压缩类型
gzip_types text/* text/css text/plain application/javascript application/x-javascript application/xml application/json image/jpeg image/gif image/png image/gif application/octet-stream;

#压缩级别 1-9 1最快 9最慢
gzip_comp_level 9;

#压缩通过代理的所有文件
gzip_proxied any;

#vary header支持
gzip_vary on;

#压缩版本(默认1.1,前端为squid2.5使用1.0)
gzip_http_version 1.1;

cdn加速

cdn加速有两种方式:
1.设置「JavaScript 第三方库」使用cdn
2.整个博客使用cdn

设置「JavaScript 第三方库」使用cdn

修改主题配置 themes/next/_config.yml
打开_config.yml文件,搜索 vendors ,把下面内容替换。

使用bootcss提供的cdn服务,国内访问非常快。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
vendors:
# Internal path prefix. Please do not edit it.
_internal: vendors

# Internal version: 2.1.3
jquery: https://cdn.bootcss.com/jquery/2.1.3/jquery.min.js

# Internal version: 2.1.5
# See: http://fancyapps.com/fancybox/
fancybox: https://cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.pack.js
fancybox_css: https://cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css

# Internal version: 1.0.6
# See: https://github.com/ftlabs/fastclick
fastclick: https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js

# Internal version: 1.9.7
# See: https://github.com/tuupola/jquery_lazyload
lazyload: https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js

# Internal version: 1.2.1
# See: http://VelocityJS.org
velocity: https://cdn.bootcss.com/velocity/1.2.1/velocity.min.js

# Internal version: 1.2.1
# See: http://VelocityJS.org
velocity_ui: https://cdn.bootcss.com/velocity/1.2.1/velocity.ui.min.js

# Internal version: 0.7.9
# See: https://faisalman.github.io/ua-parser-js/
ua_parser: https://cdn.bootcss.com/UAParser.js/0.7.9/ua-parser.min.js

# Internal version: 4.6.2
# See: http://fontawesome.io/
fontawesome: https://cdn.bootcss.com/font-awesome/4.6.2/css/font-awesome.min.css

# Internal version: 1
# https://www.algolia.com
algolia_instant_js:
algolia_instant_css:

# Internal version: 1.0.2
# See: https://github.com/HubSpot/pace
# Or use direct links below:
# pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js
# pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css
pace:
pace_css:

# Internal version: 1.0.0
# https://github.com/hustcc/canvas-nest.js
canvas_nest: https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js

# three
three: https://cdn.bootcss.com/three.js/r83/three.min.js

整个博客使用cdn

常见的免费cdn有 百度云加速,加速乐,又拍云;
我使用的是 加速乐 ,觉得挺方面的,使用也比较简单,每个月有3600GB免费流量,加速乐官网:https://www.yunaq.com/jsl/#price

图片大小优化

  1. 博客内容尽量不要有大量的图片,图片多了加载是非常慢的,尤其是图片比较大的
  2. 控制图片大小,每个图片尽量不要超过100kb
  3. 使用云存储,减少博客的请求量(腾讯云存储每个月有免费额度)

检查哪些第三方服务比较慢

可以通过Google浏览器打开博客,通过打开 F12 调试,查看哪些页面加载比较慢,进一步优化。