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): Marks the time when the largest visible content element (image,
video, or block of text) finishes rendering in the viewport. Measures loading performance. A good LCP should
occur within 2.5 seconds of when the page starts loading.
Interaction to Next Paint (INP): Tracks the latency of all user interactions (clicks, taps,
keyboard input) throughout the page's lifecycle and reports the worst-case delay. Measures interactivity. A good
INP should be 200 milliseconds or less.
Cumulative Layout Shift (CLS): Quantifies how much visible page content shifts unexpectedly
during the entire lifespan of the page, capturing jarring movements caused by late-loading resources or dynamic
content. Measures visual stability. A good CLS should be 0.1 or less.
First Contentful Paint (FCP): Records the time from navigation start until the browser renders
the first piece of DOM content (text, image, SVG, or non-white canvas). Measures loading performance. A good FCP
should occur within 1 second of when the page starts loading.
First Meaningful Paint (FMP): Captures when the page's primary above-the-fold content has
finished rendering, signaling the moment the page appears useful to the user. Measures loading performance. A
good FMP should occur within 1 second of when the page starts loading.
Speed Index (SI): Measures how quickly the visible area of the page is populated with content,
calculated by analyzing video frames of the page load to determine visual completeness over time. A good SI
should be 3.4 seconds or less.
Time to Interactive (TTI): Identifies the point at which the page is fully loaded and the main
thread is idle enough to reliably respond to user input within 50 ms. Measures interactivity. A good TTI should
be 5 seconds or less.
First Paint (FP): Records the moment the browser renders the first pixel that is visually
different from the previous screen (e.g. a background color change), even before any meaningful content appears.
Measures loading performance. A good FP should occur within 1 second of when the page starts loading.
First Interactive (FI): Indicates when the page has loaded enough resources and the main thread
is sufficiently idle for a user to begin interacting with minimal delay. Measures interactivity. A good FI should
be 5 seconds or less.
Total Blocking Time (TBT): Sums the blocking portions of all long tasks (those exceeding
50 ms) between FCP and TTI, reflecting how much the main thread was unavailable for user input. 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.
