使用延迟加载JavaScript (Defer/Async) 降低网站TBT阻塞时间终极指南

延迟加载JavaScript，是指通过按正确顺序推迟那些会阻碍浏览器渲染页面内容的JS文件，从而降低Total Blocking Time（即TBT总阻塞时间）的优化方法。简而言之，就是给非关键的脚本文件添加defer或async属性，以此来减少主线程的锁定时间；这样用户就能更快地看到页面、更早地进行点击交互，进而改善Core Web Vitals核心网页指标。要在您的网站上实施延迟加载JavaScript，首先需要确定哪些文件是关键渲染路径所必需的，对于有依赖关系的脚本通常优先选用defer，而对于独立运行的第三方脚本则大多选用async，并且在做出更改后，务必通过PageSpeed Insights、Lighthouse和Chrome DevTools来实测TBT数值的变化。

在现代网站中，性能瓶颈很多时候并非源自图片，而是源于不加节制的JavaScript使用。试想一下，如果一个电商网站同时加载了产品筛选器、在线客服、广告像素、分析代码、评论插件、A/B测试工具以及主题脚本，浏览器的主线程将会长时间处于繁忙状态。这种情况在移动设备上表现得尤为突出。用户即使看到了屏幕上的标题，点击菜单时也可能得不到任何响应；而在Lighthouse报告中，Total Blocking Time的数值则会居高不下。

在这份指南中，我们将一步步深入探讨defer和async属性的作用机制、何时该选用哪一个、如何在WordPress及定制开发项目中加以应用、进行性能测量时需要注意哪些细节，以及实际能带来多少TBT优化收益。针对托管在Hostragons基础设施上的站点，给出的建议均符合通用Web标准；同时，我们也会谈到正确的主机、CDN、SSL及缓存策略是如何为JavaScript优化提供支撑的。Hostragons 网络托管套餐

什么是TBT？为什么它与JavaScript密切相关？

TBT是Total Blocking Time（总阻塞时间）的缩写，它衡量的是阻塞主线程并延迟页面进入可交互状态的时间。在Lighthouse实验室测试中，从First Contentful Paint（首次内容绘制）到Time to Interactive（可交互时间）之间，那些超过50毫秒的长任务（Long Tasks）越多，TBT的数值就越高。举例来说，如果一个JavaScript任务的执行耗时180毫秒，那么减去初始的50毫秒后，剩下的130毫秒就会被计入阻塞时间。

这项指标对于用户体验至关重要。因为当访客在页面打开后试图点击菜单、加入购物车按钮或搜索框时，如果浏览器仍在忙于执行JavaScript，交互就会产生延迟。用户会将其感知为卡顿、反应迟钝，甚至觉得网站出了故障。在2026年的SEO标准中，尽管Google不再将页面体验简单地归结为单一分数，但那些能提供快速且稳定交互的网站，无论是在用户满意度还是转化率方面，都更具优势。

高TBT值的常见症状

• 移动端PageSpeed Insights报告中，TBT数值超过300毫秒。
• Lighthouse报告中出现“Reduce JavaScript execution time（减少JavaScript执行时间）”或“Minimize main-thread work（最小化主线程工作）”的警告。
• 页面虽然已经渲染可见，但菜单、轮播图、筛选器或表单区域反应迟钝。
• 第三方广告、在线客服或分析脚本在报告中显示出极高的性能开销。
• 尤其是在入门级Android设备上，滚动和点击出现明显延迟。

作为一个理想的目标，对于大多数内容型网站而言，将TBT控制在200毫秒以内通常被认为是健康的。而对于更复杂的电商或SaaS界面，仅靠defer和async可能还不够；往往还需要结合代码拆分、剔除冗余包、优化缓存、改善服务器响应时间以及调整关键CSS。即便如此，延迟加载JavaScript依然是大多数项目中最容易实施且见效最快的优化手段之一。

Defer 和 Async 究竟是什么？

在HTML中，如果按照默认方式使用脚本标签，浏览器会暂停HTML解析，下载JavaScript文件并执行，然后才继续构建页面。这种行为对于关键脚本有时是必需的；但若每个文件都这样处理，就会产生不必要的等待时间。而defer和async属性则改变了这一行为，让文件的下载和执行遵循不同的规则。

Defer 是如何工作的？

添加了defer属性的脚本文件会在HTML解析的同时在后台下载；但其执行会推迟到HTML文档解析完成之后。此外，多个使用了defer的文件会严格保持在HTML中编写的顺序执行。因此，对于有相互依赖关系的JavaScript文件，defer通常是更安全的选择。例如，如果先加载一个库文件，再加载依赖它的主题脚本，defer就非常合适。

示例用法文本如下：<script defer src=/js/app.js></script>。在这种用法下，app.js文件不会阻塞页面的首次渲染即可下载，等DOM准备就绪后才会按顺序执行。现代浏览器对defer的支持非常广泛，对于传统的脚本文件来说，它是一项可靠的优化工具。

Async 是如何工作的？

添加了async属性的脚本同样会在HTML解析的同时下载；但一旦下载完成，会立即暂停HTML解析去执行该脚本。async不保证文件之间的执行顺序，谁先下载完谁就先执行。因此，它更适合那些独立运行的分析、广告、追踪像素、外部小部件或社交媒体脚本。

示例用法：<script async src=/js/analytics.js></script>。这个文件不应依赖页面中稍后定义的其他变量或库（如jQuery）。如果analytics.js依赖于某个特定的库，而该库尚未加载，async就可能导致错误。因此，async虽然快，但需要谨慎归类。

Defer 与 Async 对比表

实用的经验法则是：如果您的文件必须按顺序执行，请从defer开始尝试。如果文件完全独立，可以考虑async。如果不确定，请先在预发布环境中测试defer，检查控制台错误和关键交互是否正常。测试环境和备份指南

延迟加载JavaScript的分步实施计划

随意给每个脚本标签都加上defer或async，看似能短期内拉升分数，但在生产环境中可能会破坏支付、搜索、菜单、表单验证或购物车等关键功能。健康的实施需要遵循测量、分类、小范围修改、测试和监控的循环。

1. 测量现有性能基线

在动手之前，先建立基线数据。通过PageSpeed Insights记录移动端和桌面端的评分。在Lighthouse报告中记下TBT、First Contentful Paint、Largest Contentful Paint和Speed Index的数值。在Chrome DevTools的Performance选项卡中检查主线程；那些长长的黄色块通常代表着JavaScript解析、编译和执行的开销。

您可以准备一个示例基线表格：移动端TBT 780毫秒，JavaScript执行时间2.8秒，主线程工作耗时4.5秒。如果优化后移动端TBT降至280毫秒，您就取得了约64%的改善。这类具体的记录有助于团队清晰地看到哪些改动真正起了作用。

2. 清点脚本库存

在页面源代码或Network选项卡中，列出所有加载的JavaScript文件。确定每个文件的来源、大小、何时需要以及依赖关系。将文件分为以下几组会让工作更加清晰：

• 关键脚本：首屏展示或基本导航所立即需要的代码。
• 有依赖的本地脚本：主题、轮播图、筛选器、图库和应用模块。
• 独立的第三方脚本：分析、广告、像素、聊天和社交媒体组件。
• 冗余或过时的脚本：已卸载插件残留的文件。
• 需条件加载的脚本：比如仅在联系页面上需要的表单验证等特定页面脚本。

最好的优化有时不是添加defer，而是直接移除根本不需要的脚本。一个90KB（压缩后）的文件，在移动设备上解析和执行可能产生超过300毫秒的开销。因此，先清理冗余，再延迟加载保留的脚本，这才是更正确的策略。

3. 确定适用 defer 的文件

通常，主主题脚本、菜单行为、轮播图代码、产品图库模块和应用捆绑包文件都是defer的理想候选者。但这里有一个重要前提：脚本不应过度依赖document.write等老旧且阻塞渲染的方法，并且在DOM就绪后执行是可接受的。

在WordPress主题中，jquery-migrate、主题主文件及插件脚本可能包含复杂的依赖关系。在大多数网站上，将jQuery核心库设为async是有风险的，因为许多插件都依赖jQuery的加载顺序。相比之下，对依赖jQuery的文件进行可控的defer处理，或在插件层面使用优化过的加载选项，会更加稳妥。WordPress速度优化指南

4. 挑选适用 async 的文件

Google Analytics、广告标签、Facebook Pixel、LinkedIn Insight Tag、某些外部聊天小部件和社交分享代码，都是async的候选对象。但并非所有第三方脚本都一概而论。有些在线客服工具希望在页面加载后立即建立用户会话，而有些广告系统则可能等待特定的容器顺序。因此，查阅相关文档是必要的。

将独立的分析代码设为async通常不会损害用户体验。但为了降低数据丢失的风险，请在实时报告中检查触发情况。如果您使用标签管理器，不要把所有标签都塞进一个容器，而应合理配置触发条件。例如，在没有评论框的页面上，就不应加载评论追踪脚本；在没有产品页的页面上，也不应加载产品交互脚本。

5. 增加条件加载和事件驱动加载

defer和async是很好的起点；但更高级的做法是根据用户行为来加载JavaScript，这会对TBT产生更大的影响。在线客服框不必在页面打开时立即加载，可以等用户停留5秒或点击帮助按钮时才加载。地图嵌入代码可以在用户滚动到联系区域时才开始加载。视频播放器脚本可以在用户按下播放按钮时才被调用。

这种方法对内容站点和企业官网尤其有效。因为访客并不需要在每个页面上都使用所有的小部件。从初始加载中移除了200KB的JavaScript，在性能较弱的移动处理器上，就能将TBT降低数百毫秒。

6. 测试并逐步上线

不要直接在线上网站进行修改，应先在测试环境中尝试。在首页、分类页、产品或服务页、联系页、登录表单及支付流程等关键页面上进行手动测试。检查浏览器控制台是否有报错。特别是“Cannot read property”、“is not defined”和“undefined function”这类错误，通常都指向了顺序或依赖问题。

在上线时，请分小组逐步推进。先优化独立的第三方脚本，再处理主题脚本。每次更改后，使用相同的网络和设备模拟环境重新生成Lighthouse报告。不要依赖单次测量结果；取3次测试的平均值会得出更稳健的结论。

WordPress站点中 Defer 和 Async 的实施要点

在WordPress生态系统中，JavaScript文件是通过主题和插件里的wp_enqueue_script函数加载的。截至2026年，现代WordPress版本已经能更精细地定义脚本策略。然而，老旧的主题、页面构建器插件以及不兼容的优化插件，都可能引发冲突。

如果您使用性能优化插件，请不要一键延迟所有JavaScript，而应建立排除列表。支付页、会员登录、管理工具栏、安全验证和验证码脚本可能非常敏感。在使用WooCommerce的网站上，购物车碎片、支付网关脚本和变体选择器必须经过严格测试。WooCommerce托管解决方案

针对WordPress，一个实用的排序建议是：首先，卸载不用的插件。其次，将那些只需在特定页面加载的插件文件设为条件加载。然后，对主题和插件脚本尝试defer。最后，再对独立的第三方代码使用async或延迟加载。这种方法能最大程度降低一次性大面积崩溃的风险。

自定义软件及框架项目中的注意事项

在React、Vue、Angular、Next.js、Nuxt或类似的现代架构中，JavaScript优化绝不仅仅是在HTML标签上加个defer那么简单。打包体积、代码拆分、摇树优化、动态导入以及水合成本，对TBT起着决定性作用。如果单个庞大的捆绑包文件达到700KB，即便使用了defer，执行阶段仍可能长时间阻塞主线程。

在定制开发项目中，请使用基于路由的代码拆分。当用户浏览首页时，不应下载管理后台、图表库或高级编辑器代码。通过动态导入，在需要时才调用重型组件。利用包分析工具找出未使用的依赖项。对于庞大的日期处理、图表或动画库，可以考虑更轻量的替代方案。

在使用服务端渲染或静态生成的项目中也要格外小心。即使HTML传输很快，但在水合阶段，数百个组件同时激活也会拉高TBT值。对于非交互式内容，避免不必要的客户端JavaScript，是2026年性能优化理念的核心。

主机、服务器响应时间与JavaScript性能的关系

TBT直接关联浏览器中的JavaScript执行时间；但主机基础设施会间接影响最终结果。缓慢的TTFB、缺少压缩、不支持HTTP/2或HTTP/3、缓存策略薄弱以及因地理位置遥远造成的延迟，都会导致JavaScript文件到达得更晚。文件到达得越晚，页面生命周期就被拉得越长，用户体验也就越差。

优质的主机基础设施，搭配Brotli或Gzip压缩、高效的浏览器缓存、最新的PHP版本、快速的磁盘技术以及CDN集成，能为优化提供有力支撑。正确安装SSL证书，对于现代浏览器特性、HTTP/2以及安全的第三方集成也至关重要。Hostragons SSL 证书 Hostragons 域名查询

例如，同一个JavaScript文件，未压缩时可能为320KB，而经过Brotli压缩后可能降至95KB。这虽然不会按比例直接降低TBT（因为TBT衡量的是执行成本），但下载时间缩短了，资源优先级调度更从容，整体加载体验得到了改善。因此，defer、async、缓存和优质主机必须被作为一个整体来考量。

测量与验证清单

要判断优化是否成功，仅看PageSpeed评分是不够的。以下清单能帮助您更准确地评估实际效果：

• 是否对比了优化前后的移动端TBT数值？
• JavaScript执行时间报告中，开销最大的文件是否有所减少？
• Chrome DevTools Performance录制中，长任务的数量是否下降了？
• 控制台中是否存在JavaScript报错？
• 菜单、搜索、筛选器、表单、购物车及支付流程是否都能正常运行？
• 第三方分析和广告标签是否正确触发？
• 真实用户监控数据中的INP和交互延迟是否得到改善？
• 清除缓存后，是否重新进行了测试？

这里的重点是区分实验室数据和现场数据。TBT是Lighthouse的实验室指标。在真实用户体验中，Interaction to Next Paint（INP）已变得更具决定性。不过，TBT的下降通常也会促进INP的改善，因为主线程上的阻塞减少了。

常见错误及避坑指南

一次性将所有脚本都设为 async

这是最常见的错误之一。由于async不保证顺序，在有依赖的文件中会引发随机报错。在某个页面上看似正常的功能，在慢速网络或不同浏览器下可能会崩溃。对于有依赖的文件，defer是更稳妥的开端。

错误地延迟 jQuery 及其依赖插件

尤其是在WordPress网站上，许多插件都依赖于jQuery的加载顺序。将jQuery核心库设为async，可能导致插件代码在jQuery加载前就开始运行。解决方案是理清依赖网络，并将关键文件加入排除列表。

对第三方脚本放任不管

站长在优化自己主题文件的同时，常常会忘记广告、聊天和分析代码。然而，在Lighthouse报告中，最繁重的任务往往来自第三方资源。移除无用的标签、设置条件触发，或在必要时将其推迟到用户产生交互之后，都能带来显著收益。

未经测量就安装插件

性能优化插件可能有用；但在未进行测量的情况下，每增加一个工具都可能引入新的JavaScript和CSS负载。请先诊断问题，再选择工具。务必通过测试报告来验证插件是否真的降低了TBT。

忽视缓存与代码压缩的冲突

如果同时应用代码压缩、文件合并、defer和async，文件顺序可能会发生变化。这会在生产环境中导致意想不到的错误。特别是当CDN、服务器缓存和应用层缓存同时使用时，做出更改后请务必清除所有层级的缓存。

一个真实的优化场景模拟

假设一个中型企业官网的首页有18个JavaScript请求。其中5个是主题和菜单交互，4个是轮播图和动画，3个是表单和地图，另外6个是分析、像素和在线客服代码。初始的Lighthouse移动端TBT值测得为920毫秒。

第一步，移除两个未使用的动画插件，减少了140KB（压缩后）的JavaScript负载。TBT降至760毫秒。第二步，将主题和轮播图文件设为defer；并测试了顺序依赖关系。TBT降至480毫秒。第三步，将地图脚本改为仅在滚动到联系区域时才加载，在线客服延迟7秒后初始化，分析和像素代码改为async。最终测量时，TBT降至210毫秒。

这个场景展示了分层优化策略的重要性，而非依赖某个神奇的单一设置。Defer和async是强大的工具；但只有结合移除冗余代码、条件加载、合理的缓存以及高质量的基础设施，才能获得最佳效果。

结论：以均衡且经过测试的JS策略降低TBT

在您的网站上实施延迟加载JavaScript，是降低TBT阻塞时间最实用且最有效的方法之一。defer为那些适合在DOM构建后按顺序执行的文件提供了安全的解决方案；而async则是更灵活地加载独立第三方脚本的理想选择。要想成功优化，您必须首先进行测量，对脚本进行分类，移除无用的文件，逐步测试更改，并持续监测真实用户体验。

在Hostragons上使用快速、安全且可扩展的基础设施，结合JavaScript优化、缓存及SSL配置，能帮助您获得更稳定的网络性能。如果您希望改善网站的TBT值，请先拉取当前报告，然后以微小但可衡量的步伐向前推进。如需寻找合适的主机和性能基础设施，可以了解Hostragons的解决方案。Hostragons 网络托管套餐

常见问题

defer 和 async 可以同时使用吗？

如果在同一个脚本标签中同时使用defer和async，现代浏览器通常会优先按async的行为来处理；这意味着顺序保证会失效。因此，在实践中不建议对同一个文件同时使用这两个属性。对于有依赖的文件选defer，独立的文件选async，这样做更稳妥。

延迟加载 JavaScript 能直接提升 SEO 排名吗？

单靠这一点并不能直接保证排名的提升；但它能通过改善页面体验、交互速度和Core Web Vitals性能，间接为SEO成功提供助力。响应更快的页面，能提升用户满意度、转化率以及可抓取的质量感知。

给每个 JavaScript 文件都加上 defer 安全吗？

不安全。有些脚本可能必须在页面加载的初期就运行，或者依赖于其他文件按特定顺序加载。因此，必须逐一检查每个文件的用途、依赖关系及执行时机；所有更改都应在测试环境中先行验证。

仅靠 defer 和 async 就足以降低 TBT 吗？

对于中小型网站，这能带来巨大的改善；但对于使用了重型框架、包含大量第三方代码或拥有庞大打包文件的项目，还需要采取额外措施。必须将代码拆分、移除未使用的JavaScript、条件加载、缓存以及强大的主机基础设施结合起来通盘考虑。

在 WordPress 网站上，哪些脚本不应设为 async？

依赖jQuery的插件文件、支付和购物车脚本、表单验证、安全验证以及关键的主题功能，都不应随意设为async。一旦这些文件的执行顺序被打乱，用户操作就可能中断。应优先尝试defer，必要时建立排除列表。