- First Contentful Paint (FCP)
- First Meaningful Paint (FMP)
- First Interactive (FI)
- Time to Interactive (TTI)
- Consistently Interactive (CI)
Below is a list of definitions I pulled from Chrome, Lighthouse, and other random sources.
Paint Timing API: these "paint" metrics listed below mark the points when the browser first renders pixels to the screen. (cite)
FP marks the point when the browser renders anything that is visually different from what was on the screen prior to navigation (i.e. even one little pixel change).
FCP is similar to FMP (below) but differs in that FCP captures meaningless paints, like headers and nav bars. From Google: "FCP is the point when the brwoser renders the first bit of content from the DOM, which may be text, an image, SVG, or even a <canvas> element" (source). In sum, if you want to know when the first pixel is painted, use this metric. But if you care about when the first meaningful object is painted, use FMP.
First Meaningful Paint is the time when a page's primary content appears on the screen. It's essentially the paint after which the biggest above-the-fold layout change has happened, and web fonts have loaded.
Chrome uses a "layout-based" approach to calculate this metric (i.e. it aims to answer the question, "is this useful?"). That means, the FMP metric is a function of when the "biggest layout change" (discounting content that is below the fold) + meaningful web fonts have loaded.
You may notice that this is a very hard metric to track because one cannot simply use the same content for every website to determine what is meaningful (every website has a different definition). Webmasters and frontend engineers have to find their own "meaningful" content to measure on a per-page basis (add'l reading).
See FCP above for comparison metric and see web font discussion below for context about font loading.
Previously known as Time-to-Interactive, First Interactive (FI) measures when all necessary scripts have loaded and the CPU is idle enough to handle most user input, as defined by:
- most (not necessarily all) UI elements on the screen are interactive
- the page responds, on average, to most user input in a reasonable amount of time
Note: this measurement is listed as beta, it is still under discussion. link
TTI represents the time it takes for the page to become interactive from the perspective of the user and not necessarily when the page is officially done loading. That's an important distinction... remember we care about perceived loading time, not actual loading time. TTI identifies the point at which the page's initial JS is loaded and the main thread is idle (free of long tasks). It's the point at which your application is both visually rendered and capable of reliably responding to user input.
CI is a more comprehensive measurement than FI in that it covers not only everything shown on the page, but that the page yields control back to the main thread at least once every 50ms, giving the browser enough breathing room to do smooth input processing. In sum, it's the point at which most network resources have finished loading and the CPU is idle for a prolonged period.
Note: this measurement is listed as beta, it is still under discussion. link