Fix CLS Issues on Duda (Layout Shift)

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

Duda-Specific Causes

Image Dimensions

• Images without explicit dimensions
• Responsive images causing reflow
• Gallery images of varying sizes

Dynamic Content

• Widgets loading content asynchronously
• Social embeds resizing
• Form widgets appearing after load

Font Loading

• Web fonts swapping with fallback
• Font weight changes causing reflow
• Late-loading Google Fonts

Duda Elements

• Pop-ups and modals appearing
• Announcement bars loading late
• Sticky headers transforming
• Mobile menu animations

Duda-Specific Fixes

Fix 1: Set Image Dimensions

In Duda editor:

1. Select image widget
2. Set fixed dimensions where possible
3. For responsive images, use aspect ratio containers

Fix 2: Reserve Space for Dynamic Content

For widgets that load content dynamically:

<!-- Add to Head HTML for custom widgets -->
<style>
  .dynamic-widget-container {
    min-height: 300px; /* Reserve space */
  }
</style>

Fix 3: Stabilize Embeds

For video/map embeds:

<style>
  .embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
  }
  .embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

Fix 4: Font Display Settings

Add to Head HTML:

<style>
  /* Prevent font swap flash */
  @font-face {
    font-family: 'Your Font';
    font-display: optional; /* or 'swap' with size-matched fallback */
  }
</style>

Fix 5: Control Pop-ups and Overlays

1. Delay pop-ups until after page load stabilizes
2. Use slide-in instead of overlay pop-ups
3. Set announcement bars to load with page, not after

Fix 6: Consistent Image Sizes

For galleries and grids:

1. Use images with consistent aspect ratios
2. Set fixed heights for gallery containers
3. Use Duda's grid with fixed dimensions

Verification

1. Run PageSpeed Insights
2. Check CLS score (target: under 0.1)
3. Use Chrome DevTools > Performance > Layout Shift regions
4. Test on mobile devices
5. Test with slow network connection

Debugging Layout Shifts

In Chrome DevTools:

1. Press F12
2. Go to Performance tab
3. Record page load
4. Look for "Layout Shift" entries
5. Click to see which elements shifted

Common CLS Culprits on Duda