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

Fix CLS Issues on Tilda (Layout Shift)

Stabilize Tilda layouts by sizing Zero Block images, preloading custom typography, and reserving space for popup and form block injection.

Cumulative Layout Shift (CLS) measures visual stability. Layout shifts frustrate users and hurt conversion rates, especially on Tilda landing pages with forms and popups.

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.

Tilda-Specific CLS Issues

1. Images Without Explicit Dimensions

The most common CLS issue on Tilda sites is images loading without reserved space.

Problem: Images load and push content down as they appear.

Diagnosis:

  • Run PageSpeed Insights
  • Look for "Image elements do not have explicit width and height"
  • Watch page load and observe shifts

Solutions:

A. Use Tilda's Image Blocks Correctly

Tilda's standard image blocks (IM) automatically handle dimensions:

  • Upload images
  • Tilda reserves correct space
  • No layout shift

Verify:

  • Right-click image → Inspect
  • Check <img> has width and height attributes
  • Should see styles with aspect-ratio or explicit dimensions

B. Fix HTML Block Images

If adding images in HTML blocks, always specify dimensions:

<!-- Before: No dimensions -->
<img src="image.jpg" alt="Product">

<!-- After: With dimensions -->
<img src="image.jpg" width="800" height="600" alt="Product">

For responsive images:

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

C. Zero Block Image Elements

In Zero Blocks, set explicit dimensions:

  1. Select image element
  2. Settings → Size
  3. Set width and height
  4. Or use aspect ratio container

Aspect ratio approach:

/* In Zero Block CSS */
.image-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

2. Web Fonts Causing Text Reflow

Custom fonts can cause layout shifts as they load.

Problem: Text reflows when custom font replaces fallback font.

Solutions:

Tilda's built-in fonts are optimized:

  • Settings → Fonts & Colors
  • Choose from library
  • Fonts are preloaded
  • Minimal or no shift

B. Font Display Swap

For custom fonts in HTML blocks:

<style>
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: optional; /* Prevents shift, may use fallback */
  /* OR */
  font-display: swap; /* Shows fallback immediately */
}
</style>

Comparison:

  • font-display: optional - Best for CLS (may use fallback)
  • font-display: swap - Shows fallback then swaps (slight shift)
  • No font-display - Invisible text (FOIT), then shift

C. Match Fallback Font Metrics

Choose fallback fonts that match your custom font size:

body {
  font-family: 'CustomFont', Arial, sans-serif;
  /* Arial is similar size to many custom fonts */
}

Better matching:

/* If custom font is larger */
body {
  font-family: 'CustomFont', 'Arial', sans-serif;
  font-size-adjust: 0.5; /* Experimental, helps match sizes */
}

D. Preload Critical Fonts

Add to Site Settings → Analytics:

<link rel="preload" as="font" type="font/woff2" href="https://static.tildacdn.com/font.woff2" crossorigin>

3. Popup Windows

Tilda popups can cause layout shifts if not configured properly.

Problem: Popup appears and shifts page content.

Solutions:

A. Use Tilda's Popup Settings Correctly

Settings → Popup Windows:

  • Display: Choose "Center" or "Full screen"
  • Background: Use overlay (dims page, doesn't shift)
  • Animation: Use fade, not slide (less disruptive)

B. Don't Push Content

Ensure popup overlays page instead of pushing content:

  • Use fixed positioning (Tilda default)
  • Don't use inline popups that insert into content
  • Avoid top banners that push content down

C. Delay Popup Appearance

Give page time to load before showing popup:

Popup Settings:

  • Display timing: After 3-5 seconds
  • Or: After scroll depth
  • Or: On exit intent

Avoids shift during initial load.

D. Reserve Space for Sticky Banners

If using sticky announcement banner:

<!-- Add to HTML block -->
<div class="announcement-banner" style="min-height: 50px; position: fixed; top: 0; width: 100%; z-index: 1000;">
  Your message
</div>

<!-- Add padding to body so content isn't covered -->
<style>
  body {
    padding-top: 50px;
  }
</style>

4. Embedded Content (Iframes)

Embedded forms, videos, and widgets often lack reserved space.

Solutions:

A. Use Aspect Ratio Containers

For YouTube, Vimeo embeds:

<!-- Responsive iframe container -->
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <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>

This reserves 16:9 space before iframe loads.

B. Set Explicit Height for Embeds

For forms or other embeds:

<div style="min-height: 500px;">
  <iframe src="form-url" width="100%" height="500"></iframe>
</div>

C. Use Tilda's Built-in Blocks

Instead of embedding:

  • Video Block (VD): Optimized YouTube/Vimeo embed
  • Form Block (FD): Tilda native forms (no shift)
  • Social Feed: Built-in blocks for Instagram, etc.

These blocks automatically reserve space correctly.

5. Dynamic Content in HTML Blocks

Content that appears after page load causes shifts.

Common Issues:

A. Loading Indicators

Problem: Spinner disappears and content shifts.

Fix: Reserve space matching final content:

<div id="content-container" style="min-height: 300px;">
  <div class="loader">Loading...</div>
</div>

<script>
$(document).ready(function() {
  $.ajax({
    url: '/api/content',
    success: function(data) {
      $('#content-container').html(data);
      // Container already has min-height, no shift
    }
  });
});
</script>

B. Accordion/Toggle Content

Problem: Opening accordion pushes content down.

Fix: Use CSS transitions, not height changes:

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-content.open {
  max-height: 1000px; /* Large enough value */
}

Or use Tilda's built-in accordion blocks (AC), which are optimized.

C. Conditional Content

Problem: Content appearing based on conditions.

Fix: Reserve space even when empty:

<div class="promo-message" style="min-height: 40px;">
  <!-- Content appears here if conditions met -->
</div>

6. Tilda Block Animations

Animations can cause layout shifts if not handled properly.

Solutions:

A. Use Opacity/Transform, Not Position

Good (no layout shift):

.animated {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s;
}

.animated.visible {
  opacity: 1;
  transform: translateY(0);
}

Bad (causes shift):

.animated {
  margin-top: 50px; /* Changing margin shifts layout */
}

B. Tilda Block Settings

Block Settings → Animation:

  • Use "Fade in" (changes opacity only)
  • Avoid "Slide from top" (changes position)
  • Use "Scale" carefully
  • Test CLS after adding animations

C. Zero Block Animations

In Zero Block:

  • Use transform properties
  • Use opacity changes
  • Avoid changing top, left, margin
  • Set initial state before page loads

7. Form Blocks

Tilda form blocks can shift if validation messages appear.

Solutions:

A. Reserve Space for Error Messages

<!-- Add to HTML block after form -->
<style>
  .t-input-error {
    min-height: 20px; /* Reserve space for error text */
    display: block;
  }
</style>

B. Use Inline Validation

Instead of messages appearing:

  • Use placeholder text
  • Use tooltip validation (doesn't shift layout)
  • Use border color changes

C. Tilda Form Settings

Form Settings:

  • Error display: Choose option that doesn't add height
  • Test form submission errors
  • Verify no layout shift on error

Image galleries can shift as images load.

Solutions:

Tilda's built-in galleries reserve space:

  • Upload images
  • Choose gallery layout
  • Space automatically reserved
  • Lazy loading doesn't shift

B. Grid Layout with Fixed Aspect Ratio

For custom galleries in HTML blocks:

<div class="gallery-grid">
  <div class="gallery-item" style="aspect-ratio: 1;">
    <img src="image1.jpg" alt="">
  </div>
  <div class="gallery-item" style="aspect-ratio: 1;">
    <img src="image2.jpg" alt="">
  </div>
</div>

<style>
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

9. Mobile-Specific CLS

Mobile devices often experience worse CLS.

Common Mobile Issues:

A. Mobile Navigation

Problem: Mobile menu icon or hamburger shifting.

Fix: Reserve space for mobile header:

@media (max-width: 768px) {
  .t-menu {
    min-height: 60px; /* Reserve space */
  }
}

B. Mobile Image Scaling

Problem: Large images loading on mobile.

Fix: Tilda automatically serves smaller images to mobile, but verify:

  • Test on real mobile device
  • Check Network tab for image sizes
  • Ensure responsive images loading correctly

C. Mobile-Specific Blocks

Use Tilda's responsive features:

  • Settings → Show on devices
  • Different blocks for mobile/desktop
  • Mobile blocks optimized separately

D. Touch Interactions

Problem: Buttons/links shifting on touch.

Fix:

/* Prevent layout shift on tap */
.t-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

Testing CLS

Tools

1. PageSpeed Insights

  • Lab data (simulated)
  • Field data (real users)
  • Identifies specific shifting elements
  • Shows visual timeline

2. Chrome DevTools

Enable Layout Shift Regions:

  1. Open DevTools (F12)
  2. More Tools → Rendering
  3. Check Layout Shift Regions
  4. Reload page
  5. Watch for blue highlights (shifts)

3. Web Vitals Extension

4. WebPageTest

  • Filmstrip view shows shifts
  • Compare before/after
  • Multiple device testing

Manual Testing Process

  1. Open Chrome DevTools (F12)
  2. Enable Layout Shift Regions
  3. Reload page and observe blue highlights
  4. Perform interactions:
    • Scroll down page
    • Open popups
    • Submit forms
    • Open accordions
    • Switch tabs/galleries
  5. Note shifting elements
  6. Fix highest-impact shifts first

Test Scenarios

  • Fresh load (cleared cache)
  • Slow connection (3G throttling)
  • Mobile devices (real device testing)
  • Different page types (home, landing, content)
  • Form interactions (submission, errors)
  • Popup triggers (time, scroll, exit)

Common CLS Patterns in Tilda

Element Type Common CLS Cause Fix Priority
Hero images No dimensions set Highest
Custom fonts Font swap without display setting High
Popups Pushes content instead of overlay High
Embeds No reserved space for iframe High
Forms Error messages adding height Medium
Galleries Images loading without dimensions Medium
Animations Block animations on load Low

Quick Wins Checklist

  • Ensure all images have width/height
  • Use Tilda's font library (or font-display: optional)
  • Set popups to overlay, not inline
  • Reserve space for iframes with aspect ratio
  • Use min-height for dynamic content areas
  • Test with Layout Shift Regions enabled
  • Fix mobile-specific shifts
  • Use Tilda's built-in blocks (pre-optimized)
  • Delay popup appearance until after load
  • Use transform/opacity for animations (not position)

Tilda Block-Specific Issues

Cover Blocks (CR, CV)

  • Usually good (fixed height)
  • Watch for dynamic overlay content
  • Test text overlays for font shifts

Text Blocks (TX)

  • Mainly font-related shifts
  • Use Tilda fonts or font-display
  • Avoid dynamic content insertion

Image Blocks (IM)

  • Generally well-optimized
  • Verify dimensions set correctly
  • Check lazy loading doesn't shift

Form Blocks (FD)

  • Reserve space for validation
  • Test error state
  • Check thank you message
  • Use Tilda's galleries (optimized)
  • Custom galleries need dimensions
  • Test lazy loading

HTML Blocks (T123)

  • Most prone to shifts
  • Manually set all dimensions
  • Test thoroughly

Monitoring CLS Over Time

Chrome User Experience Report (CrUX):

  • Real user CLS data
  • Available in PageSpeed Insights
  • 28-day rolling average
  • Shows p75 (75th percentile)

Google Search Console:

Continuous Monitoring:

  • SpeedCurve
  • Calibre
  • DebugBear
  • Set up alerts for CLS regressions

When to Get Help

Consider Hiring a Developer

  • CLS consistently over 0.25 after basic fixes
  • Complex Zero Blocks with shifting issues
  • Custom code causing layout problems
  • Multiple dynamic elements
  • Advanced optimization needed

Find developers:

Tilda Support

Contact for:

  • Block-specific issues
  • Platform bugs
  • Popup configuration questions
  • Gallery optimization

Advanced Techniques

Critical CSS

Inline critical styles to prevent shifts:

<!-- Add to Site Settings → Analytics -->
<style>
  /* Reserve space for hero before CSS loads */
  .t-cover {
    min-height: 100vh;
  }

  /* Prevent font shift */
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
</style>

Contain Intrinsic Size

For modern browsers, hint content size:

.lazy-container {
  content-visibility: auto;
  contain-intrinsic-size: 500px; /* Expected height */
}

Aspect Ratio for All Media

Modern CSS aspect-ratio property:

.media-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.media-container img,
.media-container iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Next Steps

For general CLS optimization strategies, see CLS Optimization Guide.

Back to top