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

Fix CLS Issues on Strikingly (Layout Shift)

Stabilize Strikingly layouts by sizing hero and gallery images, preloading Google Fonts selections, and constraining section block containers.

Cumulative Layout Shift (CLS) measures visual stability. Unexpected layout shifts frustrate users and hurt SEO. Strikingly sites can experience CLS from images, fonts, and third-party content.

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.

Strikingly-Specific CLS Issues

1. Images Without Dimensions

The most common CLS issue on Strikingly is images loading without explicit dimensions.

Problem: Images load and push content down, causing layout shift.

Diagnosis:

How CLS Happens:

1. Page loads, browser allocates space based on content
2. Image starts loading (browser doesn't know size yet)
3. Image loads and browser resizes to fit
4. Content below shifts down → CLS

Fix: Strikingly Built-in Images

Using Strikingly Editor (Automatic Fix):

When you upload images through Strikingly's editor:

  1. Select section with image
  2. Upload image via Strikingly interface
  3. Strikingly automatically sets dimensions
  4. No code needed

Verification:

  1. Right-click on page → View Source
  2. Find your image
  3. Should see width and height attributes

Fix: Custom HTML Images

If adding images via custom HTML sections:

Bad (Causes CLS):

<img src="image.jpg" alt="Product">

Good (Prevents CLS):

<img
  src="image.jpg"
  alt="Product"
  width="800"
  height="600"
>

Best Practice with Responsive:

<img
  src="image.jpg"
  alt="Product"
  width="800"
  height="600"
  style="max-width: 100%; height: auto;"
>

CSS Approach (Aspect Ratio):

<div style="aspect-ratio: 16/9; width: 100%;">
  <img
    src="image.jpg"
    alt="Product"
    style="width: 100%; height: 100%; object-fit: cover;"
  >
</div>

2. Font Loading Causing Shifts

Custom fonts loading can cause text to shift as fonts swap.

Problem: Text renders in fallback font, then shifts when custom font loads.

Using Strikingly's Font Picker:

  • Fonts are pre-optimized
  • No CLS from font loading
  • No configuration needed

Accessing Font Settings:

  1. In Strikingly editor, click Style
  2. Select Fonts
  3. Choose from built-in fonts
  4. Publish

Custom Font Optimization

If you must use custom fonts via CSS:

Bad (Causes CLS):

@import url('https://fonts.googleapis.com/css2?family=CustomFont');

Good (With font-display):

<link
  href="https://fonts.googleapis.com/css2?family=CustomFont&display=swap"
  rel="stylesheet"
>

Explanation:

  • font-display: swap tells browser to show fallback immediately
  • Custom font swaps in when loaded
  • Minimizes shift by matching fallback to custom font

Matching Fallback Font:

body {
  font-family: 'CustomFont', Arial, sans-serif;
  /* Match fallback size to custom font */
  font-size-adjust: 0.5;
}

Best Practice: Use system fonts that don't require loading:

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

3. Dynamic Content and Third-Party Widgets

Social media embeds, chat widgets, and dynamic content cause CLS.

Common Culprits

High-CLS Third-Party Elements:

  • Facebook page plugins
  • Instagram embeds
  • Twitter cards
  • Chat widgets (Intercom, Drift, etc.)
  • Ad banners
  • Review/rating widgets
  • Cookie consent banners

Reserve Space for Third-Party Content

Bad (No Reserved Space):

<div id="facebook-widget"></div>
<script src="https://facebook.com/widget.js"></script>

Good (Reserve Space):

<div
  id="facebook-widget"
  style="min-height: 500px; width: 100%;"
>
  <!-- Widget loads here -->
</div>
<script src="https://facebook.com/widget.js"></script>

Optimize Specific Widgets

Facebook Page Plugin:

<div style="width: 340px; height: 500px;">
  <div
    class="fb-page"
    data-href="https://www.facebook.com/yourpage"
    data-width="340"
    data-height="500"
  ></div>
</div>

Instagram Embed:

<div style="max-width: 540px; min-height: 600px;">
  <blockquote class="instagram-media">
    <!-- Instagram embed code -->
  </blockquote>
</div>

Live Chat Widget:

<script>
  // Delay chat widget until after page load
  window.addEventListener('load', function() {
    setTimeout(function() {
      // Load chat widget here
      // Widget typically appears in bottom corner
      // Pre-allocate space in CSS
    }, 3000);
  });
</script>

<style>
  /* Reserve space for chat widget */
  body::after {
    content: '';
    display: block;
    height: 60px;
    width: 200px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    pointer-events: none;
  }
</style>

4. Banner and Popup Shifts

Announcement bars, cookie banners, and popups cause CLS if not handled properly.

Bad (Pushes Content):

<div id="cookie-banner">
  Accept cookies...
</div>

Good (Fixed Position):

<div
  id="cookie-banner"
  style="position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;"
>
  Accept cookies...
</div>

Announcement Bars

If adding via custom HTML:

Fixed Position (Recommended):

<div
  class="announcement-bar"
  style="position: fixed; top: 0; left: 0; right: 0; height: 50px; z-index: 999;"
>
  Special offer!
</div>

<!-- Add padding to prevent content hiding -->
<style>
  body {
    padding-top: 50px;
  }
</style>

Static with Reserved Space:

<div
  class="announcement-bar"
  style="height: 50px; display: flex; align-items: center;"
>
  Special offer!
</div>

Popups and Modals

Overlay (No CLS):

<div
  class="modal"
  style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1001;"
>
  <!-- Modal content -->
</div>

<div
  class="modal-backdrop"
  style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000;"
></div>

5. Custom HTML Section Shifts

Strikingly custom HTML sections can cause CLS if not properly sized.

Reserve Space for Dynamic Content

Loading Indicators:

<div id="dynamic-content" style="min-height: 400px;">
  <div class="loading-spinner">Loading...</div>
</div>

<script>
  fetch('/api/content')
    .then(response => response.json())
    .then(data => {
      document.getElementById('dynamic-content').innerHTML = data.html;
    });
</script>

Placeholder Content:

<div id="product-list" style="min-height: 600px;">
  <!-- Skeleton loaders or placeholder boxes -->
  <div class="skeleton" style="height: 200px; width: 100%; margin-bottom: 20px;"></div>
  <div class="skeleton" style="height: 200px; width: 100%; margin-bottom: 20px;"></div>
  <div class="skeleton" style="height: 200px; width: 100%;"></div>
</div>

Image galleries and sliders in Strikingly can cause CLS.

Using Built-in Gallery:

  • Strikingly optimizes galleries automatically
  • Prefer built-in gallery blocks over custom code
  • Set consistent image dimensions when uploading

Custom Sliders

If implementing custom carousel/slider:

Reserve Space:

<div class="slider-container" style="height: 500px; overflow: hidden;">
  <div class="slider">
    <img src="slide1.jpg" alt="Slide 1" style="height: 500px; width: auto;">
    <img src="slide2.jpg" alt="Slide 2" style="height: 500px; width: auto;">
    <img src="slide3.jpg" alt="Slide 3" style="height: 500px; width: auto;">
  </div>
</div>

<style>
  .slider-container {
    position: relative;
    width: 100%;
  }

  .slider img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s;
  }

  .slider img.active {
    opacity: 1;
  }
</style>

7. Video Embeds

YouTube, Vimeo, and other video embeds can shift layout.

Reserve Aspect Ratio

Responsive Video with No CLS:

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

Explanation:

  • padding-bottom: 56.25% = 16:9 aspect ratio
  • Reserves exact space needed
  • No shift when video loads

Different Aspect Ratios:

  • 16:9 → 56.25%
  • 4:3 → 75%
  • 1:1 → 100%

Testing & Identifying CLS

Test CLS Score

Tools:

  1. PageSpeed Insights - Field and lab data
  2. Chrome DevTools - Real-time CLS detection
  3. WebPageTest - Detailed analysis

In PageSpeed Insights:

  1. Enter your Strikingly site URL
  2. Check CLS score in Core Web Vitals
  3. Look for "Avoid large layout shifts" in opportunities

Identify Shifting Elements

Chrome DevTools Method:

  1. Open DevTools (F12)
  2. Performance tab
  3. Check Web Vitals checkbox
  4. Record page load
  5. Look for red "Layout Shift" bars
  6. Click to see which elements shifted

Visual Method:

  1. Load your Strikingly site slowly (throttle in DevTools)
  2. Watch for content jumping/shifting
  3. Note which sections cause shifts
  4. Prioritize fixing above-fold shifts

Layout Shift Regions

Common CLS Locations in Strikingly:

  • Hero section (images loading)
  • Logo area (font loading)
  • Gallery sections
  • Custom HTML sections
  • Third-party widgets
  • Footer (social embeds)

Strikingly-Specific Quick Fixes

Immediate CLS improvements:

  • Use Strikingly's built-in image blocks (auto dimensions)
  • Add width/height to custom HTML images
  • Use Strikingly's built-in fonts (no custom fonts)
  • Reserve space for third-party widgets (min-height)
  • Use fixed positioning for banners/modals
  • Set explicit aspect ratios for videos
  • Remove or delay chat widgets until after load
  • Test on slow connection (3G throttle)
  • Fix above-fold shifts first
  • Use built-in gallery instead of custom sliders

Advanced CLS Prevention

CSS Containment

For custom sections with dynamic content:

.custom-section {
  contain: layout;
  min-height: 500px;
}

Transform-Based Animations

Use transforms instead of layout-affecting properties:

Bad (Causes CLS):

.element {
  animation: slideIn 0.5s;
}

@keyframes slideIn {
  from { margin-left: -100px; }
  to { margin-left: 0; }
}

Good (No CLS):

.element {
  animation: slideIn 0.5s;
}

@keyframes slideIn {
  from { transform: translateX(-100px); }
  to { transform: translateX(0); }
}

Skeleton Screens

Show placeholder content while loading:

<div id="content-area">
  <!-- Skeleton loader (same size as actual content) -->
  <div class="skeleton-loader">
    <div class="skeleton-header" style="height: 60px; background: #eee;"></div>
    <div class="skeleton-text" style="height: 20px; background: #eee; margin: 10px 0;"></div>
    <div class="skeleton-text" style="height: 20px; background: #eee; margin: 10px 0;"></div>
  </div>
</div>

<script>
  // Replace with actual content when loaded
  fetch('/api/content')
    .then(response => response.json())
    .then(data => {
      document.getElementById('content-area').innerHTML = data.html;
    });
</script>

Monitoring CLS

Real User Monitoring

Chrome User Experience Report (CrUX):

  • Shows real user CLS data
  • Available in PageSpeed Insights
  • 28-day rolling window
  • Separate mobile/desktop data

Google Search Console:

  • Core Web Vitals report
  • Shows pages with poor CLS
  • Groups by URL pattern
  • Direct SEO impact visibility

Continuous Testing

Weekly Testing:

  1. Run PageSpeed Insights on main pages
  2. Document CLS score
  3. Track trends over time
  4. Test after any design changes

After Updates:

  • Test after adding new sections
  • Test after custom code changes
  • Test after template updates
  • Test on both mobile and desktop

Troubleshooting High CLS

CLS Above 0.25

Check These:

  1. Images without dimensions
  2. Custom fonts with no fallback
  3. Third-party widgets
  4. Custom HTML sections
  5. Dynamically injected content

Debugging Steps:

  1. Use Chrome DevTools Performance recording
  2. Identify largest layout shifts
  3. Fix highest-impact shifts first
  4. Retest after each fix
  5. Target 0.1 or below

CLS Good in Lab, Poor in Field

Possible Causes:

  • Real users on slower devices
  • Different network conditions
  • Mobile vs desktop discrepancy
  • Third-party content varies by user

Solutions:

  • Test on slow 3G network
  • Test on low-end mobile device
  • Check mobile CLS separately
  • Focus on above-fold content

Inconsistent CLS Scores

Normal Variation:

  • User interactions cause shifts
  • Dynamic content varies
  • A/B tests or personalization
  • Third-party content changes

Reduce Variation:

  • Focus on page load CLS (before interaction)
  • Standardize content
  • Control third-party widgets
  • Test in consistent environment

CLS Best Practices Checklist

Images:

  • All images have width and height attributes
  • Use Strikingly's built-in image blocks
  • Custom HTML images have explicit dimensions
  • Responsive images maintain aspect ratio

Fonts:

  • Use Strikingly built-in fonts (preferred)
  • Custom fonts use font-display: swap
  • Fallback fonts similar to custom fonts
  • System fonts considered

Third-Party:

  • Widgets have reserved space (min-height)
  • Non-critical widgets delayed
  • Social embeds have dimensions
  • Chat widgets positioned fixed

Layout:

  • Banners/popups use fixed positioning
  • Dynamic content has placeholder space
  • Videos use aspect-ratio containers
  • Animations use transforms, not layout properties

Testing:

  • Tested with Chrome DevTools Performance
  • CLS under 0.1 on mobile
  • CLS under 0.1 on desktop
  • Above-fold content optimized first

When to Contact Support

Contact Strikingly support if:

  • Template itself has CLS issues
  • Built-in sections causing CLS
  • Platform-related layout shifts
  • CLS persists after optimizations

Strikingly Support:

Next Steps

For general CLS optimization strategies, see CLS Optimization Guide.

Back to top