| name | sf-performance |
| description | Optimize Salesforce Commerce performance — B2C (cartridge caching, CDN configuration, ISML rendering optimization, lazy loading) and B2B (SOQL optimization, LWC lazy loading, Apex bulkification). Both platforms target Core Web Vitals and image optimization. |
| allowed-tools | Read, Write, Edit, Bash, Grep, Glob, WebSearch, WebFetch |
sf-performance
Optimize Salesforce Commerce performance across B2C Commerce (SFCC) and B2B Commerce Cloud platforms.
Before Writing Code
Always fetch live documentation first:
-
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"
-
B2B Commerce Performance
- Search: "Lightning Web Components performance optimization 2026"
- WebFetch:
developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_performance
-
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.
