用途
该技能适用于审计页面加载缓慢、资源过重或渲染延迟的场景,特别是当问题与关键第三方源的连接开销相关时。它帮助开发者识别并优化第三方域名的连接建立过程。
主要能力
- 为重要的第三方域名(例如字体、API)提前建立连接。
- 通过提前执行 DNS 查询、TCP 握手和 TLS 协商来降低延迟。
- 避免过度使用 preconnect,建议限制在 2-4 个最关键的源。
- 检查页面 head 中的 preconnect 提示,识别缺失或不必要的第三方连接。
- 为关键第三方源添加
<link rel="preconnect">,并移除非必要或利用率低的域名。 - 解释 preconnect 如何减少第三方资源的连接开销。
- 提供代码审查:审查影响该规则的路由、资源和加载行为,标记增加不必要网络、CPU 或布局成本的具体文件、请求或渲染步骤,并描述用于确认问题的测量方法。
使用方式
- 检查:查看页面 head 中的 preconnect 提示,找出缺失或不必要的第三方域名连接。
- 修复:为关键第三方源添加
<link rel="preconnect">,并移除非必要或利用率低的域名。 - 解释:说明 preconnect 如何帮助减少第三方资源的连接开销时间。
- 代码审查:审查相关路由、资源和加载行为,标记具体问题并说明测量方法。
完整实现细节、代码示例和框架特定指南见 references/rule.md。规则页面:https://frontendchecklist.io/en/rules/performance/preconnect
适用场景
- 页面加载缓慢,怀疑与第三方资源连接延迟有关。
- 资源过重或渲染延迟,需要优化关键路径。
- 使用字体、API 等关键第三方域名的前端项目。
限制
关于该技能的具体平台支持、收费情况、价格、实际效果或详细使用步骤,资料中暂未提供。