Storefront performance. Lighthouse and Core Web Vitals

A 1-second delay in page load drops conversion by ~7%. Here's the playbook for SellStein storefronts.

What we ship out of the box

Every SellStein storefront has these on by default:

• Cloudflare CDN edge caching (HTML cached 5 min, assets 1 year)
• Image conversion to AVIF/WebP with JPEG fallback
• Responsive images with srcset for different viewports
• Lazy loading on below-the-fold images
• Font preloading for the brand font
• HTTP/3 + Brotli compression
• Critical CSS inlined in the HTML head

Out of the box, a default-theme store hits 95+ on Lighthouse desktop, 80+ on mobile.

Where stores lose points

The two killers:

• Heavy theme JavaScript. Animations, parallax, video backgrounds. A custom theme with three animation libs can drop mobile to 50
• Third-party scripts. Google Tag Manager, Meta Pixel, TikTok pixel, Klaviyo, chat widgets. Each one adds 200-500ms

Settings → Storefront → Performance

Three switches:

• Defer all third-party scripts. Pixels and analytics fire after first interaction. Recovers 20-40 Lighthouse points. Slight risk: a customer who bounces immediately doesn't get tracked
• Image lazy threshold. How far below the fold images start loading. Default 200px. Increase to 600px on mobile if you have very long product pages
• Font display strategy. Swap (default; FOIT-free) vs optional (font shown only if cached; better LCP, slight visual flash)

Image best practices

• Upload at 2x your largest display size (3000px wide max). We resize down; we don't have higher source to upscale from
• AVIF and WebP saves 30-50% over JPEG. Trust the auto-conversion
• Don't embed huge images in product descriptions. Use the gallery. It's optimised. Description-embedded images skip the optimisation pipeline

Core Web Vitals

Three metrics Google grades:

• LCP (Largest Contentful Paint). When does the hero image render? Target: <2.5s
• CLS (Cumulative Layout Shift). Does content jump around as it loads? Target: <0.1
• INP (Interaction to Next Paint). Does clicking a button feel snappy? Target: <200ms

LCP is mostly hero-image size + CDN. CLS is mostly missing image-dimension attributes (we set these automatically). INP is mostly heavy theme JavaScript on click handlers.

Settings → Storefront → Performance → Core Web Vitals shows your real-user metrics from the last 28 days, broken down by page type. The page types in the bottom 10% are where to focus.

Don't chase 100/100

The last 10 Lighthouse points cost more time than they pay back in conversion. 90 desktop, 80 mobile is the bar. Beyond that, focus on actual conversion data. Page A converts 3% and page B converts 4% matters more than page A's score being 91 vs 95.

What to skip

• Service workers / PWA stuff. Adds complexity, marginal benefit for ecommerce
• Aggressive bundling micro-optimisations. We already do this
• "Critical CSS extraction" beyond what we ship. It's done; touching it usually breaks something