SuperAPI AI 工具集

performance-resource-hints

前端与建站

查看项目

更新于 10-16 06:08

技能介绍

用途

该技能用于前端性能审计场景,针对加载缓慢、资源过重或渲染延迟的页面,检查其资源提示(resource hints)的使用是否合理。当页面存在与资源加载相关的性能问题时,可用它来定位并优化。

主要能力

技能围绕四类资源提示给出使用建议:

  • preload:用于首屏关键资源,例如字体、主视觉(hero)图片。
  • preconnect:用于第三方源,例如 CDN、API、分析服务。
  • prefetch:用于下一次导航可能需要的资源。
  • dns-prefetch:作为 preconnect 的轻量替代方案。

资料称资源提示可让浏览器更早开始获取关键资源,平均改善 LCP 约 100-300ms。

使用方式

技能提供四种操作模式:

  • Check(检查):分析当前页面的资源提示,验证关键资源是否使用了 preload/preconnect 以获得最佳加载效果。
  • Fix(修复):为关键资源添加合适的资源提示(preload、prefetch、preconnect),以改善加载性能。
  • Explain(解释):说明 preload、prefetch、preconnect 与 dns-prefetch 之间的区别,以及各自适用的时机。
  • Code Review(代码审查):审查影响资源提示使用的路由、资源和加载行为,指出增加不必要网络、CPU 或布局成本的具体文件、请求或渲染步骤,并说明用于确认问题的测量方法。

完整的实现细节、代码示例和框架相关指导见 references/rule.md。规则页面为 https://frontendchecklist.io/en/rules/performance/performance-resource-hints。

适用场景

适用于前端性能优化与代码审查,尤其是排查首屏加载慢、第三方资源阻塞、渲染延迟等问题时,判断是否应通过资源提示提前发起请求。

限制

资料未提供该技能的具体安装命令、支持的框架清单、收费方式或价格信息,这些内容暂未提供。