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脚本尽量后置,如果不影响功能,建议放在</body>之前,并且能异步加载的,尽量异步加载。比如本站的nova主题,许多脚本都是后置并且异步的。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,155评论 25 708
  • 围绕前端的性能多如牛毛,涉及到方方面面,以我我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列注意,是罗列不是展...
    流动码文阅读 695评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,890评论 18 139
  • 听了课程的最后一节课—《超级链接的内心引力》,真的感受的Rae的用心,听的我热泪盈眶。Rae敞开自己,结合案例,毫...
    sssusy阅读 268评论 0 0
  • 昨晚看了《从你的全世界路过》,看完之后,没有一点感觉。不禁开始怀疑,是不是我有点铁石心肠。看朋友圈在刷这部电影已经...
    菜菜小仙女阅读 164评论 0 0