Comprehensive guide to diagnosing and fixing Largest Contentful Paint issues on BigCommerce stores.

Fix BigCommerce LCP (Largest Contentful Paint) Issues

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

Understanding LCP

What is LCP?

LCP measures the time from when a page starts loading to when the largest text block or image element becomes visible in the viewport.

Google's LCP Thresholds:

Good: Less than 2.5 seconds
Needs Improvement: 2.5 - 4.0 seconds
Poor: Greater than 4.0 seconds

Common LCP Elements on BigCommerce

Homepage:

Hero banner images
Large promotional images
Featured product images
Video backgrounds

Product Pages:

Main product image
Product image gallery
Large promotional banners

Category Pages:

Hero/banner images
First product grid images

Diagnosing LCP Issues on BigCommerce

Step 1: Identify Your LCP Element

Using PageSpeed Insights:

Visit PageSpeed Insights
Enter your BigCommerce store URL
Click Analyze
Scroll to Diagnostics > Largest Contentful Paint element
Note which element is causing slow LCP

Using Chrome DevTools:

Open Chrome DevTools (F12)
Go to Performance tab
Click Record and reload page
Stop recording after page loads
Look for LCP marker in timeline
Hover over marker to see LCP element

Step 2: Measure Current LCP

Real User Monitoring (RUM):

Google Search Console > Core Web Vitals report
Google Analytics 4 with Web Vitals report
Real user data from actual customers

Lab Testing:

PageSpeed Insights
Chrome DevTools Lighthouse
GTmetrix
WebPageTest

Step 3: Identify Root Causes

Common LCP issues on BigCommerce:

Unoptimized Images:
- Large file sizes (>500KB for hero images)
- Wrong format (JPEG instead of WebP)
- Missing Akamai Image Manager optimization
Render-Blocking Resources:
- CSS files blocking page render
- JavaScript in <head> without async/defer
- Third-party scripts (apps, analytics, chat widgets)
Server Response Time (TTFB):
- Slow BigCommerce server response
- Database query issues
- Too many product options or custom fields
Lazy Loading Issues:
- LCP image incorrectly lazy-loaded
- Late discovery of critical images
- JavaScript-based image loading

BigCommerce-Specific LCP Fixes

1. Enable Akamai Image Manager

BigCommerce uses Akamai CDN with Image Manager for automatic image optimization.

Enable Image Optimization:

Contact BigCommerce Support:
- Request Akamai Image Manager activation
- Available on all plans but may need manual enablement
- Confirm Image Manager is active for your store
Verify Image Manager is Working:
- Inspect image URLs in browser
- Should include Akamai transformation parameters
- Example: https://cdn11.bigcommerce.com/s-abc123/images/stencil/1280w/products/123/456/image.jpg?c=2&imbypass=on&imwidth=1280

Image Manager Benefits:

Automatic WebP conversion for supported browsers
Responsive image sizing
Compression optimization
CDN caching globally

2. Optimize Hero Images in Stencil

File: templates/components/common/carousel.html or homepage template

Add Width and Height Attributes

{{#each slides}}
<div class="slide">
  <img src="{{image.data}}"
       alt="{{image.alt}}"
       width="1920"
       height="600"
       fetchpriority="high"
       {{#if @first}}
       {{!-- Don't lazy load the first/LCP image --}}
       {{else}}
       loading="lazy"
       {{/if}}>
</div>
{{/each}}

Key Points:

First slide: No lazy loading, add fetchpriority="high"
Other slides: Use loading="lazy"
Always include: width and height to prevent layout shift

Preload LCP Image

File: templates/layout/base.html (in <head>)

{{!-- Preload hero image --}}
<link rel="preload"
      as="image"
      href="{{carousel.slides.[0].image.data}}"
      fetchpriority="high">

Important: Only preload the actual LCP image. Preloading too many resources can hurt performance.

Use Optimized Image Sizes

BigCommerce Stencil allows dynamic image sizing:

{{!-- Use getImage helper for responsive sizes --}}
<img src="{{getImage image 'hero' '1920w'}}"
     srcset="{{getImage image 'hero' '640w'}} 640w,
             {{getImage image 'hero' '1024w'}} 1024w,
             {{getImage image 'hero' '1920w'}} 1920w"
     sizes="100vw"
     alt="{{alt}}"
     width="1920"
     height="600">

3. Optimize Product Page Images

File: templates/components/products/product-view.html

{{#each images}}
<div class="productView-image" data-image-gallery-item>
  <img src="{{getImage this 'product' '1280w'}}"
       srcset="{{getImage this 'product' '640w'}} 640w,
               {{getImage this 'product' '1280w'}} 1280w,
               {{getImage this 'product' '1920w'}} 1920w"
       sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 640px"
       alt="{{data}}"
       width="1280"
       height="1280"
       {{#if @first}}
       fetchpriority="high"
       {{else}}
       loading="lazy"
       {{/if}}>
</div>
{{/each}}

Product Image Best Practices:

Main product image: fetchpriority="high", no lazy loading
Gallery images: loading="lazy"
Use srcset for responsive images
Square aspect ratio recommended (1:1)

4. Reduce Render-Blocking CSS

Inline Critical CSS

File: templates/layout/base.html

<head>
  {{!-- Inline critical CSS for above-the-fold content --}}
  <style>
    /* Critical CSS for hero section, header, navigation */
    .header { /* ... */ }
    .hero { /* ... */ }
    .navigation { /* ... */ }
  </style>

  {{!-- Defer non-critical CSS --}}
  <link rel="preload" href="{{cdn 'assets/css/theme.css'}}" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="{{cdn 'assets/css/theme.css'}}"></noscript>
</head>

Use Stencil Asset Optimization

File: config.json

{
  "settings": {
    "css_compiler": "scss",
    "autoprefixer_cascade": true,
    "autoprefixer_browsers": [
      "last 2 versions",
      "ie >= 11"
    ]
  },
  "css_compiler_options": {
    "outputStyle": "compressed"
  }
}

5. Optimize Third-Party Scripts

Defer Script Manager Scripts

Go to Script Manager:
- Storefront > Script Manager
For Each Non-Critical Script:
- Add async or defer attribute

Example: Analytics Script

<!-- Instead of blocking script -->
<script src="https://example.com/analytics.js"></script>

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

Load Scripts After LCP

File: templates/layout/base.html

{{!-- Load scripts after page load --}}
<script>
  window.addEventListener('load', function() {
    // Load non-critical scripts after page load
    {{#each deferredScripts}}
    var script = document.createElement('script');
    script.src = '{{this}}';
    script.async = true;
    document.body.appendChild(script);
    {{/each}}
  });
</script>

6. Optimize Akamai CDN Configuration

Verify CDN is Serving Images

Check image URLs:

https://cdn11.bigcommerce.com/s-HASH/images/...

Should be served from cdn11.bigcommerce.com, not your store domain.

Enable HTTP/2

BigCommerce automatically uses HTTP/2 with Akamai, but verify:

Open Chrome DevTools > Network tab
Right-click column headers > Add "Protocol"
Reload page
Verify images load via "h2" (HTTP/2)

HTTP/2 Benefits:

Multiplexing (parallel resource loading)
Header compression
Faster resource delivery

7. Reduce Server Response Time (TTFB)

Minimize Product Options and Custom Fields

Heavy product configurations slow TTFB:

Limit product options to essential variations
Reduce number of custom fields
Use simpler product configurations when possible

Optimize Database Queries in Custom Code

If using custom BigCommerce apps or integrations:

Cache API responses
Minimize GraphQL query complexity
Use Storefront API efficiently
Batch API requests when possible

Use BigCommerce's Storefront API (GraphQL)

GraphQL Storefront API is faster than REST:

Example: Efficient Product Query

const query = `
  query ProductById($productId: Int!) {
    site {
      product(entityId: $productId) {
        entityId
        name
        prices {
          price {
            value
          }
        }
        defaultImage {
          url(width: 1280)
        }
      }
    }
  }
`;

fetch('/graphql', {
  method: 'POST',
  credentials: 'same-origin',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    query,
    variables: { productId: 123 }
  })
})
.then(res => res.json())
.then(data => console.log(data));

Advanced LCP Optimization

Implement Early Hints (103 Status)

BigCommerce doesn't natively support Early Hints, but Akamai CDN can be configured.

Contact BigCommerce Support or Enterprise Solutions team to enable Early Hints for:

Critical CSS preloading
Font preloading
LCP image preloading

Use Modern Image Formats

WebP:

Automatically served by Akamai Image Manager to supported browsers
25-35% smaller than JPEG
No manual conversion needed

AVIF (Future):

Not yet supported by BigCommerce/Akamai by default
Consider for custom implementations

Optimize Fonts for LCP

If text is your LCP element:

File: templates/layout/base.html

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

  {{!-- Use font-display: swap to prevent invisible text --}}
  <style>
    @font-face {
      font-family: 'MainFont';
      src: url('{{cdn "assets/fonts/main-font.woff2"}}') format('woff2');
      font-display: swap;
    }
  </style>
</head>

Testing and Validation

Before and After Testing

Establish Baseline:
- Run PageSpeed Insights 3 times
- Average the LCP scores
- Document current LCP element and time
Apply Fixes
Measure Improvements:
- Clear all caches (store, browser, CDN)
- Wait 10 minutes for CDN propagation
- Run PageSpeed Insights 3 times
- Average new LCP scores
- Compare to baseline

Real User Monitoring

Monitor actual user LCP in Google Search Console:

Google Search Console > Core Web Vitals
Review LCP trends over 28 days
Filter by device type (mobile/desktop)
Check "Poor" and "Needs Improvement" URLs

Allow 7-14 days after fixes to see real user impact.

Common LCP Pitfalls on BigCommerce

❌ Lazy Loading the LCP Image

Problem:

<img src="{{hero.image}}" loading="lazy">  {{!-- DON'T lazy load LCP image --}}

Solution:

<img src="{{hero.image}}" fetchpriority="high">  {{!-- Prioritize LCP image --}}

❌ Missing Image Dimensions

Problem:

<img src="hero.jpg" alt="Hero">  <!-- No width/height -->

Solution:

<img src="hero.jpg" alt="Hero" width="1920" height="600">

❌ Too Many Preloads

Problem:

<link rel="preload" href="image1.jpg" as="image">
<link rel="preload" href="image2.jpg" as="image">
<link rel="preload" href="image3.jpg" as="image">  <!-- Too many! -->

Solution: Only preload the actual LCP image (usually just 1 image).

❌ Not Using Akamai Image Manager

Problem:

Serving unoptimized, full-size images
Missing automatic WebP conversion
No responsive image sizing

Solution:

Enable Akamai Image Manager (contact support if not enabled)
Use Stencil getImage helper for proper sizing
Verify image URLs include Akamai parameters

LCP Optimization Checklist

Identify actual LCP element using PageSpeed Insights
Enable Akamai Image Manager
Add width and height to LCP image
Remove loading="lazy" from LCP image
Add fetchpriority="high" to LCP image
Preload LCP image in <head>
Use responsive images with srcset
Defer non-critical CSS
Add async or defer to Script Manager scripts
Minimize product options and custom fields
Audit and remove unnecessary apps
Enable HTTP/2 (automatic with BigCommerce)
Test with PageSpeed Insights
Monitor real user LCP in Google Search Console

Expected Results

Well-optimized BigCommerce stores should achieve:

Mobile LCP: 1.5 - 2.5 seconds
Desktop LCP: 0.8 - 1.5 seconds
Good CWV Status: 75%+ of URLs passing LCP threshold

Typical improvements from optimization:

30-50% LCP reduction with image optimization
20-30% reduction from removing render-blocking resources
15-25% reduction from preloading LCP element

When to Seek Help

Contact BigCommerce support or hire a developer if:

LCP remains above 4 seconds after optimizations
Akamai Image Manager isn't working properly
Server response time (TTFB) is consistently slow (>1 second)
Custom theme code is complex and needs refactoring
Need enterprise-level CDN configuration changes

Fix BigCommerce LCP Issues

Fix BigCommerce LCP (Largest Contentful Paint) Issues

Understanding LCP

What is LCP?

Common LCP Elements on BigCommerce

Diagnosing LCP Issues on BigCommerce

Step 1: Identify Your LCP Element

Step 2: Measure Current LCP

Step 3: Identify Root Causes

BigCommerce-Specific LCP Fixes

1. Enable Akamai Image Manager

2. Optimize Hero Images in Stencil

Add Width and Height Attributes

Preload LCP Image

Use Optimized Image Sizes

3. Optimize Product Page Images

4. Reduce Render-Blocking CSS

Inline Critical CSS

Use Stencil Asset Optimization

5. Optimize Third-Party Scripts

Defer Script Manager Scripts

Load Scripts After LCP

6. Optimize Akamai CDN Configuration

Verify CDN is Serving Images

Enable HTTP/2

7. Reduce Server Response Time (TTFB)

Minimize Product Options and Custom Fields

Optimize Database Queries in Custom Code

Use BigCommerce's Storefront API (GraphQL)

Advanced LCP Optimization

Implement Early Hints (103 Status)

Use Modern Image Formats

Optimize Fonts for LCP

Testing and Validation

Before and After Testing

Real User Monitoring

Common LCP Pitfalls on BigCommerce

❌ Lazy Loading the LCP Image

❌ Missing Image Dimensions

❌ Too Many Preloads

❌ Not Using Akamai Image Manager

LCP Optimization Checklist

Expected Results

When to Seek Help

Next Steps

Additional Resources