如何创建一个带有url输入的表单,重定向到页面速度分数/见解或使用ajax显示它



有可能做到这一点吗?理想情况下,使用ajax在同一页面中返回报告?例如,用户将www.mywebsite.com添加到字段中,然后返回页面速度报告。如果不可能,则重定向到Pagespeed结果页。

这里有几个选项。从最简单到最困难(在我看来是"最坏"到"最好"的解决方案(。

  1. 将页面速度洞察(PSI(测试页面添加到您网站上的iframe中然后您可以将该iframe的URL更改为https://developers.google.com/speed/pagespeed/insights/?url=yourwebsite.com,并将?url=yourwebsite.com操作为您想要的任何内容

这可能违反谷歌的服务条款,也是一种糟糕的用户体验,但这是实现它的最简单方法。如果你决定这样做,我会让你去调查这个选项。


  1. 将用户重定向到一个新的选项卡。所以只需执行<a target="_blank" href="https://developers.google.com/speed/pagespeed/insights/?url=yourwebsite.com">view your report</a>或通过JS单击按钮进行重定向

然而,当人们离开你的网站时,这不是一个好的选择,但至少这不会违反谷歌的服务条款。


  1. 使用页面速度洞察APIhttps://developers.google.com/speed/docs/insights/v5/get-started.

就时间和灵活性而言,这是您的最佳选择。您向API提供URL,它返回一个JSON响应,其中包含它收集的所有指标和评分。

请注意,PSI在API的第6版上,应该很快就可以用于一般用途。

显然,这是一项更多的工作,但值得付出努力,因为你可以随心所欲地设计一切。


  1. 安装Lighthouse,在您自己的服务器上驱动PSI的引擎

您可以在此处找到Lighthouse存储库。请注意,您需要知道如何使用node,了解puppeteer是很有用的,并且您需要合理的服务器管理知识才能使chrome(用作运行测试的无头web浏览器(正确工作和链接。

在这个阶段,你可以完全控制,可以编写自己的测试、评分标准等。你也可以在服务器允许的范围内运行尽可能多的测试。如果你想要这种程度的控制和自由,那么这是最好的选择。但是,请准备在该解决方案中花费许多小时!

最新更新