Fix CLS Issues on Blogger (Layout Shift)

General Guide: See Global CLS Guide for universal concepts and fixes.

What is CLS?

Cumulative Layout Shift measures visual stability during page load. Google recommends CLS under 0.1. Blogger sites commonly suffer from CLS due to dynamically-loaded widgets, unsized images, and AdSense ad injection.

Blogger-Specific CLS Causes

• AdSense ad slots -- ads load after initial paint, pushing post content down by 90-300px depending on ad format
• Unsized post images -- images uploaded through the Blogger editor lack width/height attributes in the rendered HTML
• Widget gadgets loading asynchronously -- Popular Posts, Blog Archive, and Labels widgets inject content after DOM ready
• Third-party theme sliders -- carousel/slider widgets from downloaded themes inject CSS and resize containers on load
• Google Fonts loading -- many Blogger themes use multiple Google Font weights, causing FOUT and text reflow

Fixes

1. Reserve Space for AdSense Ads

The biggest CLS culprit on Blogger. Ad slots render empty then fill with ads of varying heights:

/* Reserve fixed space for ad containers */
.adsbygoogle {
  min-height: 250px;
  display: block;
  background: transparent;
}

/* In-article ad slot */
.post-body .adsbygoogle {
  min-height: 280px;
  margin: 1em 0;
  contain: layout;
}

/* Sidebar ad slot */
.sidebar .adsbygoogle {
  min-height: 600px;
}

If using auto ads, wrap them in a container:

<div style="min-height: 250px; contain: layout;">
  <ins class="adsbygoogle" data-ad-client="ca-pub-XXXX" data-ad-slot="YYYY"></ins>
</div>

2. Fix Image Dimensions in Post Content

Blogger's WYSIWYG editor does not reliably add width/height to images. Fix this globally via CSS:

/* Prevent image CLS by enforcing aspect ratios */
.post-body img {
  max-width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

/* Fallback for images without dimensions */
.post-body img:not([width]) {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

For template-level control, modify the post image output in your XML:

<!-- Force dimensions on featured images -->
<b:if cond='data:post.featuredImage'>
  <div class='post-thumbnail' style='aspect-ratio: 16/9; overflow: hidden;'>
    <img expr:src='resizeImage(data:post.featuredImage, 800, &quot;16:9&quot;)'
         width='800' height='450'
         expr:alt='data:post.title'
         style='width: 100%; height: 100%; object-fit: cover;'/>
  </div>
</b:if>

3. Stabilize Widget Containers

Widgets render their content asynchronously, causing sidebar and footer elements to jump:

/* Reserve space for common widgets */
.widget.PopularPosts { min-height: 400px; }
.widget.BlogArchive { min-height: 300px; }
.widget.Label { min-height: 150px; }
.widget.Profile { min-height: 200px; }

/* Contain all widget reflows */
.widget {
  contain: layout;
  overflow: hidden;
}

4. Fix Google Fonts Loading Shift

Blogger themes that load multiple Google Font families cause significant text shift:

<!-- BAD: Multiple font loads cause FOUT -->
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700|Open+Sans:400,600' rel='stylesheet'/>

<!-- GOOD: Preload, use display=swap, and set fallback metrics -->
<link rel='preconnect' href='https://fonts.googleapis.com'/>
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin='anonymous'/>
<link href='https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap' rel='stylesheet'/>

Add size-adjust to your CSS to minimize the swap shift:

@font-face {
  font-family: 'Roboto Fallback';
  src: local('Arial');
  size-adjust: 100.4%;
  ascent-override: 92%;
  descent-override: 22%;
}

body {
  font-family: 'Roboto', 'Roboto Fallback', Arial, sans-serif;
}

5. Prevent Navbar and Cookie Banner Shifts

Blogger's built-in navbar and any cookie consent banners commonly push content:

/* Fix Blogger navbar CLS -- reserve its space */
#navbar-iframe {
  height: 30px !important;
  display: block !important;
}

/* Or hide it entirely if not needed */
#navbar-iframe { display: none !important; }
body { margin-top: 0 !important; }

/* Cookie banners should use fixed position */
.cookie-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

Measuring CLS on Blogger

1. Chrome DevTools Performance tab -- record page load, filter for "Layout Shift" events, and identify which elements shifted
2. PageSpeed Insights -- check the CLS score and the "Avoid large layout shifts" diagnostic
3. Test with and without AdSense -- temporarily disable ads to isolate their CLS contribution
4. Test on mobile -- Blogger's responsive themes often have worse CLS on narrow viewports where ads and images cause more relative shift

Analytics Script Impact

On Blogger, the primary CLS risk from analytics is:

• AdSense auto-ads -- Google automatically places ads in content, causing unpredictable shifts; switch to manual ad placement for CLS control
• Consent management -- if using a third-party cookie consent tool, ensure it uses position: fixed overlay rather than pushing content
• Heatmap overlays -- Hotjar/CrazyEgg inject visible feedback widgets that can shift footer content

Related

• Global CLS Guide
• LCP Issues