When a user navigates to a web page, they are typically looking for visual feedback to measure them that everything is going to work as expected.
- Is it happening? Did the navigation start successfully? Has the server responded?
- Is it useful? Has enough content rendered that users can engaged with it?
- Is it usable? Can user interact with the page, or is it still busy loading?
- Is it delightful? Are the interactions smooth and natural, free of lag and jank?
Metrics
- First Paint (FP): is the time when the browser first rendered after navigation. This excludes the default background paint, but includes non-default background paint.
- First Contentful Paint (FCP): is when the browser first rendered any text, image, non-white canvas or SVG.
- First Meaningful Paint (FMP): is the paint after which the biggest above-the-fold layout change has happened, and web fonts have loaded.
- Hero Rendering Times (HRT): is a combination of when the largest <img> and background image in the viewport are rendered. The composite metric is computed by taking the maximum of the biggest image time (or the biggest background image).
- Time To Interactive (TTI): is when the page is visually rendered and capable of responding to user input
Typically we consider the First Meaningful Paint, Hero Rendering Times and Time To Interactive for page loading.