Fixing LCP Issues on Squarespace | Blue Frog Docs

Fixing LCP Issues on Squarespace

Comprehensive guide to diagnosing and fixing Largest Contentful Paint (LCP) performance issues specific to Squarespace websites.

Fixing LCP Issues on Squarespace

Largest Contentful Paint (LCP) measures how quickly the main content of your page loads. Google considers LCP a critical Core Web Vital, and poor LCP scores can hurt your SEO rankings and user experience.

What is LCP?

Largest Contentful Paint (LCP) is the time it takes for the largest visible element in the viewport to load and render.

LCP Thresholds

  • Good: 2.5 seconds or less
  • Needs Improvement: 2.5 - 4.0 seconds
  • Poor: More than 4.0 seconds

Common LCP Elements on Squarespace

  • Hero images (especially on homepages)
  • Banner images
  • Large product images
  • Video thumbnails
  • Background images
  • Text blocks (if no large images)

Diagnosing LCP Issues

Step 1: Measure Your LCP

Using PageSpeed Insights:

  1. Go to PageSpeed Insights
  2. Enter your Squarespace URL
  3. Click Analyze
  4. Look for LCP in the "Core Web Vitals" section
  5. Note which element is identified as the LCP element

Using Chrome DevTools:

  1. Open your site
  2. Press F12 to open DevTools
  3. Go to Performance tab
  4. Click Record and reload the page
  5. Stop recording after load
  6. Look for "LCP" in the timeline

Step 2: Identify the LCP Element

The LCP element is usually:

  • Homepage: Hero/banner image
  • Product Pages: Main product image
  • Blog Posts: Featured image
  • Portfolio: Gallery image

Squarespace-Specific LCP Fixes

Fix 1: Optimize Images

Images are the #1 cause of poor LCP on Squarespace.

Compress Images Before Upload

Target Sizes:

  • Hero images: < 200 KB
  • Product images: < 150 KB
  • Content images: < 100 KB

Recommended Tools:

Settings:

  • Format: JPEG for photos, PNG for graphics with transparency
  • Quality: 80-85% for JPEG
  • Dimensions: No larger than display size needed

Use Squarespace's Image Editor

  1. Click on the image in the editor
  2. Click Edit
  3. Adjust quality slider (aim for 80-90%)
  4. Save changes

Enable Squarespace Image Optimization

Squarespace automatically serves optimized images, but ensure it's working:

  • Uses WebP format when supported
  • Serves responsive images via srcset
  • Automatically compresses images

Note: This happens automatically, but images must be reasonably sized before upload.

Fix 2: Preload Critical Images

Tell the browser to load your LCP image as a priority.

For Hero Images

Add to Settings > Advanced > Code Injection > Header:

<link rel="preload" as="image" href="YOUR_IMAGE_URL" />

How to Get Image URL:

  1. Right-click the hero image on your live site
  2. Select Inspect (or Inspect Element)
  3. Find the <img> tag in the code
  4. Copy the URL from the src attribute
  5. Use the Squarespace CDN URL (starts with images.squarespace-cdn.com)

Example:

<link rel="preload" as="image" href="https://images.squarespace-cdn.com/content/v1/123abc/1234567890/image.jpg?format=2500w" />

For Product Images (Dynamic)

For product pages where the image changes, use this approach:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var productImage = document.querySelector('.ProductItem-gallery img');
    if (productImage) {
      var link = document.createElement('link');
      link.rel = 'preload';
      link.as = 'image';
      link.href = productImage.src;
      document.head.appendChild(link);
    }
  });
</script>

Note: This runs after DOMContentLoaded, so it's less effective than static preload. Static preload is preferred when possible.

Fix 3: Choose the Right Template

Not all Squarespace templates perform equally.

Best Performing 7.1 Templates:

  • Forte - Clean, minimal design
  • Burke - Simple layout
  • Paloma - Lightweight, modern
  • Basil - Clean commerce template

Templates to Avoid for Performance:

  • Templates with video backgrounds by default
  • Heavy animation effects
  • Complex parallax scrolling
  • Multiple full-screen sections

Template-Specific Optimizations

For Templates with Video Backgrounds:

  1. Replace video with optimized image
  2. Or reduce video file size significantly
  3. Consider using poster image only on mobile

For Templates with Parallax:

  1. Disable parallax effects (Design > Site Styles)
  2. Use standard scrolling instead
  3. Remove unnecessary animation effects

Fix 4: Reduce Render-Blocking Resources

Third-party scripts and CSS can delay LCP.

Defer Non-Critical Scripts

For scripts in Code Injection, add defer or async attributes:

Before:

<script src="https://example.com/script.js"></script>

After:

<script src="https://example.com/script.js" defer></script>

Async vs Defer:

  • async - Load in parallel, execute as soon as ready
  • defer - Load in parallel, execute after page parse

Use:

  • async for independent scripts (analytics, ads)
  • defer for scripts that depend on DOM

Load Analytics Asynchronously

GA4:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

Meta Pixel: Already loads asynchronously in standard implementation.

GTM: Already loads asynchronously by default.

Minimize Custom Fonts

Each custom font adds loading time.

Optimization:

  1. Go to Design > Site Styles > Fonts
  2. Limit to 2-3 font families maximum
  3. Use system fonts when possible (faster):
    • -apple-system (Mac/iOS)
    • BlinkMacSystemFont (Chrome)
    • Segoe UI (Windows)
    • Roboto (Android)

Custom CSS for System Fonts:

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

Fix 5: Optimize Above-the-Fold Content

Ensure the visible portion loads first.

Lazy Load Below-the-Fold Images

Squarespace automatically lazy loads images below the fold, but verify:

  1. Inspect the page source
  2. Look for loading="lazy" attribute on images
  3. Ensure it's NOT on the hero/LCP image

If LCP image has loading="lazy", remove it:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var heroImage = document.querySelector('.your-hero-image-selector');
    if (heroImage) {
      heroImage.removeAttribute('loading');
    }
  });
</script>

Remove Unused Blocks Above the Fold

  • Minimize number of sections before main content
  • Remove unnecessary animations
  • Simplify navigation menus
  • Reduce announcement bar content

Fix 6: Use a CDN and Optimize Delivery

Squarespace automatically uses a CDN, but you can optimize delivery.

Image Format Optimization

Squarespace automatically serves WebP when supported, but ensure:

  • Original images are high quality
  • Images are uploaded at appropriate dimensions
  • No unnecessary transparency (use JPEG when possible)

HTTP/2 and HTTP/3

Squarespace supports HTTP/2 by default. No action needed.

Fix 7: Squarespace 7.1 Specific Optimizations

Fluid Engine Image Settings

  1. Select the image block
  2. Click Edit
  3. Design tab:
    • Set appropriate aspect ratio
    • Choose "Fit" instead of "Fill" if possible (reduces image size)
    • Disable unnecessary image overlays

Section Loading

For sections below the fold:

  1. Keep sections lightweight
  2. Avoid stacking too many sections
  3. Use summary blocks efficiently (limit items shown)

Template-Specific LCP Fixes

Squarespace 7.0 Templates

Brine Family Templates

  • Reduce banner image size
  • Disable parallax scrolling in Index navigation
  • Optimize slideshow image sizes

Bedford Family Templates

  • Optimize header image
  • Reduce overlay effects
  • Minimize index page sections

Avenue Template

  • Replace video background with image
  • Optimize hero image
  • Reduce animation effects

Squarespace 7.1 Templates

General Optimization

  • Use "Cover" page sections sparingly
  • Optimize images in List sections
  • Minimize full-bleed images

Custom CSS Performance Tricks

Optimize Web Fonts Loading

Add to Custom CSS:

/* Optimize font loading */
@font-face {
  font-family: 'YourFont';
  font-display: swap; /* Show fallback font while loading */
  src: url('font-url.woff2') format('woff2');
}

Reduce CSS Complexity

  • Avoid overly specific selectors
  • Minimize !important usage
  • Remove unused CSS
  • Combine similar rules

Commerce-Specific LCP Fixes

Product Images

  1. Optimize all product images:

    • Maximum 1500px width
    • Under 150 KB file size
    • Use JPEG format

  2. Disable image zoom if not needed:

  3. Limit number of product images:

    • Show 3-5 images max
    • Additional images lazy load

Product Collections

  1. Limit products per page:

    • Go to Commerce > Products > [Collection]
    • Set items per page to 12-24 max

  2. Use grid layout (not list):

    • Generally performs better
    • Smaller image sizes

Testing Your Fixes

Before & After Comparison

  1. Measure baseline:

    • Run PageSpeed Insights before changes
    • Note LCP score and element

  2. Implement fixes:

    • Start with biggest impact items (image optimization)
    • Test each change

  3. Measure improvement:

    • Clear cache
    • Run PageSpeed Insights again
    • Compare scores

Field Data vs Lab Data

Lab Data:

  • PageSpeed Insights
  • Lighthouse in DevTools
  • WebPageTest

Field Data (Real Users):

Note: Field data is more important for SEO and user experience.

Common Squarespace LCP Issues

Issue: LCP Element is a Video

Problem: Video backgrounds have poor LCP.

Solution:

  1. Replace with optimized poster image
  2. Or load video only after page load:
<script>
  window.addEventListener('load', function() {
    // Load video after page fully loads
    var video = document.querySelector('video.your-video');
    if (video) {
      video.src = video.dataset.src;
      video.load();
    }
  });
</script>

Issue: Multiple Large Images Above Fold

Problem: Competing for bandwidth.

Solution:

  • Reduce number of images
  • Make images smaller
  • Use image slider instead of multiple images

Issue: Custom Fonts Delaying LCP

Problem: Text is LCP element, but font loading delays rendering.

Solution:

  • Use font-display: swap in CSS
  • Limit font weights used
  • Use system fonts when possible

Mobile-Specific LCP Optimization

Mobile often has worse LCP than desktop.

Mobile Image Optimization

  1. Test mobile specifically:

    • Use PageSpeed Insights mobile test
    • Test on real mobile devices

  2. Serve smaller images on mobile:

    • Squarespace does this automatically
    • Ensure original images aren't too large

  3. Simplify mobile hero:

    • Consider different mobile hero image
    • Use Squarespace's mobile display settings

Custom CSS for Mobile

/* Hide non-essential elements on mobile */
@media (max-width: 768px) {
  .non-essential-element {
    display: none;
  }
}

Monitoring LCP Over Time

Google Search Console

  1. Go to Google Search Console
  2. Click Core Web Vitals under "Experience"
  3. Monitor LCP trends for mobile and desktop
  4. Address URLs with "Poor" ratings

PageSpeed Insights

  • Test monthly or after major changes
  • Compare trends over time
  • Test critical pages (homepage, top landing pages, checkout)

Real User Monitoring

Consider tools like:

Expected Results

Realistic Goals

  • Squarespace 7.1: 1.5 - 2.5 seconds LCP possible
  • Squarespace 7.0: 2.0 - 3.0 seconds LCP typical
  • Commerce sites: Add 0.3-0.5 seconds due to product images

What You Can't Control

Squarespace is a hosted platform, so you can't:

  • Modify server configuration
  • Change hosting provider
  • Adjust caching rules (beyond Squarespace's defaults)
  • Use some advanced optimization techniques

Focus on what you CAN control:

  • Image optimization
  • Script management
  • Template choice
  • Content structure

Next Steps

Additional Resources

↑ Back to top
// SYS.FOOTER