critical-path-css-demo, 使用关键 & Gulp above 折叠CSS生成+ 内联

分享于 

5分钟阅读

GitHub

  繁體 雙語
Above-the-fold CSS generation + inlining using Critical & Gulp
  • 源代码名称:critical-path-css-demo
  • 源代码网址:http://www.github.com/addyosmani/critical-path-css-demo
  • critical-path-css-demo源代码文档
  • critical-path-css-demo源代码下载
  • Git URL:
    git://www.github.com/addyosmani/critical-path-css-demo.git
    Git Clone代码到本地:
    git clone http://www.github.com/addyosmani/critical-path-css-demo
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/addyosmani/critical-path-css-demo
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    critical-path-css-demo

    生成和使用关键路径CSS示例,使用关键代码。

    在和之前的实时演示关键路径CSS生成和内联之后的。

    PageSpeed前后的。

    首先:

    之后:

    WebPageTest结果

    首先:

    之后:

    很棒,那么,你的建议是什么

    站点范围内,使用关键生成和内联关键路径CSS和 loadCSS插件异步加载 in。

    :关键路径CSS重要的原因

    在页面的初始构造过程中,CSS需要为页面构造呈现树,而JavaScript通常会在CSS上使用。 应确保任何非必需的CSS都标记为非关键( 比如 )。 打印和它的他媒体查询,以及关键CSS的数量和传递的时间尽可以能小。

    :为什么要内联关键路径 CSS

    为了获得最佳性能,你可能需要考虑将关键CSS直接嵌入到HTML文档中。 这消除了关键路径中的额外往返,如果正确地完成了"一次往返"关键路径长度,那么只有 HTML。

    安装

    $ cd critical-path-css-demo
    $ npm install && bower install

    生成和内联关键路径 CSS

    注意:有两个构建命令可用。 这样可以比较正常构建的输出和关键路径CSS输出之间的差异。

    项目的默认( 缩小,连接) 生成可以通过以下方式运行:

    $ gulp

    完整的( 关键路径) 生成可以通过以下方式运行:

    $ gulp critical

    这将执行普通构建,然后生成和内联页面的关键路径 CSS。 它使用 loadCSS 在站点宽样式中自动异步加载,作为模块提供的工作流的一部分。

    教程

    按照以下几行来安装和使用文书和Gulp来安装项目:

    $ mkdir myapp &&cd myapp
    $ npm install -g yo generator-gulp-webapp
    $ yo gulp-webapp# Select Bootstrap and say no to Modernizr & Sass

    现在应该有一组有效的源文件,包括 Gulpfile.js

    我们要做的第一件事就是安装关键的MODULE,它可以生成并为你的关键路径CSS生成。

    可以按如下方式安装:

    $ cd myapp
    $ npm install critical --save-dev

    好极了。接下来,在 Gulpfile.js的顶部添加一个对关键点的引用:

    var critical =require('critical');

    我们现在可以在构建过程中使用它。 让我们写一个叫做 critical的新任务。

    针对关键路径CSS的工作流首先运行一个普通的build,它将为应用程序生成优化 CSS ( dist/styles/main.css ) 和资源需求。 我们将 build 命令作为第二个参数 below 传递:

    gulp.task('critical', ['build'], function () {
    });

    接下来,我们将为 critical 模块添加配置:

    gulp.task('critical', ['build'], function (cb) {
     critical.generate({
     inline:true,
     base:'dist/',
     src:'index.html',
     dest:'dist/index-critical.html',
     minify:true,
     width:320,
     height:480 });
    });

    就是这样,你现在可以运行 gulp critical 生成完整的构建,它的中 dist/index-critical.html 将包含 final 输出文件。 上面 我已经传入了一个 widthheight,它表示我的视口,它的目标是我的上面-the-fold CSS。 minify 确保内联CSS被缩小。

    免责声明

    请注意,这个示例项目只是一个示例。 它并不说明这些工具和技术在复杂的站点上如何工作,以及在大量使用动态样式的站点上。 你的程度可能会有所不同,我鼓励在决定是否关键之前测试可以用的工具。


    FOLD  GULP  Inlining  
    相关文章