Fix LCP Issues on Volusion (Loading Speed) | OpsBlu Docs

Fix LCP Issues on Volusion (Loading Speed)

Improve Volusion store LCP by compressing product and banner images, reducing storefront widget scripts, and optimizing template assets.

General Guide: See LCP Overview for universal concepts.

What is Largest Contentful Paint (LCP)?

Largest Contentful Paint measures loading performance by tracking when the largest content element becomes visible. LCP under 2.5 seconds is considered good, while over 4 seconds is poor.

Why LCP matters for e-commerce:

  • Directly impacts perceived load time
  • Critical Core Web Vital for SEO
  • Affects conversion rates (1 second delay = 7% fewer conversions)
  • Influences Google search rankings
  • Determines user's first impression

Common LCP elements on Volusion stores:

  • Hero banner images
  • Main product images
  • Featured product carousels
  • Category header images
  • Large promotional graphics

Volusion-Specific LCP Causes

Large Product Images

Problem: Unoptimized product images slow down page rendering

Common issues:

  • Images uploaded at 3000x3000px but displayed at 600x600px
  • No image compression before upload
  • Using PNG when JPEG would suffice
  • Not using modern formats (WebP)
  • Missing image CDN optimization

Real-world impact:

Original image: 2.5 MB JPEG (2000x2000px)
Downloaded by browser: 2.5 MB
Time on 3G: ~8 seconds
LCP score: 8000ms (Poor)

Optimized image: 80 KB JPEG (800x800px)
Downloaded by browser: 80 KB
Time on 3G: ~0.5 seconds
LCP score: 500ms (Good)

Legacy Template Overhead

Problem: Old Volusion templates include unnecessary code

Issues:

  • Inline styles bloating HTML
  • Unused JavaScript libraries
  • Render-blocking CSS
  • Synchronous script loading
  • jQuery and other legacy dependencies

Template bloat example:

<!-- Legacy template -->
<head>
  <style>
    /* 500+ lines of CSS */
  </style>
  <script src="/js/jquery.js"></script>
  <script src="/js/plugins.js"></script>
  <script src="/js/custom.js"></script>
</head>

Third-Party Script Blocking

Problem: External scripts delay page rendering

Common culprits on Volusion:

Render-blocking scenario:

<!-- Blocks rendering -->
<script src="https://example.com/script.js"></script>

<!-- Better - async loading -->
<script async src="https://example.com/script.js"></script>

Unoptimized Theme Code

Problem: Theme inefficiencies slow rendering

Issues:

  • Excessive DOM size (>1500 nodes)
  • Nested CSS selectors
  • JavaScript in header blocking render
  • Unused CSS from theme frameworks
  • Non-critical CSS loaded synchronously

Measuring LCP on Volusion

Using PageSpeed Insights

Test your store:

  1. Go to PageSpeed Insights
  2. Enter store URL
  3. Wait for analysis (60-90 seconds)
  4. Check LCP under "Core Web Vitals"

Understanding scores:

Largest Contentful Paint: 2.1s (Good)
- Good: 0 - 2.5s (Green)
- Needs Improvement: 2.5 - 4.0s (Orange)
- Poor: > 4.0s (Red)

Identify LCP element:

  • Scroll down to "Diagnostics"
  • Find "Largest Contentful Paint element"
  • See screenshot with highlighted element
  • Identify what needs optimization

Using Chrome DevTools

Lighthouse audit:

  1. Open DevTools (F12)
  2. Click "Lighthouse" tab
  3. Select "Performance"
  4. Choose "Mobile" or "Desktop"
  5. Click "Analyze page load"

Performance tab recording:

1. Open DevTools → Performance tab
2. Click record (circle icon)
3. Reload page
4. Stop recording after page loads
5. Find LCP marker on timeline
6. Hover over LCP marker to see element

Web Vitals extension:

Install: Chrome Web Store → Web Vitals
Usage: Visit your store
Result: See LCP in real-time overlay

Using Lighthouse CI

Command line testing:

# Install Lighthouse
npm install -g lighthouse

# Run test
lighthouse https://yourstore.com \
  --only-categories=performance \
  --view

# Mobile simulation
lighthouse https://yourstore.com \
  --preset=perf \
  --emulated-form-factor=mobile \
  --throttling.cpuSlowdownMultiplier=4 \
  --view

Real User Monitoring

Track actual user LCP:

// Add to Volusion template
<script>
  new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      // Only track the last LCP candidate
      const lcpValue = entry.renderTime || entry.loadTime;

      // Send to Google Analytics
      if (typeof gtag !== 'undefined') {
        gtag('event', 'LCP', {
          event_category: 'Web Vitals',
          event_label: 'LCP',
          value: Math.round(lcpValue),
          non_interaction: true,
        });
      }

      console.log('LCP:', lcpValue, 'Element:', entry.element);
    }
  }).observe({type: 'largest-contentful-paint', buffered: true});
</script>

Fixing LCP Issues on Volusion

1. Optimize Images

Resize Before Upload

Best practices:

Product images:
- Main image: 1200x1200px max
- Thumbnails: 400x400px max
- Category images: 800x600px max
- Hero banners: 1920x800px max

Batch resize:

# Using ImageMagick
mogrify -resize 1200x1200 -quality 85 -path output/ *.jpg

# Using online tools
- TinyPNG: https://tinypng.com
- Squoosh: https://squoosh.app
- ImageOptim (Mac): https://imageoptim.com

Compression

JPEG optimization:

Quality settings:
- Hero images: 80-85%
- Product images: 75-80%
- Thumbnails: 70-75%

Tools:
- JPEGmini
- TinyJPG
- Squoosh

WebP conversion:

# Convert JPEG to WebP
cwebp -q 80 input.jpg -o output.webp

# Batch convert
for img in *.jpg; do
  cwebp -q 80 "$img" -o "${img%.jpg}.webp"
done

Serve WebP with fallback:

<picture>
  <source srcset="product-image.webp" type="image/webp">
  <img src="product-image.jpg" alt="Product" width="600" height="600">
</picture>

Lazy Loading

Below-the-fold images:

<!-- Hero image - load immediately -->
<img src="hero.jpg" width="1920" height="800" alt="Hero">

<!-- Product grid - lazy load -->
<img src="product-1.jpg"
     width="400"
     height="400"
     loading="lazy"
     alt="Product 1">

Intersection Observer (for older browsers):

// Lazy load images
const images = document.querySelectorAll('img[data-src]');

const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      imageObserver.unobserve(img);
    }
  });
});

images.forEach(img => imageObserver.observe(img));

2. Template Optimization

Remove Unused Code

Audit template:

# Check template size
curl -s https://yourstore.com | wc -c

# Identify render-blocking resources
lighthouse https://yourstore.com --view --only-categories=performance

Clean up:

<!-- Before - bloated template -->
<head>
  <style>
    /* 800 lines of CSS including unused styles */
  </style>
</head>

<!-- After - optimized -->
<head>
  <!-- Only critical CSS inline -->
  <style>
    /* 50 lines of above-the-fold CSS */
  </style>
  <!-- Rest of CSS loaded async -->
  <link rel="preload" href="/css/main.css" as="style"
</head>

Minimize Inline Scripts

Move to external files:

<!-- Bad - inline bloat -->
<head>
  <script>
    /* 200 lines of JavaScript */
  </script>
</head>

<!-- Good - external file -->
<head>
  <script src="/js/critical.min.js" defer></script>
</head>

Critical CSS

Inline critical CSS:

<head>
  <style>
    /* Above-the-fold critical CSS only */
    header { /* styles */ }
    .hero { /* styles */ }
    .nav { /* styles */ }
  </style>

  <!-- Load rest async -->
  <link rel="preload" href="/css/main.css" as="style"
  <noscript><link rel="stylesheet" href="/css/main.css"></noscript>
</head>

Generate critical CSS:

# Using critical npm package
npm install -g critical

critical https://yourstore.com --base=./ --inline --css=css/main.css > critical.css

3. Script Management

Async/Defer Non-Critical Scripts

Script loading strategies:

<!-- Blocks rendering - avoid -->
<script src="/js/script.js"></script>

<!-- Async - doesn't block, executes ASAP -->
<script async src="/js/analytics.js"></script>

<!-- Defer - doesn't block, executes after HTML parsed -->
<script defer src="/js/main.js"></script>

When to use each:

Async:
- Google Analytics
- Third-party analytics
- Independent widgets

Defer:
- Main application JavaScript
- Scripts that manipulate DOM
- Scripts with dependencies

Neither (blocking):
- Critical functionality needed immediately
- Inline critical scripts only

Consolidate Tracking

Use Google Tag Manager:

<!-- Single GTM container instead of multiple scripts -->
<script async src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
</script>

<!-- Then manage all tags in GTM:
- Google Analytics
- Facebook Pixel
- Google Ads
- Other tracking
-->

Benefits:

  • Single script load
  • Async loading
  • Centralized management
  • Faster page load

Remove Unused Scripts

Audit third-party scripts:

// Run in console to see all scripts
Array.from(document.scripts).map(s => ({
  src: s.src,
  async: s.async,
  defer: s.defer,
  size: s.outerHTML.length
}));

Common removals:

  • Unused social media widgets
  • Old tracking codes
  • Disabled features
  • Development scripts

4. CDN Configuration

Enable Volusion CDN

Check if CDN is active:

# Check image URL
curl -I https://yourstore.com/images/product.jpg

# Look for CDN headers:
# x-cache: HIT
# server: cloudflare (or similar)

Optimize CDN settings:

Preconnect to domains:

<head>
  <!-- Preconnect to CDN -->
  <link rel="preconnect" href="https://cdn.volusion.com">
  <link rel="dns-prefetch" href="https://cdn.volusion.com">

  <!-- Preconnect to analytics -->
  <link rel="preconnect" href="https://www.google-analytics.com">
</head>

5. Server Response Time

Reduce TTFB (Time to First Byte)

Optimize:

  • Database queries (index common queries)
  • Server caching (Redis, Memcached)
  • Remove server-side redirects
  • Use faster hosting if needed

Test TTFB:

# Using curl
curl -o /dev/null -s -w "TTFB: %{time_starttransfer}s\n" https://yourstore.com

# Target: < 600ms

Enable Compression

Gzip/Brotli:

Check if enabled:
curl -H "Accept-Encoding: gzip" -I https://yourstore.com

Should see:
content-encoding: gzip

6. Font Optimization

Preload Critical Fonts

Font loading strategy:

<head>
  <!-- Preload critical font -->
  <link rel="preload"
        href="/fonts/main-font.woff2"
        as="font"
        type="font/woff2"
        crossorigin>

  <!-- Font face with font-display -->
  <style>
    @font-face {
      font-family: 'Main Font';
      src: url('/fonts/main-font.woff2') format('woff2');
      font-display: swap; /* Prevent invisible text */
      font-weight: 400;
      font-style: normal;
    }
  </style>
</head>

Font-display options:

font-display: swap;   /* Show fallback immediately, swap when loaded */
font-display: optional; /* Use fallback if font not cached */
font-display: block;   /* Wait for font (can cause delays) */

Advanced Optimization Techniques

Resource Hints

Optimize resource loading:

<head>
  <!-- DNS prefetch for third-party domains -->
  <link rel="dns-prefetch" href="//www.google-analytics.com">
  <link rel="dns-prefetch" href="//connect.facebook.net">

  <!-- Preconnect to critical resources -->
  <link rel="preconnect" href="https://cdn.volusion.com" crossorigin>

  <!-- Preload critical resources -->
  <link rel="preload" href="/css/critical.css" as="style">
  <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

  <!-- Prefetch next-page resources -->
  <link rel="prefetch" href="/category/best-sellers">
</head>

Progressive Image Loading

LQIP (Low Quality Image Placeholder):

<div class="progressive-image"
     style="background-image: url('product-tiny.jpg'); /* 5KB placeholder */">
  <img src="product-full.jpg" /* 80KB full image */
       loading="lazy"
       alt="Product">
</div>

<style>
  .progressive-image {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
  }

  .progressive-image img {
    opacity: 0;
    transition: opacity 0.3s;
  }

  .progressive-image.loaded img {
    opacity: 1;
  }
</style>

Responsive Images

Serve appropriately sized images:

<img srcset="product-400.jpg 400w,
             product-800.jpg 800w,
             product-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1200px) 800px,
            1200px"
     src="product-800.jpg"
     alt="Product">

Testing and Verification

Pre-Deployment Checklist

Before going live:

  • Run Lighthouse audit (target LCP < 2.5s)
  • Test on slow 3G connection
  • Verify mobile performance
  • Check image sizes (< 200KB each)
  • Confirm async/defer scripts
  • Test hero image load time
  • Verify font preloading
  • Check CDN is serving assets

Post-Deployment Monitoring

Monitor in production:

// Track LCP for all users
<script>
  new PerformanceObserver((list) => {
    const entries = list.getEntries();
    const lastEntry = entries[entries.length - 1];

    if (typeof gtag !== 'undefined') {
      gtag('event', 'web_vitals', {
        event_category: 'Web Vitals',
        event_label: 'LCP',
        value: Math.round(lastEntry.renderTime || lastEntry.loadTime),
        metric_id: 'LCP',
        metric_value: lastEntry.renderTime || lastEntry.loadTime,
        metric_delta: lastEntry.renderTime || lastEntry.loadTime,
      });
    }
  }).observe({type: 'largest-contentful-paint', buffered: true});
</script>

Weekly monitoring:

  1. Run PageSpeed Insights tests
  2. Check Google Search Console Core Web Vitals report
  3. Review analytics LCP data
  4. Test on different devices
  5. Monitor after template changes

Performance Budget

Set targets:

Homepage:
- LCP: < 2.0s
- Total page size: < 1MB
- Number of requests: < 50

Category pages:
- LCP: < 2.5s
- Total page size: < 1.5MB
- Number of requests: < 60

Product pages:
- LCP: < 2.5s
- Images: < 200KB each
- Total page size: < 1.2MB

Common Volusion Template Fixes

Homepage Hero Optimization

<!-- Optimized hero section -->
<div class="hero" style="background-color: #f0f0f0;">
  <picture>
    <source srcset="hero-1920.webp" type="image/webp" media="(min-width: 1200px)">
    <source srcset="hero-1200.webp" type="image/webp" media="(min-width: 768px)">
    <source srcset="hero-768.webp" type="image/webp">
    <img src="hero-1200.jpg"
         width="1920"
         height="800"
         alt="Hero Banner"
         style="width: 100%; height: auto;">
  </picture>
</div>

Product Page Main Image

<!-- Product detail page -->
<div class="product-main-image">
  <picture>
    <source srcset="product-large.webp" type="image/webp">
    <img src="product-large.jpg"
         width="800"
         height="800"
         alt="{{product_name}}"
         style="width: 100%; height: auto; max-width: 600px;">
  </picture>
</div>

Category Page Grid

<!-- Category listing -->
<div class="product-grid">
  {% for product in products %}
  <div class="product-card">
    <a href="{{product.url}}">
      <img src="{{product.image}}"
           width="400"
           height="400"
           loading="lazy"
           alt="{{product.name}}">
    </a>
    <h3>{{product.name}}</h3>
    <p class="price">${{product.price}}</p>
  </div>
  {% endfor %}
</div>

When to Contact Volusion Support

Contact support when:

  • Server response time > 1 second
  • CDN not working properly
  • Need help with V2 migration
  • Template customization limitations
  • Performance issues after platform updates

What to provide:

  • PageSpeed Insights report
  • Lighthouse JSON results
  • Specific pages affected
  • LCP times and elements
  • Browser and device info

Migration to Volusion V2

V2 performance benefits:

  • Modern template architecture
  • Better image optimization
  • Improved caching
  • Faster server response
  • Built-in performance features

Migration checklist:

  • Backup current store
  • Review V2 templates
  • Plan custom code migration
  • Test performance gains
  • Schedule migration window
Back to top