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. Webnode generates CLS from its builder framework applying responsive CSS after initial render, template fonts loading asynchronously, section images loading without reserved space, and widget blocks (maps, forms, galleries) initializing after page load.
Webnode-Specific CLS Causes
- Builder responsive reflow -- Webnode's layout engine recalculates section positions after initial render, particularly on mobile viewports
- Google Fonts FOUT -- template font selections load asynchronously, causing visible text reflow
- Section background images -- full-width sections with background images resize as the images download
- Widget initialization -- map embeds, galleries, and form widgets render after the page frame loads, pushing surrounding content
- Webnode branding bar -- on free plans, the Webnode branding bar at the top or bottom of the page loads after content and shifts layout
Fixes
1. Set Fixed Section Heights
In the Webnode editor:
- Use the section settings to set minimum heights on hero and image sections
- Enable Fixed Height mode on sections with background images
- Crop images to consistent aspect ratios before uploading (16:9 for hero sections)
2. Position Widgets Carefully
- Place map embeds in their own dedicated section with adequate height
- Put contact forms below main content, not between text sections
- Use image galleries in full-width sections rather than inline with text
- Remove widgets from above-the-fold sections when possible
3. Choose Stable Templates
- Prefer templates with simple, single-column hero sections
- Avoid templates with animated sliders or carousels above the fold
- Test the template's mobile layout in Webnode's preview mode
- Templates with fixed-height headers cause less CLS than those with responsive/auto headers
4. Minimize Font Shifts
- Choose templates that use system fonts or common Google Fonts (already likely cached)
- Limit to 2 font families in the template design settings
- Avoid decorative/display fonts that have metrics very different from fallback fonts
If you have access to code injection (premium plans):
<!-- Add to Header Code -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
5. Handle E-Commerce Product Grids
For Webnode online stores:
- Upload all product images at the same dimensions (e.g., 800x800 square)
- Keep product titles to 2 lines or fewer
- Use consistent pricing formats across all products
- Set the product grid to display a fixed number of items per page
Measuring CLS on Webnode
- PageSpeed Insights -- test both desktop and mobile; compare CLS scores
- Chrome DevTools Performance tab -- record page load and look for layout-shift entries
- Test page types separately -- homepage, blog listing, product listing, and contact page will have different CLS profiles
- Mobile-specific testing -- Webnode's responsive stacking behavior is the most common CLS source
Analytics Script Impact
- On premium plans, add analytics via Settings > Header/Footer code in the Footer section
- Avoid analytics tools that inject visible elements (survey popups, NPS widgets)
- On free plans, Webnode's branding scripts are non-removable and may contribute minor CLS
- Cookie consent (if added via code injection) should use
position: fixedoverlay