时间戳

首页 > 解决方案 > 如何创建一个带有 url 输入的表单，该表单重定向到 pagespeed score/insights 或使用 ajax 显示它

forms - 如何创建一个带有 url 输入的表单，该表单重定向到 pagespeed score/insights 或使用 ajax 显示它

问题描述

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

标签： formspagespeedpagespeed-insights

解决方案

您在这里有几个选择。从最简单到最难（在我看来，从“最差”到“最好”的解决方案）。

  1. 将 Page Speed Insights (PSI) 测试页面添加到您网站上的 iframe。然后，您可以将该 iframe 的 URL 更改为https://developers.google.com/speed/pagespeed/insights/?url=yourwebsite.com并将其操作为?url=yourwebsite.com您想要的任何内容。

这可能违反了 Google 的服务条款，也是一种糟糕的用户体验，但这是实现它的最简单方法。如果您决定这样做，我会让您调查该选项。

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

这又不是一个很好的选择，因为人们正在离开您的网站，但至少这不会违反 Google 的服务条款。

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

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

请注意，PSI 位于 API 的第 6 版上，应该很快就能用于一般用途。

显然，这是一项更多工作，但值得付出努力，因为您可以随意设计所有样式。

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

您可以在此处找到 Lighthouse 存储库。请注意，您需要知道如何使用节点，了解 puppeteer 很有用，并且您需要合理数量的服务器管理知识才能使 chromium（用作运行测试的无头 Web 浏览器）正常工作和链接。

在这个阶段，您拥有完全的控制权，可以编写自己的测试、评分标准等。您还可以运行服务器允许的尽可能多的测试。如果您想要这种级别的控制和自由，那么这是最佳选择。但是，请准备好在此解决方案中投入大量时间！

推荐阅读