How should we handle skeleton screens?

Describe the bug

A skeleton screen is used as a placeholder while users wait for a page to load. This progress indicator is used for full page loads and reduces the perception of a long loading time by providing clues for how the page will ultimately look.
https://www.nngroup.com/articles/skeleton-screens/

These are more useful to the user because they show a "shadow" of the website layout before content has come in. However, because the grey areas are usually in the same position of actual content we may not get a PerformanceContainerTiming event when content does eventually come through.

There may not be anything we can do about this and that's how it is, but this is a good time to discuss it whilst changes can be made.

LCP already ignores low-entroy images so we should be leveraging the same heuristics that LCP use. If that is the case we are fine.

We would need the same spec text written here for LCP:

To Reproduce

• Clone the repo
• npm i; npm run start
• Navigate to the skeleton-layout example
• Open devtools and observe the entry being recorded

Start by running npm i; npm run start, opening the skeleton-layout example, and observing the recorded entry in devtools. Read the linked LCP heuristic and specification text, then determine whether skeleton placeholders prevent a PerformanceContainerTiming event; done means establishing whether the existing heuristic is sufficient or documenting the required spec change.