The google pagespeed insights API returns multiple metrics about the website performance. However, in many of them, there is an 'observed' part and a part without observed:
"observedLargestContentfulPaint": 3178,
"observedLargestContentfulPaintTs": 2181438287221,
"largestContentfulPaint": 3520
Is there any documentation available (cause I couldn't find any, except for the original PULL request, but even that doesn't explain the difference), that explain the difference between the two values? Does it has something to do, with the LCP itself and the delivery of a javascript event? Same question applies to other 'observed' metrics:
"observedFirstContentfulPaint": 1731,
"observedFirstPaint": 1731,
"firstMeaningfulPaint": 815,
and also very interesting:
"observedDomContentLoaded": 2436,
Thank you very much for your time!
The following is not a complete answer (and could actually be slightly wrong but should give you the idea!) but as I understand it:-
"observedLargestContentfulPaint": This is the raw data that is received from the tab trace for largest paint.
"largestContentfulPaint": They discount images that are "low priority" as these are very likely to be off screen. They then take the end time for any remaining items and find the largest one. This is so they only analyse the "above the fold" content (or the best approximation they can make)
Now for the other items they are just different metrics and not really related:-
"firstMeaningfulPaint": This is an attempt to see when the "meaningful" content on the page is rendered. So say you have a hero image and a title above the fold it is waiting until those items are rendered. There may still be smaller things such as social icons loading in etc. Please note in v6 of PSI this has been deprecated as it wasn't a very consistent metric.
"observedFirstPaint": This is literally the first time something gets painted to the screen. What is strange in the numbers you showed is that this should nearly always be a smaller number than "firstMeaningfulPaint" as first paint can be anything painted to the screen.
"observedDomContentLoaded": When the DOMContentLoaded event fires.