How to create a form with an url input that redirects to pagespeed score / insights or displays it with ajax

Question

Is it possible to do this? Ideally to return the report in the very same page with ajax? Example the user adds www.mywebsite.com to the field and then the report of pagespeed is returned. If not possible then redirect to Pagespeed result page.

Answer 1

You have a few options here. Starting from easiest to hardest (and in my opinion "worst" to "best" solution).

1. Add the Page Speed Insights (PSI) test page to an iframe on your site. You can then change the URL of that iframe to https://developers.google.com/speed/pagespeed/insights/?url=yourwebsite.com and manipulate the ?url=yourwebsite.com to be whatever you want.

This may be against Google's terms of service and is also a bad user experience but it is the easiest way to achieve it. I will leave you to investigate that option if you decide to do it.

---

2. Redirect users to a new tab. So just do <a target="_blank" href="https://developers.google.com/speed/pagespeed/insights/?url=yourwebsite.com">view your report</a> or redirect via JS on a button click.

Yet again not a great option as people are leaving your site but at least this won't be against Google's terms of service.

---

3. Use the page speed insights API. https://developers.google.com/speed/docs/insights/v5/get-started .

This is your best option in terms of time vs flexibility. You supply the API with the URL and it returns a JSON response with all of the metrics it gathers and the scoring.

Please note PSI is on version 6 of the API which should be available for general use soon.

Obviously this is a lot more work but well worth the effort as you can style everything as you please.

---

4. Install Lighthouse, the engine that drives PSI on your own server.

You can find the Lighthouse repository here . Please note you need to know how to use node, it is useful to understand puppeteer and you need a reasonable amount of server admin knowledge to get chromium (used as a headless web browser for running the tests) working and linked correctly.

At this stage you have complete control and can write your own test, scoring criteria etc. You can also run as many tests as your server will allow. If you want this level of control and freedom then this is the best option. However be prepared to sink a lot of hours into this solution!