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

Fix CLS Issues on Simvoly (Layout Shift)

Stabilize Simvoly layouts by sizing funnel page images, preloading custom fonts, and reserving space for dynamic form and popup elements.

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

What is CLS?

Cumulative Layout Shift measures visual stability. Google recommends CLS under 0.1. Simvoly generates CLS from its drag-and-drop builder framework injecting layout CSS after initial render, Google Fonts loading causing text reflow, popup and form widget animations, and section background images loading without reserved space.

Simvoly-Specific CLS Causes

  • Builder framework CSS injection -- Simvoly's layout engine applies responsive styles after the initial HTML renders, causing elements to reposition
  • Google Fonts FOUT -- custom font selections load asynchronously, causing text to reflow when fonts swap
  • Popup and notification bars -- exit-intent popups, cookie banners, and promotional bars push page content when they appear
  • Countdown timer rendering -- countdown widgets calculate and render their display after page load
  • Image sections without aspect ratios -- full-width image sections resize as images load

Fixes

1. Optimize Image Sections

In the Simvoly editor:

  • Set explicit section heights in the section settings rather than relying on auto-height from image content
  • Use the Fixed Height option on hero sections to prevent resizing during image load
  • Crop images to consistent aspect ratios (16:9 for hero, 1:1 for profile photos) before uploading
  • Avoid using "auto" height on image-heavy sections

2. Configure Popups and Bars Properly

  • Set notification bars to overlay mode instead of pushing content down
  • Configure popups to trigger on scroll or after delay rather than on page load
  • Use Simvoly's built-in cookie consent with the bottom fixed position option

If using custom code for banners:

/* Add via Simvoly Custom Code > Custom CSS */
.notification-bar, .cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}
  • Limit to 2 font families in Simvoly's design settings
  • Choose fonts with metrics close to system fonts (e.g., Open Sans is close to Arial)
  • If using custom fonts via Custom Code, add font-display: swap:
<!-- Add to Simvoly Custom Code > Header -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

4. Stabilize Dynamic Elements

For countdown timers, forms, and interactive widgets:

  • Place dynamic elements (countdown timers, animated counters) in their own dedicated sections
  • Set minimum heights on sections containing forms or interactive elements
  • Avoid placing dynamic widgets adjacent to text content that could shift
/* Add via Custom CSS */
.countdown-section {
  min-height: 150px;
}

.form-section {
  min-height: 400px;
}

5. Test Mobile Layout Separately

  • Simvoly's responsive mode rearranges columns to stack vertically on mobile
  • Check that stacked sections have consistent heights
  • Use the mobile preview to verify that hero sections maintain proper aspect ratios
  • Reduce the number of sections visible above the fold on mobile

Measuring CLS on Simvoly

  1. PageSpeed Insights -- test both desktop and mobile, compare CLS scores
  2. Chrome DevTools Performance tab -- record page load and look for layout-shift entries
  3. Test funnel pages vs. standard pages -- funnel pages with forms and countdown timers typically have higher CLS
  4. Popup testing -- trigger popups/notification bars during recording to see their CLS impact

Analytics Script Impact

  • Add analytics via Settings > Custom Code in the Footer section to avoid blocking render
  • Avoid analytics scripts that inject visible elements (survey widgets, NPS popups)
  • Heatmap tools that add feedback buttons should use fixed positioning
  • Simvoly's built-in analytics cause no CLS since they are server-side
शीर्ष पर वापस जाएँ