Capture Webpage Screenshot using PageSpeed Insights API

In this article, we will capture a screenshot of the website using Google PageSpeed Insights API. This is a simple process that will be using cURL. If you are new to Google PageSpeed Insights API, you may want to read Integrate Google PageSpeed Insights API.

A simple process is we just need to send the API call request and extract the screenshot data. We will send GET request to this URL.

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

We can call API through GET method using CURL or file_get_contents() function. We will test both in our article. First of all, let’s call API using cURL

Call API using cURL

Call API using file_get_content()

Alternate to the above we can make simple GET request using file_get_contents(). A simple example looks like below:

Extract Screenshot data

Now, we have successfully make a call request and stored the result in $decoded_data variable. A sample of response looks like below.

We need to check the final-screenshot node to extract the screenshot value.

We need to get the data key inside details node.

After this, we can simply display the screenshot in our html using img tag.

<img src="<?php echo 'data:image/jpeg;base64,' . $screenshot; ?>" />

This gives us screenshot as like below: