# Google Chrome Extension Light House Analytics Browser Extension

#### What is Light House:

Light House is an open Source Tool that was created by Google. Its used to analyze and help improve the overall quality of webpages. Lighthouse can be run on web pages whether it's a public page or requires authentication. Light house is automatically built into Chrome Dev tools. It can be added to non-chrome browsers like Firefox as an extension, or installed and ran in a command line of a console.

For further information, see Links below for google’s documentation and a blog post covering lighthouse found in HFH-1343 & HFH-1352.

https://www.semrush.com/blog/google-lighthouse/

https://developer.chrome.com/docs/lighthouse/

#### Using Lighthouse in Nitro

Lighthouse can run analysis with weighted scores against its database in up to 5 categories. These scores will be given in any number from 0 to 100. 0 being the worst 100 being the best. Those options being Performance, Accesibitlity, Best Practice, SEO, & PWA.

Decided to start to just run Lightout throughout different parts of Nitro Ecosystem including Connect, PII/Warranty Scheduling Page, EV-Incentive Sign up, Craftsman Books, Data Usage Summary by User, Partner Imports, Custom Leadership Board, Craftsman Installation Inspection Workspace, and Learning Dojo reviewed the results.

The worst of the scores were the Performance score for both Learning Dojo, 26 out of 100, and Rep Stats With Product Category, 33 out of 100.

Performance scores are based on several different metrics. These metrics are 1st Contentful Paint, Largest Contenful Paint, Total Blocking Time, Speed Index, Cumulative Layout Shift. See link below for further information and a bigger explaination of each metric.

https://developer.chrome.com/docs/lighthouse/performance/#metrics



A big benifit of Lighthouse is its "Opportunites" listing. Along with each category score, Lighthouse identifies potential fixes and other places where code can be improved and in some cases even how.

For the previously mentioned performance scores, along with performance scores of just about every page tested in Nitro, The top thing being pointed at by lighthouse for improvement was under the category of Eliminate Render-blocking Resources. There seem to be the same web packs and pieces of code being pointed to.

These pieces of code seem to be ran across nitro regardless of if they were related to page or not. For example, There seems to be webpacks and code related to Aerial Measurements for NAM that would run in Rep Stat pages and Learning Dojo.
###### Example JS Chunk that is being ran:
accounting~admin~aerial_measurements~apm~attendance~auctions~call_loop_status~call_queue~call_transc~66fd0238-bc9b3d9282214bd99fef.chunk.js

After some digging, suspected that this issue may to be coming from Umbrella or at least a high up level in Nitro’s code. With the only constants in each Nitro page being Spot Nitro Header, and the Sidebar Navigator. So branched off and removed them from being accessible and displayed on the page.

Though this did improve overall Performance scores by around 10 point's or more depending on the page, which is to be expected as this simplifies what is being rendered on the page and removes that code and permission checks associated with them. It did not remove the bulk of what Lighthouse was pointing too.

Since the only spot where these packs were found in manifest.json spec dummy files with in each of Nitro’s different components, I was concerned these packs maybe being run from the spec files in the browser.

After Pairing, I had it better explained how these files work and how they are pulled in and mimic what is being pulled in from the umbrella. We then further checked a sample of the web packs being pointed to and concluded that they don’t seem to be pulled from the spec files into the browswer.

However we did note that, that a good number the same packs, chunks.js and so on, were being pointed to in the next section down as Unused JS in the oppertunies. We suspect that there are files currently being run that do not need to be. Earlier in the week, I tried to remove code that is supposed to limit which packs run and was unable to effect the code.

One of the solutions to this as recommended by lighthouse is to split your JavaScript bundles. It was confirmed there is a migration set to be in place that will do just that and may resolve many of these isssues. It would be good to rerun light house on the same pages to see what issues if any get resolved and see if there is any performance or other improvements. Actually really interested in those results.

## Takeaways

So I believe, Lighthouse has a lot of potential in helping with keeping Nitro strong and improving it as we scale and grow.

It can be a solid tool for Ninjas to check on a pages overall health. For example, if after checking the page works correctly and for any bugs, the current Master branch can be checked can be compared to the current branch to check on the different categories.

If everything works but the speed, overall, performance, or some other area drops too far it can then be pointed out and discussed. Which could lead to some tweeks to that current PR or even a follow up story after.

For developers, it is another tool in our belt. It can help check resource allucation along with the other dev tools as well as help prioritize while figuring out how to improve upon the page.
As developers, we are constantly challenged with doing better then yesterday. Having a tool like Lighthouse that can give a breakdown on different aspects like Accessibility, Perfomance and others should not be ignored and will help up from getting too lost in the day to day of building out Nitro and our applications.
By using the scores and other information provided by Lighthouse, Developers can be more pro-active with the overall health of the pages and Apps they work on.