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. Ucraft generates CLS from its builder framework applying responsive layout CSS after initial render, Google Fonts loading asynchronously causing text reflow, app marketplace widgets injecting content, and section background images loading without reserved dimensions.
Ucraft-Specific CLS Causes
- Builder responsive reflow -- Ucraft's layout engine recalculates block positions after initial render, especially on mobile where columns stack
- Google Fonts FOUT -- custom font selections load asynchronously and cause visible text swap
- App widget injection -- installed apps (cookie consent, live chat, email popups) inject DOM elements after page load
- Image section resizing -- sections with background images or image elements resize as images load
- E-commerce product grid -- product cards with variable-length titles and optional sale badges create inconsistent heights
Fixes
1. Set Fixed Section Heights
In the Ucraft editor:
- Set explicit minimum heights on hero and image sections via Element Settings
- Use the Fixed Height option on sections containing background images
- Crop all images to consistent aspect ratios before uploading (16:9 for hero, 1:1 for thumbnails)
2. Configure Popups and Widgets Properly
For apps that inject visible content:
- Set cookie consent banners to fixed bottom position in the app settings
- Configure email popups to trigger after scroll or after delay instead of on page load
- Set live chat widgets to load in a collapsed state
If you have access to custom CSS (Ucraft Pro):
/* Force cookie/consent banners to overlay */
.cookie-notice, .gdpr-banner {
position: fixed !important;
bottom: 0 !important;
z-index: 9999 !important;
}
/* Prevent chat widgets from shifting content */
.chat-widget-container {
position: fixed !important;
bottom: 20px !important;
right: 20px !important;
}
3. Minimize Font-Related Shifts
In Design Settings > Typography:
- Limit to 2 font families maximum
- Choose fonts metrically similar to system fonts (Open Sans ~ Arial, Lora ~ Georgia)
- Avoid display/decorative fonts for body text
If using custom code injection:
<!-- Add to Header Code section -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
4. Stabilize Product Grids
For Ucraft e-commerce pages:
- Use consistent product image aspect ratios (upload all product images at the same dimensions)
- Keep product titles to 2 lines or fewer
- Use a consistent description length or truncate via the editor
- Set the product grid to a fixed number of columns rather than auto-fill
/* If custom CSS is available */
.product-card {
min-height: 380px;
}
.product-card img {
aspect-ratio: 1 / 1;
object-fit: cover;
}
.product-title {
max-height: 3em;
overflow: hidden;
}
5. Test Mobile Layout Carefully
- Ucraft's responsive mode rearranges blocks for mobile viewports
- Preview every page in the mobile editor before publishing
- Check that stacked sections maintain proper spacing
- Verify that images scale correctly and do not cause horizontal scrolling
Measuring CLS on Ucraft
- PageSpeed Insights -- test both desktop and mobile; compare CLS scores
- Chrome DevTools Performance tab -- record page load and look for layout-shift entries
- Test with apps disabled -- temporarily deactivate marketplace apps to isolate their CLS contribution
- Product page testing -- e-commerce pages with variable product data tend to have higher CLS
Analytics Script Impact
- Add analytics via Settings > Header/Footer Code in the Footer section
- Avoid analytics tools that inject visible survey widgets or feedback buttons
- Ucraft's built-in analytics (if available) are server-side and cause no CLS
- Limit to one analytics platform to reduce script overhead