How to Prevent Cumulative Layout Shift in Adsense & Ads

0 32

Cumulative Layout Shift (CLS) is a Core Web Vitals metric calculated by summing all layout shifts that aren’t caused by user interaction. CLS looks at the proportion of the viewport that was impacted by layout shifts, and the movement distance of the elements that were moved.

The lower your score, the more stable your layout is. Official CLS scores used by Google’s performance tools are as follows:

  • Good – CLS below 0.1
  • Needs improvement – CLS between 0.1 and 0.25
  • Poor – CLS above 0.25

How to Prevent Prevent Cumulative Layout Shift?

Define Responsive Adsense Ad Size with CSS

You can use media queries to predefine width & height of each Adunits, down below is a sample modified responsive adsense ad code that sets the following exact ad unit sizes per screen width:

  • For screen widths up to 800px: a 320×100 ad unit.
  • For screen widths between 800px and 1023px: a 768×90 ad unit.
  • For screen widths of 1024px and wider: a 970×250 ad unit.
<style>
.header_ad { width: 300px; height: 250px; }
@media(min-width: 800px) { .header_ad { width: 728px; height: 90px; } }
@media(min-width: 1024px) { .header_ad { width: 970px; height: 250px; } }
</style>
<!-- header Ad -->
<ins class="adsbygoogle header_ad"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXXXXX"
     data-ad-slot="YYYYY"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Use Fixed Adsense Adsize Instead of responsive Adsense ads.

Responsive Adsense Ads shift layout on when the scripts and resources loads, instead when you use Fixed Adsense ad sizes, a predefined space will be allocated for the adunit by the browser on load, resulting no layout shift.

Leader Board

<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-XXXXXXXXXX"
     data-ad-slot="YYYYY"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Medium Rectangle

<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-XXXXXXXXXX"
     data-ad-slot="YYYYY"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Half Page Adsense Ad

<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:600px"
     data-ad-client="ca-pub-XXXXXXXXXX"
     data-ad-slot="YYYYY"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Include width and height attributes on image and video elements


Specifying height and width on images used to be a healthy old practice, but with the popularity of responsive web design, it got lost. This is how it should be:

<img src="src.jpg" width="1920" height="1080" alt="alternative text is the image description for search engines">


Modern web browsers now set the default aspect ratio of images based on the height width attributes of an image. So it’s a good practice to set them to prevent layout shifts.

img { aspect-ratio: attr(width) / attr(height);}
Leave A Reply