Jota on Code

Objectives

Pre Requisites

Steps

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
  grunt.initConfig({
    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
      }
    }
  }
});
require('load-grunt-tasks')(grunt);
};

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:

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:

The results on my report are:

The results on www.webpagetest.com are:

So we can say the following:

* 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.

Conclusion:

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