技能介绍

要解决的问题

前端页面加载慢的原因，不止是核心 Web 指标那些渲染阻塞脚本或图片懒加载问题。HTML 层面的结构问题同样会拖慢首屏：脚本标签过多、内联 CSS 膨胀、样式表分散、图片格式未优化或 alt 缺失，这些都会增加解析成本和网络往返。这些问题往往被忽略，却直接关系到加载体验。

技能如何工作

脚本数量审计

统计页面中所有 <script> 元素，区分外部脚本和内联 <script> 标签：

外部脚本超过 10 个：建议合并或移除未使用的脚本
10 个及以内：通过检查
内联脚本单独统计，计入页面体积但不计入网络请求数
<script> 块内的 <style> 内容需从内联 CSS 统计中排除

内联 CSS 体积检查

统计所有 style="..." 属性和 <style> 标签内的字符总量：

超过 5000 字符：建议迁移到外部样式表以便浏览器缓存
5000 字符以内：通过检查

样式表加载

统计 <link> 引用的样式表数量：

超过 3 个：建议合并 CSS 文件，减少 HTTP 请求

图片属性与格式

alt 属性：所有 <img> 必须有 alt，缺失则视为不通过，影响 SEO 和无障碍
图片格式：.jpg、.jpeg、.png、.gif 扩展名的图片建议转换为 WebP 或 AVIF
SVG 图片不参与格式检查，无需转换

Next.js 场景检测

如果项目使用 Next.js，检查图片是否通过 /_next/image 或 data-nimg 属性加载：

未使用：建议采用 <Image> 组件获得自动优化
非 Next.js 项目：跳过此检查

适用边界

该技能聚焦 HTML 层面的静态审计，不覆盖动态注入脚本的分析——通过 JavaScript 运行时插入的 <script> 无法在静态 HTML 中检测。渲染阻塞脚本、图片尺寸、懒加载、预连接提示和字体加载等内容由 core-web-vitals 技能处理，两者不重复。Base64 编码图片虽不产生网络请求，但会增大 HTML 体积，总量超过 10KB 时会触发警告。