用途
该技能用于前端性能审计场景,针对加载缓慢、资源过重或渲染延迟的页面,检查其资源提示(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。
适用场景
适用于前端性能优化与代码审查,尤其是排查首屏加载慢、第三方资源阻塞、渲染延迟等问题时,判断是否应通过资源提示提前发起请求。
限制
资料未提供该技能的具体安装命令、支持的框架清单、收费方式或价格信息,这些内容暂未提供。