How to call the Google Pagespeed API with Flask


Posted by BigEyeGuy on 2018-04-20 12:15:45

Google Pagespeed API is simple to integrate into a Flask application with Python. First you'll need an API key, which you can get here.

In order to define which URL you want pagespeed insights for, you’ll need a form. Using flask_wtf, you’ll need a form that looks something like this:

  
   from flask_wtf import Form
   from wtforms import validators, StringField
   class PageSpeedForm(Form)
       url = StringField('url', [validators.Required(), validators.Length(min=4, max=300) ])
  

We’ll need two templates; one for the user to enter their URL via the form we just made, and another for whatever the API call returns. The first should look like below:

{% extends 'base.html' %}
{% block title %} PageSpeed {% endblock %}
{% block content %}
<div class="col-md-8">
<br>
<h1>Google PageSpeed</h1>
<form method="POST">
<div>
<p>
<label>URL:
<input type="text" size="30" name="myUrl" placeholder="http://example.com">
<button type="submit" class="btn btn-primary">Post</button>
</label>
</p>
</div>
</form>
<br>
</div>
{% endblock %}

Notice that this template inherits from a base template, and we simply include our form between the content blocks. Our second template is similar and again very simple for this example:

<div class="col-md-8">
<div>
<table class="table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">URL</th>
<th scope="col">PageSpeed</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"></th>
<td> {{ site }} </td>
<td> {{ page_speed_return }} </td>
</tr>
</tbody>
</table>
</div>
</div>

In the above example, we take the URL defined by the user with the first template, and we give this the variable ‘site’ in our route function.We do the same for the page speed score object, setting this as ‘page_speed_return’. Now our templates are ready, we can write our route function, as below:

  
  @app.route('/google-pagespeed', methods=('GET', 'POST'))
    def google_ps():
        form = PageSpeedForm
        if request.method == 'GET':
            return render_template('google-pagespeed.html', form=form)
        else:
            API_KEY = 'ENTER-YOUR-API-KEY-HERE'
        site=request.form['myUrl']
        r = requests.get('https://www.googleapis.com/pagespeedonline/v4/runPagespeed? url=https://{0}&key={1}".format(site,API_KEY)
        page_speed_return = json.loads(r.text)['ruleGroups']['SPEED']['score']
        return render_template('return-pagespeed.html', site=site, page_speed_return=page_speed_return)
    

You’ll need to import requests and json, as well as the flask methods I’ve used here, including ‘render_template’, ‘request’ and ‘url_for’.

So what does this function do. First we define the URL, which in this case is /google-pagespeed, along with the GET and POST methods. Next we set the form we created earlier to the variable ‘form’, and we then say, if nothing’s been posted, return the first template.

If a URL has been posted by the user via the form, the URL will be set as the ‘site’ variable, and this along with the API key will be used to call the API using the fantastic requests library. This returns data in json format, so we use the json and requests library to return the exact value we want, and set this to the variable ‘page_speed_return’.

Finally we return the second template. Within this template, you’ll remember we referenced {{ site }} and {{ page_speed_return }}; both of which are defined via out route function. If you’ve done everything right, you should have a table that shows the url you entered and its pagespeed load score.


Posted by BigEyeGuy on 2018-04-20 12:15:45