Document how to optimize CLS for amp-access and amp-subscription

[sebastianbenz]

We need guidance on how to avoid content shifts on load when using amp-access / amp-subscriptions. Not sure whether this should go into the respective component docs or whether we should have a standalone guide on how to avoid CLS issues with AMP.

//cc @CrystalOnScript @patrickkettner @kristoferbaxter

[patrickkettner]

@sebastianbenz @kristoferbaxter who would be the right person to provide this guidance?

[kristoferbaxter]

I should be able to help with this during the current week. Will schedule some time.

[sebastianbenz]

@patrickkettner can you look into this as well. Playing around with amp-access and the different options should give you an idea of the CLS challenges.

[gilbertococchi]

This page https://www.bbc.com/urdu.amp seems to be using amp-access in the viewport perhaps to handle consent or something and this cause a CLS over threshold alone.

[kristoferbaxter]

Pinging @ampproject/wg-performance on this thread too, we should take a look at amp-access and see if we can:

1. Improve the default behaviour
2. Provide better guidance around usage
3. Prohibit usage that would break CWV metrics
4. Make it more clear to document developers when usage will likely cause poor metrics results.

[sebastianbenz]

Looking at https://www.bbc.com/urdu.amp it seems like ads are hidden by default, but will be shown for "normal users" causing the CLS. This is a typical example for where it is impossible to avoid CLS for all your users when using amp-access.

Publishers in this case have a few options:

• optimize the default for the majority of their users
• avoid showing/hiding content in the first viewport (at least on mobile)

But depending on their use case this might not be feasible. We should explicitly document these issues though for amp-access and amp-subscription. Maybe a separate guide we can link to from both component docs would be good.

[gilbertococchi]

Good point.

It would be great to at least warn about the potential issues while using these components in the first viewport potentially causing CLS issues.

I am not sure about the approach to avoid showing content using these components in the viewport because I've seen amp-access/amp-suscription being used to detect login state to be updated in the header without causing any Layout Shift or minimal.