用途:该技能用于审查与“内联关键 CSS 以加快渲染”相关的样式表、组件样式和响应式表现,识别应内联的首屏样式与可异步加载的非关键样式。
主要能力:支持四种动作——分析页面 CSS 加载策略;提取并内联首屏关键 CSS、其余异步加载以改善首屏渲染;解释关键 CSS 如何通过减少渲染阻塞资源来改善 First Contentful Paint 与 Largest Contentful Paint 等核心网页指标;在代码评审中标出违反该规则的具体选择器、声明或断点。快速参考指出:在文档中内联约 14KB 的首屏关键 CSS;使用 critical、critters 或 Lighthouse 等工具提取;页面加载后异步加载其余 CSS;在构建流程中自动化,不要手工维护。
使用方式:围绕具体页面或样式表执行分析、修复、解释或代码评审;完整实现细节、代码示例与框架相关指引见 references/rule.md(资料未给出该文件内容)。规则页为 https://frontendchecklist.io/en/rules/css/css-critical。
适用场景:前端性能优化评审、组件样式与响应式断点检查、构建流程中的关键 CSS 自动化。
限制:以上为规则说明层面的内容,具体工具配置、阈值(如 14KB 的适用条件)、框架实现示例与自动化步骤暂未提供,需查阅引用文件。