Replace the blocking asset loader with progressive rendering, defer expensive media and Three.js work, and reduce hydration and animation costs. Move deployment from a static Nginx export to the standalone Next.js runtime with optimized dynamic images.
1.9 KiB
Performance baseline and targets
The pre-change development build blocked the page behind a preload manifest of 76 images (about 6.49 MiB encoded). Under the recorded throttled mobile run the loader remained visible for about 73 seconds and LCP was about 36 seconds. The old initial client chunks were about 346 KiB gzip, including a Three.js chunk of about 172 KiB gzip.
Measured pre-change section heights used for intrinsic containment:
| Viewport | Projects | Experience | Skills | Education | Milestones | Footer |
|---|---|---|---|---|---|---|
| 390 px | 746 | 3776 | 3384 | 1010 | 3688 | 472 |
| 768 px | 727 | 2786 | 1877 | 1005 | 2338 | 495 |
| 1024 px | 745 | 2304 | 1391 | 568 | 1830 | 569 |
| 1440 px | 797 | 2081 | 1233 | 475 | 1665 | 613 |
Cold-cache acceptance targets are initial JavaScript at or below 200 KiB gzip, initial transfer at or below 500 KiB before scrolling, LCP at or below 2.5 s, INP at or below 200 ms, and CLS at or below 0.1. Compare medians from three mobile-profile runs; treat differences inside run-to-run variance as neutral.
Post-change measurements
The production standalone build references 198,652 bytes (194.0 KiB) of initial JavaScript after gzip. Its estimated English first-view transfer is 391,274 bytes (382.1 KiB), including compressed HTML, JavaScript, CSS, the hero avatar, flags, and the two locale-relevant fonts. No font is force-preloaded; the browser requests only the faces used by the active locale. The deferred Three.js chunk is 131,036 bytes gzip and is not part of the initial script set.
Three fresh 390 x 844 production-browser runs measured LCP at 1,048 ms, 1,296 ms, and 1,432 ms (1,296 ms median), with CLS 0 in every run. These local runs validate the build and relative improvement but are not a substitute for field data or a repeatable hosted-network/mobile-CPU lab profile. INP should be tracked in production once real interaction samples are available.