Understanding Key Web Performance Metrics: FP, FCP, FMP, LCP, TTI, and More

Measuring and diagnosing web performance bottlenecks is a core skill for professional front‑end engineers. This article introduces the most common performance terminology, allowing readers to understand which factors influence loading speed.

Web performance cannot be captured by a single number because page loading is a process with many critical moments. Different products may prioritize different moments, so the same metric can be vital for one site and irrelevant for another.

Using https://www.google.com.hk as an example, Lighthouse reports and Chrome DevTools screenshots illustrate how performance data is presented.

Key metrics explained:

FP (First Paint) : the first time any pixel is rendered on the screen, excluding the default background.

FCP (First Contentful Paint) : the first time meaningful content (text, images, SVG, canvas) appears.

FMP (First Meaningful Paint) : an algorithmic estimate of when the main content becomes visible; it may be imprecise.

LCP (Largest Contentful Paint) : the moment the largest visible element in the viewport is rendered.

TTI (Time to Interactive) : when the page becomes fully interactive, with the main thread idle for less than 50 ms.

TTFB (Time to First Byte) : the time until the browser receives the first byte of the response.

FCI (First CPU Idle) : the first moment the main thread is idle enough to respond to user input.

FID (First Input Delay) : the delay between a user's first interaction and the browser's response.

DCL (DOMContentLoaded) and L (load) : timestamps for DOM ready and full page load events.

Speed Index : the average time at which visible parts of the page are displayed.

FP and FCP tell you when rendering starts; FMP and LCP indicate when the page becomes useful to the user. TTI and FCI further describe when the page is truly usable, while FID measures the actual perceived delay for the first user interaction.

Capturing FID can be as simple as registering a click, mousedown, keydown, touchstart, or pointerdown listener in the page’s head and subtracting the event’s creation time from the current timestamp, e.g.:

performance.now() - event.timeStamp

Different products emphasize different metrics: content‑focused sites (e.g., blogs) care most about FMP, while interactive applications (e.g., admin dashboards) prioritize TTI.

In conclusion, understanding FP, FCP, FMP, LCP, TTI, TTFB, FCI, FID, DCL, L, and Speed Index equips developers with the vocabulary to interpret performance reports and make informed optimization decisions.