综合技术

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

微信扫一扫,分享到朋友圈

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

JavaScript有能力在网站上为用户和搜索引擎打破很多不同的东西。

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

JavaScript和渲染经常存在一种神秘的气氛,这只会增加这种不信任感。

这就是为什么我编写本指南的目的是为了准确地解释如何测试网站上的JavaScript是否正确呈现……或者不是。

如果您想深入了解一些关键术语和概念,然后再深入了解JavaScript审核的详细信息,请务必先查看此JavaScript基础知识指南。

您需要测试的JavaScript问题

任何JavaScript审核的主要优先事项始终是找到阻止用户和搜索引擎无法查看内容的关键问题。

为了能够确定JavaScript可能会损害您网站的性能,您需要将分析重点放在回答以下问题上:

页面可转换吗?

Google只能索引它可以呈现的内容,但其他搜索引擎根本无法呈现JavaScript或索引它生成的内容。

重要的是测试是否阻止了JavaScript驱动的页面进行索引,以及是否在不进行渲染的情况下立即提供关键内容。

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

拥有缓慢呈现的页面会对用户体验产生负面影响,并且还会阻止搜索引擎抓取它们。

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

Google有一个双波索引流程,这意味着它在最初抓取页面后的第一波索引HTML内容。

具有需要呈现的JavaScript的页面将添加到队列中,以便在几天,几周或一个月之后呈现。

谷歌的两波索引图

如果初始索引的HTML中显示的内容与页面呈现后的日期内容之间存在差异,则会产生问题,因为Google将收到有关该页面的冲突信号。

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

由于视口,CPU和其他因素的差异,渲染将受到影响,具体取决于所使用的设备。

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

这些问题的答案将为用户和需要解释和使用它的搜索引擎是否可以访问您的网站内容提供强有力的见解。

用于测试JavaScript的工具

现在我们已经介绍了要测试的主要JavaScript渲染问题,让我们来研究一些可以帮助您进行分析的不同工具。

  1. URL检查工具

    Google Search Console中的网址检查工具会显示有关Google是否能够对网页进行抓取和编制索引的信息。

该工具显示有关阻止对页面编制索引的问题的详细信息,包括无法加载的资源和无法处理的JavaScript。

URL检查工具截图

突出显示URL检查工具的功能: 实时JavaScript控制台消息。

URL检查工具还允许您运行URL的实时测试,其中显示了Google遇到的实时JavaScript警告和错误,这可能会阻止您的页面内容被查看和编入索引。

该工具的这一部分对JavaScript调试特别有用。

URL检查工具JavaScript控制台错误截图

2.移动友好测试

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

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

适合移动设备的测试截图

突出显示适合移动设备的测试功能: 呈现页面HTML快照。

虽然呈现页面的屏幕截图仅显示了折叠内容,但HTML部分显示了整个页面的呈现代码,使您可以准确查看Googlebot智能手机能够查看和索引的输出代码。

适合移动设备的测试HTML快照

  1. PageSpeed Insights

    Google的PageSpeed Insights工具结合使用来自Lighthouse的实验室数据和Chrome用户体验报告中的字段数据来记录网页的速度和效果。

它还包含许多JavaScript报告,显示如何通过减少JavaScript执行时间,缩小JavaScript等来改进页面。

PageSpeed Insights截图

突出显示PageSpeed Insights: The Opportunities 部分的功能。

此工具通过修复每个问题,按照可以节省多少时间整体页面加载的优先顺序排列机会列表。

这是一个查找JavaScript问题的好地方,这些问题会显着增加需要解决的页面加载时间。

PageSpeed Insights的“机会”报告截图

  1. Diffchecker

    使用Diffchecker,您可以对其呈现的代码并行执行页面原始源代码的分析。这允许详细比较页面内容在呈现后如何更改。

Diffchecker截图

要开始使用Diffchecker,请尝试复制页面的源代码并将其粘贴到原始文本 框中。

查看页面源截图

源代码截图

然后复制同一页面的outerHTML并将其粘贴到“ 更改的文本”框中。

检查元素截图

阻止对您的Google广告进行欺诈性点击。

自动保护您的广告免受竞争对手,僵尸程序,点击服务器场和其他形式的点击欺诈。设置简单。开始免费试用。

复制outerHTML截图

然后按Find Difference 以查找两组代码。

突出显示Diffecker的功能:删除 和添加摘要。

该工具提供了有关在渲染后对页面进行了多少删除和添加的顶级数据,然后必须深入查看详细信息并并排分析两个页面版本。

这可以立即指示渲染后页面的变化程度。

Diffchecker删除和添加截图

  1. WebPageTest

    WebPageTest报告页面上的不同资源以及每个资源加载所需的时间。它将页面的加载时间分解为处理页面所需的不同阶段和事件,例如脚本,解析和绘制。

这为处理JavaScript所涉及的不同阶段以及哪些阶段引发最大问题提供了有用的见解,使您能够发现性能瓶颈和模式。

WebPageTest截图

突出显示WebPageTest的功能: 请求映射。

WebPageTest中的Request Map是我在很长一段时间内在速度测试工具中遇到的最喜欢的功能之一。

它可视化在页面上发出的所有不同请求,映射它们之间的依赖关系,并显示每个资源的加载时间和相对大小。

圆圈越大,需要为该特定资源下载的数据字节越多,对整体页面权重的贡献越大。

此请求映射中的绿色圆圈是一个JavaScript文件,它是整个页面上最大的资源:

WebPageTest’请求地图’截图

默认情况下,请求映射由资源主机进行颜色编码,但是,您可以将简单参数?group = mimeType添加到URL的末尾,而不是按资源类型进行颜色编码。

WebPageTest请求按类型参数排序的排序地图

这使得对JavaScript资源加载时间进行抽样检查的过程变得更加快捷和简单。

按资源类型截图排序的WebPage测试请求图

  1. Chrome DevTools

    如果您使用Chrome作为主浏览器,请确保使用Chrome DevTools的JavaScript测试和调试功能。DevTools dock有各种各样的报告,例如性能监控,网络条件,JavaScript错误等等。

此工具使用许多不同的瀑布图和时间线图来绘制加载时间和资源的文件大小。

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

Chrome DevTools性能截图

Chrome DevTools性能截图

另一个很好的可视化可以在网络 选项卡中找到,它显示了运行的脚本和顺序,以及显示为红线的加载事件。

这很重要,因为加载事件是Google完成渲染并获取HTML快照的时刻。在此之后运行的任何脚本都很有可能被Google看到。

Chrome DevTools Network瀑布截图

您还可以使用 Chrome DevTools中的设备模式来模拟不同设备上的渲染。

Chrome DevTools设备模式截图

其他浏览器还通过自己的开发人员工具(如Firefox,Opera和Safari)提供JavaScript调试功能。您无需使用Chrome即可获得重要的呈现洞察力。

突出显示Chrome DevTools的功能: 覆盖率报告。

此报告显示页面上未使用的JavaScript代码,因为它显示实际执行的JavaScript总数与总共加载了多少。这为用户访问您的内容所必需的代码提供了宝贵的见解。

  1. DeepCrawl

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

此工具允许您大规模地测试和监视渲染,并向您显示搜索引擎是否可以对JavaScript生成或管理的链接和内容进行爬网和索引。

DeepCrawl设置截图

突出显示DeepCrawl的功能: 自定义脚本注入。

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

您可以使用自定义脚本注入从Chrome收集速度指标,检查正在使用的框架,iframe和脚本以及位置,查找外部文件等。

DeepCrawl自定义JavaScript屏幕截图

结论

无论您是初次使用JavaScript测试还是多年来一直在与JavaScript问题作斗争,希望您已经学到了一些可以尝试的新功能,并将其添加到您的审核流程中。

要涵盖使用这些工具测试和调试JavaScript的所有不同方法,这是一项挑战。大多数乐趣来自于自己尝试并发现每个新标签和报告中的内容。

确保您的网站继续在搜索中执行的关键是继续抓取,监控和测试JavaScript错误和瓶颈。这是保持领先地位的最佳方式,或者至少保持领先!

免责声明:本文仅代表作者个人观点,与穷思笔记网无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。

阅读原文...


Avatar

在 ASP.NET Core WebAPI 中使用 JWT 驗證

上一篇

How IOT is Transforming the Shipping Industry

下一篇

您也可能喜欢

评论已经被关闭。

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

长按储存图像,分享给朋友