Posted

1 minute read

First Paint (FP) shows the time it took for something to happen, anything at all, however this can be not so useful, as this first render, may not be very useful for the user, and for the overall experience.

First Paint entry marks the first key moment developers care about in page load – when the browser has started to render the page. More details here https://w3c.github.io/paint-timing/#first-paint

How to improve the First Paint (FP)

One idea is to trim the size of your JavaScript bundles in order to improve the FP, especially for slow networks like 3G or Edge, which are still available in areas with poor connectivity, or on low-end mobile phones.
Have a look which functionality you use from a library, and try to mimic that in a much simpler fashion.

An improvement to First Paint (FP) is the First Contentful Paint (FCP) which helps you understand the time it took to render something useful for the user.

First Paint and First Contentful Paint metrics can be identical on fast websites, but on more complex websites, with various client and server side rendering, the First Contentful Paint would be the best metric to use.

More details on how to improve issues on your website can be found by running tests with KissFront.