[Support request] CLS Mobile Issue

[Alison donnellan]

Hi,

I am trying to resolve a CLS issue with two sites that both run GeneratePress and Medaivine ads. The content area is changing width.

The issue is on myadventuresacrosstheworld.com and strictlyrome.com

I’ve included links to Loom videos of Myadventuresacrosstheworld.com to show what’s happening.

Both sites have a high CLS that started in October. I have managed to narrow it down to being an issue with GeneratePress and Medivine.

Cache was cleared before each test if it was enabled.

When GeneratePress is enabled, and Mediavine ads are enabled there is a high CLS which can be seen by visitors. The pages content moves.

Video of that here with plugins enabled: https://www.loom.com/share/a962778e2ea342eca6e811177583c065
With plugins disabled: https://www.loom.com/share/634c4249cbe44766ac6e2069bd07c08b

When Mediavine ads are disabled, the issue stops.
Video: https://www.loom.com/share/f546b2c2e5c24d908f57ec523c3e6296

But when testing with the WordPress twenty twenty three theme and medaivine ads enabled, there is no CLS issue. It only happens if both GeneratePress and Mediavine ads are enabled.

https://www.loom.com/share/5d5569543f1441adb9b09324dc6d3cae

The issue is happening with all plugins disabled. The issue still happens with caching and optimisation plugins setup (WP Rocket+Perfmatters). The sites don’t use Google Fonts.

I’ve tried changing settings in GeneratePress. I’ve tried testing different font sizes, changing the site to use one container and aligning content by boxes rather than text. I tried changing the padding on the mobile view. I also tried changing the CSS optimisation settings from an external file, to inline and disabled dynamic CSS caching.

I’ve tried adding CSS to ensure the page is loaded at least 375px and this didn’t help, and this didn’t help either.

Could you please help with this?

Thanks

[David]

Hi there,

is there a specific post that i can check where the CLS issue is high ? As the random tests i ran the CLS is within the acceptable levels ?

[Alison donnellan]

Hi,

Thanks for getting back to me,

Here’s some links.

https://myadventuresacrosstheworld.com/tickets-to-the-colosseum/ has a page average CWV of 0.24, on my last test it was 0.11.

GSC flags this as 0.21 average and on my last test was 0.13, https://myadventuresacrosstheworld.com/countries-with-the-best-food/

On the other site:

https://strictlyrome.com/roman-gods-and-goddesses/ is 0.35 and https://strictlyrome.com/roman-gods-and-goddesses/ 0.22

[David]

I tested the first one, and there i am seeing delay between the HTML being rendered and the initial styles being loaded. See here on this webpagetest:

https://www.webpagetest.org/vitals.php?test=221202_AiDcSN_615&run=3

If you scroll down to Cumulative Layout Shift and hover over the first red highlighted image, you will see what is initially loaded and then what happens to those styles a second later.

But this is related to CSS optimizations. See here, i retested the same page without WP Rocket ( by adding the ?nowprocket query string to the URL ):

https://www.webpagetest.org/vitals.php?test=221202_AiDcVH_684&run=1

And you see the CLS plummets. The remaining CLS is caused by the Logo, its width is right at the cusp of the available space in the header. So in this instance it pushes the search icon to wrap to a new row. A smaller mobile friendly logo may be the easiest fix for that.

But i don’t see how Mediavine is related here…..

[Claudia]

Joining the conversation as this is concerning my sites. Please let us know ASAP as this is affecting my overall sites health. Thanks.

[David]

Hi Claudia,

The Theme itself does not cause CLS. The reasons CLS occurs can be many, and although we can safely say its not theme related we are happy to look at a site and provide some advice or fixes if they are obvious to us.

So if you can raise a new topic where you can share links to your site, i can take a look at whats happening.

[Claudia]

Judging by your answer, it looks like you have not read Alison’s comments and questions and you have not watched the video. Is there any way we can get actual support?

[Alison donnellan]

Hi David,

Thanks for getting back to us.

Regarding the logo issue, I’ve changed that now but Strictly Rome has this happening but doesn’t have the logo size issue.
I was also referring to the content resizing as shown in the videos and I showed how it only happens with Mediavine ads enabled but only 1 video was watched..

In the test you linked where you have WP Rocket disabled:

https://www.webpagetest.org/vitals.php?test=221202_AiDcVH_684&run=1

The image under Window 2 (0.022) shows the issue I recorded in the videos. The body content width is resizing, so the text is moving.

This also happens on StrictlyRome, in this test with WP Rocket enabled
https://www.webpagetest.org/vitals.php?test=221202_BiDcHS_96S&run=2&cached=0#cls

and with WP Rocket disabled:
https://www.webpagetest.org/vitals.php?test=221202_BiDc94_9CF&run=2&cached=0#cls

WP Rocket’s optimisations were turned off when all plugins were disabled in this video:

“With plugins disabled: https://www.loom.com/share/634c4249cbe44766ac6e2069bd07c08b”

It relates to Mediavine, as the issue stops when the ads are disabled as I showed here:

“When Mediavine ads are disabled, the issue stops.
Video: https://www.loom.com/share/f546b2c2e5c24d908f57ec523c3e6296”

I also tested with the latest defalt WP Theme, and the issue stops.

“But when testing with the WordPress twenty twenty three theme and medaivine ads enabled, there is no CLS issue. It only happens if both GeneratePress and Mediavine ads are enabled.

https://www.loom.com/share/5d5569543f1441adb9b09324dc6d3cae”

In all the videos where GP and Mediavine are enabled, the main content area is resizing. This does not happen when Mediavine is diasbled or when using a different theme.

[David]

If i move WP Rocket out the way, then i see an inline style sheet is being injected in into the <head> of your site, and it contains several CSS rules including this:

@media only screen and (max-width: 399px) {
    .inside-article {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

Which is changing the themes padding to 10px for small screens, which is why you see the padding change after the page has loaded and the page shifts.
I can’t see whats injecting those styles but we can safely assume it is mediavine.

For reference this is the top few lines of that injected stylesheet, in case you want to give them feedback:

:root {
    --adhesion-background-color: rgba(0, 0, 0, 0.9);
  }

  .mv-empty-wrapper {	
    margin: 0 !important;	
    height: 0px !important;	
    min-height: unset !important;	
  } 
  .adunitwrapper {
    overflow: visible;
    position: relative;
    /* Typical height + padding for adunitlabels */
    height: 264px;
    /* Typical Width */
    width: 300px;
    /* try transition in separate a/b test */
    /* transition: all 0.5s; */
  }

  body .adunitwrapper[style*='display: block']>.adunit:before {
    content: "Loading Ad...";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    justify-content: center;
    font-size: 14px;
    color: #999;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    box-sizing: border-box;
  }

It is something that MediaVine should address, maybe they have a better way of loading those styles.

For a simple fix you could try going to Customizer > Layout > Container ( & header ) and set the Mobile Padding to 10px there. That in theory should stop the shift.

Why it does not affect other themes ? Either a) those themes already have 10px mobile padding or b) mediavine is loading a different inline stylesheet for different themes.

[Alison donnellan]

Thanks David,

Will try this and give feedback to Mediavine.

[Author]

Posts