How to open Lighthouse Tool

• Step 1: Open a Microsoft Edge and search a website. e.g. https://www.w3wiki.org/

• Step 2: Right click on the screen and click on Inspect or click ctrl+shift+I.

• Step 3: Now in Inspect window click on + (plus) button, find Lighthouse option and click on it.

• Step 4: Now you can see the Lighthouse window. Now choose required Mode, Device type and check required Categories.

• Step 5: Now click on Analyze page load to get the final report. And wait for few seconds.

• Step 6: Now you can see the report.

• Step 7: Click on Performance to see performance report.

• Step 8: Click on Accessibility to see its accessibility result.

• Step 9: Click on Best Practices to see its required result.

• Step 10: Click on SEO to see its result.

• Step 11: Click on PWA to see its result.

LightHouse is an open-source tool that is developed by Google and is designed to analyze the quality of web pages. It was first integrated into Microsoft Edge DevTools on February 11, 2019. It is an automated tool integrated into web browsers like Microsoft Edge and Google Chrome to audit the quality of the webpage.

Lighthouse tool analyzes the page and generates a comprehensive report of the Performance, Accessibility, Best Practices, Progressive Web App (PWA) status, and SEO (Search Engine Optimization) with actionable recommendations for enhancing the overall quality of web content. This tool can be used on any type of webpage whether it is a public web page, or it is private or it requires authentication.

Lighthouse offers three primary modes to analyze the different aspects of the quality of the web pages, these modes are as follows-

1. Navigation Mode

• Navigation mode is the default mode of the Lighthouse tool.
• It analyzes a single page load from the start until it is finished.
• It focuses on performance metrics like visual stability, interactivity, and load time of the webpage.
• This mode is ideal for understanding initial page load experiences and identifying factors affecting speed.

2. Timespan Mode

• It helps to analyze an arbitrary period of time typically which involve in user interaction.
• It captures performance data for every kind of dynamic interactions like scrolling, clicking and form submissions.
• This mode is ideal for accessing user driven experiences and pinpointing performance during interactions.

3. Snapshot Mode

• It analyzes the page in its current state, without reloading.
• It has ability to captures a “snapshot” of performance, accessibility, and SEO for a specific page state.
• It is useful for auditing complex pages with dynamic content or user-driven changes, like forms or interactive elements.
• It can evaluate best practices of menus and UI elements hidden behind interaction.