How is CLS Distance Fraction calculated?

[Tony “Tiggerito” McCreath]

I'm trying to work out the distance fractions for CLS sources.

This documentation seems to be the best.

So is Distance first calculated from the change in the element's top or left position? e.g.

Math.abs(source.currentRect.top - source.previousRect.top);

"The distance fraction is the greatest distance any unstable element has moved in the frame (either horizontally or vertically) divided by the viewport's largest dimension (width or height, whichever is greater)."

So, say a viewport was wider than it was tall. If an element's greatest move was vertical, is it the vertical change divided by the width that decides the distance fraction? That seems strange.

[Michal Mocny]

I had to check the code!

It looks like we:

- Calculate a move distance vector, based on previous and new rect (a lot of math to get these)

- Then use the max of the x and y move distance to get a single absolute number (in pixels)

- We keep track of the current max move distance across all shifts in each frame

- We use the larger of the width/height of the viewport as a basis for converting move distance into move fraction.

- We later we use move fraction * impact area to get the overall score delta.

What does this mean?

I think that if a button moves halfway down the page, if the page is taller than it is wide, the fraction would be 50%.  But if it is wider than it is tall, it will be less than 50%.  Which does feel odd.

On the other hand, it means that if an element moves either vertically or horizontally by the same amount, it will end up with the same overall score (assuming it moves fully to a non-overlapping region).  If we only compared x to width and y to height, it would score differently depending on direction.

Perhaps one way to resolve this would be to use the combined x,y move vector and compare to the hypotenuse of the page dimensions...  Not sure if that was ever explored in the past.

Its weird, but I think it's fine.  Do you have any examples where it isn't meeting expectations?

-Michal

[Tony McCreath]

Sorry for the late reply.

I've been using the web-vitals library with attribution data to report on the primary CLS element, to help determine what is causing the CLS. Unfortunately, this element is typically the victim of a shift and not the cause.

Often the cause is classed as a small shift in itself, say an element expanded 50px, so it did not actually "shift", but it causes a larger element below it to move and trigger a large shift.

So, I'm trying to work out if there is a way to find the cause element.

End's up it is trickier than I first expected: https://github.com/GoogleChrome/web-vitals/issues/309 

[Grzegorz Dychus]

Dne st 8. 3. 2023 22:45 uživatel 'Michal Mocny' via web-vitals-feedback <web-vital...@googlegroups.com> napsal:

--
You received this message because you are subscribed to the Google Groups "web-vitals-feedback" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web-vitals-feed...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web-vitals-feedback/900c8438-0be3-4f22-8f9b-2fcf75d8ed60n%40googlegroups.com.