BigCommerce Performance Issues
Platform-specific guides for diagnosing and fixing Core Web Vitals and performance issues on BigCommerce.
Core Web Vitals
Largest Contentful Paint (LCP)
Fix slow main content loading on BigCommerce. Target: under 2.5 seconds.
Cumulative Layout Shift (CLS)
Resolve visual stability issues causing layout shifts. Target: under 0.1.
Common BigCommerce Performance Issues
Theme and Template Optimization
BigCommerce themes can significantly impact site performance. Heavy themes with excessive features often load unnecessary JavaScript and CSS, degrading page speed.
Issues:
- Stencil themes with bloated assets and unused features
- Custom themes without proper optimization
- Multiple theme customizations layered over time
- Excessive use of handlebars partials causing render delays
Solutions:
- Use lightweight, performance-optimized Stencil themes
- Remove unused theme features and customizations
- Minimize custom fonts and use system fonts where possible
- Implement critical CSS for above-the-fold content
- Defer non-critical JavaScript loading
- Use BigCommerce's built-in lazy loading features
Image Optimization
BigCommerce stores often suffer from large, unoptimized product images that slow down page loads.
Best practices:
- Use BigCommerce's built-in image optimization (Akamai Image Manager)
- Enable WebP format for supported browsers
- Set appropriate image dimensions for product listings vs. detail pages
- Implement lazy loading for images below the fold
- Compress images before upload (recommended: 80-85% quality for JPEG)
- Use responsive images with srcset attributes
- Avoid uploading oversized images (recommended max: 2048px for zoom)
BigCommerce Stencil configuration:
settings:
image_sizes:
product_listing: 300x300
product_detail: 1280x1280
thumbnail: 100x100
JavaScript and Third-Party Scripts
Common problems:
- Analytics tags blocking page render
- Social media widgets causing delays
- Live chat scripts loading synchronously
- Product review platforms adding overhead
- Marketing pixels and tracking codes
Optimization strategies:
- Load third-party scripts asynchronously or defer them
- Use Google Tag Manager to control script loading order
- Implement script timeout mechanisms
- Load chat widgets on user interaction (scroll or click)
- Remove unused apps and integrations from store
- Use BigCommerce Script Manager to control script placement
App and Plugin Management
BigCommerce apps can significantly impact performance when too many run simultaneously.
Recommendations:
- Audit installed apps quarterly and remove unused ones
- Check app performance impact using Chrome DevTools
- Limit apps that inject scripts on every page load
- Prefer apps with async script loading
- Review app network requests and payload sizes
- Contact app developers for performance optimization guidance
BigCommerce-Specific Performance Features
Content Delivery Network (CDN)
BigCommerce includes Akamai CDN by default for all plans, which caches static assets globally.
Optimization tips:
- Leverage browser caching for static assets
- Set appropriate cache headers for product images
- Use CDN URLs for all static resources
- Enable HTTP/2 for faster resource loading
Caching Strategies
Page caching:
- Category pages: 15-30 minutes recommended
- Product pages: 5-15 minutes (balance freshness vs. performance)
- Static content pages: 1 hour or more
API caching:
- Use BigCommerce's Storefront API with appropriate cache headers
- Implement client-side caching for product data
- Cache category trees and navigation data
Cache control headers:
Cache-Control: public, max-age=3600
Database and API Optimization
- Minimize custom queries against BigCommerce APIs
- Use GraphQL Storefront API for better performance over REST
- Batch API requests where possible
- Implement proper pagination for large catalogs
- Cache API responses client-side
Storefront Optimization
Cornerstone theme optimizations:
- Enable "Optimize checkout" in store settings
- Use lazy loading for product carousels
- Limit number of products shown per page
- Implement infinite scroll carefully (can impact performance)
- Minimize use of dynamic content on category pages
Performance Testing for BigCommerce
Diagnostic Tools
- Google PageSpeed Insights - Core Web Vitals analysis
- Chrome DevTools Performance Tab - Detailed waterfall analysis
- Lighthouse - Comprehensive performance audit
- BigCommerce Control Panel > Storefront > Script Manager - Review installed scripts
- WebPageTest - Advanced testing with multiple locations
Key Metrics to Monitor
Load time metrics:
- Time to First Byte (TTFB): Target under 200ms
- First Contentful Paint (FCP): Target under 1.8s
- Largest Contentful Paint (LCP): Target under 2.5s
- Time to Interactive (TTI): Target under 3.8s
- Total Blocking Time (TBT): Target under 200ms
Resource metrics:
- Total page size: Target under 3MB
- Number of requests: Target under 100
- JavaScript bundle size: Target under 500KB
- CSS size: Target under 200KB
Platform-Specific Troubleshooting
Slow Product Pages
Causes:
- High-resolution images without optimization
- Too many product options/variations loading at once
- Complex product rules and modifiers
- Heavy product review widgets
Fixes:
- Optimize product images using Akamai Image Manager
- Lazy load product option images
- Simplify product rule logic
- Use asynchronous loading for review widgets
Slow Category Pages
Causes:
- Loading too many products per page
- Complex product filtering
- Heavy faceted search implementations
Fixes:
- Reduce products per page (30-36 recommended)
- Implement pagination instead of infinite scroll
- Optimize faceted search queries
- Cache category page fragments
Checkout Performance
BigCommerce's Optimized One-Page Checkout is typically fast, but customizations can slow it down.
Best practices:
- Minimize custom fields on checkout
- Reduce third-party scripts during checkout
- Optimize payment gateway integrations
- Use BigCommerce's hosted checkout for best performance
Mobile Performance
Mobile optimization is critical for BigCommerce stores.
Mobile-specific optimizations:
- Use responsive images with appropriate sizes
- Minimize mobile-specific JavaScript
- Implement touch-friendly navigation without heavy libraries
- Reduce content for mobile viewports
- Enable AMP (Accelerated Mobile Pages) if available for your theme
Advanced Performance Techniques
Implement a Performance Budget
Set and monitor performance budgets for your BigCommerce store:
Performance Budget:
- LCP: < 2.5s
- FID: < 100ms
- CLS: < 0.1
- Total page size: < 2.5MB
- JavaScript: < 400KB
- Images: < 1.5MB
Use Resource Hints
Implement resource hints in your theme to optimize loading:
<!-- Preconnect to required origins -->
<link rel="preconnect" href="https://cdn11.bigcommerce.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<!-- Prefetch critical resources -->
<link rel="prefetch" href="/path/to/next/page">
<!-- Preload critical assets -->
<link rel="preload" href="critical-font.woff2" as="font" type="font/woff2" crossorigin>
Implement Progressive Web App (PWA) Features
Consider PWA features for advanced performance:
- Service workers for offline functionality
- App shell architecture
- Background sync for form submissions
Monitor Real User Metrics (RUM)
Use Real User Monitoring to track actual performance:
- Google Analytics with Web Vitals
- BigCommerce Analytics integration
- Third-party RUM tools (SpeedCurve, Calibre)
Ongoing Performance Maintenance
Regular Performance Audits
Conduct monthly performance reviews:
- Run Lighthouse audits
- Check Core Web Vitals in Google Search Console
- Review app and script performance
- Test on real devices and connections
- Monitor customer feedback about site speed
Stay Updated
- Keep your Stencil theme updated
- Review BigCommerce platform updates for performance improvements
- Subscribe to BigCommerce developer changelog
- Test major changes in staging before production
General Fixes
For universal performance concepts, see the Global Performance Issues Hub.