更换掉了用了三年的hexo主题，

处于某些美观强迫症，会加一堆图片。

导致网页加载速度，慢过预期。

此时，又想起之前尝试用ffmpeg切片加快在线视频播放的事情，

于是，就想好好去查查资料，整理一下关于如何优化网页加载速度的方案。

运行环境 Runtime environment

1
操作系统： Windos10

运维层面

  • 尽可能的将html,js,css部署到cbn服务器上
  • 开启etag或者过期时间，以便浏览器端尽可能的使用缓存
  • 开启http的gzip压缩
  • 开启http/2开启HSTS以便让上一条总是生效
  • 开启 http concat静态资源使用不同的域名，以便减少cookie体积

web前端开发层面的优化

  • 代码丑化（压缩）
  • 图片矢量化，比如icon font，svg等
  • js和css的http请求合并。（注意开启了http/2的时候，不要滥用，让浏览器充分发挥它的缓存特性）
  • 雪碧图(精灵)
  • 调整加载顺序，先html，后css，最后js使用服务器端预渲染技术
  • 图片懒加载
  • 内容分页加载或懒加载

最后四条优化的是用户感知层面上的速度，其中最后三条甚至会增加网络传输的总数据量，但会让用户觉得反而速度快了。