Fix CLS Issues on Google Sites (Layout Shift) | OpsBlu Docs

Fix CLS Issues on Google Sites (Layout Shift)

Reduce Google Sites layout shift by sizing embedded content, constraining section containers, and optimizing Drive media placeholders.

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. Google Sites manages its own rendering pipeline, so you have limited control over CLS. Most CLS comes from embedded content loading, image rendering, and Google's own framework hydration.

Google Sites-Specific CLS Causes

  • Embedded Google Drive content -- Docs, Sheets, and Slides iframes render at unknown heights, then resize once content loads
  • YouTube video embeds -- video players load with a placeholder that resizes when the iframe initializes
  • Google Forms embeds -- forms render at variable heights depending on question count, causing surrounding content to shift
  • Images loading without dimensions -- Google Sites does not always output width/height attributes on uploaded images
  • Section collapse/expand -- collapsible sections and accordion-style layouts shift content when toggled

Fixes

Since Google Sites offers no custom CSS or JavaScript, fixes are content-structure based:

1. Minimize Embeds on Key Pages

Each embedded item (Docs, Sheets, Maps, YouTube) is an iframe that loads independently:

  • Place embeds at the bottom of the page where shifts are less impactful
  • Use only one embed per section
  • Prefer static content (text, images) over dynamic embeds for above-fold areas

2. Use Consistent Image Sizes

Upload images with consistent dimensions within each section:

  • All images in a gallery row should be the same aspect ratio
  • Hero/banner images should be exactly 1920x1080 or 1600x900
  • Thumbnail images in cards should all be the same size (e.g., 400x300)

This helps Google Sites' layout engine reserve the correct space before images load.

3. Structure Sections for Stability

  • Place text-heavy sections above image-heavy sections
  • Avoid mixing content types (text + embed + image) in a single section
  • Use the "full bleed" layout for hero images -- this reserves the full viewport width

4. Avoid Collapsible Sections Above Content

Collapsible/expandable text sections shift everything below them when toggled. Place them:

  • At the bottom of the page
  • In their own dedicated page/subpage rather than inline

5. Minimize Google Fonts Usage

Google Sites loads fonts that can cause text reflow:

  • Stick to the default font (Roboto) which is likely cached
  • Avoid using different fonts for headings vs. body text
  • Fewer unique font selections = fewer font loads = less text reflow

Measuring CLS on Google Sites

  1. PageSpeed Insights -- check both mobile and desktop CLS scores
  2. Chrome DevTools Performance tab -- record page load on the published URL and look for layout-shift entries
  3. Web Vitals extension -- install the Chrome extension and visit your published site
  4. Google Search Console -- Core Web Vitals report shows real-user CLS data

You can also measure CLS programmatically on the published site using the Web Vitals library in the browser console:

// Paste in Chrome DevTools console on your published Google Sites page
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log('Layout shift:', {
        value: entry.value.toFixed(4),
        sources: entry.sources?.map(s => s.node?.nodeName + ' - ' + s.node?.className)
      });
    }
  }
}).observe({ type: 'layout-shift', buffered: true });

This identifies which specific elements are shifting, even on Google Sites where you cannot modify the DOM directly.

Analytics Script Impact

Google Sites only supports Google Analytics (no custom scripts), which runs asynchronously and does not inject visible DOM elements. CLS from analytics is essentially zero on Google Sites.

The main CLS risk is from Google's own framework rendering and embedded content, not from analytics.

Back to top