写在前面： 由于服务器带宽只有1兆，页面加载的图片又是在本地，导致页面上图片加载速度惨不忍睹，于是有了下面的优化过程。

发现问题

利用hexo引擎+material主题搭建Blog已经有一段时间了，今天域名刚刚通过备案审批，满心欢喜的在浏览器地址栏输入 http://falsemark.cn 回车，5秒过去了，还没加载完，8秒过去了，WTK，为什么还没加载完。8秒是一个正常人对于页面加载的最大忍耐时间。

发掘问题发生的原因

于是我打开页面调试界面，看看是什么拖慢了加载速度

发现问题

qiniu-qian 图片中可以发现拖慢速度罪魁祸首有三个

  • css文件
  • js文件
  • 图片

由于页面还在装修过程中，css与js不好轻易改动，于是我们来优化图片。

解决问题

解决图片加载问题，我想到了三个个解决方案

  • 利用gulp-imagemin压缩处理图片 gulp-imagemin
  • 将图片的获取源从本地转移到7牛云 修改代码（最好根据本地的路径，在7牛云空间里建立相同的路径）
  head:
    favicon: "http://七牛云空间地址/img/favicon.png"
    high_res_favicon: "http://七牛云空间地址//img/favicon.png"
    apple_touch_icon: "http://七牛云空间地址/img/favicon.png"
    Images Settings

  img:
    logo: "http://七牛云空间地址/img/logo.png"
    avatar: "http://七牛云空间地址/img/avatar.png"
    daily_pic: "http://七牛云空间地址/img/daily_pic.png"
    sidebar_header: "http://七牛云空间地址/img/sidebar_header.png"
    footerico: "http://七牛云空间地址/img/footer/footer_ico-"
    random_thumbnail: "http://七牛云空间地址/img/random/material-"
  • cdn加速 预算有限，此种优化方式暂时放弃。

成果展示

优化后的加载速度 qiniu-hou 页面加载速度3S ，足足缩短了一半多 美滋滋收工。