PageSpeed Integration for Wordpress

$ 21,00

With this Wordpress plugin, you can integrate the Google PageSpeed Insights service into your website. Let visitors analyze their website performance and automatically embed the results in for example contact forms, quotes or emails.


Easily integrate Google PageSpeed Insights.

Help your customers understand the benefits of a good PageSpeed score.

Key advantages:

  • Generate leads
  • Help your customers understand their website performance
  • Determine what your customers need and are looking for
  • Keep your visitors on your website
  • No technical knowledge needed to use the PageSpeed API


  • Process the results how you want via static design, forms, redirects or custom elements
  • Email requested website and scores.
  • Multiple configurable options for requesting data like performance, accessibility and SEO scores
  • Predefined styling options or blank starter style for maximum flexibility
  • Lightweight and clean code

Technical requirements:

Google PageSpeed Api key is required to use this plugin

Basic preview:



Installation guide

Installation via Wordpress (recommended)

You can install this plugin via the Wordpress admin. Please follow these steps:

  1. Navigate to: Menu -> Plugins -> Add New
  2. Click ‘Upload Plugin’ in the top left corner
  3. Locate and select the plugin .zip file
  4. Upload and activate the plugin

Installation via (S)FTP

If you don’t want to install the plugin via the Wordpress backend, you can install the plugin via these steps:

  1. Connect with the FTP server. Please ask you hosting for the details and credentials.
  2. Upload the plugin files:
    1. Navigate to [website root]/wp-content/plugins/
    2. Create a directory ‘pagespeed-insights-integration’
    3. Unzip the plugin files in [website root]/wp-content/plugins/pagespeed-integration
  3. Login the Wordpress admin
  4. Navigate to: Menu -> Plugins -> Installed Plugins
  5. Locate the plugin and click ‘activate’

Configuration guide

Plugin setup

You will need a Google Pagespeed Api key and save it in the Wordpress admin. To get an Api key, navigate to the Google PageSpeed Insights docs, click ‘Get a key’ and follow the steps.

If you have obtained a key, you can save it via the Wordpress Admin, or via the wp-config.php file

a. wp-config.php (recommended)

You can find the wp-config.php file in the root folder of your Wordpress website. Write the following line of code in wp-config.php:

define( 'GOOGLE_PAGESPEED_INSIGHTS_API_KEY', 'replacethiswithyourkey' );

You can place that line of code below the line ‘define( 'DB_COLLATE', …… )’

b. Wordpress admin

Please follow these steps to set the API Key via the Wordpress backend

  1. Navigate to ‘Menu -> Google PSI’.
  2. Paste in the Api key and save the settings

Usage: Gutenberg block

To display and configure the form, you can use the block ‘Pagespeed Insights integration’ in any post or page which has Gutenberg blocks enabled. Please use the block options to configure the form.

Usage: shortcode

If you would like to display the form via a shortcode, you can use the following shortcode:


You can use the following attributes (shortcode attributes are lower-cased):

  • placeholder
  • show-submit-button
  • submit-button-text
  • category
  • strategy
  • minimum-score
  • result-format
  • redirect-url
  • html-result-selector
  • html-website-selector
  • email-addresses
  • class-name


[wdevs_psi placeholder="", strategy="desktop" minimum-score="70"]

Please see the documentation tab for more information.


Advanced usage

If the form has been submitted, a hidden input field value with a class 'wdevs-psi-input-result' will be set with the new score and a JavaScript 'change' event will fired. So, you could watch the result with something like this (jQuery example):

jQuery(document).ready(function () {
var result = jQuery(this).val();

Please see demo #4.

Shortcode attributes

Shortcode attribute keys should be lowered-case.


Placeholder to show in the input field

Whether to show a submit button or not. If hidden, the input can be submitted by hitting the 'enter' key.

Text of the submit button. Does not have any effect if 'showSubmitButton' is false


  • 'ACCESSIBILITY': Accessibility (a11y), category pertaining to a website's capacity to be accessible to all users.
  • 'BEST_PRACTICES': Best Practices, category pertaining to a website's conformance to web best practice.
  • 'PERFORMANCE': Performance, category pertaining to a website's performance.
  • 'PWA': Progressive Web App (PWA), category pertaining to a website's ability to be run as a PWA.
  • 'SEO': Search Engine Optimization (SEO), category pertaining to a website's ability to be indexed by search engines.

More info at the Google PageSpeed Insights docs.



  • 'DESKTOP': Fetch and analyze the URL for desktop browsers.
  • 'MOBILE': Fetch and analyze the URL for mobile devices.

More info at the Google PageSpeed Insights docs.


If the score passes the minimum score, the result is positive. If not, the result is negative. Based on this, CSS classes will be applied for styling purposes. Minimum: 0, Maximum: 100.


  • 'block': Display the results in blocks
  • 'compact': Display the results in short text
  • 'short': Display the results in short text
  • 'full': Display the results in long, detailed, text
  • 'redirect': Redirect to another page with the results as query parameters in the URL
  • 'html': Display the results in a defined HTML element

Only has effect if 'resultFormat' is equal to 'redirect'. The URL to redirect to when the results are returned. The query parameters are:

  • psi_website: the website which was analyzed
  • psi_score: containing the analyse result

For displaying the website inside a different HTML element. Only has effect if 'resultFormat' is equal to 'html'. A CSS selector. For
example '#my-website-id'. After setting, the parent element is set to 'block'. For more info, please read 'Locating DOM elements using selectors' at Mozilla

For displaying the result inside a different HTML element. Only has effect if 'resultFormat' is equal to 'html'. A CSS selector. For
example '#my-result-id'. After setting, the parent element is set to 'block'. For more info, please read 'Locating DOM elements using selectors' at Mozilla

Set this field if you would like to email results. You can use multiple addresses by seperating each address with a comma.

Predefined classes:

  • 'is-style-default': Default styling
  • 'is-style-google': Google style


Please let us know if you have any questions!

Why does it take so long to load the results?

Google is analyzing the website in real time. This process takes some time. The plugin depends on the analytical speed and the response time of Google itself.


Current version: 1.2.1
- 2023-02-24
- 2023-02-23
- 2023-02-22
- 2023-02-14
- 2023-01-12
- 2023-01-04
- 2022-08-10
- 2022-08-09
- 2022-08-06


There are no reviews yet.

Be the first to review “PageSpeed Integration”