【文件属性】：
文件名称：critical-path-css-demo:折叠式CSS生成+使用Critical＆Gulp内联
文件大小：493KB
文件格式：ZIP
更新时间：2021-05-13 14:58:05
ApacheConf
关键路径css演示
使用生成并内嵌关键路径CSS示例。
关键路径CSS生成和内联和实时演示。
PageSpeed Insights之前和之后的结果
前：
后：
WebPageTest结果
前：
后：
伟大的。 那么，您有什么建议？
使用生成并内联关键路径CSS和以异步加载样式。
为什么关键路径CSS很重要？
构建页面的渲染树需要CSS，并且在页面的初始构建期间，JavaScript通常会在CSS上阻塞。 您应确保将所有非必需CSS标记为非必需的（例如，印刷品和其他媒体查询），并确保必需CSS数量和交付时间尽可能短。
为什么应该内联关键路径CSS？
为了获得最佳性能，您可能需要考虑将关键CSS直接内联到HTML文档中。 这消除了关键路径中的其他往返，并且如果操作正确，可用于传递“一个往返”关键路径长度，其中仅HTML是阻塞资源。
安装
$ cd critical-path-c
【文件预览】：
critical-path-css-demo-gh-pages
----.jshintrc(391B)
----.gitattributes(11B)
----bower.json(148B)
----output()
--------normal()
--------critical()
----gulpfile.js(4KB)
----LICENSE(11KB)
----test()
--------index.html(726B)
--------bower.json(142B)
--------spec()
--------.bowerrc(40B)
----README.md(4KB)
----dist()
--------index.html(3KB)
--------robots.txt(32B)
--------styles()
--------favicon.ico(4KB)
--------scripts()
--------index-critical.html(6KB)
--------fonts()
--------404.html(4KB)
--------.htaccess(29KB)
----.bowerrc(44B)
----.editorconfig(519B)
----.gitignore(73B)
----app()
--------index.html(4KB)
--------robots.txt(32B)
--------styles()
--------favicon.ico(4KB)
--------scripts()
--------404.html(4KB)
--------.htaccess(29KB)
----package.json(836B)