如果您是 SEO 专家，而不是开发人员，那么您可能不需要深入了解网站开发的所有复杂性。但是您确实需要了解基础知识，因为网站的编码方式对其性能有很大影响，因此对 SEO 潜力有很大影响。在关于 HTML 标签的文章中，我们介绍了您需要了解的 HTML 基础知识，以便有效地进行网站 SEO。这次，我们为您提供了开发人员用来使网站看起来不错并使其具有交互性的其他编码语言。

语言是 JavaScript，在本 JavaScript SEO 指南中，我们将介绍您在审核网站时可能遇到的与 JS 相关的主要错误。我们将解释为什么每个错误都很重要以及如何修复它们。修复部分是您可能会分配给网站开发人员的东西。只是这次您将用相同的语言与他们交谈。

什么是 JavaScript SEO？

在深入研究 JavaScript SEO 及其对成功网站性能的重要性之前，让我们先确定 JavaScript 本身的本质。

JavaScript 是一种脚本语言，主要用于向网站添加交互式元素和动态内容。它由 Netscape Communications 的 Brendan Eich 于 1995 年创建，此后成为 Web 上使用最广泛的编程语言之一。从那时起，还开发了许多 JavaScript 框架。弹出表单、交互式地图、动画图形、具有持续更新内容（例如天气预报、汇率）的网站都是实现 JavaScript 的示例。

截至 2024 年 7 月，Javascript 是使用最广泛的客户端编程语言，其次是 Flash 和 Java。一些最受欢迎的 JavaScript 网站是 Google、Facebook、Microsoft、Youtube、Twitter、Netflix 等。

在 SE Ranking，我们也使用 JavaScript。您在 SE Ranking 平台上看到的许多很酷的效果也是由 JS 提供支持的。例如，我们的页面更改监控登录页面现在具有 JavaScript 驱动的动画，旨在解释该工具的工作原理。

为了让您更好地了解 JavaScript 如何转换网站，让我向您展示禁用 JavaScript 的登录页面的相同部分。

现在你已经熟悉了 JavaScript 及其在网站开发中的作用，让我们将重点转移到 JavaScript SEO。

JavaScript SEO 涉及优化严重依赖 JavaScript 技术的网站。过去，搜索引擎很难正确索引和抓取 JavaScript 网站和页面，因为它们的算法主要集中在解析和理解静态 HTML 内容上。搜索引擎在解释和索引 JavaScript 内容的能力方面取得了巨大进步。尽管如此，为了解决 JavaScript 带来的挑战并提高您网站的搜索引擎可见性，实施 JavaScript SEO 最佳实践至关重要。

• 如果实施不当。JavaScript 可能会导致您的部分内容未被索引。Google 和其他搜索引擎需要呈现 JS 文件才能像用户一样查看您的页面，如果他们没有这样做，他们将在没有 JS 驱动的元素的情况 索引您的页面。反过来，如果非索引内容对于实现用户意图至关重要，这可能会阻碍您的排名;
• 注入 JavaScript 的页面部分可能包含内部链接。同样，如果 Google 在 JavaScript 渲染方面失败，将不会跟踪链接。因此，除非从其他页面或站点地图链接到整个页面，否则它们可能不会被索引。然后，使用 JavaScript，您有可能以 Googlebot 无法理解的方式对链接进行编码，因此，它不会跟踪链接。
• JavaScript 文件相当重，将它们添加到页面会显着降低其加载速度。反过来，这可能会导致更高的跳出率和更低的搜索引擎排名。

当然，只要您了解 Google 的 JavaScript 渲染以及如何使您的 JS 代码易于搜索，所有这些问题都可以避免。

JavaScript 对 SEO 有好坏？

不幸的是，这个问题没有简单的答案。这一切都取决于，真的！

当 Javascript 经过深思熟虑的实施，专注于页面体验、性能优化和适当的索引技术时，它对 SEO 和用户都有好处。最值得注意的是，它可以改善用户体验。JavaScript 网站往往具有不同类型的动画和过渡，非常适合提高用户参与度。

现在，如果您无法在交互性和搜索引擎友好性之间找到平衡，您的网站更有可能遇到可抓取性有限、页面加载时间长和兼容性问题等问题。所有这些问题加在一起会导致高退回率。我们也不希望那样！

尽管关于 JavaScript 对网站可见性和排名的影响的争论一直在进行，但说 Javascript 或 JavaScript 框架对网站优化的威胁是不准确的。尽管如此，错误地使用它们可能会对你的排名潜力产生不利影响，因此建议至少遵循一些 Javascript SEO 最佳实践。我们稍后会介绍这些内容。所以不用担心，您很快就能充分利用这种脚本语言的强大功能。

Google 如何处理 JavaScript

最近，Google 在 JavaScript 抓取和索引方面跃升了 100 倍。但这个过程仍然相当复杂，很多事情都可能出错。

对于常规的 HTML 页面，一切都简单明了。Googlebot 会抓取网页并解析其内容，包括内部链接。然后，当发现的 URL 被添加到爬网队列中时，内容将被编入索引，并且该过程将重新开始。每次 Google 像这样抓取你的网站时，你都会从抓取预算中花费一分。每个网站都有一个分配的抓取预算，因为 Google 用于抓取和呈现网站页面的资源有限。

对于 JavaScript 网站，这个过程会变得更加繁琐。要查看 JavaScript 中通常看起来像 JS 文件的单个链接中隐藏的内容，Googlebot 需要首先解析、编译和执行它。这称为 JavaScript 呈现，只有在此阶段完成后，Googlebot 才能看到 HTML 标记（它能理解的语言）中网页的所有内容。此时，Google 可以继续为 JS 驱动的元素编制索引，并将隐藏在 JS 中的 URL 添加到抓取队列中。

现在，这些并发症是您应该在 SEO 方面担心的事情吗？就在一年前，他们还是。

JavaScript 渲染非常耗费资源且成本高昂，直到最近 Google 都不会立即渲染 JavaScript。它首先会为页面中现成的纯 HTML 部分编制索引，然后在所谓的第二波索引中，Googlebot 会处理 JavaScript。早在 2018 年，John Mueller 就声称该页面需要几天到几周的时间才能呈现。因此，JavaScript 网站不能指望他们的页面被快速索引。此外，他们可能会遇到新页面进入抓取队列的问题，因为 Googlebot 无法立即跟踪内部链接。

在一次 JavaScript SEO 办公时间中，Martin Splitt 向网站管理员保证，渲染队列现在移动得更快，页面通常在几分钟甚至几秒钟内渲染。尽管如此，使 JavaScript 代码易于搜索仍然相当棘手，每周一次的 JavaScript SEO 咨询时间会议显然证明了这一点。用户分享的案例表明，如果 JavaScript 编码不正确，事情可能会变得非常糟糕。让我们用几个常见问题来说明我们的观点。

Google 不会与您的内容互动

只要隐藏内容出现在 DOM 中，Google 就可以查看和索引隐藏内容 - 这是源代码在浏览器呈现之前发送源代码的位置。在此阶段，可以使用 JavaScript 来修改内容。

现在，假设您的初始 HTML 包含页面的完整内容，然后使用 CSS 属性隐藏内容的某些部分，并使用 JS 让用户显示这些隐藏的部分。在这种情况下，你们都很好，因为内容仍然存在于 HTML 代码中，并且仅对用户隐藏 - Google 仍然可以看到隐藏的内容。

另一方面，如果你的初始 HTML 不包含一些内容片段，并且它们通过点击触发的 JavaScript 加载到 DOM 中，那么 Google 将不会看到此类内容，因为 Googlebot 无法点击。但是，这个问题可以通过实现服务器端渲染来解决——这是在服务器端执行 JS 并且 Google 获得现成的最终 HTML 代码时。动态渲染也可以是一种出路。

Google 不滚动

JavaScript 通常用于实现无限滚动或为了 UX 而隐藏某些内容，并让用户在单击按钮时显示其他信息。

这里的问题是 Googlebot 不会像用户在浏览器中那样点击或滚动。

Google 肯定有自己的解决方法，但它们是否有效取决于您使用的技术。如果你以 Google 无法弄清楚的方式实现事情，你最终会导致 JS 驱动的内容的一部分没有被索引。

对于无限滚动，应避免滚动事件，因为它们需要 Googlebot 实际滚动页面以调用 JavaScript 代码，而 Google 无法处理。相反，您可以使用 Intersection Observer API 实现无限滚动和延迟加载，或者在无限滚动的同时启用分页加载。

JS 和 CSS 如何协同工作

虽然 Javascript 主要用于为网页添加交互性和动态行为，但 CSS（代表级联样式表）可以创建具有样式的网站。它允许开发人员定义站点 HTML 元素的布局、颜色、字体和其他视觉方面。纯 HTML 网页在减去设置的宽度和左侧对齐方式后，看起来是这样的。

过去，Google 只解释页面的 HTML 标记。这一切都随着 2015 年的移动友好更新而改变，当时 Google 决定奖励具有移动友好页面的网站，这些页面可在移动设备上提供无缝的用户体验。此更改还影响了 Google 的页面布局算法，该算法评估桌面和移动设备上的内容可访问性。CSS 在这两种情况下都发挥了关键作用。

现在，要了解 CSS 和 Javascript 如何协同工作，让我们使用一个简单的类比。想象一下，您正在计划一场令人印象深刻的派对。在这种情况下，前者将扮演派对装饰者的角色，使一切在视觉上都具有吸引力，而后者则类似于派对策划者，管理互动元素并确保一切顺利进行。两者都增强了 Web 开发，类似于它们改善群体验的方式。

JavaScript SEO 最佳实践

由于我们已经了解了 JavaScript 的大部分基础知识，让我们继续讨论优化 JavaScript 网站时要遵循的一些最佳实践。

确保 Google 可以发现您的所有内容

由于 Google 的网络爬虫 Googlebot 目前能够分析 JavaScript，因此无需阻止其访问爬网和渲染所需的任何资源，即使为了保持爬取预算也是如此。

不过，如果要确保 JavaScript 站点上的内容被有效地编入索引，请遵循以下准则：

• 使网页中的基本信息在页面源代码中可见。 这确保了 Google 和其他搜索引擎不需要依赖用户交互来加载内容（例如，点击按钮）。
• 即使 Google 不推荐它，你仍然可以使用 JavaScript 来注入 rel=“canonical” 链接标签。 Google 搜索会在加载您的页面时识别链接标签。只需确保它是页面上唯一的一个。否则，您最终可能会创建多个 rel=“canonical” 链接标签或更改现有的 rel=“canonical” 链接标签，这可能会导致一些意想不到的后果。
• Javascript 框架（如 Angular 和 Vue）通常为客户端路由生成基于哈希的 URL（例如 www.example.com/#/about-us）。尽管这些类型的 URL 提供无缝导航，但它们可能会阻碍 SEO 并使用户感到困惑。确保使用常规 URL 来改善用户体验、SEO 和整体网站可见性。

遵循页面最佳实践

当谈到 Javascript SEO 时，遵循常见的页面 SEO 指南应该在你的优先列表中。优化内容、标题标签、元描述、alt 属性和元机器人标签尤为重要。一些关键的 JavaScript 和 SEO 最佳实践包括但不限于：

• 内容优化：确保您的 JS 内容有价值且经过关键字优化。使用适当的标题标签并包含相关关键字。
• 标题标签和元描述： 使用 JavaScript 为每个页面生成唯一的描述性标题标签和元描述。如果您使用 JavaScript 框架，请特别注意这一点，因为其中许多框架都是基于模板的，您很容易发现自己处于相同标题或元描述用于不同页面的情况。在字符限制内包含关键字。
• 图像的 alt 属性：将简洁、关键字丰富的 alt 属性添加到基于 JavaScript 的图像中，以提高可访问性和 SEO。
• Meta Robot 标签：包括元机器人标签，以指导搜索引擎进行索引和跟踪链接。选择“index”和“follow”来获取所需的内容，或者选择“noindex”和“nofollow”来获取敏感或重复的内容。
• JavaScript 加载和性能：优化 JavaScript 加载以提高页面速度和用户体验。压缩文件大小以减少加载时间，利用缓存并避免阻止关键页面元素。

使用适当的 <a href> 链接

在实现 JS 时需要记住的是，Google 和其他搜索引擎只有在编码正确的情况下才会跟踪 JavaScript 链接。带有 URL 和 href 属性的 HTML<a>标签指向正确的 URL 是您需要遵循的黄金法则。只要标签在那里，即使你在链接代码中添加一些 JS，你也没问题。

<a href=”/page” onclick=”goTo(‘page’)”>your anchor text</a>

同时，所有其他变体，例如缺少<a> 标签或 href 属性或没有正确 URL 的链接，都适用于用户，但 Google 将无法跟踪它们。

<a onclick=”goTo(‘page’)”>your anchor text</a>
<span onclick=”goTo(‘page’)”>your anchor text</span>
<a href=”javascript:goTo(‘page’)”>your anchor text</a>
<a href=”#”>no link</a>

当然，如果你使用站点地图，即使 Google 无法跟踪指向这些页面的内部链接，它仍然应该发现你的网站页面。但是，搜索引擎仍然更喜欢指向站点地图的链接，因为它们可以帮助它了解您的网站结构和页面之间的关联方式。此外，内部链接允许您在您的网站上传播链接汁。查看这份关于内部链接的深入指南，了解它是如何工作的。

使用有意义的 HTTP 状态代码

确保 HTTP 状态代码相关且有意义是一项必不可少的 SEO 实践，在促进与 Googlebot 的良好沟通方面起着至关重要的作用。JavaScript 可以简化此过程。例如，如果遇到 404 代码或任何其他错误，用户将自动被定向到单独的/未找到的页面。通过使用 JavaScript 来管理 HTTP 状态代码，网站可以提供更直观的用户体验，减少挫败感并帮助访问者浏览潜在的错误。

避免阻止 robots.txt 文件中的重要 JavaScript 文件

不要阻止您网站的 robots.txt 文件中的基本 JS 文件。如果您这样做，Google 以及其他搜索引擎将无法访问、处理甚至与您的内容互动。这可能会严重阻碍 Google 有效地理解和排名您的网站的能力。

假设您通过合并动态加载的文本、交互式元素和关键元数据生成了高质量的 JS 内容。但我们也假设你出于某种原因阻止了搜索引擎对它的抓取。因此，您的内容可能会被忽视或在搜索引擎索引中代表性不足。这将导致自然流量、可见性和整体搜索性能降低。

正确实施分页

当 SEO 专家处理大量网站内容时，他们倾向于使用页面优化技术，如分页和无限滚动。尽管这些做法可以带来各种好处，但如果实施不当，它们也会阻碍您的 SEO 工作。

分页的一个常见问题是搜索引擎往往只查看分页内容的第一部分，从而无意中隐藏了随后的页面。这意味着您创建的一些有价值的内容可能会被忽视和索引。

要解决此问题，除了用户操作之外，还可以使用正确的<a href>链接实现分页。借助< href> 链接，搜索引擎可以轻松跟踪和抓取每个分页页面，确保找到所有内容并编入索引。

使用服务器端或静态渲染

如上所述，Web 爬虫往往难以执行 JavaScript。这就是为什么搜索引擎偶尔会完全忽略此类内容的原因。页面爬网程序可能只是拒绝等待动态内容完全呈现后再为页面编制索引。

为了帮助搜索引擎进行爬网和索引，建议使用服务器端渲染。此过程涉及在将网页发送到用户的浏览器之前在服务器上呈现网页。这种做法可确保搜索引擎接收到完全填充的网页，从而大大减少处理时间和工作量。

测试 JS 以进行 SEO

正如您可能已经猜到的那样，JavaScript 的编码方式可以成就或破坏您的网站。例如，您可以使用 Google 的工具（例如 Mobile-Friendly Test）来查看 Google 如何呈现您的页面。

最好在早期开发阶段进行测试，因为此时事情更容易解决。使用 Google 的 Mobile-Friendly Test，您可以及早发现所有错误 - 只需让您的开发人员使用特殊工具（例如 ngrok）创建指向其本地主机服务器的 URL。

现在，让我们探索其他可用于测试 JavaScript 的 SEO 方法。

在 Chrome 中检查

要检查搜索引擎如何解释您的 JavaScript，您可以使用 Chrome 浏览器的开发者工具。在 Chrome 中打开您的网站，右键单击任何元素，然后选择“检查”。这将打开开发人员控制台，您可以在其中查看页面的 HTML 结构并检查所需的 JS 内容是否可见。如果内容被隐藏或未正确呈现，则搜索引擎可能无法访问该内容。

或者，您可以按 Command+Option+J （Mac） 或 Control+Shift+J（Windows、Linux、Chrome OS）运行该工具。

在 Sources （源） 选项卡中，您可以找到 JS 文件并检查它们注入的代码。然后，您可以使用其中一个 Event Listener 断点在您认为出现问题时暂停 JS 执行，并进一步检查该段代码。一旦您认为您检测到了错误，您就可以实时编辑代码，以实时查看您提出的解决方案是否解决了问题。

Chrome 开发者工具的伟大之处在于所有更改都应用于用户浏览器中，不会影响其他用户。一旦你点击刷新按钮，它们就会消失。该工具可用于调试任何代码错误，而不仅仅是与 JavaScript 相关的代码错误。因此，如果您对网站的 CSS 有任何问题，该工具也会派上用场。

谷歌搜索控制台

Google Search Console 是一个强大的工具，可让您监控和优化您的网站在 Google 搜索结果中的存在。它提供了有关 Google 如何抓取您的网站并将其编入索引的宝贵见解。为此，请转到 Google Search Console 的 “URL Inspection” 部分。在这里，您可以提交单个 URL 并查看 Google 如何呈现它们，包括任何 JS 内容。这将帮助您确定 Google 是否能够有效地访问您的 JavaScript 内容并将其编入索引。

点击 “URL Inspection” ，然后使用 “Test Live URL” 功能。然后，单击 查看测试页面 > 更多信息 > Javascript 控制台消息。

谷歌缓存

检查 Google 缓存是验证 Google 是否正在索引您的 JavaScript 驱动内容的另一种好方法。Google 缓存是 Google 爬虫拍摄的网页快照。您可以使用 SE Ranking 的 Google Cache Checker 等工具查看页面的缓存版本。这将帮助您确定 Google 是否正确呈现和索引您的 JavaScript 内容。

在 Google 中搜索文本

要确定 Google 是否正在将您的 JavaScript 代码动态生成的内容编入索引，请对 JavaScript 生成的唯一文本字符串执行特定搜索。现在检查 Google 是否返回任何相关结果。如果您的 JavaScript 生成的内容没有出现在搜索结果中，这可能表明 Google 没有正确索引它。

运行 Site Audit（网站诊断）

测试 Javascript 的 SEO 并发现您网站上所有与 JS 相关的错误的一种简单方法是启动技术 SEO 审核。如果您是 SE Ranking 用户，则需要检查网站诊断问题报告的几个部分：JavaScript 和 HTTP 状态代码。

SE Ranking 不仅列出了您网站上检测到的所有错误，还提供了有关如何修复这些错误的提示。

它指向导致错误的确切文件，以便您知道要调整哪些文件以使事情正确。单击包含发生错误的页数的列，将打开文件 URL 的完整列表。

常见的JavaScript SEO问题以及如何避免它们

现在，您可能想知道哪些常见的 SEO 问题与这种程序化语言有关。首先值得一提的是，Javascript 作为文件单独存储，并从<head>部分链接到页面。

浏览器和 Google 需要获取这些资源才能完全呈现页面的内容。有时，Google 和浏览器（或只是 Google）无法加载文件，发生这种情况的原因对于 CSS 和 JavaScript 都很常见。

在不太严重的情况下，Google 和浏览器可以获取文件，但它们的加载速度太慢，这会对用户体验产生负面影响，还会减慢网站索引的速度。

Google 无法抓取 JS 文件

要获取 JS 文件，Googlebot 需要获得相应权限。过去，通常的做法是阻止 Google 使用 robots.txt 文件访问这些文件，因为 Google 无论如何都不会使用它们。现在，这家搜索巨头依靠 JavaScript 来理解网站内容，它鼓励网站管理员 “允许抓取所有会严重影响页面呈现的网站资产：例如，影响页面理解的 CSS 和 JavaScript 文件”。如果您不取消阻止这些文件，Google 将无法呈现它们并为 JavaScript 驱动的内容编制索引。

阻止 JS 文件本身并不是一个负面的排名因素。但是，如果它仅用于修饰，或者由于某种原因您不想为 JS 注入的内容编制索引，则可以阻止 JS 文件。在所有其他情况下，请让 Google 呈现您的文件。

Google 和浏览器无法加载 JS 文件

读取 robots.txt 文件以检查您是否允许抓取后，Googlebot 会发出 HTTP 请求来访问您的 JavaScript 网址。要继续渲染文件，它应该得到 200 OK 响应代码。但有时，会返回其他状态代码，如 4XX 或 5XX。如果您需要快速回顾一下不同的状态代码，这意味着本指南适合您。

具有 4XX 状态的 JavaScript

4XX 响应代码表示请求的资源不存在。说到 JS 文件，这意味着 Googlebot 遵循了页面 部分中指示的 URL，但没有在指定位置找到您的文件。当页面返回 4XX 时，通常表示该页面已被删除。使用 JavaScript 时，经常发生错误是因为未正确指示文件的路径。也可能是权限问题。

4XX 响应代码的坏处在于，Google 并不是唯一一个在渲染 JS 文件时遇到问题的人。浏览器也无法执行此类文件，这意味着您的网站看起来不会那么好，并且会失去其交互性。

如果使用 JS 将内容加载到网站（例如，相应网站的股票汇率），则如果代码未正常运行，所有动态呈现的内容都将丢失。

要修复此错误，您的开发人员必须首先找出导致错误的原因，原因会因所使用的技术而异。

具有 5XX 状态的 JavaScript

5XX 响应代码表示您的 Web 服务器端有问题。这意味着浏览器或 Googlebot 发送了 HTTP 请求，找到了您的 JavaScript 文件，但您的服务器无法返回该文件。

在最坏的情况下，发生错误是因为您的整个网站都已关闭。当您的服务器无法处理流量时，就会发生这种情况。流量的突然增加可能是自然的，但在大多数情况下，这是由激进的解析软件或恶意机器人以特定目的淹没您的服务器 （DDoS） 引起的。

如果浏览器未能在设定的时间范围内获取 JavaScript 文件，则服务器也可能无法交付 JavaScript 文件，从而导致 504 超时错误。如果文件包太大或用户的 Internet 连接速度较慢，则可能会发生这种情况。

为防止这种情况，您可以以某种方式配置您的网站服务器，使其不那么不耐烦。但也不建议让服务器等待太久。

问题是，加载一个巨大的 JS 捆绑包会占用大量的服务器资源，如果你所有的服务器资源都用于加载文件，它将无法满足其他请求。因此，您的整个网站将被暂停，直到文件加载为止。

JS 文件加载速度不够快

在本节中，让我们更深入地研究导致 JS 文件加载时间较长或比预期更长的问题。即使浏览器和 Googlebot 都设法加载和呈现您的 JS 文件，但它们需要一段时间才能完成，您也应该感到担忧。

浏览器加载页面资源的速度越快，用户获得的体验就越好，如果文件加载缓慢，用户必须等待一段时间才能在浏览器中呈现页面。

具有 3XX 状态的 JavaScript

3xx 状态代码表示请求的资源已重新路由，对于将网站代码中的 URL 重定向到新位置至关重要。这不仅适用于域和路径，也适用于用于检索资源的 HTTP/HTTPS 协议。

在下面的示例中，JavaScript 文件最初使用 HTTP URL 引用：

<script nomodule type="text/javascript" src="http://static.files.bbci.co.uk/orbit/7c43b78b94b8ed38e941a5a5336425e5/js/polyfills.js"></script>

但是，文件的正确和最新 URL 应使用 HTTPS：

<script nomodule type="text/javascript" src="https://static.files.bbci.co.uk/orbit/7c43b78b94b8ed38e941a5a5336425e5/js/polyfills.js"></script>

Googlebot 和浏览器仍会获取这些文件，因为您的服务器会将这些文件重定向到正确的地址。需要注意的是，他们必须发出额外的 HTTP 请求才能到达目标 URL。这不利于加载时间。虽然对于单个 URL 或几个文件的性能影响可能并不大，但在更大规模的情况下，它会显著减慢页面加载时间。

这里的解决方案是显而易见的 — 您只需将网站代码中的每个旧 JavaScript URL 替换为最新的目标 URL。

未启用缓存

最大限度地减少对服务器的 HTTP 请求数量的一个好方法是允许在响应标头中缓存。您肯定听说过缓存 - 当网站上的信息无法正确显示时，您经常会收到清除浏览器缓存的建议。

缓存实际上的作用是在用户访问您的网站时保存您的网站资源的副本。然后，当该用户下次访问您的网站时，浏览器将不再需要获取资源，而是为用户提供保存的副本。缓存对于网站性能至关重要，因为它可以减少延迟和网络负载。

Cache-control HTTP 标头用于指定浏览器应遵循的缓存规则：它指示是否可以缓存特定资源、谁可以缓存它以及缓存的副本可以持续多长时间。强烈建议允许缓存 JS 文件，因为浏览器会在用户每次访问网站时上传这些文件，因此将它们存储在缓存中可以显着增加页面加载时间。

以下是将 JS 文件的缓存设置为 1 天和 public access 的示例。

<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=86400, public"
</filesMatch>

但值得注意的是，Googlebot 通常会忽略缓存控制 HTTP 标头，因为遵循 website set 的指令会给抓取和渲染基础架构带来太多负载。

因此，每当您更新 JavaScript 文件并希望 Google 注意到它时，建议重命名您的文件并使用不同的 URL 上传它。这样，Google 将重新获取该文件，因为它会将其视为以前从未遇到过的全新资源。

文件数量很重要

从开发人员的角度来看，使用多个 JavaScript 文件可能很方便，但在性能方面并不是很好。浏览器会发送单独的 HTTP 请求来加载每个文件，并且浏览器可以同时处理的网络连接数量是有限的。因此，页面的所有 JS 资源将逐个加载，从而降低渲染速度。

因此，建议捆绑您的 JavaScript 文件，以将浏览器必须加载的文件数量保持在最低限度。

从 Google 的角度来看，太多的 JS 文件不是问题，这意味着它无论如何都会渲染它们。但是您拥有的文件越多，您在加载 JS 文件上花费的抓取预算就越多。对于拥有数百万个页面的大型网站，这可能很关键，因为这意味着 Google 不会及时索引某些页面。

文件大小也很重要

捆绑 JS 文件的问题在于，随着您的网站增长，新的代码行会添加到文件中，最终它们可能会变得足够大，以至于成为性能问题。

根据你网站的结构方式，不把所有的 JS 文件捆绑在一起可能是合理的，而是将它们分组到几个较小的文件中，比如一个单独的文件用于你的博客 JavaScript，另一个文件用于论坛 JavaScript，等等。

拆分一个巨大的 JavaScript 捆绑包的另一个原因是缓存。如果你把所有代码都放在一个文件中，那么每次你更改 JavaScript 代码中的某些内容时，浏览器和 Google 都必须重新缓存整个捆绑包。这对于索引和用户体验都不是很好。

在索引方面，根据所使用的缓存技术，它可以有两种方式：要么强制 Googlebot 不断重新缓存您的 JavaScript 包，要么 Google 可能无法及时注意到缓存不再有效，您最终会导致 Google 看到过时的内容。

说到用户体验，每当您更新捆绑包中的某些 JS 代码时，浏览器都无法再向您的任何用户提供缓存副本。因此，即使您只更改博客的 JS 代码，您的所有用户（包括从未访问过您博客的用户）也必须等待浏览器加载整个 JS 包才能访问您网站上的任何页面。

压缩和缩小 CSS 和 JavaScript

为了保持 JS 文件的轻量级，您需要压缩和缩小它们。这两种做法都是为了通过编辑源代码来减小网站资源的大小，但它们截然不同。

压缩是将源代码中的重复字符串替换为指向该字符串的第一个实例的指针的过程。由于任何代码都有很多重复的部分（想想你的 JavaScript 包含多少个

压缩的伟大之处在于开发人员不需要手动进行压缩。所有繁重的工作都由服务器完成，前提是它被配置为压缩资源。例如，对于 Apache 服务器，将几行代码添加到 .htaccess 文件中以启用压缩。

缩小是从源代码中删除空格、不需要的分号、不必要的行和注释的过程。因此，您得到的代码不是完全可读的，但仍然有效。浏览器可以完美地呈现此类代码，它们甚至可以比原始代码更快地解析和加载它。Web 开发人员将不得不自己处理缩小问题，但有了大量专用工具，这应该不是问题。

说到减小文件大小，缩小不会给你惊人的 70%。如果您已经在服务器上启用了压缩，则进一步缩小资源可以帮助您将其大小再减少几到 16%，具体取决于资源的编码方式。因此，一些 Web 开发人员认为缩小已经过时了。但是，您的 JS 文件越小越好。因此，一个好的做法是将这两种方法结合起来。

使用外部 JavaScript 文件

许多网站倾向于使用托管在第三方域上的外部 JavaScript 文件。重用可以完美解决您的问题的开源代码似乎是个好主意 — 毕竟，重新发明轮子是没有意义的。使用现成的解决方案真的没有什么错，只要将其复制并上传到网站的服务器即可。同时，使用外部托管的第三方 JS 文件会带来许多风险。

首先，我们谈论的是安全风险。如果托管您使用的文件的网站被黑客入侵，您最终可能会运行注入外部 JS 文件的恶意代码。黑客可能会窃取您用户的私人数据，包括他们的密码和信用卡详细信息。

在性能方面，请考虑上面讨论的所有错误。如果您无权访问托管 JS 文件的服务器，则无法设置缓存、压缩或调试 5XX 错误。

如果托管文件的网站在某个时候删除了该文件，而您没有及时注意到它，您的网站将无法正常运行，您将无法快速将 404 JS 文件替换为有效的文件。

最后，如果托管 JS 文件的网站将 3XX 重定向到（略微）不同的文件，您的网页的外观和工作方式可能不完全符合预期。

如果您确实使用第三方 JS 文件，我们的建议是密切关注它们。尽管如此，更好的解决方案是根本不使用外部 JS。

SEO资料免费领取

需要下方资料的可以通过文末的图片扫码免费获取↓↓↓

一、SEO部分文档资料

二、SEO视频教程

三、SEO交流群