Skip to content

perf: Inline CSS, remove polyfills, optimize chunks & FM imports#107

Merged
vibemarketerpromax merged 1 commit intomainfrom
perf/lighthouse-optimization-v2
Feb 19, 2026
Merged

perf: Inline CSS, remove polyfills, optimize chunks & FM imports#107
vibemarketerpromax merged 1 commit intomainfrom
perf/lighthouse-optimization-v2

Conversation

@vibemarketerpromax
Copy link
Collaborator

Summary

  • Inline CSS (experimental.inlineCss: true): Eliminates the 21.4 KiB render-blocking CSS request (est 620ms savings). The previous optimizeCss was a no-op (requires critters package + Pages Router only).
  • Remove hardcoded polyfills: Webpack alias disables Next.js's polyfill-module bundle (Array.at, Array.flat, Object.fromEntries, Object.hasOwn, etc.) — all natively supported by our browser targets. Saves ~14-20 KiB.
  • Bump Safari target 16.4 → 17: Ensures URL.canParse is natively available, making full polyfill removal safe. Safari 17 released Sept 2023.
  • Fix splitChunks config: Merges with Next.js defaults instead of replacing them. Removes catch-all vendor group that was absorbing modules Next.js would split more granularly. Lowers maxSize from 244KB to 128KB for more aggressive splitting on mobile.
  • Lighten FM imports in expertise components: All 17 components/expertise/*.tsx files converted from full motion to lightweight m (they render inside LazyMotion context). Reduces per-chunk FM overhead.

Expected impact

Metric Before Expected
Render-blocking CSS 21.4 KiB / 640ms Eliminated (inlined)
Polyfill chunk 68 KiB / 540ms CPU Removed
FM per-component overhead Full motion bundle Lightweight m proxy
Chunk splitting 244KB max 128KB max

Test plan

  • Verify build succeeds in CI (TypeScript + static export)
  • Run Lighthouse on /technologies/react — check LCP, TBT improvements
  • Verify below-fold animations still trigger on scroll
  • Spot-check expertise pages (react, nextjs, python) for visual regressions

🤖 Generated with Claude Code

- Replace optimizeCss (no-op) with inlineCss to eliminate render-blocking CSS
- Alias Next.js hardcoded polyfill-module to false (saves ~14-20 KiB)
- Bump Safari target 16.4→17 so all polyfilled features are natively supported
- Fix splitChunks to merge with Next.js defaults instead of replacing them
- Lower maxSize 244KB→128KB for more aggressive chunk splitting
- Remove catch-all vendor cacheGroup that absorbed modules Next.js splits better
- Convert all 17 expertise components from full motion to lightweight m
  (they render inside LazyMotion context, so m works identically)
@cloudflare-workers-and-pages
Copy link

Deploying website with  Cloudflare Pages  Cloudflare Pages

Latest commit: 55887dc
Status: ✅  Deploy successful!
Preview URL: https://0d55bf76.website-yiq.pages.dev
Branch Preview URL: https://perf-lighthouse-optimization-xion.website-yiq.pages.dev

View logs

@vibemarketerpromax vibemarketerpromax merged commit 707707e into main Feb 19, 2026
5 checks passed
@vibemarketerpromax vibemarketerpromax deleted the perf/lighthouse-optimization-v2 branch February 19, 2026 11:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

Comments