Skriftbruk er utbredt på de fleste nettsider og inkluderer ofte feil. Mange av disse feilene påvirker nettytelsesbudsjettet negativt. Denne artikkelen tar sikte på å gi informasjon om bruk av nettskrifttyper og bidra til å forbedre ytelsen på nettet.
Som vist i hierarkiet som brukes når du gjengir en hvilken som helst nettside, kan skriftelementer forsinke gjengivelsen av andre elementer til de er lastet. Riktig håndtering av denne forsinkelsen er viktig for både Cumulative Layout Shift (CLS) og brukeroppfatningen.
Problemet med skriftinnlasting
Inntil sidens fonter er lastet inn, varierer synligheten til fonter under HTML- og CSS-gjengivelsesprosessen fra nettleser til nettleser. Her er et sammendrag av hvordan ulike nettlesere håndterer denne situasjonen:
| nett~~POS=TRUNC leseren~~POS=HEADCOMP | Standard oppførsel hvis skriften ikke er klar... |
|---|---|
| Edge | Bruker en systemfont til skriften er klar. Bytter ut skrift. |
| Chrome | Skjuler tekst i opptil 3 sekunder. Hvis teksten fortsatt ikke er klar, bruker du en systemfont til skriften er klar. Bytter ut skrift. |
| Firefox | Skjuler tekst i opptil 3 sekunder. Hvis teksten fortsatt ikke er klar, bruker du en systemfont til skriften er klar. Bytter ut skrift. |
| Safari | Skjuler tekst til skriften er klar. |
For å løse dette problemet uten å stole på på nettleserens oppførsel, ble font-display-parameteren introdusert. For øyeblikket støtter 92 % av nettleserne font-display-parameteren.
Hva gjør Font-Display?
Under innlastingsprosessen for siden kan utseendet til skriftene variere til de er fulllastet, avhengig av nettleseren. For eksempel skjuler noen versjoner av Safari-nettleseren teksten til skriften er lastet inn. De font-display: swap CSS-parameteren standardiserer denne virkemåten ved å vise teksten ved hjelp av en systemfont til skriftfilene er lastet inn. Når skriftene er lastet inn, byttes systemfonten ut med den tiltenkte skriften. Her er et eksempel på bruk:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Forhåndsinnlasting av skrifter
Ved hjelp av å laste fonter før den kritiske gjengivelsesbanen kan forhindre hull mens skriftene lastes.
BONUS: Bransjens tilnærming til fontbruk
I følge SimilarTech-data, la oss ta en titt på en viktig trend og øyeblikksbilde av internettverdenen. Den første grafen nedenfor viser fontbruken på de 10,000 100,000 beste sidene, og den andre grafen viser skriftbruk på de XNUMX XNUMX beste nettstedene. La oss først undersøke disse grafene:
Det er en forskjell på 5 % i bruken av Google Font og Font Awesome mellom de 10,000 100,000 beste nettstedene og de XNUMX XNUMX beste nettstedene. Dette forteller oss at de 10,000 XNUMX beste nettstedene har optimalisert skriftbruken. Vi anbefaler å undersøke dette som et bemerkelsesverdig tema. Vurder hvordan du kan implementere webfonter med dine egne løsninger.
BONUS 2: Bruksstatistikk for Google Font og Font Awesome
Med henvisning til den første bonusen foreslår vi at du undersøker de to grafene som viser det numeriske omfanget av de mest brukte skriftbibliotekene. Antall unike domener her overstiger millioner, og disse millionene representerer SEO-konkurrentene dine. Å bruke disse bibliotekene bedre og mer optimalt enn andre kan hjelpe deg med å skille deg ut.
Ved å følge disse tipsene og optimalisere skriftbruken din, kan du forbedre nettytelsen og brukeropplevelsen betraktelig.
