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:

Upload appropriately sized images (don't rely on Site123 to resize)
Set explicit dimensions in image settings if available
Use Site123's image dimension fields (width/height)
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:

Look for animation settings
Disable or reduce animations
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:

PageSpeed Insights
- Shows both field (real user) and lab data
- Identifies specific shifting elements
- Mobile and desktop scores
Chrome DevTools
- Open DevTools (F12)
- Performance tab → Record
- Look for red Layout Shift markers
- See which elements shifted
WebPageTest
- Detailed filmstrip view
- Visual progression
- Identifies shift timing
Chrome Extensions
- Web Vitals - Shows CLS in real-time

Identify Shifting Elements

Chrome DevTools Method:

Open DevTools (F12)
Performance tab
Click Record (circle icon)
Reload page
Stop recording
Look for Layout Shift entries (red)
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

Always set image dimensions
- Upload correctly sized images
- Use Site123's image settings
- Don't rely on automatic resizing
Test as you build
- Preview changes
- Check on mobile
- Run quick PageSpeed test
Avoid late-loading content
- Keep critical content static
- Place dynamic widgets below fold
- Reserve space for any delayed content
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:

Monitor Chrome User Experience Report (CrUX)
Check Google Search Console Core Web Vitals
Review real user CLS over 28 days

Set Up Monitoring

Google Search Console:

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

Third-Party Tools:

SpeedCurve - Continuous monitoring
Calibre - Performance tracking
DebugBear - CLS tracking

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.

Nach oben