u/nicotinum

🤔 Track Tracing?

Spent the last while optimizing a React 19 + Vite SPA on Firebase and wanted to share the three things that actually moved the needle, because none of them were what I expected.

1. Headless Lighthouse flat-out lied to me. Headless Chrome scored the site 96 while PageSpeed Insights (real Moto-G-class conditions) said 71. Headless skips the CPU throttling that dominates on a mid-range phone. If you only remember one thing: test headed, with a CPU slowdown multiplier of 8. My "fast" site wasn't.
2. A third-party script was 41% of all main-thread work. reCAPTCHA (pulled in by the auth layer) fetched about 330KB and burned 2,871ms of CPU on a throttled phone, initializing at module load, before first paint. It's only needed when the user acts, so I deferred it to the first pointerdown/keydown/touchstart. Load-time cost: 2,871ms to 0. (Gotcha: don't use scroll as the trigger, programmatic scrollTo() false-fires it.)
3. The LCP image was 6 round trips deep. HTML, then entry JS, then a lazy() shell, then the Firebase SDK, then getDoc(config), then a per-item getDoc fan-out, and only then did the hero image URL exist. Instead of reaching for SSR, I inline the above-the-fold data into the HTML at build time plus a preload for the LCP image, so the first parsed bytes already know what to paint. Second gotcha: the preload URL must be byte-identical to the img src or Chrome downloads the hero twice.

Results: homepage 76 to 99, LCP 6.7s to 1.9s. Heaviest page 69 to 96.

Full write-up with the code and numbers: https://proffer.codes/blog/firebase-react-spa-lighthouse-76-to-99

Curious if others have seen the headless-vs-real-device gap. How do you catch it in CI?

We have a new leader!

🤯
More climbers!

And some of the drivers changed teams...

Big changes in TOP 10.

More disruptors.

More drama!

Newcomer BILLSWEN causes some serious chaos!

SOGGYMODE983 the only one climbing.