Webfont-optimalizálás
Webfont performance: preload, subset, font-display, fallback metricák és hogyan csökkentsd a késői szövegcsere és layout shift kockázatát.
Röviden
A webfont egyszerre lehet network, render és layout kérdés. Ha a kritikus szöveg csak font letöltés után jelenik meg vagy a fallback karakterei nagyon eltérő méretűek, a felhasználó késést vagy elmozdulást érzékelhet.
Mit jelent a webfont-optimalizálás?
A webfont egyszerre lehet network, render és layout kérdés. Ha a kritikus szöveg csak font letöltés után jelenik meg vagy a fallback karakterei nagyon eltérő méretűek, a felhasználó késést vagy elmozdulást érzékelhet.
Font betöltés
01
Fallback
02
Font request
03
Decode
04
Swap
05
Stable metrics
Hogyan működik a gyakorlatban?
Csökkentsd a variánsok számát, használj szükséges karakterkészletet, megfelelő cache-t, és csak valóban korán szükséges fontot preloadolj. `font-display` meghatározza a fallback/csere viselkedést, metric override tulajdonságok pedig segíthetnek a fallback geometriáját közelíteni.
- WOFF2 jó általános webfont formátum.
- Egy font family öt weightje öt külön erőforrás is lehet.
- Preload prioritást emel, ezért túlhasználva más fontos requestet szoríthat ki.
- Fallback metric hangolás CLS-en is segíthet.
Gyakorlati fejlesztői szemlélet
Design rendszerben pontosan definiáld, mely weightek valósak. Ha 400/500/600/700 szerepel, győződj meg róla, hogy tényleg kell mind; variable font is lehet opció, de annak payloadját is mérni kell.
Gyakori hibák és félreértések
- Minden fontot preloadolni.
- CSS-ben kérni nem létező weightet és böngészős synthetic boldra hagyatkozni.
- Csak vizuális FOUT/FOIT kérdésként kezelni, CLS kapcsolat nélkül.
Források és szabványok
A technikai részletekhez elsődleges szabványokat és karbantartott hivatalos dokumentációt használok. Frameworkök, böngészők és webes API-k idővel változhatnak, ezért implementálás előtt mindig ellenőrizd az aktuális dokumentációt is.
Kapcsolódó ByBence Academy