撰稿人Maria Cieslak深入研究了JavaScript以及与之相关的一些混乱，并编写了一份详细的清单，您可以将其作为深入分析的起点。
在过去的20年中，Google的搜索引擎发生了很大变化。
如果我们从整体上看技术和网络开发，我们可以看到变化的步伐非常壮观。
1998年的这个网站提供的信息丰富，诊断JavaScript动力网站技术审查的优先事项，但不是非常有吸引力或易于使用：
现代网站不仅看起来好多了，而且还配备了强大的功能，例如推送通知，部分离线工作和眨眼之间加载。
但是如果我们想要准确，我们应该使用术语“应用程序”而不是“网站”，因为网站是互动的，动态的并且使用JavaScript构建。
JavaScript作为游戏改变者
Google最长时间无法执行JavaScript，但到2015年该公司在处理JavaScript方面迈出了巨大的一步。
需要强调的是，搜索引擎的发展速度远远低于网络开发领域的发展速度，这可能是谷歌仍然是唯一可以执行JavaScript的搜索引擎的原因。
一开始，当万维网由仅由静态超文本标记语言（HTML）构成的网站构建时，Google有一项简单的任务来完成：
向服务器发出请求→获取静态HTML响应→为页面编制索引
我知道这是对这个过程的超简单描述，但是我想要展示处理网站与当今处理网站之间的差异。
当开发人员开始使用JavaScript（JS）在网站上添加交互性时，问题就出现了，然后当Javascript用于创建整个网站时，对JavaScript的依赖性变得更大时，问题就会加剧。
JavaScript应用程序和网站是Google的挑战，因为在向服务器发送初始请求后，Googlebot会收到一个空的或几乎为空的HTML文件。
JS执行后会添加内容，图片和链接。
Google通过尝试渲染他们访问的几乎所有页面来解决这个问题。
所以现在，这个过程看起来或多或少像这样：
向服务器发出请求→获取静态HTML响应→将其发送到索引器→渲染页面→
索引并将提取的链接发送到Googlebot→Googlebot可以抓取下一页。
由于JavaScript的执行在抓取，渲染和索引过程中增加了很多低效率和延迟，因为：
Googlebot的抓取速度变慢了。
它没有在JS网站的源代码中看到超链接，所以它需要等待索引器呈现页面，然后将提取的URL发回。
执行JavaScript需要很多资源。
甚至对于Google的数据中心来说，这也令人筋疲力尽。
尽管存在这些障碍，但我们需要为开发动态JS应用程序的繁荣做好准备，因为对React，Vue.js或Angular等开放源代码框架的兴趣持续高涨。
越来越多的网站将使用JavaScript构建。
所以作为优化，我们需要能够发现使用它的网站上的问题。
正确的做法
在我们开始深入研究JavaScript以及与之相关的一些混乱之前，让我们看看三个方面，这些方面将调整我们分析网站的方法：
A.问题的严重程度如何？
我们需要理解并明确界定使用JavaScript构建的网站（应用程序），例如单页应用程序（SPA）和JavaScript的部分依赖关系。
以下是一些可能的场景以及如何说明使用SPA构建的内容以及部分依赖关系：
没有JavaScript依赖关系。
访问我们的网站并在浏览器中关闭JS – 没有任何变化。
部分JS依赖关系。
访问Angular.io网站并在浏览器中关闭JS – 主导航不起作用（但链接在文档对象模型[DOM]中可用，稍后我将会讨论）。
有意义的JS依赖关系。
访问AutoZone并关闭JS – 主导航可能不起作用，并且链接可能在DOM中不可用。
完整的JS依赖关系。
访问YouTube，关闭JS并注意所有内容消失！
正如您可能猜到的那样，如果您对JavaScript有部分依赖关系，则可以解决的问题更少。
B.网站建在哪里？
静态HTML网站建立在您的服务器上。
在Googlebot（以及用户）发出初始请求后，它会收到一个静态页面作为响应。
动态Web应用程序（DWA）内置在浏览器中，因此在初始请求后，我们会收到一个空的或几乎空的HTML文件，并且使用JavaScript以异步方式加载内容。
纵观全局，我们可以假设客户端渲染是JS和优化（优化）问题时真正的恶棍。
C.谷歌有什么限制？
前段时间，Google透露了它如何渲染网站：共享网络渲染服务（WRS）负责渲染页面。
在他们身后是一个基于Chrome 41的无头浏览器，它于2015年推出，所以它有点过时了。
Google使用三年前的浏览器对于呈现现代Web应用程序具有实际影响，因为它不支持现代应用程序使用的所有当前功能。
Google的工程师Eric Bidelman证实他们知道Google与JS的限制。
根据非官方声明，我们预计Chrome 41将在2018年底更新为更新版本。
要深入了解支持和不支持的内容，请访问Caniuse.com，并将Chrome 41与最新版本的Chrome进行比较。
名单很长：
处理资源
超时是使JS和优化难以匹配的下一件事。
JavaScript应用通常非常繁重，Google资源有限。
想象一下，在JavaScript的情况下，Google需要渲染每个页面才能看到内容。
下面的例子显示了多重的JS执行。
如果你有一个JS文件和一个大小相同的图像文件，你会发现解析大约需要2秒，而执行JavaScript大约需要1.5秒。
Google需要合理管理其处理资源，因为它需要处理大量的数据。
万维网由10亿多个网站组成，并且每天都在增长。
下面的图表显示，过去五年中，桌面版网页的中值大小几乎增加了100％。
移动版网站的适当指标增加了250％！
JavaScript网站的自然结果是对这些网站的抓取，索引和最终排名的延迟。
准备和有用的资源
从事技术优化的优化们需要注意细节。
在JavaScript网站的情况下，我们需要为需要解决的棘手问题做好准备，并且我们必须了解我们不能总是依靠共同的和众所周知的规则。
Google知道优化和开发者在理解搜索行为方面存在问题，他们正试图帮助我们。
以下是来自Google的一些资源，您应该遵循并检查以帮助解决您可能遇到的任何JS问题：
网站趋势分析师约翰穆勒。
网站管理员趋势分析师Gary IIIyes
工程师Eric BideIman
Google搜索论坛中的JavaScript网站。
视频：与John Mueller合作的“ 现代网站的 优化最佳实践和要求 ”。
视频片段：来自Google I / O 2018的“提供适合搜索的JavaScript网站”。
诊断JavaScript引发的网站问题
现在我们知道了Google的限制，让我们尝试在JavaScript网站上发现一些问题并寻找解决方法。
Google看到了什么？
三年前，谷歌宣布它能够呈现和理解像现代浏览器这样的网站。
但是，如果我们查看关于呈现JS网站的文章和评论，您会注意到它们包含许多警示词，如“可能”，“一般”和“并非总是”。
这应该强调一个事实，即虽然Google在JS执行中越来越好，但它仍然有很大的改进空间。
源代码与DOM
源代码是Googlebot在进入页面后看到的内容。
这是没有将JS集成到代码中的原始HTML。
请注意一个重要的事实，即Googlebot不会呈现网页。
Googlebot是一个抓取工具，所以它的工作是浏览页面，从源代码中提取元素并将它们发送给索引器。
文档对象模型（DOM）是网站的渲染版本，它意味着原始HTML被JavaScript改变了，结构化和组织化。
“检查元素”显示文档对象模型。
渲染是通过Web Rendering服务完成的，该服务是Google Indexer的一部分。
请牢记以下几点：
抓取时将原始HTML考虑在内。
索引时会考虑DOM。
JavaScript网站以两种方式编入索引，这使得索引的整个过程完全不同：
第一波：Google仅提取元数据并根据此信息为网址编制索引。
第二次浪潮：如果Google有足够的资源，它会呈现页面以查看内容。
它可以重新编制页面并加入这两个数据源。
请记住，在第二次索引浪潮中，Google不会更新最初索引的元素（如果它们被JavaScript更改）。
如果您使用JavaScript添加rel =“canonical”标记，Google不会收到它。
然而，最近John Mueller表示，如果Google在页面呈现过程中陷入困境，则可能会使用原始HTML进行索引。
即使您看到特定的网址已编入索引，但并不表示索引器已发现该内容。
我知道这可能会让人困惑，所以这里有一个小小的备忘单：
要查看发送到Googlebot的HTML，请转到Google Search Console并使用提取和呈现工具。
在这里你可以访问原始的HTTP响应。
要查看页面的渲染版本，还可以使用“提取和渲染”工具。
要查看桌面设备的WRS构建的DOM ，请使用Rich Results Test。
对于移动设备，请使用Moblie-Friendly测试。
谷歌正式确认，我们可以依靠这两种方法来检查谷歌“看到”网站的方式：
和
将源代码与DOM进行比较
现在，该分析代码和DOM了。
在第一步中，根据可索引性对它们进行比较，并检查源代码是否包含：
元机器人指令，如索引规则。
Canonical标签。
Hreflang标签。
元数据。
然后看看它们是否符合网站的渲染版本。
要发现差异，您可以使用Diff Checker这样的工具，它可以比较两个文件之间的文本差异。
使用Diff Checker，从Google Search Console获取原始超文本传输协议（HTTP）响应，并将其与上面第3点提到的工具（丰富结果测试和移动友好测试）中的DOM进行比较。
JavaScript可能会修改某些元素，Google可能会遵循两条不同的说明。
Googlebot不会滚动
在查看DOM时，还需要验证依赖于单击，滚动和填充表单等事件的元素。
JavaScript允许在用户交互之后加载额外的内容，链接和图像。
Googlebot不会滚动或点击，因此如果某件事需要显示某项操作，Google就不会发现该操作。
两波索引及其后果
回到我之前提到的那两个浪潮，Google承认只有在第一波索引中才会考虑到元数据。
如果源代码不包含机器人指令，hreflang或标准代码，则可能不会被Google发现。
Google如何看待您的网站？
要查看Google如何查看网站的呈现版本，请转到Google Search Console中的Google抓取方式工具，并提供您要检查的网址并点击抓取和呈现。
对于复杂或动态的网站，仅仅验证网站的所有元素是否在他们的位置是不够的。
谷歌正式表示Chrome 41支持获取和渲染工具，因此最好下载并安装该浏览器的完全版本。
一旦安装在个人计算机（PC）上，您可以与网站进行一点点交互，导航到其他部分并检查由JavaScript触发的控制台中的错误。
Mobile-Friendly测试中的一项新功能还可以在JavaScript控制台中查看JavaScript的错误。
我想提一些常见的和微不足道的错误来避免：
在诊断呈现富含JavaScript的网站问题时，切勿查看Google中的缓存。
它没有提供有意义的信息，因为缓存显示由您的浏览器呈现的Googlebot看到的RAW HTML。
JS网站的源代码只包含几行代码，一些指向脚本的超链接; JavaScript执行后加载真实内容。
不要在robots.txt中阻止JavaScript资源; 它阻止了正确的渲染（我知道这很明显，但它仍然会发生）。
内部链接
内部链接是使网站可抓取的唯一途径。
由于JavaScript网站的源代码（一般而言）不包含链接，因此整个爬网过程被延迟。
Googlebot需要等待Indexer呈现网页并将发现的链接发回。
诊断JS网站的关键要素是检查链接是否放置在DOM中。
源代码不必包含链接，但如果DOM没有链接，链接将不会被发现。
如果主导航是使用JavaScript构建的，这可能会有很大的影响。
分析超级菜单时要小心。
有时候，它们充满了对于优化并不总是有益的奇特功能。
以下是John Mueller关于如何查看导航是否适用于Google的提示：
还要注意“加载更多”分页和无限滚动。
这些元素也很棘手。
它们以平稳的方式加载额外的内容，但是它发生在与网站交互之后，这意味着我们不会在DOM中找到内容。
在Google I / O会议上，Tom Greenway提到了两个可接受的解决方案：您可以预先加载这些链接并通过CSS隐藏它们，或者您可以为后续页面提供标准超链接，以便按钮需要链接到单独的URL序列中的下一个内容。
下一个重要元素是嵌入内部链接的方法。
Googlebot只遵循标准的超链接，这意味着您需要在代码中看到类似这样的链接：（没有间隔）
如果您看到OnClick链接，它们看起来像这样并且不会被发现。
因此，在浏览源代码和DOM时，请务必检查以确保在内部链接上使用正确的方法。
网址 – 干净和独特
获取内容索引的基本规则是为每条内容提供干净且唯一的URL。
很多时候，JS支持的网站在URL中使用hashtag。
谷歌已经明确表示，在大多数情况下，抓取工具不会发现这种类型的URL。
在分析网站时，请检查以确保结构不是通过以下网址构建的：
Google网址中的＃号后面的所有内容都将被剪切并忽略，因此内容将不会被编入索引！
超时
没有人喜欢渲染延迟，甚至谷歌。
据说Google最多等待5秒钟才能获得并执行JavaScript（请注意，5秒规则基于观察结果，并未经Google确认）。
我认为Google必须限制执行的最长时间，因为渲染是非常耗费资源的过程。
不幸的是，诊断超时问题并不容易。
如果我们没有足够快地提供内容，我们可能无法获取索引的内容。
在JavaScript网站的情况下，您需要等待一段时间才能加载其他元素，甚至整个部分。
装载机显示将出现新的东西：
如果JavaScript按时执行，则Web呈现服务可以正确呈现页面，并且可以使用JavaScript为内容加载索引。
但是，如果我们查看搜索结果，则会看到加载器已编入索引。
啊!
我们如何发现这些问题？我们可以使用Screaming Frog等工具抓取网站，延迟时间设置为5秒。
在渲染模式下，您可以看到渲染版本是否一切正常。
不要依赖于检查提取和渲染工具中的延迟。
它可以等待2分钟的JavaScript，所以它比Google的Indexer更耐心。
John Mueller建议我们检查一下Google是否能够在移动友好测试中及时提供网页，如果网站能够正常工作，那么索引应该没问题。
在分析网站的同时，看看网站是否实现了像加载程序那样的人为延迟，这迫使等待内容交付：
没有理由设定类似的元素; 它在索引不可发现的内容方面可能具有显着的效果。
索引
如果内容未被编入索引，您将无法获得任何内容。
这是检查和诊断最简单的因素，也是最重要的！
使用site：domain.com命令
检查索引的最有用的方法是众所周知的查询：
网站：域名“来自您网站的几行内容”
如果您搜索了一些内容并在搜索结果中找到它，那太棒了！但是，如果你找不到它，卷起袖子开始工作。
你需要找出为什么它没有索引！
如果您想进行复杂的索引分析，则需要检查域和不同部分中可用的不同类型页面中的部分内容。
延迟加载图像
Google表示加载“懒惰”图片可能存在问题：
如果您的图片缓慢加载，请向您正在提供的图片添加标记，以便在JavaScript关闭时显示图片。
让Google可以发现懒惰内容的第二个选项是结构化数据：
包起来
不要将这篇文章用作JS网站的唯一核对清单。
尽管这里有很多信息，但这还不够。
本文旨在成为深入分析的起点。
每个网站都是不同的，当你考虑独特的框架和个人开发人员的创造力时，不可能仅仅通过检查清单来结束审计。
