First Contentful Paint

The First Contentful Paint (FCP) aims to measure the time between the start of a navigation and when the first contentful paint happened.

This metric is available in RUM & synthetic monitoring, but not in soft navigations.

Nuances of the First Contentful Paint metric

There are some important nuances when it comes to the First Contentful Paint metric:

FCP breakdown

The FCP metric doesn't officially have a breakdown. However, by using LoAF information, we're able to approximately tell where time was spend.

The FCP breakdown includes the actual TTFB of the document and will then use LoAF information to tell where the rest of the FCP delta time is spent. Any remaining time is considered idle/waiting time.

  • document TTFB (the actual TTFB)
  • idle/waiting time (the sum of time where the browser wasn't doing any main thread work according to LoAF)
  • work duration (sum of all LoAF tasks excluding rendering cycles)
  • style & layout time (sum of style and layout work)

See the web.dev docs to see how we calculate these.

The FCP breakdown information is usefull as each will push back FCP. Improving each individual FCP component should lead to FCP improvements. In other words, the FCP breakdown can be used to see if you successfully managed to reduce:

  • the impact of render blocking resources (which is likely to contribute to idle/waiting time if no other tasks were running during that moment).
  • the sum of the amount of JS work;
  • the sum of the amount of style & layout time.

Continue reading about First Contentful Paint

Want to learn more about First Contentful Paint? Check our blog, check the web.dev FCP article or keep an eye out on the changes to the FCP metric.

Table of Contents