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

发表于 分类于 阅读次数： 本文字数： 740 阅读时长 ≈ 3 分钟

一个网站打开网页的速度至关重要，如果加载时间过长，严重影响用户的体验，也许用户直接放弃了。如果打开一个网站经常需要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 调试，查看哪些页面加载比较慢，进一步优化。