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.
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.
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:
3- Configure your Gruntfile
This is a sample on how make a grunt file configuration for pagespeed.
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
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:
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.
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.
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:
The results on www.webpagetest.com are:
So we can say the following:
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