Forest

Context

Framework migration claims are often discussed without controlled measurements. This experiment keeps the product and image payload comparable and documents both improvements and remaining bottlenecks.

Problem

Measure what changes when a small React application is migrated to Svelte, without turning the result into a universal framework claim.

Constraints

• The image payload remains unchanged between variants.
• Lighthouse scores depend on the measurement environment.
• A small gallery cannot represent every production workload.

My contribution

Migration implementation, measurement design, analysis and documentation.

Important technical decisions

• Image assets were deliberately left unchanged to isolate application-layer changes.
• Production build output was measured rather than development behavior.
• Results document regressions and remaining bottlenecks alongside improvements.

Testing and quality

• Measurements and methodology are documented in the repository.
• The migrated behavior remains covered by project checks.
• Raw byte counts accompany percentage claims.

Results

• JavaScript: 200,911 bytes → 52,025 bytes (74% reduction)
• Lighthouse Performance: 75 → 92
• Largest Contentful Paint: 8.9 s → 3.4 s

Trade-offs and limitations

• Image payload remained unchanged and continued to dominate transfer size.
• Build behavior and ecosystem trade-offs were measured and documented.
• The result supports this case study, not a claim that Svelte is universally faster than React.

Alternatives considered

• Aggressive image optimization was intentionally deferred because it would confound the framework comparison.
• A synthetic component benchmark was avoided in favor of a complete, deployable interface.

Current status

Completed and documented engineering experiment with a public demo and source code.