Stack Overflow
Stack Overflow

Questions tagged [cumulative-layout-shift]

45 questions
6
votes
2 answers

How do I avoid CLS (cumulative layout shift) with Google Adsense "Let Google optimize the size of your mobile ads" enabled?

I am not using responsive ads due to the willing of getting a better Web Vitals score. However, with the Let Google optimize the size of your mobile ads checked, it seems Google will still change/update its ad size in a min-height defined container…
AGamePlayer
  • 7,404
  • 19
  • 62
  • 119
4
votes
3 answers

Adsense "Auto Ads" force CLS Layout Shift

we use the Adsense "Auto Ads" and are generally very happy with it. Unfortunately we have a problem with the CLS (Cummulative Layout Shift) on our mobile (!) site. We have now tested this out and the problems are definitely triggered by the Auto…
smare
  • 41
  • 2
3
votes
1 answer

On Safari, the content in the viewport shifts when the DOM is updated outside of the visible viewport

On Google Chrome when adding an element to the DOM above the user's viewport, the content in the viewport does not shift, while on Safari it does (equal to the height of the new element). How is it possible to not have the content shift on Safari…
Kevin Farrugia
  • 6,431
  • 4
  • 38
  • 61
3
votes
1 answer

Supporting A/B tests without hurting CLS metric

We are a 3rd-party vendor that adds components / UI elements to our clients' websites. We sometimes hide/change the size of this container in run-time, based on contextual parameters or as part of A/B testing. It is impossible for the website owner…
Tudmotu
  • 845
  • 8
  • 11
2
votes
0 answers

cumulative layout shift (CLS) in html

I am getting CLS ON this piece of HTML can anyone tell the reason for why iam getting a layout shift. iam trying hard to get the CLS below 0.1 but failed to do so .. i guess bootstrap classes may causing the issue but how can i fix it
Adarsh Awasthi
  • 59
  • 3
2
votes
1 answer

Cumulative Layout Shift problem - how to fix an element from horizontally shifting?

I have a basic header that has a max-width and margin applied (standard stuff) in order to position it horizontally in the middle of the page. However, when I run a lighthouse report, it shows a horizontal shift. Below is my HTML, CSS and the…
Kennyb
  • 205
  • 2
  • 9
1
vote
1 answer

How to specify image width/height correctly to avoid CLS?

My image now: I know, I should use this to prevent cumulative layout shift: But this way it can't fill the div in all screen resolutions, so it is not responsive…
Péter Gergő
  • 69
  • 5
1
vote
1 answer

Does a third party chrome extension affects a website's Cumulative Layout Shift (CLS)?

Let's say I have a website called "Example Website", and it has a bunch of paragraphs in it. Something like the image shown below Now assume that there is a chrome extension out there which injects some images inside my page. These images are…
PHRYTE
  • 959
  • 1
  • 9
  • 13
1
vote
1 answer

Can i fix Cumulative Layout Shift without knowing the width and hight of an Image?

I tried aspect-ratio and the padding-top trick, but is there a way to automate all of this?
RabaukeHauke
  • 19
  • 2
1
vote
0 answers

AdSense vs Cumulative Layout Shift (CLS)

Any idea how to prevent the strange Cumulative Layout Shift (CLS) when page containing AdSense loads? Website has a responsive design and use AdSense responsive ad units. Before implementing responsive design and using responsive ads there was not…
Pavel
  • 25
  • 1
  • 8
1
vote
1 answer

Cumulative Layout Shift (CLS) in Header

I am having a trouble with some Cumulative Layout Shift (CLS) appearing from the footer in the header. The social icons + the text 'discover' appears behind the main logo. Domain is www.minoar.com Some of the CSS here from it is: #footerSocial…
Texture Heaven
  • 25
  • 4
1
vote
1 answer

Google One Tap is causing a Layout shift (>0.1) on mobile

I have used the chrome profiler to identify the Layout shifts on our website and discovered that the Google One Tap banner is causing a significant layout shift (> 0.1) on mobile (Image of profiler showing layout shift). I have also added a…
Pradeep
  • 11
  • 1
1
vote
0 answers

How do I stop the Cumulative Layout Shift of a full width canvas animation item in a php file? (Google Lighthouse audit)

How do I stop the of Cumulative Layout Shift of this full width canvas animation item in the header.php file? Where is the vertical shift coming from in the code below?