Amphtml: amp-subscriptions for paywalls causes increase in CLS score

[baconjulie]

What's the issue?

When using amp-subscriptions to render a Paywall we see a consistent increase in CLS scores when the paywall displays. It appears that out of the box, the dialog box animates up from the bottom of the window with a transition. When testing the same article with and without the paywall, we see CLS score go from 0 to 0.406. We are actively trying to get our web vitals in a healthy state, but are unsure of how to get around this issue. We could not find anything in the documentation about turning off the transition.

AMP article with no dialog:

AMP article with dialog:

Our code looks along the lines of:

    <section subscriptions-section="content-not-granted">
      <div
        subscriptions-dialog=""
        subscriptions-service="local"
        subscriptions-action="none"
        subscriptions-display="data.action = 3"
      >
      ... paywall markup

How do we reproduce the issue?

1. Enter dev tools incognito with a mobile emulator such as an iPhone X

2. View an AMP article on washingtonpost.com until you trigger the paywall. E.g. https://www.washingtonpost.com/opinions/the-forgotten-story-of-how-george-hw-bush-won-over-ronald-reagan/2018/12/04/b3c2cce0-f7f4-11e8-863c-9e2f864d47e7_story.html?outputType=amp

3. Run lighthouse audits for mobile performance. Note that CLS is very high despite implementing AMP best practices.

What browsers are affected?

Chrome, mobile devices

Which AMP version is affected?

We are using long term stable: https://cdn.ampproject.org/lts/v0.js

This may have been an existing issue, but it is recently flagged in search console "Core Web Vitals" for most of our AMP articles.

[jpettitt]

We will need to research if it's the transition or the the presence of the delayed popul that's causing this. If it's the transition we can change the CSS to make it just appear. If it's the popup rather than how it's rendered it's going to be more of of an issue since we can't know if the popup is needed until after the page is visible and we check for entitlements.

[jpettitt]

This is intended behavior. CLS measures layout changes which users perceive as negative. Putting an subscription ad on the page is inherently a layout shift and there is no way to get around that. Normally the guidance for ads is to reserve space to avoid the shift however since it's impossible to know if the subscription ad is needed until the entitlements calls resolve we can't do that.

The ad in question is larger than the recommended sticky ad size limits for AMP and that's part of why the score is bad. Making it smaller will improve the score.

[baconjulie]

@jpettitt @nainar @alanorozco thanks for the follow up! What is the official recommendation from Google for publishers who need to display a Paywall on content to support their journalism? As you mention, there is no way to predict this at runtime and reserve the space. That said, is there a specific maximum size the Paywall should be? Is it possible to achieve a "Good" CLS score with a Paywall? I was not aware that a Paywall was considered to be an Ad by AMP since it is a separate module altogether in the framework for subscriptions. I imagine we are not the only news organization using the out-of-the-box AMP Paywall and seeing dissatisfactory CLS scores.

We're super interested in working with your team to figure out what refinements we should make on our end, if that is a smaller paywall container could you please advise on recommended dimensions or who we can connect with on this issue? Majority of our AMP pages are flagged as "Bad CLS" in the Search Console Core Web Vitals tool due to this problem.

Thank you!

[jpettitt]

Reopened for discussion.

cc @cramforce @dvoytenko thoughts?

[cramforce]

For absolute and/or fixed positioned elements one could render them off screen first and then move them onto the screen using translate. That would be measured as a 0 CLS.

[kristoferbaxter]

@patrickkettner and I spent some time offline looking at this yesterday and he has a scheduled followup to get more details.

We were unable to reproduce a CLS impact from the subscriptions implementation or a brand new one from scratch.