sf-performance

sf-performance

Optimize Salesforce Commerce performance across B2C Commerce (SFCC) and B2B Commerce Cloud platforms.

Before Writing Code

Always fetch live documentation first:

1. B2C Commerce Performance

   • Search: "Salesforce B2C Commerce performance optimization 2026"
   • Search: "SFCC caching strategies page cache template cache"
   • Search: "Salesforce eCDN configuration and cache invalidation"

2. B2B Commerce Performance

   • Search: "Lightning Web Components performance optimization 2026"
   • WebFetch: developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_performance

3. Core Web Vitals

   • Search: "Core Web Vitals 2026 targets LCP INP CLS" (INP replaced FID in March 2024)
   • WebFetch: web.dev/vitals/

Conceptual Architecture

Cache Levels (B2C)

Level	Mechanism	Scope	Use Case
Page Cache	res.cachePeriod / res.cachePeriodUnit	Full controller response	Product pages, category pages
Template Cache	<iscache> ISML tag	Individual template fragment	Reusable components, static content
Object Cache	CacheMgr.getCache()	Arbitrary data	API responses, computed results
CDN Cache	Salesforce eCDN	Static assets + pages	Images, CSS, JS, edge-cached HTML

Page cache types:

• Public cache: Shared content (product, category pages)
• Private cache: User-specific content (cart, account)
• No cache: Checkout, payment pages

Template cache varyby: Fetch live docs for current supported varyby attribute values -- they are limited and version-specific.

Core Web Vitals Targets

Metric	Good	Needs Improvement	What It Measures
LCP (Largest Contentful Paint)	< 2.5s	< 4.0s	Main content load time
INP (Interaction to Next Paint)	< 200ms	< 500ms	Input responsiveness (replaced FID)
CLS (Cumulative Layout Shift)	< 0.1	< 0.25	Visual stability

Optimization strategies per metric:

• LCP: Optimize hero images, reduce render-blocking resources, use CDN
• INP: Minimize JS execution, optimize event handlers, defer non-critical work
• CLS: Reserve space for images/ads, avoid dynamic content injection above fold

Performance Budget Guidelines

Resource	Target
Total page weight	< 1 MB (mobile), < 2 MB (desktop)
JavaScript bundle	< 300 KB (gzipped)
CSS bundle	< 100 KB (gzipped)
Images per page	< 500 KB total
Third-party scripts	< 100 KB total, < 5 requests

Caching TTL Concepts (B2C)

Content Type	Recommended TTL	Cache Type
Product pages	24 hours	Public
Category pages	24 hours	Public
Static assets (CSS/JS)	30 days (versioned)	CDN
Cart / checkout	No cache	Private
API responses (CacheMgr)	5-15 minutes	Object

CDN Overview (Salesforce eCDN)

• Static assets (images, CSS, JS) served via CDN automatically
• Cache headers (Cache-Control, max-age, s-maxage) control edge behavior
• Cache invalidation: automatic on code deployment, manual purge via Business Manager
• Geographic distribution reduces latency for global storefronts

Lazy Loading Concepts

Technique	Platform	Approach
Image lazy loading	Both	loading="lazy" attribute on <img>
Below-fold content	B2C	Deferred AJAX includes for non-critical sections
Deferred scripts	B2C	<script defer> or <script async>
Code splitting	PWA Kit	React.lazy() + Suspense
Dynamic imports	LWC (B2B)	await import('c/heavyComponent')

ISML Rendering Optimization (B2C)

• Minimize <isloop> iterations -- pre-calculate data in controllers
• Avoid complex expressions inside loops
• Use <isinclude> sparingly (each include has overhead)
• Pre-compute discount maps and data structures before passing to templates

B2B Performance Considerations

B2B performance is covered in detail by other skills:

• SOQL optimization and Apex bulkification: See sf-b2b-apex skill
• LWC performance: See sf-b2b-lwc skill (lazy loading, wire adapter caching, refreshApex)
• Experience Site caching: Configure CDN headers via Experience Builder site settings

Best Practices

B2C Performance

• Cache aggressively: use page, template, and object caching in layers
• Optimize ISML: pre-calculate data in controllers, minimize loop iterations
• Leverage Salesforce eCDN for all static assets
• Target 80%+ cache hit rates for public pages

Cross-Platform

• Meet Core Web Vitals "Good" thresholds for all three metrics
• Use WebP images with JPEG/PNG fallback, responsive srcset, and lazy loading
• Apply code splitting and tree shaking to minimize JS bundles
• Async-load third-party scripts; enforce performance budgets

Monitoring

• Run Lighthouse audits regularly (target 90+ performance score)
• Use Real User Monitoring (RUM) with web-vitals library
• Review cache hit rates in Business Manager dashboards
• Profile ISML templates and controller response times in development

Fetch Salesforce performance guides, eCDN documentation, and Core Web Vitals specs for exact cache configuration, CDN setup, and current metric thresholds before implementing.