This website is designed to help you understand and utilize the capabilities of the Lighthouse DevTool. Lighthouse
is an open-source, automated tool for improving the quality of web pages. You can use it to audit performance,
accessibility, progressive web apps, SEO, and more.
Throughout this course, we will explore various features of Lighthouse and demonstrate how to use them to enhance
your web development skills. Each section will provide theoretical insights and hands-on exercises to ensure you
gain practical experience.
User Flows in Lighthouse
Historically, Lighthouse has analyzed the cold pageload of a page. Starting in 2022 (Lighthouse v10), it can
analyze and report on the entire page lifecycle via "user flows".
You might be interested in flows if…
… you want to run Lighthouse on your whole webapp, not just the landing page.
… you want to know if all parts of the web experience are accessible (e.g. a checkout process).
… you want to know the Cumulative Layout Shift of my SPA page transition
In these cases, you want Lighthouse on a flow, not just a page load.
The three modes: Navigation, Timespan, Snapshot
Lighthouse can now run in three modes: navigations, timespans, and snapshots. Each mode has its own unique use
cases, benefits, and limitations. Later, you'll create a flow by combining these three core report types.
Navigation mode analyzes a single page load. It should feel familiar as all Lighthouse runs
prior to v9.6.0 were essentially in this mode. Even in v9.6.0 and onwards, it remains the default.
Timespan mode analyzes an arbitrary period of time, typically containing user interactions.
Snapshot mode analyzes the page in a particular state.
Mode
Use Cases
Limitations
Navigation
✅ Obtain a Lighthouse Performance score and all performance metrics.
✅ Assess Progressive Web App capabilities.
✅ Analyze accessibility immediately after page load.
🤔 Cannot analyze form submissions or single page app transitions.
🤔 Cannot analyze content that isn't available immediately on page load.
Timespan
✅ Measure layout shifts and JavaScript execution time over a timerange including interactions.
✅ Discover performance opportunities to improve the experience for long-lived pages and SPAs.
🤔 Does not provide an overall performance score.
🤔 Cannot analyze moment-based performance metrics (e.g. Largest Contentful Paint).
🤔 Cannot analyze state-of-the-page issues (e.g. no Accessibility category)
Snapshot
✅ Analyze the page in its current state.
✅ Find accessibility issues deep within SPAs or complex forms.
✅ Evaluate best practices of menus and UI elements hidden behind interaction.
🤔 Does not provide an overall performance score or metrics.
🤔 Cannot analyze any issues outside the current DOM (e.g. no network, main-thread, or performance
analysis).
Web Vitals
Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to
delivering a great user experience on the web.
The Web Vitals initiative aims to simplify the landscape, and help sites focus on the metrics that matter most, the
Core Web Vitals.
Core Web Vitals
Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners,
and will be surfaced across all devtools. Each of the Core Web Vitals represents a distinct facet of the user
experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.
Largest Contentful Paint (LCP): Measures loading performance. A good LCP should occur within
2.5 seconds of when the page starts loading.
Interaction to Next Paint (INP): Measures interactivity. A good INP should be 200 milliseconds
or less.
Cumulative Layout Shift (CLS): Measures visual stability. A good CLS should be 0.1 or less.
First Contentful Paint (FCP): Measures loading performance. A good FCP should occur within 1
second of when the page starts loading.
First Meaningful Paint (FMP): Measures loading performance. A good FMP should occur within 1
second of when the page starts loading.
Speed Index (SI): Measures loading performance. A good SI should be 3.4 seconds or less.
Time to Interactive (TTI): Measures interactivity. A good TTI should be 5 seconds or less.
First Paint (FP): Measures loading performance. A good FP should occur within 1 second of when
the page starts loading.
First Interactive (FI): Measures interactivity. A good FI should be 5 seconds or less.
Total Blocking Time: Measures the total amount of time that a user is blocked from interacting
with the page. A good TBT should be 300 milliseconds or less.
To ensure you're hitting the recommended target for these metrics for most of your users, a good threshold to
measure is the 75th percentile of page loads, segmented across mobile and desktop devices.
