Orders & fulfilment

Site Performance Optimization

Paid pluginsize Mplanned, not built

Indicative price, not an offer: EUR 200-350/year or EUR 400 one-off

Generated from docs/plan/paid/site-performance-optimization/PLAN.md in the AstroBaaS repository. Nothing described below is implemented — it is the written plan for it.

Optimizes storefront and admin performance: code splitting, lazy loading, image optimization, caching headers, and Core Web Vitals targeting (LCP, FID, CLS). Provides admin dashboard for performance metrics and recommendations.

The problem

My site is slow; every second lost costs conversion rate, but I don’t have performance expertise to optimize it.

What it does

Lighthouse audit: run Lighthouse on key pages (home, product list, product detail, cart, checkout); capture scores and opportunities
Core Web Vitals: measure LCP (Largest Contentful Paint), FID (First Input Delay), CLS (Cumulative Layout Shift) via real-user monitoring (RUM) data or synthetic tests
Image optimization: detect oversized images, recommend WebP format, responsive srcset; compress images automatically on upload
Code splitting: bundle product detail page separately from home page; lazy-load cart drawer component
Caching headers: set Cache-Control for static assets (30d), HTML (1h), API (5m); leverage browser cache
Font optimization: subset fonts (Latin only); load font via preload; avoid layout shift from font swap
Checkout performance: defer non-critical form validation to after render; reduce bundle size
Admin UI: code-split admin routes; lazy-load modals and bulk-action dropdowns
Performance dashboard: show Lighthouse scores, CWV metrics, page load time trend, recommendations
Monitoring alerts: if LCP > 3s or CLS > 0.1, send Slack alert to team
Continuous optimization: quarterly Lighthouse re-runs in CI; flag if scores regress

What it deliberately does NOT do

Each boundary carries its reason. A boundary without a reason gets crossed by the next person who reads this.

Database query optimization (N+1 fixes): out of scope—DBA/backend engineer responsibility. Reason: outside storefront scope.
API latency reduction (caching, CDN): out of scope—DevOps/infrastructure responsibility. Reason: server-side only.
Third-party script optimization: out of scope—merchant responsible (analytics, ads, chat). Reason: external code.
User-facing performance settings (disable features to speed up): out of scope. Reason: UX choice; not performance.
Mobile app performance: out of scope—web storefront only. Reason: scope is web.
A/B testing performance (e.g., ‘slow checkout’ vs ‘fast checkout’): out of scope—optional. Reason: out of feature scope.

Data model

API

GET /admin/performance/dashboard → {lighthouse_scores: [{page, score, opportunities: […]}], cwv_metrics: {lcp_ms, fid_ms, cls}, page_load_times: [{page, p50, p95, p99}]}
POST /admin/performance/audit (staff, background job) → {audit_id, status: ‘running’}
GET /admin/performance/audit/:id → {audit_id, results: [{page, lighthouse_score, opportunities: […]}], summary}
GET /admin/performance/cwv → {metric: ‘lcp’, p50_ms: 1800, p95_ms: 3200, p99_ms: 5000, sample_size}
POST /admin/performance/recommendations (staff) → [{priority: ‘high’|‘medium’, recommendation, impact_ms, effort_points}]

Every route added here must also appear in src/pages/openapi.json.ts — a test fails the build if it does not.

Admin

Performance Dashboard in admin: cards showing Lighthouse score (green/yellow/red), CWV metrics (LCP, FID, CLS), page load time trend. Audit button to run Lighthouse on all key pages. Opportunities list (sorted by impact) with effort estimates. Alert settings for Slack webhook on regression.

The seam — why this is paid

Core owns performance auditing (Lighthouse, CWV measurement), image optimization, and caching header setup. Paid pack owns: advanced optimization (code bundling, custom server-side caching, API response optimization), A/B performance testing. Why: core provides honest baseline measurement and common optimizations; advanced optimization is paid engineering.

Requires performance engineering expertise. Paid for ongoing optimization, monitoring, and support.

Dependencies

storefront (Next.js SSR rendering)
image-handling (image upload and optimization)
admin-ui (bundle splitting)

Acceptance checks

Each of these must be able to fail. Before claiming this is done, break the code deliberately and watch each one go red.

Lighthouse audit on home page returns performance score >= 80; opportunities list includes ‘Defer unused JavaScript’
Image uploaded (3MB PNG) is auto-optimized to 500KB WebP; srcset generated for 2x/3x displays
Cache-Control header on /products (HTML) is ‘max-age=3600’; static CSS is ‘max-age=2592000’ (30d)
CWV metrics show LCP=1.8s (green), FID=50ms (green), CLS=0.05 (green) for product list page
Page load time tracked: home page p50=1.2s, p95=2.8s, p99=5.2s; trend shows no regression over 30d
Lighthouse score regression (performance 90->85): Slack alert sent to #performance channel
Font subset applied: Latin-only font 40KB (vs 200KB full); no layout shift on font load
Checkout bundle is code-split; form validation deferred; bundle size < 50KB (vs 150KB before)
Audit recommendations show: ‘Optimize images’ (impact: 500ms, effort: 2pts), ‘Defer JS’ (impact: 800ms, effort: 8pts)
Performance dashboard shows zero third-party script impact warnings (merchant responsible for Google Analytics, etc.)

Risks

Measurement accuracy: synthetic Lighthouse tests might not match real-user experience (RUM); must compare both. Regression: if optimization is accidentally reverted, scores regress; CI must enforce minimum threshold. Third-party: if merchant adds slow tracking script, score drops but system can’t optimize it. Effort estimation: ‘effort_points’ are rough; actual dev work might be 2x; prioritization could be wrong.

Commercial context


Suggested price	EUR 200-350/year or EUR 400 one-off
Rival anchor	Mirasvit Google Page Speed Optimizer

The anchor is what the nearest equivalent charges on Shopify or Magento today. It is context for a pricing decision, not the decision.

Generated from the commerce plan. See docs/COMMERCE-PLAN.md for the full catalogue and ../../AI-GUIDE.md for how to work on this repository.