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:

Run PageSpeed Insights
Look for "Image elements do not have explicit width and height"
Check CLS metric in Core Web Vitals

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:

Select section with image
Upload image via Strikingly interface
Strikingly automatically sets dimensions
No code needed

Verification:

Right-click on page → View Source
Find your image
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.

Strikingly Built-in Fonts (Recommended)

Using Strikingly's Font Picker:

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

Accessing Font Settings:

In Strikingly editor, click Style
Select Fonts
Choose from built-in fonts
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>

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>

6. Gallery and Slider Sections

Image galleries and sliders in Strikingly can cause CLS.

Strikingly Gallery Sections

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:

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

In PageSpeed Insights:

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

Identify Shifting Elements

Chrome DevTools Method:

Open DevTools (F12)
Performance tab
Check Web Vitals checkbox
Record page load
Look for red "Layout Shift" bars
Click to see which elements shifted

Visual Method:

Load your Strikingly site slowly (throttle in DevTools)
Watch for content jumping/shifting
Note which sections cause shifts
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:

Run PageSpeed Insights on main pages
Document CLS score
Track trends over time
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:

Images without dimensions
Custom fonts with no fallback
Third-party widgets
Custom HTML sections
Dynamically injected content

Debugging Steps:

Use Chrome DevTools Performance recording
Identify largest layout shifts
Fix highest-impact shifts first
Retest after each fix
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:

Email: support@strikingly.com
Help Center: support.strikingly.com
Live chat (Pro/VIP plans)

Next Steps

For general CLS optimization strategies, see CLS Optimization Guide.

शीर्ष पर वापस जाएँ

Fix CLS Issues on Strikingly (Layout Shift)

Strikingly-Specific CLS Issues

1. Images Without Dimensions

Fix: Strikingly Built-in Images

Fix: Custom HTML Images

2. Font Loading Causing Shifts

Strikingly Built-in Fonts (Recommended)

Custom Font Optimization

3. Dynamic Content and Third-Party Widgets

Common Culprits

Reserve Space for Third-Party Content

Optimize Specific Widgets

4. Banner and Popup Shifts

Cookie Consent Banners

Announcement Bars

Popups and Modals

5. Custom HTML Section Shifts

Reserve Space for Dynamic Content

6. Gallery and Slider Sections

Strikingly Gallery Sections

Custom Sliders

7. Video Embeds

Reserve Aspect Ratio

Testing & Identifying CLS

Test CLS Score

Identify Shifting Elements

Layout Shift Regions

Strikingly-Specific Quick Fixes

Advanced CLS Prevention

CSS Containment

Transform-Based Animations

Skeleton Screens

Monitoring CLS

Real User Monitoring

Continuous Testing

Troubleshooting High CLS

CLS Above 0.25

CLS Good in Lab, Poor in Field

Inconsistent CLS Scores

CLS Best Practices Checklist

When to Contact Support

Next Steps