Hexo页面加载性能优化

引言

影响网页打开速度的原因有许多种，本文主要对部署在github上的hexo博客页面的加载速度做一个分析。然后给出几点相关的优化建议。

加载速度对比

先看下面几个站点的加载速度

• www.ieclipse.cn
  这是我自己的站点，使用了双线部署，国内节点为coding.net。
  

  
  
  请求非常多，52个请求，页面加载用时427ms，加上其它的异步请求，总用时1.54s。相当于页面秒开。加载相对较慢的有nova.css和那个自动隐藏导航栏的js脚本。其它的像jq和bootstrap都使用了cdn，加载还是相当快的。

• csdoker.com

  
  
  
  
  

  请求虽然少，只有14个，但是加载速度非常慢，主要是博客部署在github上，国内访问较慢，页面呈现用时5s，全部加载总用时11.74s。相对加载速度较慢的主要是背景，头像和字体文件。总体来说加载慢。

• fatdoge.cn

  
  
  
  
  

  请求也少，只有12个，但是加载速度却是相当地慢，光域名解析建立连接就将近5s，剩下的大家看图。到我截完图，它还在加载其它的一些资源。

• login926.github.io

  
  
  
  
  

  请求较多，影响页面呈现的只有前5个请求，在1.4s内加载完成。因为脚本和css少。呈现非常快。页面总加载耗时3.95s。如果考虑数据量的话，此网站的加载速度是最快的。

优化建议

• 使用多线部署，因为国内访问github比较慢，建议博客可以放在国内的站点。具体教程可以参考本站另一文章：Hexo博客双线部署
• 使用cdn，对于字体，js，css等静态资源，如果有cdn加速，建议使用cdn。比如我的博客，jquery, bootstrap使用的都是cdn。
• 尽量使用简洁的主题，比如Next，像上面的csdoker.com和fatdoge.cn使用的主题，加载就慢多了。
• js脚本尽量后置，如果不影响功能，建议放在之前，并且能异步加载的，尽量异步加载。比如本站的nova主题，许多脚本都是后置并且异步的。

本文永久链接： http://www.ieclipse.cn/2016/08/30/Web/Hexo-blog-performance/ 未经允许，禁止转载，如有问题，请在我的博客原始页面提交评论。