[Layout Shift Metrics] CLS adhesion and inconsistency questions

[Jeremy Sadwith]

Hey Chrome Team,

We're an Ad Tech company and have been working over the past month or two to make our ad formats more friendly to the CLS score but have been running into walls with a couple of our investigations. I wanted to reach out to get some items clarified so we have a better understanding of whether or not what we're seeing is accurate.

1. Should an adhesion ad format that changes size cause a layout shift score increase, or should it only affect ad formats within the page of the content itself?

Example 1: https://jeremy.dev.kargo.com/test/cls/anchor.html

Example 2: https://jeremy.dev.kargo.com/test/cls/breakaway.html

2. Assuming this isn't a bug in the metric and that Chrome is calculating the shift correctly for adhesion formats, what would be the reasoning for why a visually similar animation would cause no shift at all?

Example: https://jeremy.dev.kargo.com/test/cls/breakout.html

We're also sometimes seeing differences based on the size of the device we're emulating - is it expected that a larger screen size would show record less shift than one with a smaller screen?

Thanks,

Jeremy

[Philip Walton]

Hey Jeremy, a few comments inline, but in general I'd recommend a guide we recently published on Debugging Layout Shifts. This guide should probably help answer future questions.

On Thu, Mar 18, 2021 at 2:14 PM 'Jeremy Sadwith' via web-vitals-feedback <web-vital...@googlegroups.com> wrote:

Hey Chrome Team,

We're an Ad Tech company and have been working over the past month or two to make our ad formats more friendly to the CLS score but have been running into walls with a couple of our investigations. I wanted to reach out to get some items clarified so we have a better understanding of whether or not what we're seeing is accurate.

1. Should an adhesion ad format that changes size cause a layout shift score increase, or should it only affect ad formats within the page of the content itself?

Example 1: https://jeremy.dev.kargo.com/test/cls/anchor.html

Example 2: https://jeremy.dev.kargo.com/test/cls/breakaway.html

Any time any element's start position changes from one frame to the next, it's a layout shift. It doesn't matter whether it's inline in the document or fixed position to the viewport.

In your examples, the ad container is changing sizes half-way through the animation, which looks to me like it's start position is changing as well (e.g. it's shifting down or shifting right).

If the ad were positioned fixed to the top/left, then the same size change probably wouldn't be a layout shift because its start position wouldn't be changing (e.g. the bottom would be shifting up rather than the top shifting down).

Arguably the user experience is the same in both cases, but at the moment we don't have a good way of classifying layout shifts for elements that change size (it may be possible in the future).

2. Assuming this isn't a bug in the metric and that Chrome is calculating the shift correctly for adhesion formats, what would be the reasoning for why a visually similar animation would cause no shift at all? 

Example: https://jeremy.dev.kargo.com/test/cls/breakout.html

In this example, the start position of the container doesn't appear to move at all. That's why it's not considered a layout shift.

 

We're also sometimes seeing differences based on the size of the device we're emulating - is it expected that a larger screen size would show record less shift than one with a smaller screen?

Yes, this is expected. The score is directly a function of the % of the viewport that shifted. See https://web.dev/cls/#impact-fraction

 

Thanks,

Jeremy

--
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/dc6daedf-7b19-43fc-8d8c-1d6b57ee678cn%40googlegroups.com.