用途:该规则面向页面加载慢、资源体积大或渲染延迟的审计场景,核心是通过资源提示(resource hints)让浏览器提前获取关键资源,公开资料称平均可改善 LCP 约 100-300 毫秒。
主要能力与判断口径:
- preload:用于首屏关键资源,如字体、主视觉图片。
- preconnect:用于第三方源,如 CDN、API、分析服务。
- prefetch:用于下一次导航可能需要的资源。
- dns-prefetch:作为 preconnect 的轻量替代。
使用方式:按 Check、Fix、Explain、Code Review 四类操作执行。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/resource-hints。