目录
- JavaScript 延迟解析是什么意思？
- 为什么延迟加载 Javascript 对性能很重要
- JavaScript 的延迟解析：Async 和 Defer 属性
- 如何手动延迟 Javascript
- 如何使用 WordPress 插件推迟 Javascript（简单方法）
处理 JavaScript 具有挑战性吗？是的，JavaScript 很难学习，因为它功能强大：它向网页添加动态和交互式元素以吸引用户。
如果您曾经通过 GTmetrix 或 PageSpeed Insights 审核过您的 WordPress 网站，您可能会遇到过“推迟解析 Javascript”的建议：
简单来说，这意味着某些 Javascript 正在影响您的网站加载时间 – 您应该采取一些措施来提高速度。
在本教程中，您将了解有关延迟 Javascript 所需了解的所有信息，以及为什么它对 WordPress 网站的性能至关重要。由于延迟 JavaScript 一开始可能会令人畏惧，因此我们将分享一些可以为您的网站实施的简单优化技术。
JavaScript 延迟解析是什么意思？
推迟 JavaScript 解析意味着延迟访问者屏幕上不需要立即执行的 JS 处理。推迟 Javascript 是一项关键的优化技术，可以最大限度地减少主线程工作并消除页面加载期间无用的重量。
Javascript 中的 Defer 和 Parsing 意味着什么
当您推迟 Javascript 时，会发生以下情况：您推迟或推迟 Javascript 的加载以首先加载最重要的内容。您告诉浏览器暂时不要处理（解析）Javascript 的一部分。相反，实际的页面内容将优先于必须立即执行的 JS 代码加载。
📖 需要记住：
Defer = 稍后加载或推迟部分代码
Parsing = 浏览器“阅读”和“理解”代码的过程
JS 通常路径= 下载 >解析> 编译 > 执行 >在访问者的屏幕上渲染
延迟 Javascript 解析以减少页面渲染阻塞
渲染阻止资源是样式表、Javascript 和 HTML，它们会延迟或阻止浏览器向访问者显示页面内容。推迟解析Javascript是消除渲染阻塞资源的策略之一，因为浏览器会知道哪些代码行需要优先加载。
下面用 HTML 和 JS 的代码片段向您展示渲染阻塞资源如何影响浏览器和加载时间：
这是浏览器在幕后发生的事情：
- 浏览器发现需要下载一些 HTML。
- 但随后，它找到了一些 JS 来解析并执行。浏览器无法同时执行所有操作：我的 HTML（实际内容）的下载已暂停。
- 触发了性能问题：当我的浏览器正在处理 <script.js> 时，我的 HTML 的其余部分被阻止。因此，向访问者呈现页面内容需要更多时间。
如果推迟解析 JS 会发生什么变化？
当您推迟解析 JavaScript 时，您会告诉浏览器单独加载和解析 JavaScript 文件。DOM（或关键内容）将立即向访问者显示，而不是像上面的示例那样被阻止。
为什么延迟加载 Javascript 对性能很重要
推迟 Javascript 的加载将显着减少页面的渲染时间并提高性能。但为什么？
请记住，浏览器必须遍历所有 <script> 标记的内容才能加载页面。您需要处理的脚本越多，页面加载就会增加越多。
因此，如果您延迟某些 JavaScript，您的浏览器将能够专注于最重要的事情：尽快呈现访问者正在查看的内容。
为了实现这种出色的性能，您的浏览器需要优先考虑最关键的代码，以实现这种出色的性能。因此，任何针对 Javascript 代码优化和优先级的操作都将：
- 提高整体核心 Web Vital 分数和 Lighthouse 性能等级
- 优化首次输入延迟
- 优化最大内容绘制
- 优化首次内容绘制
- 消除渲染阻塞资源（PSI 警告）
让我们概述一下延迟 JavaScript 解析所获得的每项好处。
提高整体核心 Web 重要分数和 Lighthouse 性能等级
您可能听说过Google Page Experience，其中将核心 Web Vitals 作为排名因素。
谷歌表示，提供出色的内容已经不够了：您还需要考虑加载时间、从用户角度来看的感知速度、整体交互性以及页面的稳定性。
| 要测量和优化您的核心网络指标，您可以使用 Lighthouse，这是一个用于测量网页质量的开源工具。 |
优化首次输入延迟 (FID)
当您推迟 JS 解析时，您还优化了“首次输入延迟”指标（核心 Web 指标之一）。为什么？首次输入延迟计算浏览器响应页面上第一个用户的活动（例如，单击链接或点击按钮）所需的时间。如果浏览器太忙于处理大型 JavaScript 文件，它就无法处理来自用户的请求。通过推迟 JS，FID 指标有更多机会变为绿色。
优化最大内容绘制 (LCP)
当您推迟解析 JS 时，您还将优化Largest Contentful Paint指标（这也是 Core Web Vitals）。它测量最大元素对用户可见所需的时间。LCP 内容通常是网站最重要的部分，例如其主要标题图像或标题：
该内容影响用户对网站的第一印象：如果主图像加载时间较长，那么整个网站就会显得很慢。最重要的是，快速的 LCP 还有助于让用户确信该页面是有用的。
为了确保良好的LCP分数，您还需要确保您的服务器响应时间较短。您可以通过告诉浏览器在处理任何其他 JS 文件之前先加载其最大的内容来实现此目的。这个方法听起来是不是很熟悉？这称为 Javascript 的延迟解析。
优化首次内容绘制 (FCP)
首次内容绘制(FCP) 是一种以用户为中心的指标，用于测量感知的页面加载速度。谷歌建议推迟非关键资源，以确保第一部分内容尽快加载。
下图显示了如果 JS 没有延迟并且某些 JS 阻止了我的内容（FCP）的执行，会发生什么情况：
消除渲染阻塞资源
Lighthouse 会标记所有阻止页面首次绘制的脚本和样式表。目标是通过内联关键资源、推迟非关键资源以及删除未使用的代码来减少这些渲染阻塞内容对性能的影响。
重要提示：如何识别哪些内容是关键内容，哪些不是？
您可以通过 DevTools 中的“覆盖范围”选项卡审核您的页面。以下是阅读报告的方法：
- 绿色（严重）：第一次绘制需要脚本
- 红色（非关键）：不在视口中的脚本
结论：为了提供最佳性能，您应该推迟首屏以下的任何 JavaScript。这也将减少Javascript 执行时间并优化关键渲染路径，更快地将实际内容渲染给用户。
| 关键渲染路径是浏览器将 HTML、CSS 和 JavaScript 转换为访问者屏幕上的最终内容所经历的一系列步骤。 |
现在我们知道了在 WordPress 中延迟解析 JavaScript 的好处，让我们看一下可以消除渲染阻塞 JavaScript 的几种技术。
JavaScript 的延迟解析：Async 和 Defer 属性
要推迟在 WordPress 中解析 Javascript，您需要使用Async和Defer属性标记非关键内容。它们告诉浏览器单独加载和解析 JavaScript 文件，以便立即显示 DOM。换句话说，您可以通过定义何时解析 Javascript 来为 Javascript 添加一些交互性。
异步与延迟 JavaScript：您应该使用哪一个？
Async 和 Defer 都有一个共同的目标：让用户更快地看到 HTML 内容。想知道是否应该使用异步或延迟？这是您应该记住的区别。Defer 用于需要整个 DOM 的脚本，并且在您真正需要的所有内容准备就绪之前不会执行。异步用于独立脚本，例如计数器或广告 – 它会并行下载并在可用时立即执行。
让我们回顾一下每个属性：
- 异步脚本：下载 JavaScript，同时仍在解析 HTML，但随后暂停 HTML 解析以执行 JavaScript。它可以中断页面渲染以尽快执行，没有特定的顺序。
具有 async 属性的脚本标记示例：
<script src='http://yoursitehere.com/js/scripts.js' async='async' type='text/javascript'></script>什么时候使用异步？对于优先级非常高的 JavaScript 资源，应在加载过程中尽早运行。
- 延迟脚本：在解析 HTML 的同时下载 JavaScript，并等待 HTML 解析完成后再执行。它不会中断页面渲染来执行，并且在 DOMContentLoaded 事件之前按顺序执行。
具有 defer 属性的脚本标记示例：
<script src='http://yoursitehere.com/js/scripts.js' defer='defer' type='text/javascript'></script>什么时候使用延迟？对于页面初始渲染并不重要的一般 JavaScript 资源可以在加载过程中稍后运行。
页面速度检查表非常清晰地概述了下表中的两个属性：
| Async不介意 DOM 是否完全加载，而Defer会等待 DOM 加载后再执行。 |
在下一部分中，我们将看到两种在 WordPress 中推迟 JavaScript 解析的方法——有或没有插件的帮助。
如何手动延迟 Javascript
这里有两种手动延迟 JavaScript 解析的方法：
通过您的functions.php 文件手动推迟Javascript
这里有一个简短的教程，使用您的functions.php 文件将 defer 属性添加到渲染阻塞 JS。 转到外观>主题编辑器并打开你的functions.php文件
- 添加以下代码片段：
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
使用 Rocket Loader 延迟 Javascript
延迟 JavaScript 解析的第二种方法是使用Cloudflare Rocket Loader，它通过延迟 JS 的加载来优先考虑实际网站的内容（文本、图像等）。你的 JS 将在渲染网页 之后被解析，而不是之前。
Rocket Loader 可以直接从您的 Cloudflare 仪表板启用：
- 转到“速度”应用程序 > “优化”。
- 向下滚动到火箭装载机以启用它。
如果您对这些属性和编辑functions.php 文件感到不知所措，有几个插件可以在WordPress 中推迟JavaScript 的解析。
如何使用 WordPress 插件推迟 Javascript（简单方法）
几乎任何其他优化插件都可以使用，但我们选择了 4 个流行的 WordPress 扩展，它们将推迟 WordPress 中 Javascript 的解析，即：
- WP Rocket 提供了强大的“延迟加载 JavaScript”选项。defer 属性将应用于页面上的所有 JavaScript 文件。
激活此选项后会发生以下情况：
WP Rocket 为你添加了 defer 属性：
- Async JavaScript让您可以完全控制哪些脚本添加“异步”或“延迟”属性，以提高 WordPress 网站的性能。
您可以在所有脚本上自动启用异步或延迟：
或者您可以手动将该属性应用于每个脚本：
- Asset CleanUp Pro通过将“defer”属性应用于脚本标签来推迟合并的 JavaScript 文件。
- Autoptimize还提供了延迟解析脚本的选项。
在插件的设置页面中，选中“单个 JS 文件将被缩小并延迟”框。您的非必要脚本将被推迟。
如何仅在 WordPress 的特定页面上加载 Javascript（使用插件）
⚠️ 有些脚本不一定要延迟，或者您可能只想在特定页面上加载 JS。
与任何其他性能插件相比， WP Rocket具有最大的 JavaScript 延迟自动排除功能。它允许您排除单个文件、一组文件、外部托管文件，甚至是缩小的文件。
您还可以手动添加任何排除项，并使用设置中的专用字段来排除 JavaScript 文件的某些 URL：
发表回复