最近，我在 Onely 博客上阅读了 Ziemek Bucko 的一篇引人入胜的文章《渲染队列：Google 抓取 JS 所需的时间是抓取 HTML 的 9 倍》 。

Bucko 描述了他们所做的一项测试，该测试表明，与纯文本 HTML 中的链接相比，Googlebot 跟踪依赖 JavaScript 的页面中的链接存在明显的延迟。 

虽然只依赖一次这样的测试并不是一个好主意，但他们的经历与我的经历相符。我见过并支持过许多网站过度依赖 JavaScript (JS) 来正常运行。我认为在这方面我并不孤单。

我的经验是，与纯 HTML 相比，纯 JavaScript 内容可能需要更长的时间才能被索引。 

我记得曾多次接到沮丧的客户打来的电话和发来的电子邮件，询问为什么他们的商品没有出现在搜索结果中。 

除了一种情况外，所有其他情况的挑战似乎都是因为页面是在纯 JS 或主要是 JS 的平台上构建的。

在进一步讨论之前，我想澄清一下，这不是一篇关于 JavaScript 的“攻击性文章”。JS 是一种很有价值的工具。 

然而，与任何工具一样，它最适合用于其他工具无法完成的任务。我并不反对 JS。我反对在没有意义的地方使用它。

但是还有其他理由让我们考虑明智地使用 JS，而不是在所有事情上依赖它。 

以下是我的经历中的一些故事，可以说明其中的一些。

1. 文字？什么文字？！

我支持的一个网站在一个严重依赖 JavaScript 的平台上以全新的设计重新上线了。 

新网站上线一周内，自然搜索流量骤降至接近零，这引起了客户们的恐慌，这是可以理解的。

快速调查显示，除了网站速度明显变慢（参见下文）之外，谷歌的实时页面测试显示页面为空白。 

我的团队进行了评估，并推测 Google 需要一些时间来呈现这些页面。然而，又过了 2-3 周，显然发生了其他事情。 

我与该网站的首席开发人员会面，弄清楚发生了什么。在谈话中，他们分享了他们的屏幕，向我展示了后端发生的事情。 

就在那时，我突然顿悟了。当开发人员在控制台中逐行执行代码时，我注意到每个页面的文本都是使用一行 CSS 在视口外加载的，但被一些 JS 拉入可见框架中。 

这样做的目的是为了制作一个有趣的动画效果，让文本内容“滑入”视图。但是，由于页面在浏览器中渲染速度非常慢，当页面内容最终显示出来时，文本已经进入视图。 

实际的滑入效果对用户来说是看不见的。我猜谷歌无法识别滑入效果，因此看不到内容。 

一旦消除这种影响并重新抓取网站，流量数量就会开始恢复。

2. 速度太慢

这可能是几个故事，但我将在一个故事中总结几个。AngularJS 和 React 等 JS平台非常适合快速开发应用程序（包括网站）。 

它们非常适合需要动态内容的网站。当网站有大量由动态驱动的静态内容时，挑战就来了。 

我评估过的一个网站上的几个页面在 Google 的 PageSpeed Insights (PSI) 工具中的得分非常低。 

当我使用 Chrome 开发者工具中的覆盖率报告对这些页面进行深入研究时，我发现 90% 的下载 JavaScript 都没有被使用，代码量超过 1MB。 

当您从核心网络生命力方面检查这一点时，会发现这占据了将近 8 秒的阻塞时间，因为所有代码都必须在浏览器中下载并运行。 

在与开发团队交谈时，他们指出，如果他们预先加载网站上所需的所有 JavaScript 和 CSS，那么访问者后续的页面访问速度就会更快，因为代码将位于浏览器缓存中。 

虽然作为前开发人员，我同意这一概念，但作为 SEO，我无法接受谷歌对网站用户体验的明显负面看法可能会降低来自自然搜索的流量。 

不幸的是，根据我的经验，SEO 通常会因为缺乏对已推出内容进行更改的意愿而失败。

3. 这是有史以来最慢的网站！

与之前的故事类似，我最近评论过的一个网站在 Google PSI 上得分为零。在此之前，我从未见过零分。很多 2 分、3 分和 1 分，但从来没有 0 分。

我会给你三次机会猜测该网站的流量和转化率发生了什么变化，前两次不算数！

---

有时，不仅仅是 JavaScript

公平地说，过多的 CSS、远大于需要的图像以及自动播放视频背景也会减慢下载时间并导致索引问题。

我在之前的两篇文章中写了一些关于这些的内容：

• 内容有助于创造更好用户体验的 5 种方式
• 糟糕的网站设计：不利于 SEO、用户体验和业务

例如，在我的第二个故事中，所涉及的网站也倾向于使用过多的 CSS，而大多数页面都没有使用这些 CSS。

那么，在这些情况下 SEO 应该做什么呢？

解决此类问题需要 SEO、开发和客户或其他业务团队之间的密切合作。 

建立联盟可能很微妙，需要付出和收获。作为一名 SEO 从业者，您必须弄清楚哪些地方可以妥协，哪些地方不能妥协，并采取相应的行动。 

从头开始

最好从一开始就将 SEO 融入网站。网站启动后，更改或更新网站以满足 SEO 要求会更加复杂且昂贵。

在设定需求、规范和业务目标之时，积极参与网站开发过程。 

尝试在流程早期将搜索引擎机器人作为用户故事，以便团队能够了解其独特的怪癖，从而帮助快速有效地索引内容。 

成为一名老师

该过程的一部分是教育。开发团队经常需要了解 SEO 的重要性，因此您需要告诉他们。 

放下你的自尊，尝试从其他团队的角度看待问题。 

帮助他们了解实施 SEO 最佳实践的重要性，同时了解他们的需求并在两者之间找到良好的平衡。 

有时举行午餐学习会并带些食物会很有帮助。在讨论期间共享一顿饭有助于打破隔阂——而且作为一点贿赂也无妨。 

我和开发团队进行过的一些最有成效的讨论都是在吃几片披萨时进行的。

对于现有网站，发挥创意

如果网站已经启动，您就必须更有创造力。 

开发团队经常会转向其他项目，可能没有时间回头来“修复”那些按照他们收到的要求运行的东西。 

客户或企业主也很可能不愿意在另一个网站项目上投入更多资金。如果所讨论的网站是最近推出的，情况尤其如此。

一个可能的解决方案是服务器端渲染。这可以减轻客户端的工作负担，并显著加快速度。 

这种方法的一个变体是将服务器端渲染与纯文本 HTML 内容缓存相结合。这对于静态或半静态内容来说是一种有效的解决方案。 

它还节省了服务器端的大量开销，因为只有在进行更改时或按照定期安排时才呈现页面，而不是每次请求内容时都呈现页面。

其他可以提供帮助但不能完全解决速度问题的替代方法是最小化和压缩。 

压缩会删除字符之间的空格，从而使文件更小。下载的 JS 和 CSS 文件可以使用 GZIP 压缩。

最小化和压缩并不能解决阻塞时间问题。但是，它们至少可以减少下载文件本身所需的时间。

Google 和 JavaScript 索引：有什么作用？

长期以来，我一直认为 Google 索引 JS 内容速度较慢的原因至少有一部分是因为处理 JS 内容的成本较高。 

从我听到的描述来看，这似乎是合乎逻辑的： 

• 第一遍抓取了所有的纯文本。
• 需要第二次传递来抓取、处理和渲染 JS。

我推测第二步需要更多的带宽和处理时间。

我在 Twitter 上询问谷歌的约翰·穆勒 (John Mueller) 这是否是一个合理的假设，他给出了一个有趣的答案。 

在他看来，JS 页面并不是很大的成本因素。在 Google 眼中，昂贵的是重新加载那些从不更新的页面。 

最终，对他们来说最重要的因素是内容的相关性和实用性。