get screenshot from PageSpeed Insights, using javascript

Question

I want to get the screenshots from PageSpeed Insights. Using the API, I used a code that i founded here : https://embed.plnkr.co/plunk/c7fAFx, but doesn't work. please help me! I am learning to code.

Answer 1

Why doesn't the linked code work?

Well because it is ancient and attempting to use the version 1 Page Speed Insights API.

It is currently on version 5 so that is why it does not work, v1 no longer exists as a public API.

How to recreate the functionality of this App?

As you are learning to code I will lay out the steps for you and then you can research how to do each step and use that to learn.

I will warn you as a beginner there is a lot to learn here. However on the flip side if you manage to work out how to do the below you will have a good first project that has covered multiple areas of JS development.

As you have marked this "JavaScript" I have assumed you want to do this in the browser.

This is fine up until the point where you want to save the images as you will have to work out how to ZIP them which is probably the most difficult part.

I have highlighted the steps you need to learn / implement in bold

1. First call the API:

The current URL for Page Speed Insights API is:

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://yoursite.com

Just change url=https://yoursite.com to any site you want to gather the images from.

For a small amount of requests a day you do not need to worry about an API key.

However if you do already have an API key just add &key=yourAPIKey to the end of the URL (replacing the yourAPIKey part obviously :-P).

You want to make an AJAX call to the API URL first.

2. Parse the response

Then when you get a response you are going to get a large JSON response.

You need to parse the JSON response and turn it into a JavaScript Object or Array you can work with.

3. Find the relevant parts

So once you have a JavaScript Object you can work with you are looking for "final-screenshot" and "screenshot-thumbnails".

These are located under "audits".

So for example if you parsed to an array called lighthouseResults you would be looking for lighthouseResults['audits']['final-screenshot'] or lighthouseResults['audits']['screenshot-thumbnails']

"final-screenshot" contains how the site looked after it was loaded, so if you just want that you want this element.

This contains an image that is base64 encoded (lighthouseResults['audits']['final-screenshot']['details']['data']).

"screenshot-thumbnails" is the part you want if you want the "filmstrip" of how the site loads over time. This contains a list of the thumbnails base64 encoded.

To access each of these you need to loop over each of the items located at lighthouseResults['audits']['screenshot-thumbnails']['details']['items'] and return the ['data'] part for each ['item']

Find the parts that you want and store them to a variable

4a. Decode the image(s)

Once you have the image(s) in a variable, you will have them as a base64 encoded string at the moment. You need to convert these into usable jpg images.

To do this you need to base64 decode each image.

For now I would just display them in the browser once they are decoded.

learn how to decode a base64 encoded image

4b. Alternative to decoding the image

As the images are base64 encoded they can be displayed directly in a browser without decoding first.

You can just add an image where the src your base64 image string you gathered in step 3.

If you just want to display the images this is much easier.

Add images to the screen and set the src to the base64 image string you have from step 3

Saving the images

Now you said in a comment you want to save the images. Although this can be done via JavaScript it is probably a little advanced for starting out.

If you want to save the images you really want to be doing that server side.

However if you do want to download the images (filmstrip) in the browser then you want to look into a zip utility such as jszip.js.

The beauty of this is they normally want you to convert the images to base64 first before zipping them, so it may not actually be that difficult!