DEV Community

Cover image for First Contentful Paint (FCP), Start Render, First Paint. How to properly measure the beginning of page rendering?

First Contentful Paint (FCP), Start Render, First Paint. How to properly measure the beginning of page rendering?

Boris Schapira on September 18, 2019

How to properly measure how fast a web page starts to display its content? Several Web performance metrics exist to answer this question, including...
Collapse
 
rick_viscomi profile image
Rick Viscomi

Nice overview! I'd like to see a movement towards more user-centric paint metrics. FCP was a step in the right direction but I think we can do better. Largest Contentful Paint (LCP) looks promising: web.dev/largest-contentful-paint

Collapse
 
borisschapira profile image
Boris Schapira

LCP is promising for advanced needs.

However, I think it's missing the point by focusing on one element. Several adjacent elements painted almost simultaneously are not considered to be the same visual element, whereas for a user, they are (first Gestalt law, regarding proximity).

In addition, the metric is complex to implement as, for example, every image needs to have a Timing-Allow-Origin HTTP header. The server configuration required for that will only be achieved by people who are already involved in Web Performance.

The Start Render is much easier to evaluate and can be collected on any public page right now without any implementation costs. Much easier to compare your web performance to others.