JavaScript 是世界上最流行的编程语言之一。大多数网站使用它来为访问者创造更多动态体验。联系表单和站点分析等关键功能只是 JavaScript 日常实践的几种方式。不幸的是,虽然它非常有用,但所有这些代码都有可能减慢您的网站速度。
延迟解析 JavaScript(也称为“延迟 JavaScript”)意味着告诉您的网站最后加载您的非必要 JavaScript 代码。这个简单的调整可以改善您的页面加载时间和整体性能,具体取决于您网站使用的脚本数量。
在本文中,我们将详细分析什么是解析以及延迟涉及什么。我们还将讨论延迟 JavaScript 如何使您的网站受益,并向您展示如何去做。最后,我们将总结一些常见问题 (FAQ) 来解决任何遗留的疑问。
“延迟解析 JavaScript”是什么意思?
当您访问网站时,您的浏览器会从服务器请求文件。这些文件包含 HTML、CSS 和 JavaScript,供浏览器解析(解释)以创建可视化和交互式网页。
网站通常需要您的浏览器为单个页面加载数十个(甚至数百个)元素和文件。这是来自 Google 的一个页面的一个简单示例,因此您可以看到它使用了多少文件:
当您的浏览器解析 HTML 文件时,它会停止呈现它找到的任何 CSS 并停止执行 JavaScript 代码。在浏览器完成执行该代码之前,它不会继续加载页面的其余部分。
实际上,如果您的网站优化得非常好(如果加载速度非常快),您可能不会注意到这种延迟。但是延迟是存在的,而且您的网站使用的 JavaScript 越多,延迟时间就越长。如果您的网站未针对性能进行优化,则解析 JavaScript 会显着减慢其加载时间。
延迟 JavaScript 的解析意味着告诉您的浏览器,“嘿,如果您遇到这段 JavaScript 代码,请在完成页面的其余部分之前不要解析它。”从访问者的角度来看,这意味着页面的可见元素将加载得更快。然后,JavaScript 将在后台完成执行,没有人会更聪明(除了你和浏览器)。
延迟 JavaScript 有什么好处?
延迟 JavaScript 的主要好处是页面将为访问者加载得更快。脚本仍需要在后台加载,但推迟它们应该会提高您的 Largest Contentful Paint (LCP) 分数,这是三个 Core Web Vital 指标之一。
请务必记住,页面加载时间是出色用户体验的最重要方面之一。如果网站加载时间过长,您通常会失去一定比例的访问者。此外,缓慢的加载时间会给人一种网站有问题的印象。
如何在 WordPress 中延迟解析 JavaScript
WordPress 提供了不止一种优化网站的方法。在延迟 JavaScript 时,您可以使用这种方法。
通过自定义代码对方法,加入:
function defer_js( $url ) { if ( is_user_logged_in() ) return $url; if ( FALSE === strpos( $url, '.js' ) ) return $url; if ( strpos( $url, 'jquery.js' ) ) return $url; return str_replace( ' src', ' defer src', $url ); } add_filter( 'script_loader_tag', 'defer_js', 11 );