Fixing CLS Issues on Squarespace | Blue Frog Docs

Fixing CLS Issues on Squarespace

Guide to diagnosing and fixing Cumulative Layout Shift (CLS) issues specific to Squarespace websites, including template-specific solutions.

Fixing CLS Issues on Squarespace

Cumulative Layout Shift (CLS) measures visual stability. When elements move unexpectedly during page load, it creates a poor user experience and hurts your Core Web Vitals scores.

What is CLS?

Cumulative Layout Shift (CLS) measures the sum of all unexpected layout shifts that occur during the page load.

CLS Thresholds

  • Good: 0.1 or less
  • Needs Improvement: 0.1 - 0.25
  • Poor: More than 0.25

What Causes Layout Shift?

  • Images without defined dimensions
  • Ads or embeds loading late
  • Web fonts changing size (FOIT/FOUT)
  • Dynamically injected content
  • Animations triggering reflow

Diagnosing CLS Issues

Step 1: Measure Your CLS

Using PageSpeed Insights:

  1. Go to PageSpeed Insights
  2. Enter your Squarespace URL
  3. Look for CLS in "Core Web Vitals"
  4. Click "View Treemap" to see which elements are shifting

Using Chrome DevTools:

  1. Open your site
  2. Press F12
  3. Go to Performance tab
  4. Enable "Web Vitals" in settings (gear icon)
  5. Record page load
  6. Look for red "Layout Shift" markers

Using Web Vitals Extension:

  1. Install Web Vitals Chrome Extension
  2. Visit your page
  3. Check CLS score in real-time

Step 2: Identify Shifting Elements

Common culprits on Squarespace:

  • Images loading without dimensions
  • Navigation menu changing height
  • Announcement bar appearing late
  • Custom fonts loading (FOUT)
  • Third-party widgets (social feeds, calendars)
  • Lazy-loaded images
  • Dynamically loaded products

Squarespace-Specific CLS Fixes

Fix 1: Reserve Space for Images

The most common cause of CLS on Squarespace.

For Squarespace 7.1 (Fluid Engine)

Images should automatically have dimensions, but verify:

  1. Check image block settings:

    • Select image block
    • Design tab > Set fixed aspect ratio
    • Avoid "Auto" height when possible

  2. Use Image blocks instead of Background images:

    • Image blocks maintain aspect ratio
    • Background images can cause shift

  3. Set explicit dimensions with CSS:

/* For specific image blocks */
.image-block-wrapper {
  aspect-ratio: 16 / 9; /* Adjust to your image ratio */
}

.image-block-wrapper img {
  width: 100%;
  height: auto;
}

For Squarespace 7.0

Add dimensions via Custom CSS:

/* Hero image - adjust dimensions to match your image */
.Index-page-image {
  width: 100%;
  height: 600px; /* Set to actual height */
  object-fit: cover;
}

/* Product images */
.ProductItem-gallery-slides-item img {
  aspect-ratio: 1 / 1; /* Square products */
  width: 100%;
}

/* Blog featured images */
.Blog-item-image-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Fix 2: Optimize Web Font Loading

Font loading can cause text to shift.

Use font-display: swap

Add to Design > Custom CSS:

/* Optimize font loading to prevent layout shift */
@font-face {
  font-family: 'YourFontName';
  font-display: swap; /* Show fallback immediately, swap when font loads */
}

/* Apply to all fonts */
* {
  font-display: swap;
}

Match Fallback Font Metrics

Reduce shift by choosing fallback fonts with similar dimensions:

body {
  /* If using Helvetica, fallback to similar Arial */
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3 {
  /* If using Georgia, fallback to similar Times */
  font-family: 'Georgia', 'Times New Roman', serif;
}

Limit Font Weights

  1. Go to Design > Site Styles > Fonts
  2. Only enable font weights you actually use
  3. Fewer weights = faster loading = less shift

Fix 3: Fix Announcement Bar Shifts

Announcement bars often appear after page load, causing shift.

Reserve Space for Announcement Bar

Add to Custom CSS:

/* Reserve space for announcement bar */
.sqs-announcement-bar-dropzone {
  min-height: 40px; /* Adjust to your bar's height */
}

/* For 7.1 */
#announcementBar {
  min-height: 40px;
}

Or Hide on Mobile (if causing issues)

@media (max-width: 768px) {
  .sqs-announcement-bar-dropzone,
  #announcementBar {
    display: none !important;
  }
}

Fix 4: Stabilize Navigation Menu

Navigation can shift when fonts load or on mobile.

Set Fixed Header Height

/* Desktop header */
#header {
  height: 80px; /* Set to your actual header height */
}

/* Mobile header */
@media (max-width: 768px) {
  #header {
    height: 60px; /* Mobile header height */
  }
}

For 7.1 Templates

.header {
  min-height: 80px;
}

.header-layout-nav-right .header-nav {
  min-height: 80px;
}

Prevent Logo Shift

.header-title-logo img {
  width: 150px; /* Set to actual logo width */
  height: 50px; /* Set to actual logo height */
}

Fix 5: Handle Lazy-Loaded Content

Lazy loading can cause shifts if not properly implemented.

For Summary Blocks (Blog Posts, Products)

/* Reserve space for summary items */
.summary-item {
  min-height: 400px; /* Adjust based on content */
}

.summary-thumbnail {
  aspect-ratio: 16 / 9;
  width: 100%;
}

For Product Grids

.grid-item {
  min-height: 350px; /* Reserve space for product cards */
}

.ProductItem-gallery {
  aspect-ratio: 1 / 1; /* Square product images */
}

Fix 6: Fix Third-Party Embeds

Third-party widgets often cause significant CLS.

Social Media Embeds

Instagram:

/* Reserve space for Instagram embed */
.instagram-embed {
  min-height: 500px;
  aspect-ratio: 1 / 1;
}

Twitter/X:

.twitter-tweet {
  min-height: 200px;
}

Facebook:

.fb-post {
  min-height: 400px;
}

General Embed Fix

For Squarespace embed blocks:

.sqs-block-embed {
  min-height: 300px; /* Adjust based on typical embed size */
}

/* Specific to video embeds */
.sqs-block-embed .embed-block-wrapper {
  aspect-ratio: 16 / 9;
}

Fix 7: Squarespace 7.1 Fluid Engine Specific

Section Loading

Fluid Engine sections can shift. Stabilize them:

/* Set minimum heights for sections */
.page-section {
  min-height: 100px;
}

/* For specific section types */
.page-section.content-collection {
  min-height: 500px;
}

Block Spacing

/* Prevent spacing shifts */
.fe-block {
  margin-bottom: 2rem; /* Consistent spacing */
}

Fix 8: Commerce-Specific CLS Fixes

Product Images

/* Product page main image */
.ProductItem-gallery-slides {
  aspect-ratio: 1 / 1; /* Adjust to your product image ratio */
  width: 100%;
}

/* Product thumbnails */
.ProductItem-gallery-thumbnails-item {
  width: 80px;
  height: 80px;
}

Cart Icon Badge

/* Prevent cart badge from causing shift */
.Cart-notification {
  position: absolute;
  right: -8px;
  top: -8px;
}

Product Variants

/* Reserve space for variant selector */
.product-variants {
  min-height: 50px;
}

Fix 9: Custom Code Optimization

If you have custom code in Code Injection, it may cause shifts.

Load Non-Critical Scripts After Page Load

<!-- In Footer Code Injection -->
<script>
  // Wait for page to fully load before running non-critical scripts
  window.addEventListener('load', function() {
    // Your custom code here
  });
</script>

Reserve Space for Dynamically Loaded Content

<style>
  .custom-widget-container {
    min-height: 300px; /* Reserve space before widget loads */
  }
</style>

Template-Specific CLS Fixes

Squarespace 7.0 Templates

Brine Family

Common issue: Index navigation shifts

/* Fix Brine index navigation */
.Index-page {
  min-height: 100vh;
}

.Index-page-image {
  height: 100vh;
  object-fit: cover;
}

Bedford Family

Common issue: Header logo shift

.Header-branding {
  height: 60px; /* Set to logo height */
}

.Header-branding-logo {
  max-height: 60px;
  width: auto;
}

Avenue Template

Common issue: Slideshow shifts

.Index-gallery-wrapper {
  min-height: 100vh;
}

Squarespace 7.1 Templates

General 7.1 Fixes

/* Stabilize Fluid Engine sections */
.fluid-engine .fe-block[data-block-type="image"] {
  aspect-ratio: attr(data-aspect-ratio);
}

/* Fix header */
.header-announcement-bar-wrapper {
  min-height: 40px;
}

.header-nav-wrapper {
  min-height: 80px;
}

Testing Your Fixes

Real-Time Testing

  1. Web Vitals Extension:

    • Install extension
    • Visit your page
    • Watch CLS score as page loads
    • Note which loads cause spikes

  2. Chrome DevTools:

    • F12 > Performance
    • Record page load
    • Look for "Layout Shift" events
    • Click on them to see which elements shifted

Before & After Comparison

  1. Run PageSpeed Insights before fixes
  2. Note CLS score and shifting elements
  3. Implement fixes
  4. Clear cache and retest
  5. Compare scores

Common Squarespace CLS Issues

Issue: Fonts Causing Shift (FOUT)

Problem: Text renders, then changes when custom font loads.

Solution:

/* Use font-display: swap */
@font-face {
  font-family: 'CustomFont';
  font-display: swap;
}

/* Or use font-display: optional to prevent shift */
@font-face {
  font-family: 'CustomFont';
  font-display: optional; /* Don't load if not ready immediately */
}

Issue: Images in Summary Blocks Shifting

Problem: Blog or product grids shift as images load.

Solution:

.summary-thumbnail-outer-container {
  aspect-ratio: 16 / 9; /* Or your image ratio */
}

.summary-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Issue: Mobile Menu Causing Shift

Problem: Mobile navigation button shifts content.

Solution:

@media (max-width: 768px) {
  .header-menu-nav-wrapper {
    position: fixed; /* Prevent pushing content */
    height: 100%;
  }

  .header-burger-btn {
    position: fixed;
    right: 20px;
  }
}

Preventing Future CLS Issues

Best Practices

  1. Always Set Image Dimensions:

    • Use aspect ratios in Fluid Engine
    • Add CSS dimensions for custom images

  2. Test Before Publishing:

    • Use Preview mode
    • Run PageSpeed Insights
    • Test on mobile devices

  3. Avoid Late-Loading Content:

    • Load critical content first
    • Defer non-essential widgets

  4. Use System Fonts or Font-Display:

    • Faster loading
    • Less shift

  5. Reserve Space for Dynamic Content:

    • Min-heights for widgets
    • Placeholders for loading content

Mobile-Specific CLS Optimization

Mobile often has different (worse) CLS than desktop.

Mobile Testing

  1. PageSpeed Insights Mobile:

    • Always test mobile separately
    • Mobile scores often worse than desktop

  2. Real Device Testing:

    • Test on actual phones
    • Check slow 3G networks

Mobile-Specific Fixes

@media (max-width: 768px) {
  /* Simplify mobile images */
  .mobile-image {
    aspect-ratio: 1 / 1;
    width: 100%;
  }

  /* Fix mobile header */
  .header {
    height: 60px;
  }

  /* Hide shifting elements on mobile */
  .announcement-bar {
    display: none; /* If it causes issues */
  }
}

Monitoring CLS Over Time

Google Search Console

  1. Go to Core Web Vitals report
  2. Filter by mobile/desktop
  3. Identify pages with poor CLS
  4. Fix those specific pages

Field Data vs Lab Data

  • Lab Data: PageSpeed Insights, Lighthouse (controlled environment)
  • Field Data: Real users in Google Search Console

Note: Field data is what matters for SEO rankings.

Advanced CLS Fixes

Prevent Reflow from Scripts

// Bad: Causes reflow
element.style.width = '100px';
element.style.height = '200px';

// Good: Use transform instead
element.style.transform = 'scale(2)';

// Better: Batch DOM changes
requestAnimationFrame(() => {
  element.style.width = '100px';
  element.style.height = '200px';
});

Use CSS Containment

/* Limit layout calculation scope */
.isolated-component {
  contain: layout;
}

.summary-item {
  contain: layout style paint;
}

Expected Results

Realistic CLS Goals

  • Squarespace 7.1: 0.05 - 0.10 CLS achievable
  • Squarespace 7.0: 0.08 - 0.15 CLS typical
  • Commerce sites: Slightly higher due to dynamic product content

What You Can't Control

  • Squarespace's core template code
  • Some third-party embed behavior
  • Base platform rendering

Focus on:

  • Your images and content
  • Custom CSS and code
  • Third-party integrations you control

Quick Wins

Priority fixes for maximum impact:

  1. Set image aspect ratios (biggest impact)
  2. Add font-display: swap (easy, effective)
  3. Fix announcement bar (common issue)
  4. Reserve space for embeds (if you use them)
  5. Stabilize header/nav (visible, important)

Next Steps

Additional Resources

↑ Back to top
// SYS.FOOTER