用途
该技能用于审计和优化第三方脚本的加载方式,解决因第三方脚本未优化而导致的页面加载缓慢、资源过重或渲染延迟问题。第三方脚本是导致网站变慢的首要原因,未优化的加载可能为页面加载时间增加 2 至 5 秒。
主要能力
技能提供以下快速参考策略:
- 对独立脚本(如分析、广告)使用 async 属性。
- 对依赖 DOM 的脚本(如聊天组件、社交插件)使用 defer 属性。
- 对非关键脚本在页面加载后进行懒加载。
- 考虑自托管关键的第三方脚本。
技能包含四个操作环节:
- 检查:分析当前页面上的第三方脚本,确保它们使用 async/defer 且不阻塞渲染。
- 修复:为第三方脚本添加 async 或 defer 属性,并考虑懒加载非关键脚本。
- 解释:说明第三方脚本的性能影响以及减少其阻塞效应的策略。
- 代码审查:审查影响第三方脚本加载优化的路由、资源和加载行为,标记出增加不必要网络、CPU 或布局成本的具体文件、请求或渲染步骤,并描述用于确认问题的测量方法。
使用方式
该技能以规则形式提供,可通过检查、修复、解释和代码审查等环节应用于前端性能审计工作流。完整的实现细节、代码示例和框架特定指导参见 references/rule.md。规则页面地址为 https://frontendchecklist.io/rules/performance/third-party-scripts。
适用场景
适用于审计页面加载缓慢、资源过重或渲染延迟问题,尤其是怀疑与第三方脚本加载相关时。可用于前端性能优化、代码审查和性能问题排查。
限制
关于该技能的具体安装命令、收费模式、支持平台等信息,资料中暂未提供。