Google's lighthouse test wouldn’t. The Google Lighthouse test measures five key areas of a website’s performance and determines a score. And, like anything set by Google, this performance test is being constantly refined and updated. Improving the quality of your Lighthouse score means responding to changes and updates in the Lighthouse. Google Lighthouse looks promising tool to perform a continuity test to improve site performance and usability. If you are using WordPress and looking to make your site loads faster then check out Rocket. Thanks to our sponsors. More Great Reading on Geekflare.
Google Lighthouse. One of the most used tools out there for testing the performance of your website is Google Lighthouse, an open source tool for auditing and improving the quality and performance of your website. It's a popular choice due to its versatility and ability to measure different areas such as web performance, accessibility, search.
Nowadays, it’s more important than ever to make your website content easily visible, accessible and convenient to work with. In this article, we’re going to discuss what Google Lighthouse is and what you can get from using this tool.
Google Lighthouse is an automated tool that can help you improve your website. It has a set of audits: performance, accessibility, PWA (progressive web apps), SEO and more. You can run the tool on any web page and see how it performs.
When the tool finishes analyzing a web page, it returns a report with the calculated scores for each metric, a list of problems with the page, and general, or sometimes specific, recommendations regarding solving those problems.
Before we dive into how to run the tool, let’s talk about the scoring and metrics first.
Lighthouse Scoring
The screenshot below demonstrates the first thing you see once an audit is finished.
An audit run on the github.com main page.
This is often referred to as a Lighthouse score (or “scores” when talking about all the categories). From my experience, when people come to a web developer and say something like:
- “I need to increase my Lighthouse score,” or
- “I need to increase my PageSpeed score,”
they’re usually referring to the Performance category, unless they explicitly state otherwise. If you’re wondering what PageSpeed is, then stay tuned; we’ll discuss that later in the article.
Lighthouse Performance Metrics
“Okay, so the higher the scores are, the better the page is,” you may be thinking. And that’s mostly true. Let’s walk through the categories to explore the meaning of each.
Performance
This category has metrics that together reflect how fast your page is perceptually. I can’t stress this enough: your visitors will judge a page by the speed and responsiveness they feel it has, not by a stopwatch measuring the time waiting for the first image to appear on the screen.
Here’s a list of those metrics and their weights in the Performance score:
- First Contentful Paint—15%
- Speed Index—15%
- Largest Contentful Paint—25%
- Time to Interactive—15%
- Total Blocking Time—25%
- Cumulative Layout Shift—5%
First Contentful Paint
![Test Test](/uploads/1/3/7/8/137865909/970486266.png)
Often called an FCP, this metric shows how long it takes for a browser to render DOM content. In this case, DOM content is text, images, non-white
<canvas>
elements and SVGs. It’s crucial to understand that this metric displays render time, not loading time. E.g., if a browser has loaded a particular text but the font is still on its way through the network, then it’s still not considered a contentful paint.Lighthouse calculates a score for this metric by comparing your page with the FCP data present in HTTP Archive. The tool uses a color-coding system to display how well a page performs according to a particular metric. A circle near the metric could be red, orange or green: slow, moderate or fast, respectively. Here’s the interpretation:
- FCP time under 2 seconds—green, fast
- FCP time from 2 to 4 seconds—orange, moderate
- FCP time over 4 seconds—red, slow
A screenshot sequence demonstrating an FCP. Image by web.dev
Speed Index
This shows how quickly the contents of a page load visually. To do this, Lighthouse records a video of your page loading and then computes a visual progression between frames. Hence, if your page elements display quickly (but there still could be scripts loading in the background), then this metric would be in the safe zone.
Interesting fact: if you run an audit on an empty, non-changing white page, the metric won’t be calculated.
Speed Index fails to be calculated on an empty page; however, there is a white text (highlighted by mouse) on a white background.
With this metric, Lighthouse also compares your page speed to other websites. Here are the conditions:
- Speed Index under 4.3 seconds—green, fast
- Speed Index from 4.4 to 5.8 seconds—orange, moderate
- Speed Index over 5.8 seconds—red, slow
Largest Contentful Paint
LCP plays a major role in the performance score calculator. It reports the render time of the largest image or text block within the viewport (i.e., the visible part of the page).
Elements that are considered as candidates to trigger the metric:
<img>
elements<image>
elements inside <svg> elements<video>
elements (in this case, the poster image is used)- Elements with background image loaded via url() from CSS
- Block-level elements with children (text nodes count too)—margins, paddings, and borders are ignored
The largest element can change as the page progressively loads. The last record of the largest element capture gets reported.
A demonstration of how the largest element can change as the page loads. Source: web.dev
Scoring:
- LCP under 2.5 seconds—green, fast
- Speed Index from 2.5 to 4 seconds—orange, moderate
- Speed Index over 4 seconds—red, slow
Time To Interactive
Abbreviated TTI, it measures how long it takes a page to become fully interactive.
Here’s what “fully” means in this case:
- Useful content (measured by FCP) is displayed
- Javascript event handlers are bound to visible elements’ events
- The page responds to user interaction within 50 milliseconds
Again, comparison data is taken from HTTP Archive:
- TTI under 3.9 seconds—green, fast.
- TTI from 3.9 to 7.3 seconds—orange, moderate
- TTI over 7.3 seconds—red, slow
Total Blocking Time
This is the sum of all time records between FCP and TTI when a page is blocked from user interaction for more than 50 milliseconds. For example, if some Javascript code interrupts page loading for 70 milliseconds, then the TBT is increased by 20 milliseconds.
According to Lighthouse’s source code, the TBT score is calculated in comparison with the top 10,000 websites.
Interpretation:
- TBT under 300 milliseconds—green, fast.
- TBT from 300 to 600 milliseconds—orange, moderate
- TBT over 600 milliseconds—red, slow
Cumulative Layout Shift
CLS can tell you how aggressively elements shift each other. For example, say you’re reading a long text, then an element gets rendered above the part you’re reading and the text gets shifted down. Eliminating situations like this will positively affect the CLS score.
This metric takes into account only unexpected layout shifts. An unexpected layout shift is a layout shift that has had no user input within a 500ms time frame prior to the shift.
How to Run an Audit
When it comes to running an audit, there are several methods to choose from.
Online via web.dev
- Visit https://web.dev/measure/.
- Type in or paste the page address.
- Click Run Audit.
Lighthouse report displayed online on web.dev
Online via Google PageSpeed Insights
As you may recall, I promised to get back to this tool in the beginning of this article.
While Lighthouse itself gives you additional data and audits, Google PageSpeed Insights is still driven by Lighthouse in the backend but returns Performance data only.
- Go to https://developers.google.com/speed/pagespeed/insights/.
- Fill in the page URL.
- Wait for the results.
There, you’ll also find info about which resources are affecting your performance.
Results provided by Google PageSpeed Insights powered by Lighthouse.
Browser Extension or Addon
Lighthouse also comes in the form of Chrome extension and Firefox addon.
Same functionality but in the form of a browser plugin.
Please note: if you want to test local websites, you should use the methods below. Online methods (including browser extensions) provide results for published websites only.
From Chrome Developer Tools (on Chromium-based browsers)
This is how I made screenshots for the metrics in this article.:
- Go to the page you want to audit.
- Open DevTools (Ctrl+Shift+I or F12 on Windows, Cmd+Option+I on Mac).
- Go to the Audits tab.
- Click Perform an audit and select the desired categories.
- Run the audit.
This can be especially useful when testing pages that require user authentication.
What’s interesting here is that Lighthouse is available not only in Google Chrome, but in some Chromium-based browsers as well. For example, below is a screenshot of a Lighthouse audit taken from the latest version of Microsoft Edge, which now uses the same engine as Google Chrome:
A screenshot of a Google Lighthouse audit launched from Microsoft Edge browser.
Run Lighthouse as a Node module
This will allow you to run an audit from a command line and get an *.html file with the audit results.
- Make sure you have Google Chrome installed on your machine.
- Install the current Long-Term Support version of Node (the following example was done with the latest non-LTS version, but Google itself recommends using the LTS version).
- Install Lighthouse globally with the following command: npm install -g lighthouse
- Let’s run a demo audit with the lighthouse “https://google.com” command.
- A Chrome window will appear automatically for audit purposes. The generated report will be stored in the current folder.
When running an audit, Lighthouse will print the current stages of testing (on the left) and when done, generate an HTML file with the report data (on the right).
Run Lighthouse Module Programmatically
If you’re running integration processes, you can use Lighthouse as a module to run automated tests. Here’s an example:
A detailed description can be found on GitHub.
Lighthouse, but for Images
I want to stress that performance plays an important role when it comes to website speed. Nowadays, since pages usually contain lots of visual data, optimizing images has become very important as well. If you’re interested in a comprehensive report on how the images on your website perform, try PageDetox by Uploadcare.
This tool gives you a CX score (customer experience score) that demonstrates how well your images are optimized to be viewed by customers. Not only that, PageDetox also provides insights on what to improve (even down to particular images on the page) and how much (in percentage) you could benefit from using image loading tools like Adaptive Delivery.
As an example, let’s take a look at an audit run on Etsy.com:
Now that you know the metrics, it’s time to put them into action and let the world see the full potential of your website!
The first tool that most engineers probably associate with front end or client side performance testing is Google Lighthouse. So when I stumbled upon a Cypress plugin which lets you run Lighthouse audits directly from your Cypress tests, I had to share this knowledge with the community.
Why test for Performance?
Because of the advancement in technology over the years, we are now accustomed to instant gratification with how information is provided to us. When we want information, we want it now and any delays in receiving this information is met by frustration. It’s also been proven by numerous studies that our attention span has decreased over time.
In the context of page performance, if we see that a page has poor speed, we are quick to go to a competitor’s website rather than wait for the website with poor speed to finish loading. This can ultimately mean loss of revenue to businesses.
Performance Testing in a Nutshell
When we talk about performance testing, it’s typically divided into two areas: client side and server side. One of the most common approaches in server side performance testing is load testing. Load testing is verifying that your servers can handle the load accordingly when multiple requests are sent from different users simultaneously. You can anticipate how your servers will respond by simulating high concurrent users using tools such as JMeter, K6, or Gatling, to name a few.
On the other hand, when we speak about client side performance testing, the aim is to test how fast a single user can see the web responses instantly. Our servers might be able to handle the concurrent load but the way different browsers process data from servers also has an impact on performance. For example, JavaScript makes websites interactive but it can also contribute to why a website is slow especially if it’s not optimized. A single user’s performance experience is as important as multiple users.
As mentioned above, one of the most popular tools out there is Lighthouse, a free and open source tool for improving the quality of your web pages. Burp suite scanner.
Google Lighthouse
Lighthouse audits the performance of your website by crawling a page that you provide and running the audits against key performance metrics. Apart from performance, it also lets you audit other areas such as accessibility, best practices and search engine optimization.
To get started with Lighthouse, you really don’t need additional technical skills. The easiest way to get started is to simply open up your Chrome browser, visit a website of your choice, open up developer tools and click the Lighthouse tab. From the Lighthouse tab, you can start the audit as seen on the image below.
There are also other ways to run Lighthouse audits, such as using the Lighthouse browser extension, which is also available on Firefox. Lighthouse CLI lets you run the audit straight from your command line or programmatically. And cypress-audit, a Cypress plugin, lets you integrate Lighthouse scores straight from your Cypress tests.
In Lighthouse 6.0, which is currently the latest version, there are six important performance metrics which are important to understand.
- First Contentful Paint (FCP)
FCP measures how long it takes for the browser to render the first piece of DOM content after a user navigates to your page.
- Large Contentful Paint (LCP)
LCP measures how long it takes for the browser to render the largest piece of DOM content (image or text block) after a user navigates to your page.
- Speed Index
Speed index measures how long the content visually loads on page load.
- Time to Interactive (TTI)
TTI measures how long it takes for the page to become fully interactive.
- Total Blocking Time (TBT)
TBT measures the time the page is blocked from responding to user inputs. Anything that executes above 50ms is considered a blocking task.
- Cumulative Layout Shift (CLS)
CLS measures the visual stability of your page.
Google Lighthouse Score
With the above performance metrics, the lower the scores, the better it is.
Cypress-audit configuration
Cypress-audit is a free plugin that you can use to integrate Lighthouse into your Cypress tests. Integrating cypress-audit into your code base can be done in three steps:
![Lighthouse score Lighthouse score](/uploads/1/3/7/8/137865909/398617879.jpeg)
Install cypress-audit
The first step is to install the cypress-audit plugin. This can be done by typing the following to your terminal:npm install --D cypress-audit
Configure Lighthouse CLI
The second step is to prepare the Lighthouse CLI configuration. Cypress-audit uses Lighthouse CLI under the hood and if you have used Lighthouse CLI already, it opens up a Chrome browser and runs the audit. Similarly, when you run your Cypress tests, it also launches the Chrome browser by default when you use the visual test runner. Because we want to run lighthouse inside the same browser as Cypress rather than opening a new one, the following code needs to be added in your plugins/index.js.Since Cypress reacts to various browser event before we launch the browser, we are simply going to pass the launchOptions object, which contains information on how the browser is launched, to the prepareAudit function. This way, cypress-audit will know information about our browser.Then we create a new task called lighthouse to invoke the lighthouse process. This is needed because Lighthouse CLI is a node.js backend process so in order for us to use this within our Cypress tests, we need to wrap it as a task.Inform Cypress of Lighthouse Command
The third and final step that we need to complete the cypress-audit setup is to import thecy.lighthouse()
command to our support/commands.js to make Cypress aware of this new command.import ‘cypress-audit/commands’;
The complete setup can also be found on my performance testing github repository which you are free to clone.
Writing the Test
Visit any web page you want by calling
cy.visit('/’)
. Then to actually run the audit, we need to call cy.lighthouse()
afterwards.Xfinity Speed Test
By default, cypress-audit will run the test based on a score of 100 for every metric.
The thresholds can be modified and you are free to customise which metrics you want to track.
You can also pass in a custom configuration to update the metric scores. Here is a code snippet on how you can pass custom configurations in cypress-audit.
I highly recommend that you have a read through cypress-audit and Lighthouse CLI’s documentation to understand what other configurations can be modified. Alternatively, check out my blog post, Web Performance Testing with Google Lighthouse, for a more in-depth explanation.
Final Thoughts
Using Lighthouse within your Cypress tests is just one of the many ways out there to monitor the performance of your website. Think about your requirements carefully and then decide whether this approach is right for you and your team.