Perf: betűtípus-betöltés (subset, vágások, preload)

[Xentinus]

Jelenség

A publikus app hét betűkészlet-CSS-t importál a belépési pontban (portfoliocms.client/src/main.ts):

import "@fontsource/instrument-sans/400.css"
import "@fontsource/instrument-sans/400-italic.css"
import "@fontsource/instrument-sans/500.css"
import "@fontsource/instrument-sans/600.css"
import "@fontsource/instrument-sans/700.css"
import "@fontsource/jetbrains-mono/400.css"
import "@fontsource/jetbrains-mono/500.css"

Két probléma van ezzel:

1. Minden subset betöltődik. A @fontsource/<család>/<vágás>.css az összes elérhető subsetre (latin, latin-ext, cyrillic, greek, vietnamese — családtól függően) kiírja a @font-face szabályt. A böngésző csak azt tölti le, amire tényleg szükség van a unicode-range alapján, tehát a bájtok nagy része nem töltődik le — de a szabályok a kritikus CSS-t hizlalják, és a magyar szövegnek elég a latin + latin-ext.
2. Hét vágás sok. Öt vágás egy szövegtörzs-családból ritkán indokolt; minden tényleg használt vágás egy külön letöltés a kritikus úton. Ellenőrizni kell, melyik font-weight érték szerepel valóban a stílusokban (400, 500, 600, 700, és van-e egyáltalán dőlt szöveg).
3. Nincs preload a first paintben biztosan használt vágásokra (törzsszöveg 400, a hero mono felirata), tehát a betűfájl letöltése csak a CSS feldolgozása után indul.

Javaslat

1. A tényleg használt vágások összeírása (grep a font-weight-ekre mindkét stíluslapban és a komponensekben), és a nem használtak eltávolítása. Ha a dőlt szöveg nem szerepel, a 400-italic elhagyható.
2. Subset-specifikus importra váltás: @fontsource/instrument-sans/latin-400.css (és latin-ext, ha a hosszú ő/ű miatt kell — ezt ellenőrizni kell, mert magyar szövegnél pont ez a két karakter a kérdés).
3. <link rel="preload" as="font" type="font/woff2" crossorigin> a két legfontosabb vágásra az index.html-ben. A fájlnév hashelt, tehát a preload vagy a build kimenetéből generálódik, vagy a SpaShell írja be — érdemes a MapStaticAssets fingerprintjével összehangolni.
4. font-display: swap ellenőrzése — a @fontsource csomagok ezt alapból beállítják, de a base.css-ben érdemes explicit ellenőrizni, hogy nem íródik-e felül.
5. A --sans és --mono fallback lánc ma system-ui, sans-serif, illetve monospace — ez rendben van, de érdemes a metrikára közelebbi fallbackot választani (size-adjust), hogy a betűcsere ne okozzon elrendezés-ugrást (CLS).
6. Mérés: a főlap kritikus CSS mérete és az LCP előtte/utána; a Perf: hiányzó kép-attribútumok a publikus oldalon (lazy, méret, fetchpriority) #47 (kép-attribútumok) és a Perf: kép-variánsok (WebP/AVIF + méretek) és srcset #49 (kép-variánsok) mérésével egy körben.

Érintett fájlok

• portfoliocms.client/src/main.ts, portfoliocms.admin.client/src/main.ts
• portfoliocms.client/index.html
• portfoliocms.shared/assets/base.css
• portfoliocms.client/package.json, portfoliocms.admin.client/package.json (ha vágás kerül ki)