Skip to content

Performance already optimized

This theme is already engineered for optimal, sustainable performance (lean CSS/JS, responsive media, lazy hydration, stability). Before adding custom code or hiring "speed booster" services, read the companion guide: Understanding Page Speed Scores.

Beware anyone promising "guaranteed 90+/100" or dramatic instant score jumps: these offers often cheat the test by hiding/delaying essential scripts, stripping analytics, or disabling revenue‑driving features. See the "Beware 'Guaranteed 90+' Services / Apps" section in that guide. Sustainable performance = disciplined media optimization + prudent app usage, not score tricks.

If a customization risks performance, validate clear, measurable business impact first.

Custom Code & Development

Critical Warning

Unvetted custom code can degrade performance, introduce bugs, and void support for modified areas.

Why You Rarely Need Custom Code

  • Performance‑first architecture already implemented
  • Modern standards & accessibility baked in
  • Advanced layouts & merchandising features included
  • Continuous updates reduce need for manual patches

Included High‑Value Features

CRO components, structured data, responsive media, lazy hydration, A11y primitives, event hooks, extensible DOM structure.

Risks of Custom Code

CategoryImpact
PerformanceLarger bundles, blocking scripts, layout shift
ReliabilityConflicts on theme update, regressions
MaintainabilityHarder diffing, technical debt, vendor lock‑in
SecurityPotential injection / leakage points

Support Scope

  • ✅ Built‑in features & configuration
  • ✅ Performance review of original theme code
  • ❌ Debugging third‑party or custom scripts
  • ❌ Fixing issues introduced by external developers

Before Adding Code

  1. Exhaust theme settings
  2. Check documentation
  3. Ask support for existing pattern
  4. Validate business impact

If You Must Extend

PracticeGuidance
IsolationUse data attributes / minimal selectors
LoadingDefer / module‑load non‑critical JS
CSSScope with a namespace class; avoid !important
JS SizeKeep additions <10KB gzip when possible
LoggingRemove debug logs before production

Performance Guardrails

  • LCP target: <2.5s (mobile)
  • CLS: <0.1 (avoid layout shifts from injected elements)
  • JS execution main‑thread budget: minimal post‑interaction
  • Monitor Core Web Vitals after each change

Monitoring Toolkit

  • Lighthouse CI / PageSpeed Insights
  • WebPageTest (filmstrip, CPU throttling)
  • Chrome Performance & Coverage tabs
  • Real User Monitoring (RUM) if available

Event Hooks (Use Instead of DOM Mutation Hacks)

See: Event Integration Guide

Decision Matrix

NeedUse Theme?Custom?
Styling variantSettings / CSS variablesOnly if variable missing
Analytics hookBuilt‑in eventsAdd lightweight listener
New UI patternCheck roadmap / request featureLast resort component

Update Safety

  • Keep a clean diff (git) between upstream and custom changes
  • Document every modification (who/why/date)
  • Re‑test on theme upgrades

Bottom Line

Maximize built‑in capability first. Custom code = ongoing cost + risk. Use surgical, documented enhancements only when there is clear, validated ROI.