就绪检查 · 加速通道 · 权重 5

head 元素中没有阻塞渲染的脚本

文档头部的每个外部脚本均使用 async、defer 或 type="module"。

已观察到: 44%
前 1K 网站: 55%
前 1M 区间: 43%
未测量: 41,582

为何重要

头部中仅带 src 属性的普通 script 元素会阻止浏览器显示任何内容，直到该文件下载并执行完毕。

如何修复

为需要 DOM 的脚本添加 defer，为分析统计等独立脚本添加 async，或将它们移至 body 末尾。

我们如何检查

文档头部的每个外部脚本均使用 async、defer 或 type="module"。

已观察到：头部脚本加载时不会造成阻塞。

未观察到：一个或多个头部脚本阻塞渲染。

局限：基于传输给自动化客户端的首页 HTML；未执行后续运行的脚本。

针对不同技术栈的步骤

Next.js：使用 next/script 组件，并选择合适的加载策略。
WordPress：自 WordPress 6.3 起，注册脚本时可指定 defer 或 async 加载策略。

按受欢迎程度分档

Chrome UX Report 区间	已观察到	已测量
前 1 千名	55%	285
前 5 千名	53%	1,306
前 1 万名	50%	1,650
前 5 万名	48%	12,738
前 10 万名	46%	12,021
前 50 万名	45%	37,402
前 100 万名	43%	79,072

最可能这样做的类别

最不可能这样做的类别

按技术栈

按提供商

我们观察到此情况的热门网站

来源与指南

指南：在第三方脚本接管页面之前先管控它们检查您自己的网站