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 (time where the browser wasn't doing any main thread work according to LoAF)
  • work duration (time it takes to load the LCP resource itself - if there is one, otherwise 0)
  • style & layout time (time between when the LCP resource finished loading until the LCP element is fully rendered)

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.