As implementation begins for First Contentful Paint (FCP) in WebKit, the question came up over whether First Paint and First Contentful Paint are really all that different, and whether the paint timing API should include First Paint at all.
I looked at several sites loading on different browsers on WebPageTest to understand this better. Here are some examples I found illustrative. Each browser name links to the WebPageTest run with full filmstrips.
Coronavirus COVID-19 Global Cases by Johns Hopkins CSSE
This site shows divs with animating background colors and sizes as a loading bar. After several seconds of loading, it shows the text "Loading..." under the bar, and after several seconds more it fully loads the content. WebKit's paint strategy is to wait to paint until the text is displayed; Chrome and Firefox display the loading bars immediately.
| Browser | First Paint | First Contentful Paint | Fully Loaded |
|---|---|---|---|
| Firefox |  |
 |
 |
| Chrome |  |
 |
 |
| Safari |  |
 |
The Bing site has a searchbox, a logo, and a background image. Firefox and Chrome render the search box first, while WebKit paints after the image and background gradient CSS are loaded.
| Browser | First Paint | First Contentful Paint | Fully Loaded |
|---|---|---|---|
| Firefox |  |
 |
 |
| Chrome |  |
 |
 |
| Safari |  |
 |
 |
Youtube puts up placeholder images before the main content displays. WebKit's paint strategy is to wait until some additional content (in this case the text captions of the videos) is loaded before painting. Chrome and Firefox paint the placeholder divs with no content.
| Browser | First Paint | First Contentful Paint | Fully Loaded |
|---|---|---|---|
| Firefox |  |
 |
 |
| Chrome |  |
 |
 |
| Safari |  |
 |
Turbotax has a loading spinner with no text or images. Safari does not show the spinner; Chrome and Firefox do.
| Browser | First Paint | First Contentful Paint | Fully Loaded |
|---|---|---|---|
| Firefox |  |
 |
 |
| Chrome |  |
 |
 |
| Safari |  |
 |