A webes betűkészletek még mindig a legegyszerűbb teljesítménynyereséget adják a legtöbb oldalon

A minta, amely újra és újra felbukkan

Ha ma véletlenszerűen auditálsz tíz éles weboldalt, a legtöbbnél nagyjából ugyanazzal a betűkészlet-helyzettel találkozol:

• Hat-tíz betűkészletfájl betöltve a kezdőlapon
• Mindegyik WOFF2-ben (jó), de font-display stratégia nélkül (rossz)
• Több olyan súly és stílus, amelyet az oldal sehol sem használ
• Az egész stack egy harmadik féltől származó domainről érkezik (általában Google Fonts), az ezzel járó DNS-, TLS- és adatvédelmi költséggel együtt
• Nincs unicode-range szerinti részhalmazolás, így minden látogató letölti a cirill és görög glifákat is, még akkor is, ha az oldal angol nyelvű

Ez nem csak a kis oldalak problémája. Rengeteg jól finanszírozott marketingoldal még mindig 600 KB betűkészletet tölt be, mielőtt az első bekezdés kirajzolható lenne. Ha egyszer elkezded észrevenni ezt a mintát, többé nem tudod nem látni.

A megoldás nem egzotikus. Néhány jól ismert technikáról van szó, amelyek évek óta elérhetők a böngészőkben.

Használj egy változó betűkészletet hat statikus helyett

Ha Inter Regular, Inter Medium, Inter SemiBold, Inter Bold betűkészleteket és ezek dőlt változatait töltöd be, nagyjából hatszor annyi bájtot töltesz le, mint amennyire szükséged van. Egyetlen Inter változó betűkészlet lefedi a teljes súlytengelyt (és egyes buildekben a dőlést is) egy olyan fájlban, amely alig nagyobb két statikus súlynál.

A böngészőtámogatás kérdése évek óta eldőlt — a változó betűkészletek minden fontos helyen működnek. A megmaradt óvatosság többnyire a statikus betűkészletek korszakából örökölt beidegződés.

Gyakorlati ökölszabály: egy változó betűkészletfájl írásrendszerenként és családonként. Latin egy fájlban, cirill egy másikban, görög egy harmadikban, feltételesen betöltve unicode-range segítségével. Ennyi.

Állíts be ésszerű font-display értéket

Az alapértelmezett viselkedés, amikor egy egyedi betűkészlet még töltődik, az, hogy semmi nem jelenik meg — láthatatlan a szöveg — akár három másodpercig. Ez a lehető legrosszabb alapértelmezés. A felhasználók üres oldalt látnak, és azt feltételezik, hogy valami elromlott.

Add hozzá ezt minden @font-face szabályhoz:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

A swap azonnal megjeleníti a tartalék betűkészletet, majd betölti helyette az egyedi betűkészletet, amint az elérhető. A felhasználó a nulladik milliszekundumtól olvashatja az oldalt. Az ára egy rövid elrendezés-elmozdulás a csere pillanatában, amit a következő technikával lehet mérsékelni.

Igazítsd össze a tartalék betűkészlet metrikáit

A formázatlan szöveg felvillanása csak akkor zavaró igazán, ha a tartalék és az egyedi betűkészlet metrikái nagyon eltérnek. A modern CSS ezt a size-adjust, az ascent-override és a hozzájuk hasonló tulajdonságokkal javítja:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Jól beállított tartalékmetrikákkal a csere alig észrevehető — a szavak ugyanakkora vízszintes helyet foglalnak el az egyedi betűkészlet megérkezése előtt és után.

A Google --allow-fallback-font-metrics munkája ma már alap böngészőtámogatás, és létezik hozzá eszközlánc (a fontaine könyvtár és hasonlók), amely másodpercek alatt kiszámolja helyetted a megfelelő számokat.

Hosztold saját magad

A Google Fonts kényelmes, ingyenes, és két valódi költséggel jár:

1. Egy második TLS-kézfogás. Még HTTP/3 és connection coalescing mellett sem igazán ingyenes egy extra origin.
2. Adatvédelmi és megfelelőségi kérdés. Több európai bíróság kimondta, hogy a Google Fonts fonts.gstatic.com címről történő betöltése személyes adat (az IP-cím) harmadik félnek való továbbításának minősül. A saját hosztolás ezt a kérdést teljesen megszünteti.

A letöltési és hosztolási folyamat:

1. Szerezd be a WOFF2 fájlt (ha létezik, a változó buildet)
2. Készíts belőle részhalmazt azokhoz az írásrendszerekhez, amelyeket a közönséged ténylegesen használ
3. Szolgáld ki ugyanarról az originről, mint a webhelyed többi részét, hosszú Cache-Control: max-age=31536000, immutable fejléccel
4. Preloadold a legfontosabb súlyt: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

Ez a teljes folyamat. Egy meglévő oldalon egy délután alatt megvan, és utána szinte soha nem térsz vissza a régi megoldáshoz.

Mikor érdemes teljesen kihagyni az egyedi betűkészleteket

Érdemes kimondani: nem minden oldalnak van szüksége egyedi betűkészletre. A rendszer betűkészlet-stack ma már valóban gyönyörű minden operációs rendszeren:

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

A súly megfelelő, a metrikák megfelelőek, a megjelenítés az eszközhöz van hangolva, és a hálózaton átküldött bájtok költsége pontosan nulla. Egy eszközoldal, belső alkalmazás, tartalmat előtérbe helyező portfólió vagy lassú hálózaton lévő felhasználóknak szánt bármi esetében a rendszer-stack a helyes válasz.

<!-- tool-cta:start -->

💡 Próbáld ki ezt: Alakítsd át TTF- vagy OTF-fájljaidat modern WOFF2 formátumba, használatra kész CSS-sel a Webfont Generator segítségével, ami a bejegyzés által ajánlott formátumváltás.

<!-- tool-cta:end -->

Az őszinte összegzés

Egy tipikus kisebb oldalnál négy lépés lefedi a teljes webesbetűkészlet-teljesítmény történetet:

1. Egy változó betűkészlet családonként és írásrendszerenként
2. font-display: swap összehangolt tartalékmetrikákkal
3. Saját hosztolás hosszú cache fejlécekkel és preload használatával a kritikus súlyhoz
4. Vagy hagyd ki teljesen a betűkészleteket, és használd a rendszer-stacket

Csináld meg egyszer, és több száz kilobájtot nyersz vissza a kezdőlapról, néhány száz milliszekundummal jobb érzékelt teljesítményt kapsz, és közben eltávolítasz egy harmadik féltől való függést. Kevés változtatásnak jobb az erőfeszítés–megtérülés aránya.