LCP Issues on Salesforce Commerce Cloud

General Guide: See Global LCP Guide for universal concepts and fixes.

SFCC-Specific LCP Causes

1. Slow Demandware CDN Response

SFCC's CDN configuration can impact initial load:

Problem: CDN cache misses cause slow TTFB
Impact: Delays all subsequent rendering

2. Controller Processing Time

Heavy controller logic delays page delivery:

// Slow: Complex queries in controller
server.get('Show', function (req, res, next) {
    var products = ProductMgr.queryAllSiteProducts(); // Too slow!
    // ...
});

3. ISML Template Complexity

Nested includes and loops slow server rendering:

<!-- Slow: Multiple nested includes -->
<isloop items="${pdict.products}" var="product">
    <isinclude template="components/product/productTile"/>
</isloop>

4. Unoptimized Hero Images

Large product images without optimization:

<!-- Problem: Full-size image loaded -->
<img src="${product.getImages('large')[0].getURL()}" />

SFCC-Specific Fixes

Fix 1: Optimize CDN Caching

Configure aggressive caching in Business Manager:

Administration > Sites > Manage Sites > [Site] > Caching

Page Cache: Enabled
Cache Time: 24 hours (for static pages)
Vary By: Customer Group, Locale

For dynamic pages, use edge-side includes:

<iscache type="relative" hour="24"/>
<iscache type="daily" hour="0"/>

Fix 2: Optimize Controller Logic

Move heavy processing to background jobs:

// Better: Use cached catalog data
server.get('Show', function (req, res, next) {
    var CatalogMgr = require('dw/catalog/CatalogMgr');
    var category = CatalogMgr.getCategory(req.querystring.cgid);

    // Use search instead of query
    var ProductSearchModel = require('dw/catalog/ProductSearchModel');
    var searchModel = new ProductSearchModel();
    searchModel.setCategoryID(category.ID);
    searchModel.search();

    res.render('category', {
        products: searchModel.productSearchHits
    });
    return next();
});

Fix 3: Lazy Load Below-Fold Content

Use AJAX for non-critical content:

// Load recommendations after page render
$(document).ready(function() {
    setTimeout(function() {
        $.get('/RecommendationsController-Get', function(html) {
            $('#recommendations').html(html);
        });
    }, 100);
});

Fix 4: Optimize Images with DIS

Use Dynamic Imaging Service (DIS) for responsive images:

<picture>
    <source
        media="(max-width: 480px)"
        srcset="${product.getImages('medium')[0].getURL()}?sw=480&q=80">
    <source
        media="(max-width: 768px)"
        srcset="${product.getImages('medium')[0].getURL()}?sw=768&q=80">
    <img
        src="${product.getImages('large')[0].getURL()}?sw=1200&q=85"
        alt="${product.name}"
        loading="lazy"
        width="1200"
        height="800">
</picture>

Fix 5: Preload Critical Resources

Add preload hints in head:

<!-- In htmlHead.isml -->
<isloop items="${pdict.criticalImages}" var="image">
    <link rel="preload" as="image" href="${image.url}">
</isloop>

<link rel="preconnect" href="https://cdn.yourstorefront.com">
<link rel="preconnect" href="https://www.googletagmanager.com">

Fix 6: Inline Critical CSS

Extract and inline above-fold CSS:

<style>
    /* Critical CSS for LCP element */
    .hero-banner {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }
    .hero-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>

Monitoring LCP on SFCC

Use Real User Monitoring

// Track LCP with web-vitals
import {onLCP} from 'web-vitals';

onLCP(function(metric) {
    dataLayer.push({
        'event': 'web_vitals',
        'vital_name': 'LCP',
        'vital_value': metric.value,
        'vital_rating': metric.rating
    });
});

Business Manager Monitoring

Administration > Operations > Performance Monitoring

• Monitor page response times
• Identify slow controllers
• Track cache hit rates

LCP Targets

Next Steps

• CLS Issues on SFCC
• Global Performance Issues