0

I was testing the same URL under 4 scenarios:

  1. With ads
  2. Without "normal" ads but with Google ads
  3. Without Google ads but with normal ads
  4. Without ads

In each scenario I get an CLS from 0

How could that be, because of the url has definitely areas that are shifting. Thanks!

Roland
  • 13
  • 2
  • 1
    Without seeing the page we have no idea, please add some detail to the question such as a snippet or fiddle that we can look at that demonstrates what you believe to be shifting. – GrahamTheDev Jul 10 '20 at 10:41
  • @GrahamRitchie With ads https://www.finanzen.net/pagespeed.asp?qs=shares Without Appnexus https://www.finanzen.net/pagespeed.asp?qs=shares,noadvertiser Without Google Ads https://www.finanzen.net/pagespeed.asp?qs=shares,nogoogle Without Appnexus and Google Ads https://www.finanzen.net/pagespeed.asp?qs=shares,noads – Roland Jul 13 '20 at 06:40

1 Answers1

0

You are getting layout shift, but not at the points when Google Page Speed Insights is measuring.

The adverts loading in are delayed on the desktop.

The problem is the site fully loads and then the ads load in. Page Speed Insights will not see this change as it has already completed its tests so it sees all four versions of the page as the same.

On mobile the adverts do not load in at all (not sure if this is intentional) so obviously they have no effect.

Other than adverts loading in your site does not have any layout shifts that I could see at a glance. Because you define heights and widths on your images and rendering else happens all at once there are no layout shifts "above the fold", which is what PSI is looking at.

The reason that the lab data (simulated data) is different to the field data (real world data) is because of the adverts causing the page to jump around and the fact that the field data is collected while people navigate a page and doesn't just stop at page load unlike PSI. You may find this explanation on CLS from Addy Osmani who works on Google Chrome useful and relevant.

If you open developer tools and switch on " Paint Flashing" and "Layout Shift Regions" (under the "Rendering" tab) you have two tools that are useful for identifying what is causing layout shifts. (Which in your case is pretty much all down to the adverts as you mentioned.)

One way to stop this is to do the same with your advert regions as you do with your images. Give them a height before they load in and then the space is already allocated for them. You may be able to use the padding-top CSS hack or something similar to achieve this if simply defining a fixed height is not possible.

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64