Wix CLS (Cumulative Layout Shift) Optimization

Cumulative Layout Shift (CLS) measures visual stability by tracking unexpected layout shifts. Good CLS should be under 0.1. This guide covers Wix-specific strategies to eliminate layout shifts.

Understanding CLS on Wix

What is CLS?

CLS quantifies how much page content shifts unexpectedly during loading. Common causes:

• Images without dimensions loading
• Fonts swapping in late
• Dynamically injected content
• Ads or embeds loading
• Animations and transitions

Wix-Specific CLS Challenges

1. Dynamic content loading - Wix loads many elements progressively
2. Third-party apps - Pop-ups, chat widgets, and embeds shift content
3. Font loading - Custom fonts cause text reflow
4. Responsive containers - Elements resize based on content
5. Animations - Wix's default scroll effects can cause shifts

Target CLS Scores

Diagnosing CLS Issues

1. Measure Current CLS

PageSpeed Insights:

1. Visit PageSpeed Insights
2. Enter your Wix URL
3. Check "Cumulative Layout Shift" metric
4. Important: Test both mobile and desktop

Chrome DevTools:

1. Open DevTools (F12)
2. Lighthouse tab → Generate report
3. Find CLS under "Metrics"
4. Click to see shift sources

2. Identify Shift Sources

Layout Shift Regions (in PageSpeed):

• Scroll to "Diagnostics"
• Look for "Avoid large layout shifts"
• Shows screenshots with shifted elements highlighted

Using Chrome DevTools:

1. Performance tab
2. Click Record (circle)
3. Scroll through your page
4. Stop recording
5. Find Experience row
6. Look for red Layout Shift bars
7. Click to see which elements shifted

3. Common CLS Culprits on Wix

Most common issues:

1. Hero images loading without reserved space
2. Wix chat widgets appearing
3. Pop-ups and promotional bars
4. Third-party embeds (social feeds, reviews)
5. Dynamic forms
6. Font swapping (FOUT - Flash of Unstyled Text)

Image-Related CLS Fixes

1. Set Image Dimensions

Wix should handle this automatically, but verify:

Check image settings:

1. Editor → Click image
2. Settings → Layout
3. Ensure width/height are set (not "auto")

Best practice:

• Use fixed aspect ratio for images
• Avoid dynamic resizing based on content

2. Reserve Space for Hero Images

Hero section shifts are most impactful:

Solution:

1. Set minimum height for hero section:

   • Editor → Click hero strip
   • Settings → Layout
   • Set minimum height (e.g., 500px)

2. Use background images instead of inline images

   • Less likely to cause shift
   • Wix handles sizing better

3. Optimize Image Loading

Disable lazy loading for above-fold images:

1. Media Manager → Select image
2. Settings
3. Disable Lazy loading for critical images

Why: Lazy-loaded images can shift when they load late.

4. Aspect Ratio Containers

For dynamic images, use aspect ratio boxes:

Velo implementation:

$w.onReady(function () {
  const image = $w('#dynamicImage');

  // Set aspect ratio container
  image.onLoad(() => {
    // Image loaded, no shift occurs
  });
});

Font-Related CLS Fixes

1. Use System Fonts

Best solution: Use system fonts (no loading = no shift).

System font stack:

• Arial, Helvetica, sans-serif
• Georgia, Times, serif
• Courier, monospace

How to set:

• Editor → Design → Fonts
• Select web-safe fonts

2. Minimize Custom Fonts

If custom fonts are required:

Best practices:

1. Limit to 2 font families
2. Only include needed weights
3. Use font-display: swap (Wix handles this)

3. Preload Critical Fonts

Reduce font load time to minimize shift:

<!-- Dashboard → Settings → Custom Code → Head -->
<link rel="preload" as="font" type="font/woff2"
  href="YOUR_FONT_URL" crossorigin />

Find font URL:

1. Inspect text element
2. Check Network tab for font requests
3. Copy font URL (usually static.wixstatic.com/...)

4. Font Display Strategy

Wix uses font-display: swap by default, which can cause shifts.

Understanding the trade-off:

• swap - Shows fallback font immediately, then swaps (causes CLS)
• optional - Uses fallback if custom font not ready (better CLS)

Note: Wix doesn't expose font-display settings directly. Consider using system fonts for critical text.

Third-Party App CLS Fixes

1. Chat Widgets

Live chat widgets are major CLS culprits.

Solutions:

Option 1: Delayed loading

// Site Code - Delay chat widget
$w.onReady(function () {
  setTimeout(() => {
    // Initialize chat widget here
    loadChatWidget();
  }, 3000); // 3-second delay
});

Option 2: Reserve space

<!-- Custom Code → Head -->
<style>
  /* Reserve space for chat button */
  body::after {
    content: '';
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    pointer-events: none;
  }
</style>

Option 3: Remove chat widget

• Consider replacing with contact button
• Reduces CLS significantly

2. Pop-ups and Promotional Bars

Best practices:

1. Delay pop-up appearance:

   • Settings → Set trigger to 5+ seconds
   • Or scroll-based trigger

2. Use overlay (not push-down):

   • Overlays don't shift content
   • Push-down bars cause major CLS

3. Fixed positioning:

   • Ensure pop-ups use position: fixed
   • Prevents content reflow

Wix settings:

• Dashboard → Marketing Tools → Pop-ups
• Ensure "Push down content" is disabled

3. Social Media Embeds

Instagram, Facebook, Twitter embeds cause shifts.

Solutions:

Option 1: Static placeholders

• Take screenshot of feed
• Use image instead of live embed
• Much better for CLS

Option 2: Reserve space

<!-- Wrapper for embed -->
<div style="min-height: 400px;">
  <!-- Embed code here -->
</div>

Option 3: Lazy load embeds

• Load embeds only when scrolled into view
• Use Velo to control loading

$w.onReady(function () {
  $w('#embedSection').onViewportEnter(() => {
    // Load embed
    loadSocialEmbed();
  });
});

4. Review Widgets

Review and testimonial widgets often shift.

Solutions:

1. Set fixed height container
2. Use static testimonials instead of dynamic widget
3. Load reviews below the fold

Wix-Specific Techniques

1. Disable Scroll Effects

Wix scroll effects can cause layout shifts.

How to disable:

1. Editor → Click section/element
2. Settings → Scroll Effects
3. Set to None

Repeat for all above-fold sections.

2. Optimize Strips/Sections

Wix strips can shift when loading:

Best practices:

1. Set fixed height for critical strips

   • Editor → Strip settings → Layout
   • Set minimum height

2. Avoid "Fit to screen" for strips with dynamic content

   • Can cause shifts as content loads

3. Use background images instead of inline images in strips

   • More stable rendering

3. Fix Repeater Shifts

Wix repeaters loading can cause major shifts.

Solutions:

Option 1: Set container height

$w.onReady(function () {
  // Set repeater container min-height before data loads
  $w('#repeater').collapsed = false;
  $w('#repeater').data = []; // Placeholder
});

Option 2: Skeleton loading

• Show placeholder items while loading
• Prevents shift when real data loads

Option 3: Fixed item count

• Always show same number of items
• Use pagination for more

4. Mobile Menu Shifts

Mobile menu appearing can shift content.

Wix mobile menu best practices:

1. Use overlay menu (not push-down)
2. Ensure menu is position: fixed
3. Test menu opening/closing for shifts

Check settings:

• Editor → Mobile view → Menu
• Settings → Display type: Overlay

Form-Related CLS

1. Wix Forms

Forms expanding/validating can cause shifts.

Solutions:

1. Reserve space for error messages:

<style>
  .wixForms__errorMsg {
    min-height: 20px;
    /* Prevents shift when error appears */
  }
</style>

2. Fixed form height:

   • Editor → Form settings → Layout
   • Set fixed height

3. Inline validation (preferred):

   • Validates without layout shift
   • Settings → Validation: Inline

2. Dynamic Form Fields

Fields appearing based on selections:

Best practice:

• Use visibility toggle, not DOM insertion
• Keeps layout stable

$w('#conditionalField').hide();

$w('#triggerDropdown').onChange((event) => {
  if (event.target.value === 'option') {
    $w('#conditionalField').show(); // Toggle visibility
  }
});

Animation & Transition CLS

1. Wix Animations

Animations can trigger layout shifts.

Safe animations (no CLS):

• opacity changes
• transform (translate, scale, rotate)

Unsafe animations (cause CLS):

• width/height changes
• margin/padding changes
• top/left (without position: absolute)

How to fix:

1. Editor → Element → Animations
2. Choose animations that don't shift layout:
   • Fade in (opacity)
   • Slide in (transform)
   • Avoid: Grow, expand

2. Hover Effects

CSS hover effects can shift content if not careful.

Safe hover effects:

/* Scale without shifting */
.element:hover {
  transform: scale(1.05);
}

/* Change color only */
.element:hover {
  background-color: blue;
}

Unsafe hover effects:

/* BAD: Shifts layout */
.element:hover {
  padding: 20px; /* Don't change box model on hover */
}

Advanced Fixes (Velo)

1. Preload Content Heights

Calculate and reserve space before content loads:

$w.onReady(async function () {
  // Reserve space for dynamic content
  const expectedHeight = 400; // Calculated or estimated
  $w('#dynamicSection').height = expectedHeight;

  // Load content
  const content = await fetchContent();
  $w('#dynamicSection').html = content;
});

2. Skeleton Screens

Show placeholder content while loading:

$w.onReady(function () {
  // Show skeleton
  $w('#skeletonLoader').show();
  $w('#actualContent').hide();

  // Load data
  loadData().then(() => {
    $w('#skeletonLoader').hide();
    $w('#actualContent').show();
  });
});

3. Batch DOM Updates

Minimize layout recalculations:

$w.onReady(function () {
  // BAD: Multiple reflows
  $w('#element1').show();
  $w('#element2').show();
  $w('#element3').show();

  // GOOD: Single reflow
  Promise.all([
    $w('#element1').show(),
    $w('#element2').show(),
    $w('#element3').show()
  ]);
});

Testing & Validation

1. Visual Comparison

Record before/after:

1. Take video of page loading (before fixes)
2. Implement CLS fixes
3. Take video of page loading (after)
4. Compare for visible shifts

2. Automated Testing

PageSpeed Insights:

• Test before and after
• Note CLS score improvement

Chrome DevTools:

• Record performance profile
• Check for layout shift events

3. Real User Monitoring

Track actual user CLS:

// Track CLS to GA4
import { getCLS } from 'web-vitals';

getCLS((metric) => {
  if (window.gtag) {
    gtag('event', 'web_vitals', {
      event_category: 'Web Vitals',
      event_label: 'CLS',
      value: Math.round(metric.value * 1000), // Convert to integer
      non_interaction: true
    });
  }
});

CLS Optimization Checklist

• Set fixed dimensions for all images
• Reserve space for hero section
• Use system fonts (or preload custom fonts)
• Delay/remove chat widgets
• Disable scroll effects on critical sections
• Use overlay pop-ups (not push-down)
• Set fixed heights for strips/sections
• Replace social embeds with static content
• Reserve space for form error messages
• Test mobile menu behavior
• Remove or stabilize third-party widgets
• Test with PageSpeed Insights
• Monitor real user CLS in Search Console

Expected Results

After optimization:

Realistic target:

• Desktop: < 0.05 (achievable)
• Mobile: < 0.1 (challenging but possible)

Common CLS Issues & Solutions

When CLS Can't Be Improved Further

Some Wix elements are beyond your control:

1. Platform-injected content - Wix adds elements you can't modify
2. Required third-party widgets - Some apps are necessary
3. Responsive behavior - Mobile layouts may inherently shift more

In these cases:

• Document limitations for stakeholders
• Focus on fixing controllable issues
• Consider platform migration for CLS-critical sites

Next Steps

• Fix LCP issues
• Troubleshoot tracking problems
• Optimize overall site performance

Additional Resources

• Web Vitals CLS Documentation
• Wix Performance Guide
• PageSpeed Insights
• Debug Layout Shifts