Critical-Path Tools

关键路径(首屏)CSS工具 Awesome ==========================================

>帮助优先处理CSS的工具

为了获得最佳性能,PageSpeed Insights recommends 将页面的关键(首要)CSS直接内嵌到HTML中. 这消除了额外的往返,并允许浏览器更快地将上述体验绘制到用户的屏幕上. 主要想法是:

确定页面的上述样式并在之间写入<style> tags in the head. 在页脚中加载所有其他样式表,理想情况是异步.

以下是帮助生成,内联和报告关键路径CSS的工具列表.

Node modules

  • Penthouse - 由Jonas Ohlsson生成关键路径CSS
  • Critical - 由Addy Osmani生成并内联关键路径CSS(使用Penthouse, Oust 和内联样式)
  • CriticalCSS - 由FilamentGroup发现并输出关键的CSS

Server-side modules

Grunt tasks

CasperJS

PhantomJS

Inline sources (styles, scripts)

  • inline-styles - 由Max Ogden取代<link>标签用内联<style> tags + inlines CSS url() calls with data URIs
  • inline-critical - 作者BenZörb,内联关键路径CSS并使用loadCSS加载现有样式表
  • isomorphic-style-loader for Webpack - 允许在React应用程序中为任何给定的页面/屏幕提取关键CSS,并在服务器端呈现(SSR)期间将其内联到HTML中. 看到 React Starter Kit 举个例子.

Async load CSS

在内联关键路径CSS后,应使用异步加载来获取其余的站点范围样式.

注意:Guardian当前还将其全局样式缓存到localStorage中以用于后续页面加载. 更多信息 comment.

Online tools

Bookmarklets/Extensions

Render-blocking issues detection

Supplementary tools

  • UnCSS 从页面中删除未使用的CSS,允许您减少可能需要为您的站点加载的全局CSS. 任务可用 Grunt, Gulpother 构建工具.