DEV Community

Maegami
Maegami

Posted on

I got a real Next.js store to 98 on mobile PageSpeed. Here is what actually moved it, and the trap that fooled me.

I run my own Next.js 14 store (link at the end). It was sitting around the low 50s on mobile, LCP over 10 seconds. It is now 98 on mobile PSI, LCP about 3.5s. This is a live store with real traffic, not a demo, so every fix had to survive production.

What actually moved the number, roughly in order of impact:

Self-hosted the fonts. 15 woff2 files local, inline @font-face, preload only the critical cyrillic and latin subsets. This killed every external font connection and was the single biggest win.

PNG to WebP everywhere. Category images went from about 11MB to 0.5MB, blog covers from 37MB to 1.3MB.

Deferred the iframe embeds and the hero video to window.load. Their runtimes were stealing the main thread from first paint.

Dropped the reveal animations on the above-fold hero.

The trap: my local Lighthouse kept flapping between 63 and 99 on the exact same build. I burned an hour chasing a regression that did not exist. It was my laptop under load, not the page. A cold PSI run was the real number. Lab scores lie under local CPU pressure, trust the field.

Live store: https://euphoria-parfum.com.ua. Write-up of the build: https://maegamidev.vercel.app/euphoria.html. Happy to answer anything.

Top comments (0)