Home Browser Testing
Page Speed Insights


We will look at how to measure with Page Speed Insights and make better performance with a very simple example. Also we will be using another nice tool thats works online and gives some reports for performance.

Using page speed insights is very handy and simple, it follows this pattern, "Measure" and then "Fix". We will see this two steps with this example.

Pre Requisites

In this case I assume you already have npm and nodejs installed.

In order to configure Page Speed Insights we will be using Grunt, may be there is another plugin to be used for other builders.


1- Install Grunt

You can see how to install here

2- Install grunt-pagespeed

In order to install this package go here

Then just run the following command to install this package: $ npm install --save-dev grunt-pagespeed

Install load-grunt-tasks too. My package.json looks like this one:

  "name": "PageSpeedInsights",
  "version": "0.0.1",
  "description": "Will test before and after performance measure",
  "repository": {
    "type": "git",
    "url": ""
  "dependencies": {
    "grunt-pagespeed": "^2.0.0",
    "jquery": "^2.1.4",
    "material-design-icons": "^2.0.0",
    "materialize-css": "^0.97.1",
    "q": "^1.4.1",
    "underscore": "^1.8.3"
  "devDependencies": {
    "grunt-responsive-images": "^0.1.6",
    "load-grunt-tasks": "^3.3.0",
    "node-minify": "^1.3.6"
3- Configure your Gruntfile

This is a sample on how make a grunt file configuration for pagespeed.

//Grunt File configuration
module.exports = function(grunt) {
//Initialize configuration with page speed
    pagespeed: {
    options: {
      nokey: true,
      url: "https://jotaoncode.herokuapp.com/pagespeedtest",
      threshold: 90
    paths: {
      options: {
        paths: ["/before/index.html", "/after/index.html"],
        locale: "en_GB",
        strategy: "desktop",
        threshold: 90

Complete the pagespeed configuration by setting up the page you need to test for performance, in this case I will use a sample page with low performance site (path before/index.html) and one after doing some improvements you will see it is after making some changes (after/index.html).

4- Run Page Speed

Now is the moment to actually test how are we going in performance with our tool, so we can "Measure" with page speed insights:

$ grunt pagespeed

You should see a report like this one:

We can measure a bit more with web page test. Then we can see this results too:

5- Analize your report

So we can see that there are several problems and the biggest one is related to images. Actually we can see page speed insights actually says there is an impact of 236.47 over the rule Optimize Images. An then minimize render blocks, then minify Javascript and finally minify CSS, and we hit a 22 score for pagespeed.

If we see a bit more over the results of web page test. We can actually see that there is a waterfall chart in order to see how resources are processed and loaded on my page.

Some resources you can see for web performance are:

Steve Souders High Performance Web Sites

Front End Nanodegree: Course Website Performance Optimization

Here is another implementation on psi, grunt page speed is actually working with this behind the scenes. Automating web performance measure with psi for node

Here are the rules that page speed insight is actually working with in order to get those results in the report. Page speed insights Rules

So we know the problem and we have several resources to analyze page speed insights and web pages test.

6- Diagnose and Fix

First we need to work on images. As we can see from the graphs there is a lot of impact over the rule of Optimize Images as well as we can see www.webpagetest.org there is a lot going on with the pizzeria image.

So we can see there are 3 images, let see how can we work in each case:

A- There is a logo file of jotaoncode, we can actually remove the image, add the SVG to the html, and we will be saving a call to server for this resource for a very low cost. Also there is no loose on quality for svg values when transforming the image changing the width or height or anything we want with it, so it is a good trade.

B- There is a Pizzeria jpg thats huge with 2.3 MB. So we can actually change this with by changing quality and size of this natural image.

C- There is a picture of me that can be resized and we can change quality a bit too.

We can work with images using this plugin for grunt too. It actually resizes and optimizes images in the way we need for this case. grunt-responsive-images

This is just one part of improving our site. In this case we will actually do some other things after "measuring" and "diagnose and fix" several times.

1- We added javascript to the bottom of the html, so it does not stop with rendering of the page.

2- We minified css and javascript.

3- We added javascript as inline instead of adding it as a source.

4- Finally we can actually run everything with Gzip in server side. In my case I am running a node js application with express, so after 4.x express uses this module for compression. compression

7- Measure Again and Report

In this case we can see that I listed several things in order to improve the little site we have. And again dealing with performance is about measure and then diagnose and fix.

So you can be sure that I repeated that process of measuring diagnosing and fixing several times before showing this final report. Anyway it is not the purpose to see the best performance on this site it is just in order to see how this tools works.

So finally we run page speed again and see:

$ grunt pagespeed

The results on my report are:

Page speed results for page speed insights after performance changes to the site.

The results on www.webpagetest.com are:

Page speed results for web page test after performance changes to the site.

So we can say the following:

Concept Before After
Images 2.38 MB 62.62 KB
Javascript * 491.36 KB 248.38 KB
CSS 197.68 KB 145.55 KB
HTML * 1.82 KB 254.22 KB
Resources 17 9
Time 4.699 s 0.759 s

* The values of Javascript is not in report as it is inline for the final version, in order to not make another call to the server for this resource. So the HTML increment the size too.


We can see that solving performance is about two phases and repeat, Measure First and then Diagnose/Fix, and it is important to have the correct tools for each case. In this case we see two tools webpagetest and page speed insights. Also this is a particular problem and you can see that for each page or web application you will actually face another one, you may have you own strategy to solve those cases.

There is a nice place where you can find out how much it costs for someone to use your site on mobile networks around the world. Before improvements the higher costs was around: 0.82$ USD and after improvements is: 0.07$ USD for the country Vanuatu in both cases, so my site is cheaper for people too . Here you can test your application to see how much it costs: whatdoesmysitecost.com

The code used for this example is in this repo: here

Home Browser Testing