关键路径（首屏）CSS 工具 
¶
> 帮助确定首屏 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¶
- mod_pagespeed - 用于自动优化 PageSpeed 的 Apache 模块
- ngx_pagespeed - 用于自动优化 PageSpeed 的 Nginx 模块
Grunt tasks¶
CasperJS¶
- critical-css-casperjs - CasperJS 脚本从页面中提取关键的 CSS 信息
PhantomJS¶
- dr-css-inliner - 用于在页面上内联首屏 CSS 的 PhantomJS 脚本.
Inline sources (styles, scripts)¶
- inline-styles - 由 Max Ogden 取代
<link>内联标签<style>tags + inlines CSS url() calls with data URIs - inline-critical - Ben Zörb，内联关键路径 CSS 并使用
loadCSS加载现有样式表 - isomorphic-style-loader 对于 Webpack - 允许为 React 应用程序中的任何给定页面/屏幕提取关键 CSS，并在服务器端渲染 (SSR) 期间将其内联到 HTML 中. 看 React Starter Kit 举个例子.
Async load CSS¶
内联关键路径 CSS 后，应使用异步加载来获取站点范围内的其余样式.
- loadCSS - 使用 JS 异步加载 CSS. Research 这导致了这一点也可用.
- async & conditional loading - 用于基于 body 标签类异步和有条件地加载 CSS 文件的 POC 脚本
- asyncLoader - 异步脚本/样式表加载器
- basket.js - 支持本地存储缓存的异步脚本/资源加载器. 可 extended 加载样式表.
注意：Guardian 目前还将其全局样式缓存到 localStorage 中以供后续页面加载. 更多信息在此 comment.
Online tools¶
Bookmarklets/Extensions¶
Render-blocking issues detection¶
- PageSpeed Insights - 测量移动设备和桌面设备页面性能的在线工具. 它两次获取 url，一次使用移动用户代理，一次使用桌面用户代理.
- PSI - PageSpeed Insights 报告的节点模块作为构建过程的一部分. 直接使用 Gulp 或使用 grunt-pagespeed 如果是 Grunt 用户. 对于本地测试，使用此任务的文章和 ngrok 可用.
- PageSpeed Insights DevTools extension - 用于从浏览器内部运行 PageSpeed 测试的 Chrome 扩展.
- PageSpeed Insights Checker for mobile extension - 检查每个页面的 Mobile PageSpeed 分数并为您提供方便的预览.