Automated Lighthouse Check: Getting Started
Foo's Automated Lighthouse Check can be used to monitor the overall quality of your website and provide a historical record of changes. You can track SEO, performance, accessibility, best practice and progressive web app standards. It uses Google's Lighthouse under the hood to provide a granular set of metrics and scores in these categories.
To get started follow these steps to start tracking web pages.
- Register for an account.
- Add URLs you'd like to track in the dashboard.
- For a detailed view of of a page's results you can click into the "more" link of a given page results card in the dashboard screen.
- You can trigger audits manually by clicking the refresh icon at the bottom right of the screen once in the URL details page by following the previous step.
- View full page reports by clicking "view full report" for any results card in the URL details page.
- From this detail page you can click the "edit" button in the top right to update default Lighthouse settings, add extra headers, and Slack alerting.
Note: With free accounts you can trigger Lighthouse audits manually and keep a record of changes, however for automatic runs you'll need a premium account. You can choose this route whenever you feel comfortable and cancel anytime. Sign up for a premium account by navigating to the pricing page.
Google's Web Vitals is becoming the standard for measuring page experience. As of version 9.4 of Next.js, it provides a built-in method for capturing and reporting Core Web Vitals. This post illustrates how to collect Web Vitals metrics from a Next.js app and send them to a service for storage.