Lighthouse Monitoring & Testing with Dotcom-Monitor

Using the Dotcom-Monitor website monitoring solution, you can create and configure a Lighthouse Report monitoring device (Web Page monitoring solution) to audit performance, Search Engine Optimization (SEO), and other website metrics automatically.

What is Google Lighthouse?

Google Lighthouse is an open-source, automated tool to audit website speed and performance. It audits loading time, accessibility, SEO of web pages, progressive web apps, and an extended list of best practices. Lighthouse was incorporated into PageSpeed Insights (PSI) and users can now review reports on performance data. Additionally, PageSpeed Insights utilizes a combination of lab and real-world data, whereas Lighthouse uses only lab data for building reports.

PageSpeed Insights metrics help to provide insight into a user’s perception of web page speed, which has become a factor for SEO rankings. However, as important as it is to aim for a great Lighthouse score, which we cover more in this article below, what’s important is what you do with these Lighthouse recommendations to improve web page performance by decreasing perceived and actual web page load times.

Lighthouse simulates loading a web page in a real browser under real-world conditions (lost packages, poor connection, etc.) and generates the report with scores reflecting audit metrics. In addition, the report contains suggestions on how to improve site speed and performance scores. Besides isolated tests, Lighthouse reports can be extremely useful in web development to compare changes in the results over time.

However, when it comes to recurring website testing, running Lighthouse manually on each test case doesn’t seem to be efficient. In this article, we will discuss the way to execute audit automatically using Dotcom-Monitor.

How to Use the Lighthouse Report More Effectively

Every time you improve web page content to meet SEO requirements, you may need to track changes in SEO scores before and after improvements. In the case of SEO, a one-time check won’t be meaningful. Quite the opposite is true.  It is necessary to monitor how SEO scores change over time and on a regular basis.

Let’s say you want to have insight into the impact of web page updates as it relates to performance metrics, without having to pull the reports manually on every version. Moreover, sometimes optimization of the website functionality may affect a particular performance metric. For example, if you are working on shortening the amount of time it takes to load content on a web page, you need to focus on changes in First Contentful Paint or First Meaningful Paint scores and make sure the score does not drop. We will discuss these metrics in more detail further in this article.

Configuring a Lighthouse Report with Dotcom-Monitor

Dotcom-Monitor can generate a Lighthouse report with the specified frequency to monitor changes in a specific web page metric. The key feature of the solution is monitoring a specific audit metric. You can select a metric and set an error threshold to receive alert notifications when a monitored score is out of the acceptable range. In addition, you can configure alerting on errors that occurred while running Lighthouse, specify an audit scheduler, and set up scheduled reporting on the monitoring results.

Once the monitoring device has been configured, you can pull Lighthouse reports from the Dotcom -Monitor Online Report.

Setting Up a Lighthouse Report Audit

URL 

Enter the URL that you wish to audit with Lighthouse. The URL address should be formed exactly as you would use it in a browser, such as http://www.example.com. You must include the http:// or https:// at the beginning of the address. At this time, you may also include any GET parameters at the end of your URL.

Lighthouse Report Metrics

Dotcom-Monitor enables monitoring and alerting for a particular web page audit metric. The system will monitor the selected metric scores in the Lighthouse report. If the Error Threshold for the metric score is specified and the Alert on Lighthouse errors option is selected, the device will be considered as failed in instances when the score of interest is beyond the allowable range. To receive alert notifications, configure alerts for the device on the Alerts tab of the device edit screen.

Also, you can configure scheduled reports that will aggregate the results of the selected metric monitoring based on daily, weekly, or monthly statistics. Choose one audit metric from the following Lighthouse metrics to receive alerts and reports on. The Performance report includes various metrics, and we will discuss each of these metrics below.

Performance Overall Score

The Performance Overall Score is the weighted average of all the performance metrics. More heavily weighted metrics have a bigger effect on the Performance Overall Score.

First Contentful Paint

The First Contentful Paint (FCP) measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. A good First Contentful Paint score is anything under one second. It is important to differentiate First Contentful Paint from the term First Paint. First Paint is when anything is considered rendered, which could be as simple as the background color of the page itself, but it provides no relevant content or information that the user came to make use of or act on.

The First Contentful Paint will be content that is delivered, or painted, to the user. For most web pages, this is typically the above-the-fold content, like the navigation menu or a hero image, as example. These will be the first pieces of the actual content that users will see as the page loads. First Contentful Paint provides a more useful, real-world data point than First Paint.

Speed Index

The Speed Index shows how quickly the contents of a page are visibly populated. The Speed Index is determined by measuring your web page speed and comparing that with data from other websites. The lower the Speed Index score, the better the performance. Any page that is under 4.3 seconds is considered good and will be indicated with a green color coding. A page speed between 4.4 and 5.8 is considered moderate speed and will be indicated in orange. Lastly, a page speed over 5.8 seconds is considered slow and will be indicated in red.

Time to Interactive

The Time to Interactive, or TTI, measures the time from when the page starts loading to when its main sub-resources have loaded, and it is capable of reliably responding to user input quickly. A reasonable Time to Interactive is less than five seconds. One important note about Time to Interactive is that you want to ensure that users can interact with your site when page content, like buttons or links, becomes visible. The goal is to make the time between First Contentful Paint and Time to Interactive as short as possible. If your page is set up to serve this content, but it is not interactive until the script has loaded, this could cause some users to become annoyed.

First Meaningful Paint

The First Meaningful Paint (FMP) measures when the primary content of a page is visible. The First Meaningful Paint is the time between when the page load is initiated and when the primary, above-the-fold, has been rendered. First Meaningful Paint is measured in the same way as First Contentful Paint, which is scored against real website data performance. Depending on how the page is set up to load, the First Meaningful Paint and First Contentful Paint could be the same score, however, in instances where an inline frame (iframe) is used, for example, the times will be different. A time under two seconds is considered fast and will be indicated in green. Anything between two and four seconds is moderate and will be indicated in orange. Lastly, anything over four seconds is slow and will be indicated in red.

First CPU Idle

The First CPU Idle marks the first time at which the page’s main thread is quiet enough to handle input. It can be considered the time between when the page is loading and when it is loaded. This score, like others in this list, is determined by comparing your page with data from other websites. A good First CPU Idle score is any time under 4.7 seconds and will be indicated in green. Any time between 4.8 and 6.5 seconds is moderately fast and will be indicated in orange. Lastly, any time over 6.5 seconds is slow and will be indicated in red.

Max Potential First Input Delay

The Max Potential First Input Delay is the duration, in milliseconds, of the longest device execution your users could experience. In other words, it is the amount of time it takes the browser to respond to user action, like clicking on a link or button, and processing that action. A fast Max Potential First Input Delay is anything under 130 milliseconds and will be indicated in green. Anything over 250 milliseconds is considered slow and will be indicated in red.

Accessibility Overall Score

The Accessibility Overall Score highlights opportunities to improve the accessibility of your website. This isn’t just about ensuring accessibility for users that have disabilities. Even the smallest fixes, such as making sure HTML elements are titled correctly and implemented can go a long way to ensure accessibility for all users landing on your web pages.

Best Practices Overall Score

The Best Practices Overall Score ensures that your page is following the industry’s best practices, such as valid JavaScript, image dimensions, encryption, and more. This section also provides an overview of the various elements that have passed or failed the Lighthouse audit, along with recommendations

SEO Overall Score

The SEO Overall Scores ensure that your page is optimized for search engine results ranking. For example, the Lighthouse audit will show that there are relevant titles, meta descriptions, successful status codes, and more, for the specified page. This section also includes items that did not meet the audit criteria and need to be reviewed for SEO improvement and optimization.

Error Threshold

Set an acceptable score range for a selected metric. If the score is beyond the range, the device will be marked as failed. To receive alerts based on the threshold you have set, select Yes in the Alert on Lighthouse errors field.

DNS Options

The DNS Options feature allows users to choose how domain name server (DNS) requests are conducted during a monitoring task.

To specify the mode of resolving hostnames, in the DNS Resolve Mode section, select one of the available modes. For more details on the feature configuration, see DNS Mode Options.

The Custom DNS Hosts section allows to set up the mapping of IP addresses to hostnames. IPv6 and IPv4 DNS resolution is supported.

To specify the mapping, enter the IP address and the hostname in the corresponding fields.

See also: DNS Mode Options.

 

Automate Lighthouse Monitoring for Better User Experience

It is important to realize that page speed and page load time, although closely related, should be viewed as separate factors when it comes to website performance. While page load time is focused on measuring how long it takes for all web page content to render, which is a factor when it comes to delivering a great user experience, users don’t wait for your web pages to completely load before navigating, clicking, or taking their next action(s).

The Lighthouse monitoring reports allow you to continually gauge and track how well your web pages are performing over time and ensure your pages meet the performance metrics, thresholds, and best practices set by PageSpeed Insights, giving you peace of mind that your customers and users are getting a fast web experience no matter where they are located.

Additional Resources on Lighthouse Metrics

For more detailed descriptions of the Lighthouse metrics, visit the following pages:

https://developers.google.com/web/tools/lighthouse

https://web.dev/performance-scoring/