winning-web-speed-hackathon

name	winning-web-speed-hackathon
description	Optimizes deliberately slow web applications for maximum Lighthouse scores in Web Speed Hackathon (CyberAgent). Use when participating in WSH or performing aggressive frontend performance optimization on React/Node.js apps with SQLite backends. Covers bundle reduction, image optimization, Core Web Vitals, server tuning, and known competition traps.

Winning Web Speed Hackathon

Systematic workflow to maximize Lighthouse scores in CyberAgent's Web Speed Hackathon. The competition provides a deliberately de-tuned React + Node.js app; your job is to optimize it while passing VRT and regulation checks.

Use this skill when participating in Web Speed Hackathon, or aggressively optimizing a React/Node.js web app for Lighthouse Performance scores.

Scoring Model

Lighthouse v10 Performance scoring weights per page:

• FCP x10 | SI x10 | LCP x25 | TBT x30 | CLS x25

User flow scoring: TBT x25 + INP x25

LCP and TBT dominate. Prioritize accordingly.

Phase 0: Reconnaissance (First 30 min)

1. Clone and run the app locally. Confirm it builds and serves.
2. Run Lighthouse locally on all scored pages. Record baseline scores.
3. Analyze the bundle:

   npx webpack-bundle-analyzer dist/stats.json  # if webpack
   # or check build output sizes
   

4. Check Chrome DevTools:
   • Network tab: Identify largest transfers, uncompressed assets, no-cache headers
   • Coverage tab (Ctrl+Shift+P → "Coverage"): Find unused JS/CSS percentage