Slack • 3 min read

How to Configure Slack Notifications with Lighthouse Monitoring

How to Configure Slack Notifications with Lighthouse Monitoring

With Foo you can monitor page experience on your website by automating Lighthouse audits. One major feature of our service is the integration of Slack to provide notifications, custom configured with thresholds that make sense to you and your team. Stay in the loop with Slack when performance and page experience degrades, improves or returns to normal.

The below assumes you've created an account on www.foo.software and are logged in. If you haven't added pages to be monitored by Lighthouse and want direction, read the post linked below.

Adding Slack Connections for Lighthouse Monitoring Notifications

By adding Slack connections up front, you'll be able to associate any page with a corresponding Slack connection that you add in this step.

Navigate to the Slack tab in your account on Foo. Click the "+" icon button in the Slack connections section. You'll be authenticated by Slack and prompted to choose either a channel or user to DM.

Account Slack Tab
Lighthouse Check Slack Authorization
Account Slack Tab - After Adding Connection

You can see in the example above that I added a connection to my #lighthouse Slack channel. You can send a test notification for any connection and choose an example template from some of the possibilities ("all scores", "degradation",
"improvement"). The "back to normal" type of notification is omitted from the testing options because its template is redundant.

Adding Slack Connections to Pages for Lighthouse Monitoring Notifications

Navigate to "page management" from the account dropdown in the main, top navigation or directly by clicking here. In the example above I added a connection to my #lighthouse connection. In the "advanced" tab seen when either creating or editing a page, we can choose to connect with my #lighthouse Slack connection as seen below.

Create Page and Configure Slack Connection

By making this connection at the page level, any Lighthouse audit associated with it will post to the connected Slack channel a notification regarding results of the Lighthouse audit. This notification will be sent only if a score falls within the configured thresholds. These thresholds are configured in this section of the page management dashboard and will trigger notifications for the following scenarios. Let's assume each audit is configured with the default as 10.

  • An audit score above the most recent 20 run average by 10 points (or the configured number of points): Sends a notification that scores have improved for the given audit (performance is an audit, for example). Consecutive improvements thereafter will not trigger a notification unless preceded by a dip to normal range.
  • An audit score below the most recent 20 run average by 10 points (or the configured number of points): Sends a notification that scores have degraded for the given audit.
  • An audit score with a previous run below the most recent 20 run average by 10 points (or the configured number of points) as detailed above is followed by an improvement within the average range: Sends a notification that scores returned to normal for the given audit.

If we check off "every run", we will receive a Slack notification with all scores on every Lighthouse audit and none of the above will apply.

"Now, we Wait..."

We'll only receive notifications after 20 audits so that we have an accurate average to weigh new scores against thresholds (unless "every run" was checked). Unless "every run" was checked, we will only receive audits in 3 scenarios as detailed in the previous section of this post, but to summarize below:

  • The most recent Lighthouse audit was an improvement.
  • The most recent Lighthouse audit was a degradation.
  • The most recent Lighthouse audit returned to a normal range after a degradation.
Example Lighthouse Slack Notifications

Note: in the example above, the page name is "Automated Lighthouse Check"... sorry for any confusion 😬.

Conclusion

I hope this tutorial was helpful. For more tidbits about using our services, checkout the tutorial page.