美文网首页Hexo
Hexo页面加载性能优化

Hexo页面加载性能优化

作者: Jamling | 来源:发表于2017-06-13 13:38 被阅读0次

引言

影响网页打开速度的原因有许多种,本文主要对部署在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/ 未经允许,禁止转载,如有问题,请在我的博客原始页面提交评论。

相关文章

  • iOS性能优化之页面加载速率

    iOS性能优化之页面加载速率 iOS性能优化之页面加载速率

  • Hexo页面加载性能优化

    引言 影响网页打开速度的原因有许多种,本文主要对部署在github上的hexo博客页面的加载速度做一个分析。然后给...

  • web页面性能优化以及SEO

    web页面性能优化能够提高页面加载速度,提升用户体验度,基于三秒法则,每个网站都极力优化页面性能。 SEO(Sea...

  • 前端性能初步优化

    性能优化有两个方向 优化页面渲染 减小页面体积,提升网络加载 优化页面渲染 对于优化页面渲染可以进行如下方案来进行...

  • Web前端性能优化进阶——完结篇

    前言 在之前的文章 如何优化网站性能,提高页面加载速度 中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化...

  • web前端性能优化——如何提高页面加载速度

    什么叫web前端性能优化? 使用户觉得页面加载快!使用户觉得页面加载快!使用户觉得页面加载快! 重要的话说三遍!!...

  • 性能优化

    请说出三种减少页面加载时间和性能优化,文件资源优化的方法?

  • 使用rollup打包编写图片懒加载插件

    前言 众所周知,图片的加载是前端页面加载性能的优化之一。如果一个页面在加载的时候全部加载当前页面的图片,当图片资源...

  • 面试所知

    性能优化面试: 首先我们要知道性能优化解决了什么问题,就是页面卡顿现象严重。 那么我们就应该先去检测页面的加载速度...

  • 2.nodejs通过stream方式加载页面 / 通过fs模块加

    nodejs通过stream方式加载页面(stream方式加载优化性能) 配置index.js文件,创建服务,设置...

网友评论

    本文标题:Hexo页面加载性能优化

    本文链接:https://www.haomeiwen.com/subject/lhudqxtx.html