Google Lighthouse

                                                          Google Lighthouse

Lighthouse is an Open-Source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.

Once installed lighthouse can audit current page and ranks the page out of 100. A score above 80 is considered ‘Good’ where as anything less than that calls for further optimizations.

Lighthouse categorize audits into five types

·         Progressive Web App (PWA)

·         Best Practices

·         Performance &

·         SEO

·         Accessibility

I. Progressive Web App (PWA)

Audits under this category check whether the webpage is fit to be considered as a progressive web app. PWA is a buzz word given to web pages which utilize some of the latest web technologies like manifest, service worker and Cache API to provide features like splash screen, instant loading, offline access etc.

2. Page load performance is fast

This section deals with the load performance of your website. There are four checks under this title.

è First meaningful paint: (target: 1,600ms)

It is the time taken by the page to get downloaded over the network, parsed and rendered in the browser for the very first time. To score 100 in this test, first meaningful paint should happen within 1.6 seconds.

è Perceptual Speed Index: (target: 1,250)

This metric defines how quickly the contents of a page are visibly populated. It is the time taken for the website to appear visually complete. Lighthouse captures the screenshots of the webpage while it gets loaded and computes the speed index by analyzing the difference between first & last visual change from the screen shots. You will get a better score depending on how fast the page ‘looks’ complete.

è Estimated Input Latency: (target: 50ms)

This metric checks whether the page is responsive to user inputs. It follows the RAIL performance model put forth by Google. As per RAILS model the page should respond to user actions within 100ms.

è Time To Interactive (alpha):(target: 5,000ms)

Time to interactive is the time taken by the page being loaded is considered usable and will respond to user inputs. It doesn’t require the page to be completely loaded, rather it is the time when the page is ready enough to start accepting user inputs. To pass this audit layout should have stabilized, web fonts loaded and render thread should be idle within 5 seconds.

3. Site is progressively enhanced

This check requires your website to get progressively enhanced on load. This is specifically applicable for Single Page Applications (SPA) where initial page render happens only after all the required resources are downloaded and parsed. All this time user will be staring at a blank page. As for lighthouse audit, there is only one metric that is measured under this category.

è Page contains some content when JavaScript is not available

Rather than serving just an app shell as the page content, serve some basic content within the page that will keep user engaged till dynamic page rendering takes over. For SPA’s try to pre render the page in advance and send the static content.

4. Search Engine Optimization (SEO)

 “SEO Audits” category to the Chrome extension. You can access the new audit category via the “Options” button in the extension.

As for lighthouse audit, there is six metric that is measured under this category.

è Descriptive anchor text.

è Titles, description.

è If the page can be crawled by Google.

è HTTP status code.

è Valid hreflang and rel=canonical tags.

è UX — legible font sizes, plugins.