Jamstack Article
Published: 2020-12-10 22:08:39

# Introduction
The session I have chosen is Performance For All: Understanding a Lighthouse Score - Henri Helvetica (https://youtu.be/TT-2rQsHyqQ). I am aware of the Lighthouse audit tool  in the Google Chrome DevTools. I have played around with and used Lighthouse in the past, to generate reports for SEO and Accessibility, but have far from used it to its full potential. I have interacted with it on the surface level, but to be honest, did not fully understand the provided information that the report threw back the few times I have used the tool. I know that it can be used to generate reports for more components of the webpage like Performance and Progressive Web Apps. I also know that it can be used on the command line or even as a Node module. I was looking forward to becoming more familiar with the Performance report and to better understand what insights it has to offer. 

# FCP & Speed Index
In this talk, Henri spoke the different weights and metrics related to the Lighthouse Performance Score. In this article, I want to speak about the 5 timing- specific metrics that were discussed in the talk. The first being FCP which stands for First Contentful Paint, a term I had never heard of. It is a tool that “measures how long it takes for the browser to render the first piece of DOM content after a user navigates to your page”. Similarly, the next metric is the Speed Index, which is a measurement of how quickly content displays visually on page load. Both of these scores are based on timing at page load, but do have varying scales of what is deemed “good” versus a score that indicates improvements can be made. I feel like I want to do a deeper look into the differences between these two metrics, because on the surface, they do seem very similar/comparable.

# LCP
The next component of the report that Henri spoke on was the LCP, which stands for Largest Contentful Paint, and reports the render time of the largest image or text block on the designated viewport. This is another metric that is measured by the time and speed on page load. I have definitely had frustrations with pages loading images slowly. This metric is worth 25% of the performance score of a site, but never understood it to be something that could be quantified and measured in a tool as easily accessible as Lighthouse! 

# TTI & TBT
Henri also spoke briefly about another time related component of the report - the TTI, Time To Interactive. It is pretty self explanatory when you break it down - measured time it takes for a page to become fully interactive. There is another metric that I think contrasts the TTI, which is called TBT - Total Blocking Time. Although not opposing metrics, the TBT actually measures the total amount of time that a page is blocked from responding to user input. The key difference is that the TBT is the total amount of time it takes for all of the long task overages (tasks that take 50 milliseconds or more). I had never even heard the term “long task overages” before and I think they are so vital to the page load and user experience, so I am very curious to learn more about how to improve this score specifically. The quicker a user can interact with a page, I think they are more likely to stay engaged with the page!

# Reflections
This was a great introduction to the capabilities of the Lighthouse Performance score and report. I think using the knowledge and basic definitions of each of these metrics is a good start and eye opener, but it definitely makes me want to learn more about how these are measured and HOW to optimize my sites to get the best scores possible. Henri spoke to the fact that the average Lighthouse Performance score is 49 which is a fail, but didn’t offer any insight into how pages and sites can use these insights to improve their scores. There is much more to learn!