Web Performance Metrics – Demos

I decided to create notes and demos about web performance metrics that sometimes I have problem to explain and understand.

First input delay:

First Input Delay (FID) measures the time from when a user first interacts with your site to the time when the browser is actually able to respond to that interaction.

Source: https://developers.google.com/web/updates/2018/05/first-input-delay

I created 2 demo pages that shows the FID time in 2 cases: 1st – when browser’s main thread is busy and 2nd browsers’s main thread is free.

Click for FID demo

First Input Delay example

Speed Index:

The speed index takes the visual progress of the visible page loading and computes an overall score for how quickly the content painted.

Source: https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
I created demo page that shows the difference between good and bad speed index.

Click for Speed Index demo

Speed Index example

Page Busy:

Page Busy is a way of measuring how much work was being done on the page (how “busy” it was). … Page Busy can be an indicator of how likely the user will have a good experience when they interact with it. If Page Busy is 100%, the user may see the page lag behind their input.

Source: https://github.com/akamai/boomerang/blob/master/plugins/continuity.js

I was wondering if Page Busy could be displayed as a timeline on web page. I checked Continuity plugin of Boomerang JS a popular Real User Monitoring library. I reverse engineered part of Continuity plugin and borrowed some code in order to create page busy timeline where red means that page is busy and green means that the page is idling.

Click for Page Busy demo

Page Busy example

Leave a Reply

Your email address will not be published. Required fields are marked *