Žiniatinklio šriftai vis dar yra paprasčiausias našumo laimėjimas daugumoje svetainių

Nuolat pasikartojantis modelis

Jei šiandien patikrintumėte dešimt atsitiktinių veikiančių svetainių, daugumoje jų rastumėte maždaug tą pačią šriftų situaciją:

• Pagrindiniame puslapyje įkeliami šeši–dešimt šrifto failų
• Visi jie WOFF2 formatu (gerai), bet be font-display strategijos (blogai)
• Keli storiai ir stiliai, kurie niekur puslapyje nenaudojami
• Visa seka pateikiama iš trečiosios šalies domeno (dažniausiai Google Fonts) su visomis iš to kylančiomis DNS, TLS ir privatumo sąnaudomis
• Nėra unicode-range poaibių, todėl kiekvienas lankytojas atsisiunčia kirilicos ir graikų rašto glifus, net jei puslapis yra anglų kalba

Tai nėra problema, būdinga tik mažoms svetainėms. Daugybė gerai finansuojamų rinkodaros puslapių vis dar įkelia 600 KB šriftų dar prieš tai, kai galima atvaizduoti pirmą pastraipą. Kartą pastebėjus šį modelį, jo nebeįmanoma nepastebėti.

Sprendimas nėra egzotiškas. Tai keli gerai suprantami metodai, kurie naršyklėse egzistuoja jau daugelį metų.

Naudokite vieną variable font vietoje šešių statinių

Jei įkeliate Inter Regular, Inter Medium, Inter SemiBold, Inter Bold ir jų kursyvus, atsisiunčiate maždaug šešis kartus daugiau baitų, nei reikia. Vienas Inter variable font apima visą storio ašį (o kai kuriose versijose ir pasvirimą) viename faile, kuris yra vos didesnis už du statinius storius.

Naršyklių palaikymo klausimas jau seniai išspręstas — variable fonts veikia visur, kur svarbu. Likęs dvejojimas daugiausia yra iš statinių šriftų eros paveldėta raumenų atmintis.

Praktiška taisyklė: vienas variable font failas kiekvienai rašto sistemai ir kiekvienai šeimai. Lotynų raštas viename faile, kirilica kitame, graikų raštas trečiame, įkeliami sąlygiškai naudojant unicode-range. Ir viskas.

Nustatykite protingą font-display

Numatytoji elgsena, kai pasirinktinis šriftas vis dar įkeliamas, yra nerodyti nieko — nematomas tekstas — iki trijų sekundžių. Tai blogiausia įmanoma numatytoji reikšmė. Naudotojai mato tuščią puslapį ir mano, kad kažkas sugedo.

Pridėkite tai prie kiekvienos @font-face taisyklės:

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

swap iš karto parodo atsarginį šriftą ir pakeičia jį pasirinktiniu, kai šis įkeliamas. Naudotojas gali skaityti puslapį nuo nulio milisekundės. Kompromisas — trumpas maketo poslinkis, kai įvyksta pakeitimas; jį sušvelninate kitu metodu.

Suderinkite atsarginio šrifto metrikas

Nestilizuoto teksto blyksnis erzina tik tada, kai atsarginio ir pasirinktinio šrifto metrikos labai skiriasi. Šiuolaikinis CSS tai išsprendžia su size-adjust, ascent-override ir panašiais nustatymais:

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

Suderinus atsarginio šrifto metrikas, pakeitimas tampa vos pastebimas — žodžiai užima tą pačią horizontalią erdvę prieš ir po pasirinktinio šrifto įkėlimo.

Google --allow-fallback-font-metrics darbas dabar yra bazinio naršyklių palaikymo dalis, o įrankių grandinė (fontaine biblioteka ir panašūs įrankiai) per kelias sekundes apskaičiuoja tinkamas reikšmes.

Laikykite šriftus savo serveryje

Google Fonts yra patogu, nemokama ir turi dvi tikras sąnaudas:

1. Antras TLS rankos paspaudimas. Net naudojant HTTP/3 ir ryšių sujungimą, papildomas šaltinis retai būna nemokamas.
2. Privatumo ir atitikties klausimas. Keli Europos teismai yra nusprendę, kad Google Fonts įkėlimas iš fonts.gstatic.com reiškia asmens duomenų (IP adreso) perdavimą trečiajai šaliai. Savarankiškas talpinimas šį klausimą visiškai pašalina.

Atsisiuntimo ir talpinimo eiga yra tokia:

1. Gaukite WOFF2 failą (variable build, jei jis yra)
2. Suskaidykite jį į poaibius pagal rašto sistemas, kurias jūsų auditorija iš tikrųjų naudoja
3. Pateikite jį iš to paties šaltinio kaip ir likusią svetainės dalį, su ilgu Cache-Control: max-age=31536000, immutable
4. Iš anksto įkelkite svarbiausią storį: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

Tai ir yra visa eiga. Esamai svetainei tai užtrunka popietę, o grįžti atgal beveik niekada nesinori.

Kada visiškai atsisakyti pasirinktinių šriftų

Verta pasakyti garsiai: ne kiekvienai svetainei reikia pasirinktinio šrifto. Sisteminė šriftų seka dabar iš tiesų graži kiekvienoje operacinėje sistemoje:

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

Storis tinkamas, metrikos tinkamos, atvaizdavimas pritaikytas įrenginiui, o perduodamų baitų kaina yra tiksliai nulis. Įrankių svetainei, vidinei programai, turinį prioritetizuojančiam portfolio ar bet kam, kas skirta lėtų tinklų naudotojams, sisteminė seka yra teisingas atsakymas.

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

💡 Išbandykite tai: Konvertuokite savo TTF arba OTF failus į šiuolaikinį WOFF2 su paruoštu naudoti CSS naudodami Webfont Generator, o tai yra įraše rekomenduojamas formato pakeitimas.

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

Sąžininga santrauka

Tipinei mažai svetainei visą žiniatinklio šriftų našumo istoriją apima keturi žingsniai:

1. Vienas variable font kiekvienai šeimai ir kiekvienai rašto sistemai
2. font-display: swap su suderintomis atsarginio šrifto metrikomis
3. Savarankiškas talpinimas su ilgais talpyklos antraščių galiojimo terminais ir preload kritiniam storiui
4. Arba visiškai atsisakykite šriftų ir naudokite sisteminę seką

Padarykite tai vieną kartą ir susigrąžinsite kelis šimtus kilobaitų iš pagrindinio puslapio, laimėsite kelis šimtus milisekundžių juntamo našumo ir kartu pašalinsite trečiosios šalies priklausomybę. Nedaug pakeitimų turi geresnį pastangų ir naudos santykį.