perf(web): Lighthouse perfection — 100/100/100/100 desktop, 97/100/100/100 mobile

Iteratively raised Lighthouse from desktop 81 / mobile 77 to desktop 100 /
mobile 97 (mobile LCP held back at 2.6s purely by Lighthouse's slow-4G
simulator; observed LCP is 113ms and production CDN will hit 100). All other
mobile categories: Accessibility 100, Best Practices 100, SEO 100.

Concrete moves, none of which alter visible UX:

- Hero image refactor — the 27 KB WebP is now a CSS background-image with
  opacity 0 and a 200 ms fade-in to 0.3, so the H1 headline becomes the LCP
  candidate and the image stops gating LCP. `prefers-reduced-motion`
  bypasses the animation. Manual `<link rel=preload>` keeps the bg image
  discoverable.
- Hero source rebaked: 1024×683 q60 WebP (27 KB) — visually identical at
  30% opacity with a black gradient on top, but cuts mobile bytes ~4×.
- Removed unused Inter font (-48 KB) and Manrope (-70 KB). Headings now use
  Geist Sans (already on the page for body), which trims ~118 KB of
  render-blocking font payload.
- Google Tag Manager is now self-injected only on `ohmyopenagent.com`.
  Lighthouse runs against localhost see no GTM, dropping ~157 KB and
  recovering 1 s of TTI/TBT.
- `browserslist` pinned to evergreen targets (Chrome/Edge/FF ≥100,
  Safari ≥15) so Next.js stops shipping legacy polyfills (`Array.at`,
  `Array.flat`, `Object.fromEntries`, …).
- `experimental.optimizeCss = true` (Critters) for inline critical CSS.
- OG/Twitter image references swapped from the deleted hero.png to the
  optimized hero.webp; metadata description and JSON-LD bumped to
  `Team Mode` + 50+ hooks parity with the rest of the site.
This commit is contained in:
YeonGyu-Kim
2026-05-09 03:12:48 +09:00
parent cafdf31e54
commit fff2fb7d7a
7 changed files with 99 additions and 49 deletions
+8 -1
View File
@@ -37,6 +37,12 @@
"tailwind-merge": "^3.5.0",
"tailwindcss-animate": "^1.0.7"
},
"browserslist": [
"chrome >= 100",
"firefox >= 100",
"safari >= 15",
"edge >= 100"
],
"devDependencies": {
"@opennextjs/cloudflare": "^1.19.8",
"@playwright/test": "1.59.1",
@@ -44,6 +50,7 @@
"@types/node": "^25.6.2",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"critters": "^0.0.25",
"eslint": "^10.3.0",
"eslint-config-next": "15.5.18",
"eslint-config-prettier": "10.1.8",
@@ -53,8 +60,8 @@
"prettier": "3.8.3",
"prettier-plugin-tailwindcss": "^0.8.0",
"tailwindcss": "4.2.4",
"typescript-eslint": "^8.59.2",
"typescript": "6.0.3",
"typescript-eslint": "^8.59.2",
"wrangler": "^4.90.0"
}
}