加快DOM加载的时间

2017年4月1日,本博客升级至0.11.7版本的最新Ghost Blog。升级做了很多微小的工作,但是花的时间还是比较多。

  • 升级node环境:v6.10.1
  • 合并新旧两个版本:
    • fonts:Google的相关资源能在国内访问了,所以何不试试? googleapis-ip
    • 七牛cdn:直接按照Ghost Qiniu Storage将七牛存储模块下载到content/storage目录下,然后修改配置文件config.js添加storage字段既能使用。
    • highlight:更新版本。由于最近写yaml写得比较多,添加专门得hilight文件languages/yaml.min.js
    • Casper主题:因为原来的Phantom难以维护最新的功能,博客的主题替换回官方的Casper主题。
  • 添加Disqus:留言栏也替换成Disqus,因为多说就要下架了。

最后在PageSpeed Insights测试了一下加载速度。DOMContentLoaded的加载时间超过4秒(在很正常的校园网环境)。在下面几个不达标的项做了修改:

  • 优化图片:对avatar.jpg和favicon.png进行了大小的修改和压缩。
  • 清除首屏内容中阻止呈现的 JavaScript 和 CSS:对casper主题的js、css文件进行了压缩。并且对于<head>元素里的css文件设置了异步加载。

    采用的方法是使用<link>元素并设置非法的media属性('none')。当meida query计算失败时,浏览器会继续下载css,但网页内容能够先显示出来再渲染页面。当css下载完毕后需要将media设置为合法值(all)以应用样式规则。js的onload来监听载入完毕之后修改成media='all'代码。当浏览器不支持js时,就直接按老方法载入css文件,<noscript><link rel="stylesheet" href="{{asset "css/screen.min.css"}}"></noscript>

<link rel="stylesheet" href="{{asset "css/screen.min.css"}}" media="none" onload="if(media!='all')media='all'">  
<noscript><link rel="stylesheet" href="{{asset "css/screen.min.css"}}"></noscript>  

当然,重要的css代码还是应该通过内联(inline)的方式应用到页面上。


最后展示一下成绩:DOMContentLoaded已经减少至2秒内。

pagespeed_benchmark

Refs:

  1. SO上关于异步加载css的问题

  2. Loading CSS without blocking render

  3. Comparing two ways to load non-critical CSS