Fix OpenCart LCP Issues | OpsBlu Docs

Fix OpenCart LCP Issues

Improve OpenCart LCP by resizing catalog images, enabling Twig template caching, and optimizing vQmod/OCmod extension loading.

Overview

Largest Contentful Paint (LCP) measures loading performance by tracking when the largest content element becomes visible. Google considers LCP a critical ranking factor.

Target Scores:

  • Good: Under 2.5 seconds
  • Needs Improvement: 2.5 - 4.0 seconds
  • Poor: Over 4.0 seconds

Common LCP elements in OpenCart:

  • Hero images on homepage
  • Product images on detail pages
  • Category banners
  • Slider images

Measuring LCP

Using Google PageSpeed Insights

  1. Visit PageSpeed Insights
  2. Enter your OpenCart store URL
  3. Click Analyze
  4. Check Largest Contentful Paint metric
  5. Review Diagnostics for specific issues

Using Chrome DevTools

  1. Open your store in Chrome
  2. Press F12 to open DevTools
  3. Go to Lighthouse tab
  4. Select Performance category
  5. Click Generate report
  6. Check LCP score and recommendations

Field Data (Real Users)

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

    console.log('LCP:', lastEntry.renderTime || lastEntry.loadTime);
    console.log('LCP Element:', lastEntry.element);

    // Send to analytics
    if (typeof gtag !== 'undefined') {
        gtag('event', 'web_vitals', {
            'metric_name': 'LCP',
            'metric_value': lastEntry.renderTime || lastEntry.loadTime,
            'metric_rating': lastEntry.renderTime < 2500 ? 'good' : 'poor'
        });
    }
}).observe({entryTypes: ['largest-contentful-paint']});
</script>

Common LCP Issues in OpenCart

1. Unoptimized Images

Problem: Large hero images or product images loading slowly

Diagnosis:

# Check image sizes in your OpenCart installation
du -sh image/catalog/demo/*
ls -lh image/cache/catalog/demo/*

Solutions:

A. Enable Image Compression

File: system/library/image.php

OpenCart 3.x+ has built-in image compression. Verify settings:

// In image.php, check the save method uses quality parameter
imagejpeg($image, $file, 90);  // Reduce from 90 to 75-80

B. Install Image Optimization Extension

Recommended extensions:

  • Tiny PNG Image Optimizer by iSenseLabs
  • Image Compressor Pro by Opencart.Expert
Admin Panel > Extensions > Installer
Upload extension
Admin Panel > Extensions > Extensions > Themes
Install and configure

C. Implement WebP Format

File: system/library/image.php

Modify the resize() method to generate WebP:

public function resize($width, $height) {
    // ... existing code ...

    if (!is_file(DIR_IMAGE . $new_image) || (filectime($old_image) > filectime(DIR_IMAGE . $new_image))) {
        // ... existing resize code ...

        // Save JPEG
        imagejpeg($image_resized, DIR_IMAGE . $new_image, 80);

        // Generate WebP version
        if (function_exists('imagewebp')) {
            $webp_image = str_replace('.jpg', '.webp', $new_image);
            $webp_image = str_replace('.jpeg', '.webp', $webp_image);
            $webp_image = str_replace('.png', '.webp', $webp_image);

            imagewebp($image_resized, DIR_IMAGE . $webp_image, 80);
        }

        imagedestroy($image_resized);
    }

    // Return WebP if supported
    if (function_exists('imagewebp') && isset($_SERVER['HTTP_ACCEPT']) && strpos($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false) {
        $webp_image = str_replace('.jpg', '.webp', $new_image);
        if (is_file(DIR_IMAGE . $webp_image)) {
            $new_image = $webp_image;
        }
    }

    return $new_image;
}

D. Lazy Load Non-LCP Images

File: catalog/view/theme/[your-theme]/template/product/category.twig

Add lazy loading to category product images:

{% for product in products %}
<div class="product-thumb">
    <div class="image">
        <a href="{{ product.href }}">
            <img src="{{ product.thumb }}"
                 alt="{{ product.name }}"
                 loading="lazy"
                 decoding="async"
                 class="img-responsive" />
        </a>
    </div>
    {# ... rest of product markup ... #}
</div>
{% endfor %}

Important: Do NOT lazy load the LCP image (usually hero or first product image).

E. Preload LCP Image

File: catalog/view/theme/[your-theme]/template/common/header.twig

Add in <head>:

{% if page_type == 'home' and hero_image %}
<link rel="preload" as="image" href="{{ hero_image }}" fetchpriority="high">
{% endif %}

{% if page_type == 'product' and product_image %}
<link rel="preload" as="image" href="{{ product_image }}" fetchpriority="high">
{% endif %}

File: catalog/controller/common/home.php

// Set hero image for preloading
$data['hero_image'] = $this->model_tool_image->resize('catalog/demo/banners/iPhone6.jpg', 1920, 500);

2. Render-Blocking Resources

Problem: CSS and JavaScript blocking page rendering

Diagnosis:

Check PageSpeed Insights for:

Solutions:

A. Defer Non-Critical CSS

File: catalog/view/theme/[your-theme]/template/common/header.twig

Move non-critical CSS to load asynchronously:

{# Critical CSS inline #}
<style>
    /* Inline critical styles for above-the-fold content */
    body { margin: 0; font-family: Arial, sans-serif; }
    #header { background: #fff; }
    /* ... add other critical styles ... */
</style>

{# Defer non-critical CSS #}
<link rel="preload" href="catalog/view/theme/default/stylesheet/stylesheet.css" as="style"
<noscript><link rel="stylesheet" href="catalog/view/theme/default/stylesheet/stylesheet.css"></noscript>

B. Defer JavaScript

File: catalog/view/theme/[your-theme]/template/common/header.twig

Add defer attribute to scripts:

{# Defer non-critical JavaScript #}
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" defer></script>
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" defer></script>
<script src="catalog/view/theme/default/javascript/common.js" defer></script>

Important: Be careful with dependencies. jQuery must load before scripts that depend on it.

File: catalog/view/theme/[your-theme]/template/common/footer.twig

Move scripts from header to footer where possible:

{# Before closing </body> tag #}
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js"></script>
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js"></script>
<script src="catalog/view/theme/default/javascript/common.js"></script>
</body>

3. Slow Server Response Time (TTFB)

Problem: Server takes too long to respond

Diagnosis:

# Test TTFB with curl
curl -w "TTFB: %{time_starttransfer}\n" -o /dev/null -s https://your-store.com/

Solutions:

A. Enable OpenCart Caching

Admin Panel:

System > Settings > Edit Store > Server tab
Use Cache: Yes

B. Enable PHP OPcache

File: php.ini or .htaccess

opcache.enable=1
opcache.memory_consumption=128
opcache.max_accelerated_files=10000
opcache.revalidate_freq=60

Verify:

php -i | grep opcache

C. Implement Full Page Caching

Install Cache Extension:

Recommended:

  • Nitro Cache by Theme Nitro
  • Turbo Cache by Journal3
Admin Panel > Extensions > Installer
Upload extension
Configure cache settings

D. Database Optimization

File: config.php and admin/config.php

Enable persistent MySQL connections:

define('DB_DRIVER', 'mysqli');
define('DB_HOSTNAME', 'localhost');
define('DB_USERNAME', 'your_username');
define('DB_PASSWORD', 'your_password');
define('DB_DATABASE', 'your_database');
define('DB_PORT', '3306');
define('DB_PREFIX', 'oc_');

// Add persistent connection
define('DB_PERSIST', true);

Optimize Database:

-- Run in phpMyAdmin or MySQL client
OPTIMIZE TABLE oc_product;
OPTIMIZE TABLE oc_product_description;
OPTIMIZE TABLE oc_product_image;
OPTIMIZE TABLE oc_category;
OPTIMIZE TABLE oc_session;

-- Clean old sessions
DELETE FROM oc_session WHERE expire < DATE_SUB(NOW(), INTERVAL 1 DAY);

E. CDN Integration

Use a CDN for static assets:

File: config.php and admin/config.php

// Add CDN URL
define('CDN_URL', 'https://cdn.yourstore.com/');

File: system/library/url.php

Modify link() method to use CDN for assets:

public function link($route, $args = '', $secure = false) {
    $url = parent::link($route, $args, $secure);

    // Use CDN for asset URLs
    if (defined('CDN_URL') && (
        strpos($route, 'image/') !== false ||
        strpos($route, 'stylesheet') !== false ||
        strpos($route, 'javascript') !== false
    )) {
        $url = str_replace(HTTP_SERVER, CDN_URL, $url);
    }

    return $url;
}

4. Large Slider/Carousel Images

Problem: Homepage slider images are too large

Solutions:

A. Optimize Slider Images

Recommended dimensions:

  • Desktop: 1920x600px (max 200KB per image)
  • Mobile: 800x600px (max 50KB per image)

B. Lazy Load Non-First Slides

File: catalog/view/theme/[your-theme]/template/extension/module/slideshow.twig

<div id="slideshow{{ module }}" class="owl-carousel">
    {% for banner in banners %}
    <div class="item">
        {% if loop.index == 1 %}
            {# First slide - eager load #}
            <img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive">
        {% else %}
            {# Other slides - lazy load #}
            <img data-src="{{ banner.image }}" alt="{{ banner.title }}" class="owl-lazy img-responsive">
        {% endif %}
    </div>
    {% endfor %}
</div>

<script>
$('#slideshow{{ module }}').owlCarousel({
    items: 1,
    autoplay: true,
    loop: true,
    lazyLoad: true  // Enable lazy loading for Owl Carousel
});
</script>

C. Use Responsive Images

<picture>
    <source media="(min-width: 1200px)" srcset="{{ banner.image_desktop }}">
    <source media="(min-width: 768px)" srcset="{{ banner.image_tablet }}">
    <img src="{{ banner.image_mobile }}" alt="{{ banner.title }}" class="img-responsive">
</picture>

5. Web Fonts Loading

Problem: Custom web fonts delaying text render

Solutions:

A. Preload Critical Fonts

File: catalog/view/theme/[your-theme]/template/common/header.twig

<head>
<link rel="preload" href="catalog/view/theme/default/fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="catalog/view/theme/default/fonts/OpenSans-Bold.woff2" as="font" type="font/woff2" crossorigin>

B. Use font-display

File: catalog/view/theme/[your-theme]/stylesheet/stylesheet.css

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;  /* Show fallback font while loading */
}

C. Self-Host Google Fonts

Instead of loading from Google:

{# Remove this #}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

{# Use self-hosted fonts #}
<link href="catalog/view/theme/default/fonts/fonts.css" rel="stylesheet">

Testing Improvements

Before/After Comparison

# Test with Lighthouse CI
npm install -g @lhci/cli

# Run test
lhci autorun --collect.url=https://your-store.com/

Continuous Monitoring

File: catalog/view/theme/[your-theme]/template/common/header.twig

<script>
// Monitor LCP and report to Google Analytics
const observer = new PerformanceObserver((list) => {
    const entries = list.getEntries();
    const lastEntry = entries[entries.length - 1];
    const lcp = lastEntry.renderTime || lastEntry.loadTime;

    // Send to GA4
    gtag('event', 'lcp_metric', {
        'value': Math.round(lcp),
        'page_path': window.location.pathname,
        'rating': lcp < 2500 ? 'good' : lcp < 4000 ? 'needs_improvement' : 'poor'
    });
});

observer.observe({entryTypes: ['largest-contentful-paint']});
</script>

Quick Wins Checklist

  • Compress and optimize all images above 100KB
  • Add loading="lazy" to all images except LCP element
  • Preload LCP image with rel="preload"
  • Defer non-critical JavaScript
  • Move JavaScript to footer where possible
  • Enable OpenCart caching
  • Enable PHP OPcache
  • Optimize database tables
  • Use CDN for static assets
  • Add font-display: swap to custom fonts

Expected Improvements

Implementing these optimizations typically results in:

  • LCP reduction: 40-60% improvement
  • PageSpeed score: +20-30 points
  • Conversion rate: +5-15% increase
  • Bounce rate: 10-20% decrease

Next Steps

Additional Resources

Back to top