Fix CLS Issues on SITE123 (Layout Shift) | OpsBlu Docs

Fix CLS Issues on SITE123 (Layout Shift)

Stabilize Site123 layouts by sizing section images, preloading Google Fonts selections, and constraining embedded widget containers.

Cumulative Layout Shift (CLS) measures visual stability - how much elements move around as your Site123 page loads. Poor CLS frustrates users and hurts SEO.

Target: CLS under 0.1 Good: Under 0.1 | Needs Improvement: 0.1-0.25 | Poor: Over 0.25

For general CLS concepts, see the global CLS guide.

Site123-Specific CLS Issues

1. Images Without Dimensions

The most common CLS issue on Site123 is images loading without defined dimensions.

Problem: Images load and push content down the page.

Diagnosis:

  • Run PageSpeed Insights
  • Look for "Image elements do not have explicit width and height"
  • Check CLS score in report
  • Use Chrome DevTools Performance tab to see layout shifts

Solutions:

A. Set Image Dimensions in Site123 Builder

When adding images in Site123:

  1. Upload appropriately sized images (don't rely on Site123 to resize)
  2. Set explicit dimensions in image settings if available
  3. Use Site123's image dimension fields (width/height)
  4. Maintain aspect ratio to prevent stretching

Best Practice:

  • Upload images at exact display size
  • Don't upload 4000px images to display at 800px
  • Use Site123's image editing tools to crop/resize

B. Add CSS for Image Containers

If Site123 allows custom CSS, add to code injection:

<!-- In Head Code -->
<style>
  /* Prevent layout shift for images */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Reserve space for images with aspect ratio */
  .image-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
  }

  .image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

C. Use Aspect Ratio CSS (Modern Browsers)

<style>
  .responsive-image {
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
  }
</style>

Apply class to images in Site123 builder or via code injection.

2. Dynamic Content from Code Injection

Scripts injected via code injection can cause layout shifts.

Problem: Content added via JavaScript after initial render shifts existing content.

Common Culprits:

  • Email signup forms
  • Social media feeds
  • Review widgets
  • Banner notifications
  • Chat widgets

Solutions:

A. Reserve Space for Dynamic Content

Before (causes shift):

<div id="newsletter-widget"></div>
<script>
  // Widget loads and pushes content down
  loadNewsletterWidget();
</script>

After (reserves space):

<div id="newsletter-widget" style="min-height: 200px;">
  <!-- Space reserved, no shift when widget loads -->
</div>
<script>
  loadNewsletterWidget();
</script>

B. Use Placeholder Content

Show placeholder until dynamic content loads:

<div id="reviews-widget" style="min-height: 300px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">
  <p>Loading reviews...</p>
</div>

<script>
  loadReviewsWidget().then(function() {
    // Remove placeholder
    document.querySelector('#reviews-widget').style.background = 'transparent';
  });
</script>

C. Load Above-Fold Content First

Prioritize static content, delay dynamic widgets:

<script>
  // Wait for page to load before adding widgets
  window.addEventListener('load', function() {
    setTimeout(function() {
      loadWidgets(); // Load after 1 second
    }, 1000);
  });
</script>

3. Font Loading Causing Layout Shift

Custom fonts can cause text to reflow and shift.

Problem: Text renders with system font, then shifts when custom font loads (FOIT/FOUT).

Diagnosis:

  • PageSpeed Insights: "Ensure text remains visible during webfont load"
  • Visible text reflow on page load
  • CLS score increases with font load

Solutions:

A. Use font-display: swap

Ensures text is visible immediately with fallback font:

<!-- In Head Code -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">

Key parameter: &display=swap

B. Match Fallback Font Metrics

Minimize shift by using similar fallback fonts:

<style>
  body {
    /* Custom font with carefully chosen fallback */
    font-family: 'Open Sans', Arial, sans-serif;
  }
</style>

Font pairing guide:

  • Open Sans → Arial
  • Roboto → Arial
  • Lato → Helvetica
  • Montserrat → Helvetica

C. Preload Critical Fonts

For fonts used above the fold:

<link rel="preload" href="https://fonts.gstatic.com/s/opensans/v28/mem8YaGs126MiZpBA.woff2" as="font" type="font/woff2" crossorigin>

D. Use System Fonts

Best for CLS - no loading, no shift:

<style>
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
</style>

4. Ads and Popups from Code Injection

Ad scripts and popups frequently cause layout shifts.

Problem: Ads/popups load and shift content unexpectedly.

Common Issues:

  • Banner ads that load late
  • Popup overlays
  • Notification bars
  • Cookie consent banners
  • Promotional banners

Solutions:

A. Reserve Space for Ads

<div class="ad-container" style="width: 728px; height: 90px; background: #f0f0f0;">
  <!-- Ad will load here without shifting content -->
  <div id="ad-slot"></div>
</div>

B. Use Position: Fixed for Overlays

Popups and banners should overlay, not push:

<style>
  .notification-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /* Won't push content down */
  }

  .popup-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
  }
</style>

C. Add Padding for Fixed Elements

If you have a fixed top banner, add body padding:

<style>
  /* If banner is 60px tall */
  body {
    padding-top: 60px;
  }

  .fixed-banner {
    position: fixed;
    top: 0;
    height: 60px;
  }
</style>

D. Delay Non-Critical Popups

Don't show popups immediately:

<script>
  // Show popup after 5 seconds or on exit intent
  setTimeout(function() {
    showPopup();
  }, 5000);
</script>

5. Site123 Template Animations

Some Site123 templates have animations that cause CLS.

Problem: Fade-ins, slide-ins, and other animations can shift content.

Common Animation Issues:

  • Parallax scrolling effects
  • Fade-in elements
  • Slide-in sidebars
  • Animated hero sections
  • Loading animations

Solutions:

A. Disable Problematic Animations

In Site123 template settings:

  1. Look for animation settings
  2. Disable or reduce animations
  3. Test CLS score before/after

B. Use Transform Instead of Position Changes

CSS transforms don't cause layout shifts:

Bad (causes shift):

.element {
  transition: margin-top 0.3s;
}
.element:hover {
  margin-top: 20px; /* Shifts layout */
}

Good (no shift):

.element {
  transition: transform 0.3s;
}
.element:hover {
  transform: translateY(20px); /* No layout shift */
}

C. Pre-Allocate Space for Animated Content

<style>
  .fade-in-element {
    min-height: 200px; /* Reserves space */
    opacity: 0;
    animation: fadeIn 1s forwards;
  }

  @keyframes fadeIn {
    to { opacity: 1; }
  }
</style>

6. Embeds and iFrames

Embedded content (videos, maps, social feeds) causes shifts.

Problem: Embeds load without defined dimensions.

Common Embeds:

  • YouTube videos
  • Google Maps
  • Instagram feeds
  • Facebook posts
  • Twitter timelines

Solutions:

A. Responsive Embed Containers

Use aspect-ratio containers:

<!-- In Head Code or page-specific CSS -->
<style>
  .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
  }

  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<!-- In page content -->
<div class="video-container">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>

B. Set Explicit iFrame Dimensions

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  style="max-width: 100%; height: auto;"
></iframe>

C. Use Facade/Lazy Load for Embeds

Load embed only when clicked:

<div class="video-facade" style="width: 560px; height: 315px; background: url('thumbnail.jpg') center/cover; cursor: pointer;">
  <button Video</button>
</div>

<script>
  function loadVideo(button) {
    const container = button.parentElement;
    container.innerHTML = '<iframe width="560" height="315" src="https://youtube.com/embed/VIDEO_ID?autoplay=1"></iframe>';
  }
</script>

7. Mobile-Specific CLS Issues

Mobile often has worse CLS than desktop.

Problem: Mobile layouts shift more due to smaller viewport and slower connections.

Diagnosis:

  • Test with PageSpeed Insights mobile mode
  • Test on actual mobile devices
  • Check CLS specifically on mobile

Solutions:

A. Mobile-Specific Image Sizes

Ensure mobile images have proper dimensions:

<style>
  @media (max-width: 768px) {
    .hero-image {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3; /* Different ratio for mobile */
    }
  }
</style>

B. Disable Mobile Animations

<style>
  @media (max-width: 768px) {
    /* Disable animations on mobile */
    * {
      animation: none !important;
      transition: none !important;
    }
  }
</style>

Note: Use this cautiously as it affects all animations.

C. Simpler Mobile Layouts

  • Use Site123's mobile view editor
  • Simplify mobile layouts
  • Remove heavy widgets on mobile
  • Test mobile performance separately

8. Third-Party Widgets

Social feeds, reviews, and other widgets cause shifts.

Problem: Widgets load and expand, pushing content down.

Common Widgets:

  • Instagram feed embeds
  • Facebook page plugins
  • Twitter timelines
  • Review widgets (Trustpilot, Yelp)
  • Live chat widgets

Solutions:

A. Fixed Height Containers

<div id="instagram-feed" style="height: 500px; overflow: auto;">
  <!-- Instagram feed loads here without shifting page -->
</div>

B. Load Widgets Below the Fold

Place dynamic widgets lower on page where shifts are less noticeable:

  • Put social feeds in footer
  • Place review widgets mid-page
  • Keep critical content above widgets

C. Use Static Alternatives

Instead of dynamic feeds:

  • Take screenshots of reviews
  • Use static testimonial sections
  • Embed individual posts instead of feeds
  • Consider removing widgets entirely

Testing CLS

Measure CLS

Tools:

  1. PageSpeed Insights

    • Shows both field (real user) and lab data
    • Identifies specific shifting elements
    • Mobile and desktop scores

  2. Chrome DevTools

    • Open DevTools (F12)
    • Performance tab → Record
    • Look for red Layout Shift markers
    • See which elements shifted

  3. WebPageTest

    • Detailed filmstrip view
    • Visual progression
    • Identifies shift timing

  4. Chrome Extensions

Identify Shifting Elements

Chrome DevTools Method:

  1. Open DevTools (F12)
  2. Performance tab
  3. Click Record (circle icon)
  4. Reload page
  5. Stop recording
  6. Look for Layout Shift entries (red)
  7. Click to see which elements shifted

Console Method:

// Run in browser console
let cls = 0;
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Layout Shift:', entry.value, entry);
      console.log('Shifted elements:', entry.sources);
    }
  }
  console.log('Total CLS:', cls);
}).observe({type: 'layout-shift', buffered: true});

Reload page and see which elements cause shifts.

Site123 Builder Best Practices

When Building Pages

  1. Always set image dimensions

    • Upload correctly sized images
    • Use Site123's image settings
    • Don't rely on automatic resizing

  2. Test as you build

    • Preview changes
    • Check on mobile
    • Run quick PageSpeed test

  3. Avoid late-loading content

    • Keep critical content static
    • Place dynamic widgets below fold
    • Reserve space for any delayed content

  4. Use fixed positioning for overlays

    • Popups should overlay, not push
    • Fixed headers/footers
    • Modal dialogs

Template Selection

Choose templates with good CLS:

  • Minimal animations
  • Simple, static hero sections
  • No auto-playing sliders
  • Clean, straightforward layouts

Quick Wins Checklist

Immediate CLS improvements:

  • Upload properly sized images (not oversized)
  • Set image dimensions in Site123 builder
  • Add font-display: swap to font imports
  • Reserve space for dynamic widgets (min-height)
  • Use position: fixed for overlays/popups
  • Delay non-critical popups (5+ seconds)
  • Set explicit dimensions on iframes/embeds
  • Disable or simplify animations
  • Test with PageSpeed Insights
  • Check DevTools Performance tab for shifts

Monitoring CLS

Regular Testing

Monthly:

  • Test homepage with PageSpeed Insights
  • Check key landing pages
  • Monitor mobile CLS separately
  • Compare to previous month

After Changes:

  • Test after template changes
  • Verify after adding new widgets
  • Check after code injection updates
  • Test after Site123 platform updates

Field Data:

Set Up Monitoring

Google Search Console:

  1. Add your Site123 domain
  2. Go to Core Web Vitals report
  3. Monitor CLS for desktop/mobile
  4. Get alerts for failing pages

Third-Party Tools:

When CLS Won't Improve

If you've optimized but CLS is still high:

Template Limitations

Some Site123 templates have inherent CLS issues:

  • Heavy animations built-in
  • Dynamic layouts
  • Complex element interactions

Options:

  • Switch to simpler template
  • Accept current CLS if barely over threshold
  • Request Site123 support help with specific template

Code Injection Conflicts

Multiple scripts can conflict and cause shifts:

  • Audit all code injections
  • Remove unused scripts
  • Test disabling scripts one at a time
  • Consider professional help if needed

Platform Constraints

Site123 has some limitations:

  • Less control than custom sites
  • Some template behaviors can't be changed
  • Platform code you can't modify

Consider:

  • If CLS is close to threshold (0.1-0.15), may be acceptable
  • Weigh cost/benefit of major changes
  • For critical business sites, consider custom development

Next Steps

For general CLS optimization strategies, see CLS Optimization Guide.

Back to top