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

Fix CLS Issues on Yola (Layout Shift)

Stabilize Yola layouts by sizing Sitebuilder images, preloading custom fonts, and constraining widget and embedded content containers.

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. Yola generates CLS from its Sitebuilder framework applying layout CSS after initial render, Google Fonts loading causing text reflow, widget content injecting after page load, and section background images loading without reserved dimensions.

Yola-Specific CLS Causes

  • Sitebuilder responsive reflow -- Yola's layout engine recalculates element positions after initial render, especially when the page switches to mobile layout
  • Google Fonts FOUT -- template font selections load asynchronously and cause visible text swap when fonts finish downloading
  • Widget injection -- widgets (maps, social feeds, forms, counters) load their content after the page frame renders, pushing surrounding elements
  • Image sections without reserved space -- hero and content sections resize as background images load
  • Yola branding bar -- on free/basic plans, the Yola branding bar loads after content and shifts the page

Fixes

1. Use Consistent Image Dimensions

In the Yola Sitebuilder:

  • Crop all hero images to the same aspect ratio (16:9 recommended) before uploading
  • Set explicit section heights in the editor rather than relying on auto-sizing from image content
  • Use the Fixed Height section option when available
  • Upload images at the target display size, not larger

2. Position Widgets to Minimize Shifts

  • Place map widgets in their own dedicated sections at the bottom of the page
  • Put contact forms in fixed-height sections below main content
  • Remove social media feed widgets from above-the-fold areas (these load third-party content asynchronously)
  • Move embedded videos below the fold

3. Choose a Stable Template

  • Prefer templates with fixed-height header/hero sections
  • Avoid templates with animated sliders or image carousels
  • Test the template's mobile layout in preview mode before publishing
  • Templates with fewer widget areas produce less CLS
  • Limit to 2 font families in the template settings
  • Choose fonts with metrics close to system fonts (Open Sans ~ Arial, Lora ~ Georgia)
  • Avoid decorative/script fonts for body text
  • Use only Regular (400) and Bold (700) weights

5. Handle E-Commerce Product Layouts

For Yola Online Store pages:

  • Upload all product images at identical dimensions (e.g., 800x800)
  • Keep product titles concise (under 2 lines)
  • Use consistent description lengths or rely on the platform's truncation
  • Set a fixed number of products per row in the store layout settings

Measuring CLS on Yola

  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 after initial render
  3. Widget testing -- compare CLS on pages with and without widgets to isolate their impact
  4. Mobile-specific testing -- Yola's responsive stacking is the most common source of CLS

Use this console snippet on your published Yola site to identify exactly which elements shift:

// Run in Chrome DevTools console to log all layout shifts with element details
let clsTotal = 0;
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      clsTotal += entry.value;
      entry.sources?.forEach(source => {
        console.log(`CLS +${entry.value.toFixed(4)} | Total: ${clsTotal.toFixed(4)}`,
          source.node?.tagName, source.node?.className,
          `moved from (${source.previousRect?.x},${source.previousRect?.y}) to (${source.currentRect?.x},${source.currentRect?.y})`
        );
      });
    }
  }
}).observe({ type: 'layout-shift', buffered: true });

Common Yola elements that appear as shift sources: .yola-widget-container, .site-section-bg, .font-loader, and .branding-bar.

Analytics Script Impact

  • Add analytics via Yola's site settings or code injection feature (if available on your plan)
  • Avoid analytics tools that inject visible survey widgets or NPS popups
  • On free plans, Yola's branding scripts cannot be removed and may contribute minor CLS
  • Limit to one analytics platform to minimize cumulative script overhead
Nach oben