What’s Google Lighthouse

Google Lighthouse is an automatized open-source tool that attempts to help improve web page quality. You can run it on any page, public or otherwise. It audits performance, accessibility, best practices, progressive web apps, and SEO, among other things.

Lighthouse runs a series of automated tests and audits against the page and then generates a report. You can see the scores as indicators on how to improve the page. More interestingly, the report gives you a reference doc with explanations and recommendations. This is a key feature to know what to fix.

 

Why is this important? Most users present an astonishing high bounce rate associated with page loading speed and responsiveness. That white screen won’t do, even for a few seconds, and less considering the way users are with mobile devices nowadays.

 

Let’s begin with scoring and metrics.

Lighthouse performance review

This chrome extension judges page speed. Even though it's not 100% accurate, it shows how responsive your site is in the eye of the user.

 

First Contentful Paint: this measures how much time it takes to render text, images, non-white canvas elements, and SVGs. It also displays rendering time.

 

Speed Index: How quickly the contents of a page load visually. This does not consider the scripts loading in the background, just a progression between frames calculated by a video.

 

Largest Contentful Paint: As the name suggests, it reports the rendering time of the largest image or text block.

 

Time to Interactive: Pretty self-explanatory. It calculates how long it takes for your site to be fully responsive.

 

Total Blocking Time: The sum of First Contentful Paint with Time to Interactive when it’s blocked from interaction for more than 50 milliseconds.

 

Cumulative Layout Shift: How aggressively your elements shift each other. You know when you are about to click on something, and suddenly a big ad loads up sending it below. Well, that awful situation is now measured.

Other metrics in Lighthouse

Accessibility

This metric presents possible changes to improve availability and user experience. This can apply to a website or your mobile app. 

 

Element Structure: It looks for the organization of your HTML contrast

 

Shading Contrast: Scores your text readability

 

Element Naming: Check for the appropriate naming of your components

 

Element Descriptions: Confirms that your elements have assistive text: as alternative text for images.

Best Practices

These recommendations are associated with both security and performance. They are all described clearly after the audit and point to the issue at hand. This allows for quick and easy fixes most of the time. The latest version provides feedback on over 25 specific processes.

SEO

Search engine optimization is a key component of your site's popularity. As we are living a surge of SEO gurus, good and bad, Lighthouse allows you to take the matter into your hands. This tool can help you with search engine results ranking. As of today, it checks if your page is indexing if it has descriptive text, successful HTTP, and many more.

Progressive web app

While the meaning of a Progressive Web App (PWA) isn't exactly clear, Google indicates that there are a few variables that make a site a PWA. Among other things, we find that pages are responsive on tablets and cell phones, they load quickly even on 3G, and the advances don’t produce lag on the network.

 

For the complete list of variables and services, check their official checklist.

How to use Lighthouse

Lighthouse can be used in several ways:

 

Chrome DevTools: Using this tool you can access pages that require authentication and read your reports in a friendlier format.

 

Command-line: Installing and running the Node command-line tool.

 

As a Chrome extension: you can add your Lighthouse chrome extension from the Chrome Webstore. You should know that this doesn’t have as many options as using Chrome DevTools.

 

From a website UI: The easiest way to use it. You just need to right-click on the page, go to inspect, and then the lighthouse tab.

 

If you want to check this information in more detail, you can visit Google Chrome Developer’s youtube channel or the Google Developers website.

Criticisms of Google Lighthouse

Some developers have issued complaints while analyzing famous sites like Amazon, Walmart, or Dell (among others). The main issue is that most sites score really low on Lighthouse and Page Speed Insights—another Google service. As many giant digital teams as Amazon or Google can’t even keep themselves on the green, especially for mobile scoring, what hope is there for small companies without a dedicated development team?

 

The current scoring model is probably overly harsh, and it might be detrimental when individuals outside the development team could judge their performance with unrealistic expectations. That is especially true in a world where many companies are pressured by business stakeholders and investors without a tech background.

 

This isn’t to say that most mobile web is slow in general and that its relevance can’t be denied, but maybe the scale needs revamping. In their current state, these reports miscommunicate performance and can potentially produce frustration between teams.

Google Lighthouse alternatives

“Highly organized research is guaranteed to produce nothing new.”
― Frank Herbert, Dune

 

You know how it is when you look for alternatives on the internet, you get down a rabbit hole without an end in sight. When you see the light, you are back at the beginning.

 

Screpy, GTmetrix, PageSpeedInsights, WebPagetest, Yellow Lab Tools, DareBoost, Pingdom Website Speed Test, Internet Indexer, Checkbot, Yakaferci, Varvy, Yahoo! YSlow, Geekflare Tools, Speedrank, WEBO Site SpeedUP, PageSpeedPlus, User Probe, PageWatch, web.dev, Raileo, Web Analyser, MaxCDN Tools.

 

Yeah, that is when the analysis paralysis strikes you down. Even as a copywriter used to do research, I know there is not a humane way to compare all of those.

 

Are you as lost as yours truly? Would you use a partner on these subjects? At Awkbit, there is a team of devs ready to help you. Get in touch! And do not worry, I am just the intermediary.