揭开JavaScript的神秘面纱:测试渲染的技巧和工具

 2019-03-16 查看原文  3     searchenginejournal

 JavaScript有能力在网站上为用户和搜索引擎打破很多不同的东西。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

因此,许多搜索引擎优化专业人士和数字营销人员都不相信JavaScript作为编程语言,因为它可能对他们的网站产生负面影响。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

JavaScript和渲染经常存在一种神秘的气氛,这只会增加这种不信任感。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

这就是为什么我编写本指南的目的是为了准确地解释如何测试网站上的JavaScript是否正确呈现......或者不是。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

如果您想深入了解一些关键术语和概念,然后再深入了解JavaScript审核的详细信息,请务必先查看此JavaScript基础知识指南。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 

您需要测试的JavaScript问题

任何JavaScript审核的主要优先事项始终是找到阻止用户和搜索引擎无法查看内容的关键问题。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

为了能够确定JavaScript可能会损害您网站的性能,您需要将分析重点放在回答以下问题上:AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 

页面可转换吗?

Google只能索引它可以呈现的内容,但其他搜索引擎根本无法呈现JavaScript或索引它生成的内容。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

重要的是测试是否阻止了JavaScript驱动的页面进行索引,以及是否在不进行渲染的情况下立即提供关键内容。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 

对页面加载速度有何影响?

拥有缓慢呈现的页面会对用户体验产生负面影响,并且还会阻止搜索引擎抓取它们。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 

未呈现和呈现内容之间是否存在差异?

Google有一个双波索引流程,这意味着它在最初抓取页面后的第一波索引HTML内容。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

具有需要呈现的JavaScript的页面将添加到队列中,以便在几天,几周或一个月之后呈现。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

谷歌的两波索引图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

如果初始索引的HTML中显示的内容与页面呈现后的日期内容之间存在差异,则会产生问题,因为Google将收到有关该页面的冲突信号。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 

如何在设备和浏览器之间进行渲染?

由于视口,CPU和其他因素的差异,渲染将受到影响,具体取决于所使用的设备。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

浏览器还具有不同的渲染功能,并使用不同的渲染引擎。这就是为什么重要的是测试您的网站如何在各种环境中呈现,以反映您的用户将在其中浏览的内容。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

这些问题的答案将为用户和需要解释和使用它的搜索引擎是否可以访问您的网站内容提供强有力的见解。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 

用于测试JavaScript的工具

现在我们已经介绍了要测试的主要JavaScript渲染问题,让我们来研究一些可以帮助您进行分析的不同工具。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 

1. URL检查工具

Google Search Console中的网址检查工具会显示有关Google是否能够对网页进行抓取和编制索引的信息。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

该工具显示有关阻止对页面编制索引的问题的详细信息,包括无法加载的资源和无法处理的JavaScript。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

URL检查工具截图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

突出显示URL检查工具的功能:  实时JavaScript控制台消息。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

URL检查工具还允许您运行URL的实时测试,其中显示了Google遇到的实时JavaScript警告和错误,这可能会阻止您的页面内容被查看和编入索引。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

该工具的这一部分对JavaScript调试特别有用。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

URL检查工具JavaScript控制台错误截图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 

2.移动友好测试

移动友好测试的一个好处是,您不需要使用Google Search Console帐户就可以像使用URL检查工具一样使用它。任何人都可以用它来测试他们的页面如何在移动设备上呈现AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

此工具可以准确显示Google如何使用智能手机用户代理呈现网页。它还显示JavaScript错误和阻止的资源,可以阻止搜索引擎访问您网站的内容。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

适合移动设备的测试截图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

突出显示适合移动设备的测试功能:  呈现页面HTML快照。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

虽然呈现页面的屏幕截图仅显示了折叠内容,但HTML部分显示了整个页面的呈现代码,使您可以准确查看Googlebot智能手机能够查看和索引的输出代码。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

适合移动设备的测试HTML快照AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 

3. PageSpeed Insights

Google的PageSpeed Insights工具结合使用来自Lighthouse的实验室数据和Chrome用户体验报告中的字段数据来记录网页的速度和效果。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

它还包含许多JavaScript报告,显示如何通过减少JavaScript执行时间,缩小JavaScript等来改进页面。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

PageSpeed Insights截图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

突出显示PageSpeed Insights:  The Opportunities  部分的功能。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

此工具通过修复每个问题,按照可以节省多少时间整体页面加载的优先顺序排列机会列表。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

这是一个查找JavaScript问题的好地方,这些问题会显着增加需要解决的页面加载时间。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

PageSpeed Insights的“机会”报告截图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

4. Diffchecker

使用Diffchecker,您可以对其呈现的代码并行执行页面原始源代码的分析。这允许详细比较页面内容在呈现后如何更改。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

Diffchecker截图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

要开始使用Diffchecker,请尝试复制页面的源代码并将其粘贴到原始文本 框中。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

查看页面源截图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

源代码截图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

然后复制同一页面的outerHTML并将其粘贴到“ 更改的文本”框中。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

检查元素截图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

复制outerHTML截图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

然后按Find Difference  以查找两组代码。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

突出显示Diffecker的功能:删除  和添加摘要。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

该工具提供了有关在渲染后对页面进行了多少删除和添加的顶级数据,然后必须深入查看详细信息并并排分析两个页面版本。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

这可以立即指示渲染后页面的变化程度。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

Diffchecker删除和添加截图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

5. WebPageTest

WebPageTest报告页面上的不同资源以及每个资源加载所需的时间。它将页面的加载时间分解为处理页面所需的不同阶段和事件,例如脚本,解析和绘制。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

这为处理JavaScript所涉及的不同阶段以及哪些阶段引发最大问题提供了有用的见解,使您能够发现性能瓶颈和模式。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

WebPageTest截图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

突出显示WebPageTest的功能:  请求映射。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

WebPageTest中的Request Map是我在很长一段时间内在速度测试工具中遇到的最喜欢的功能之一。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

它可视化在页面上发出的所有不同请求,映射它们之间的依赖关系,并显示每个资源的加载时间和相对大小。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

圆圈越大,需要为该特定资源下载的数据字节越多,对整体页面权重的贡献越大。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

此请求映射中的绿色圆圈是一个JavaScript文件,它是整个页面上最大的资源:AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

WebPageTest'请求地图'截图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

默认情况下,请求映射由资源主机进行颜色编码,但是,您可以将简单参数?group = mimeType添加到URL的末尾,而不是按资源类型进行颜色编码。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

WebPageTest请求按类型参数排序的排序地图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

这使得对JavaScript资源加载时间进行抽样检查的过程变得更加快捷和简单。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

按资源类型截图排序的WebPage测试请求图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

6. Chrome DevTools

如果您使用Chrome作为主浏览器,请确保使用Chrome DevTools的JavaScript测试和调试功能。DevTools dock有各种各样的报告,例如性能监控,网络条件,JavaScript错误等等。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

此工具使用许多不同的瀑布图和时间线图来绘制加载时间和资源的文件大小。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

例如,“ 性能”  选项卡显示加载,编写脚本,呈现和绘制页面所花费的时间总结。注意橙色和紫色的尖峰,因为这些颜色分别与脚本和渲染有关。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

Chrome DevTools性能截图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

Chrome DevTools性能截图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

另一个很好的可视化可以在网络  选项卡中找到,它显示了运行的脚本和顺序,以及显示为红线的加载事件。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

这很重要,因为加载事件是Google完成渲染并获取HTML快照的时刻。在此之后运行的任何脚本都很有可能被Google看到。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

Chrome DevTools Network瀑布截图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

您还可以使用 Chrome DevTools中的设备模式来模拟不同设备上的渲染。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

Chrome DevTools设备模式截图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

其他浏览器还通过自己的开发人员工具(如Firefox,Opera和Safari)提供JavaScript调试功能。您无需使用Chrome即可获得重要的呈现洞察力。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

突出显示Chrome DevTools的功能:  覆盖率报告。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

此报告显示页面上未使用的JavaScript代码,因为它显示实际执行的JavaScript总数与总共加载了多少。这为用户访问您的内容所必需的代码提供了宝贵的见解。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 

7. DeepCrawl

虽然上面提到的其他工具在逐页的基础上提供了详细的见解,但DeepCrawl(我在DeepCrawl工作)可以用来在网站的所有不同页面上呈现JavaScript,就像Google一样。 。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

此工具允许您大规模地测试和监视渲染,并向您显示搜索引擎是否可以对JavaScript生成或管理的链接和内容进行爬网和索引。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

DeepCrawl设置截图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

突出显示DeepCrawl的功能:  自定义脚本注入。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

DeepCrawl具有自定义JavaScript功能,允许您在爬网时将代码注入网站。此方法意味着您可以添加,更改或删除DOM(文档对象模型)中的元素以测试呈现的影响。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

您可以使用自定义脚本注入从Chrome收集速度指标,检查正在使用的框架,iframe和脚本以及位置,查找外部文件等。AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

 AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站

DeepCrawl自定义JavaScript屏幕截图AXc上海网站建站_上海网站制作_上海网站设计_TOPSSEO企业网站建站