Lighthouse performance improvement

[Brenont]

ISSUE: -

Description

Improved mobile Lighthouse performance score from 71 → 89 (+18) by eliminating two render/bandwidth bottlenecks on the homepage:

• Self-hosted fonts via next/font/google — replaced four render-blocking <link> tags to fonts.googleapis.com in _document.tsx and one @import url(...) in globals.css with next/font/google (Open_Sans, Ubuntu). Ubuntu Mono was loaded but unused in the codebase, so it was dropped
  entirely. CSS variables (--font-open-sans, --font-ubuntu) wire into the existing --font-sans / --font-display design tokens so no consumer code
  changes.
• Lazy-loaded below-fold images — added loading="lazy" decoding="async" to three large raw <img> tags in StudentProfile and Modalities
  (perfil-aluno-bg.webp, impulso.png, estartando.png — ~1 MB combined). These were downloading eagerly in parallel with the LCP banner and starving it
  of bandwidth under slow-4G throttling, despite the banner already having priority.

Median-of-3 Lighthouse results (mobile, headless Chrome 148, default-mobile throttling):

Metric	Before	After	Δ
Performance score	71	89	+18
LCP	9761 ms	3989 ms	−5772 ms
FCP	2720 ms	910 ms	−1810 ms
Speed Index	2769 ms	1492 ms	−1277 ms
TBT	11 ms	0 ms	−11 ms
CLS	0.00	0.00	—

Dev Notes

• The header banner LCP image (next/legacy/image w/ priority, Cloudinary loader) was not the root cause — it was already prioritized. The cost was
  bandwidth contention from non-LCP raw <img> tags. The biggest single win came from lazy-loading two components below the fold, not from touching the LCP
  element itself.
• LCP is now at 3989 ms — in "needs improvement" (good < 2500). A follow-up pass could target the Cloudinary banner directly (verify response size for
  mobile DPR, consider migrating off next/legacy/image to the modern next/image, evaluate explicit preload).
• next/font requires the variables to be applied to a DOM ancestor — wrapped <Component /> in a <div> in _app.tsx carrying `${openSans.variable} ${ubuntu.variable}`.

Testing

Steps

1. yarn build && yarn start
2. Open http://localhost:3000/ in Chrome DevTools → Network: confirm no requests to fonts.googleapis.com or fonts.gstatic.com; fonts are served from
   /_next/static/media/*.woff2.
3. Scroll the homepage to the Profile do Aluno section — perfil-aluno-bg.webp should only download as it approaches the viewport (Network → filter
   Img).
4. Continue to the Modalidades section — impulso.png and estartando.png should similarly load on demand.
5. Visually verify Open Sans (body copy) and Ubuntu (.font-display headings) render correctly across the homepage, Header CTAs, subscriber pages, and
   modals (ConfirmationModal, ErrorModal, RequirementsModal).
6. Run a Lighthouse mobile audit on / and confirm score ≥ 85.
7. Verify no FOUT / layout shift on first paint (display: 'swap' is set; CLS should stay at 0).

Screenshots / Videos

All tests are local performed running local server by yarn run build && yarn run start and Lighthouse on Google Chrome Devtolls in a incognito window

Before (Main Branch)

Desktop

Mobile

After Changes

Desktop

Mobile

Developer Checks

• PR title & commits adhere to Conventional Commit Specification
• PR is targeting correct branch, is up-to-date, & no merge conflicts
• Tested on browser device
• Tested on Mobile device

[ramonxm]

Nice man, so tem um detalhe, testando aqui as fontes nao foram aplicadas nos componentes. Acredito que deve precisar de algum ajuste