FCP not getting logged due to Implementation differences

[yudeeeth]

Issue:

While migrating from an old experience to a newer one, the loading animation available in react was replaced with loading symbol from fluent web-components. The fluent team has implemented the loading spinner component using divs instead of svg. This will end up being more performant than an svg, but will not trigger FCP as this is not considered contentful.

based on the definition provided in mdn docs

First Contentful Paint (FCP) is when the browser renders the first content from the DOM, providing feedback to the user that the page is loading. Completing the first contentful paint answers the question "Is it happening?"
reference

This should be considered as FCP as its a signal to lets the user know that the page is loading. But it does not log due to the implementation. There should be a way to specify an element with an attribute as the first content so FCP can log correctly in such cases where the content is different from the defined set of rules. i.e. an image can be made out of a couple of divs to improve performance but will not log as FCP.

In case loading icon should not be considered contentful, then there should be a way to let the browser know that, so it isn't treated as such because its made of svg.

Clarification:

Could you please clarify if loading icons should be considered FCP? If so then we need a way to trigger FCP manually for such cases. If not there needs to be a way to specify that the icons does not constitute a contentful paint.

[jasonwilliams]

While migrating from an old experience to a newer one, the loading animation available in react was replaced with loading symbol from fluent web-components. The fluent team has implemented the loading spinner component using divs instead of svg.

Do you have a test case you could put together and share? I’m not sure if everyone on here is well versed with the fluent framework, and I don’t know what you mean by “old experience” to “new experience”.

This will end up being more performant than an svg, but will not trigger FCP as this is not considered contentful.

I’m surprised the SVG was generating FCP in the first place as that’s usually not picked up, unless it’s an image tag pointing to an SVG.
Looks like SVG drawing does support sending firstContentfulPaint timings
I assume the div is using some styling and CSS animation for the spinner which wouldn’t generate a paint event as it’s not contentful like you say.

This should be considered as FCP as its a signal to lets the user know that the page is loading. But it does not log due to the implementation. There should be a way to specify an element with an attribute as the first content so FCP can log correctly in such cases where the content is different from the defined set of rules.

So you’re right that the implementation changing has now caused the FCP signal not to send, but it does raise the question whether an empty div with a CSS animation is “content”. In your scenario I’d argue the loading spinner is a “first-paint” and the page content is your “first-contentful-paint”.

I think it’s unlikely there’ll be an API to include certain content or even set what is FCP as it can leave room open to interpretation and become messy.

[clelland]

<div> elements alone may or may not trigger FCP, depending on whether they have "content". The definition of contenful is here, and that would include a <div> with text content, for instance, or one with a background image. If the loading icon is created completely from empty divs with only coloured backgrounds, then the FCP algorithm won't pick that up as contentful.

As @jasonwilliams says, this will trigger FP regardless of how it is implemented. Element timing could also be used to track that element if you know that it's important.

[yudeeeth]

Thank you for your responses!

So you’re right that the implementation changing has now caused the FCP signal not to send, but it does raise the question whether an empty div with a CSS animation is “content”. In your scenario I’d argue the loading spinner is a “first-paint” and the page content is your “first-contentful-paint”.

I understand that normally an empty div with css animation is not content, but let's say I have a brand icon which I implement using divs and css rather than using an svg. Now this should be content ideally according to us, but according to the definition in FCP, it wouldn't be content. My only argument here being, how can the same experience be considered contentful and NOT contentful simply based on implementation. Which is why I suggested having a mechanism to somehow inform FCP that.

Even in my case where loading icon can be considered as not contentful, would be nice if I can ensure the svg does NOT log FCP either, as the experience is the same.

As @jasonwilliams says, this will trigger FP regardless of how it is implemented. Element timing could also be used to track that element if you know that it's important.

Thank you for this, will try to see if I can use this temporarily.

Do you have a test case you could put together and share? I’m not sure if everyone on here is well versed with the fluent framework, and I don’t know what you mean by “old experience” to “new experience”.

Will setup an example to share, but even without it, I believe we have understood the main point.

[mmocny]

Could you link to an example of this loading icon?

Are you creating a SVG-like graphic entirely out of just dom content? Or does the Div have some image / textContent attached which is animating?

I think this distinction is important to understand.