Optimalisere innlasting av skrifter
Implementer `font-display`, forhåndslasting og delmengder for å sikre at webskrifter lastes inn effektivt uten å forårsake layoutforskyvninger.
Optimalisere innlasting av skrifter er en gratis leksjon i Optimalisering av webytelse og Lighthouse på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Optimalisering av webytelse og Lighthouse, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Optimalisering av webytelse og Lighthouse inneholder totalt 4 leksjoner.
Hvorfor optimalisere skrifttyper?
Webskrifter gjør nettsteder vakre og unike, men de kan også være en viktig årsak til ytelsesproblemer. Store skriftfiler betyr lengre nedlastingstid, noe som påvirker nettstedets totale hastighet og brukeropplevelse direkte.
Langsom lasting av skrifttyper kan føre til problemer som «Flash of Unstyled Text» (FOUT) eller «Flash of Invisible Text» (FOIT). I denne leksjonen lærer De praktiske teknikker for å laste inn skrifttyper effektivt.
Kontroller innlasting av skrifttyper med `font-display`
CSS-egenskapen font-display gir Dem kontroll over hvordan webskrifter lastes inn og vises. Den forteller nettleseren hvilken strategi som skal brukes mens en skrifttype fortsatt lastes ned, og bidrar til å forhindre brå visuelle forskyvninger.
auto: Nettleserens standardatferd.block: Kort blokkeringsperiode (usynlig tekst), deretter ubegrenset utskifting.swap: Svært kort blokkeringsperiode (usynlig tekst), deretter ubegrenset utskifting.fallback: Svært kort blokkering, deretter kort utskifting og til slutt permanent reservefont.optional: Svært kort blokkering, ingen utskifting og permanent reservefont.
`font-display: swap` i praksis
font-display: swap er et populært valg for å balansere ytelse og utseende. Det forteller nettleseren å bruke en reservefont umiddelbart. Når den egendefinerte webskriften er lastet ned, «byttes» den inn og erstatter reservefonten.
Dette sikrer at teksten alltid er synlig, og prioriterer lesbarhet fremfor skriftstiling under den første innlastingen.
@font-face {
font-family: 'MyWebFont';
src: url('mywebfont.woff2') format('woff2');
font-display: swap;
}Strategiene `optional` og `fallback`
Andre font-display-verdier gir andre avveininger:
fallback: Gir den egendefinerte skrifttypen en svært kort blokkeringsperiode (omtrent 100 ms) og en kort utskiftingsperiode (omtrent 3 sekunder). Hvis den egendefinerte skrifttypen ikke er klar innen disse tidsrommene, brukes en reservefont permanent.optional: Ligner påfallback, men nettleseren avgjør om den egendefinerte skrifttypen skal lastes ned i det hele tatt, basert på nettverksforholdene. Hvis skrifttypen ikke lastes ned raskt, brukes reservefonten permanent, slik at layoutforskyvning unngås.
Forhåndslaste kritiske skrifttyper
Vanligvis oppdager nettlesere skrifttyper når de analyserer CSS-en. De kan imidlertid be nettleseren hente en ressurs *tidligere* enn den ellers ville ha oppdaget den, ved hjelp av forhåndslasting.
For skrifttyper betyr <link rel="preload"> at nettleseren kan begynne å laste dem ned før CSS-en som bruker dem, er ferdig analysert. Dette reduserer tiden betydelig før teksten vises med riktig skrifttype.
Slik forhåndslaster De en skrifttype
De kan forhåndslaste skrifttyper ved å legge til en <link>-tagg i HTML-dokumentets <head>-seksjon. Det er viktig å inkludere as="font" og crossorigin for å sikre at skrifttypen hentes riktig og for å hindre doble nedlastinger.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preload Font Example</title>
<link rel="preload" href="mywebfont.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: 'MyWebFont';
src: url('mywebfont.woff2') format('woff2');
font-display: swap;
}
body {
font-family: 'MyWebFont', sans-serif;
}
</style>
</head>
<body>
<h1>Hello CoddyKit!</h1>
<p>This text uses a preloaded web font.</p>
</body>
</html>Redusere skriftstørrelsen med subsetting
Skriftfiler inneholder ofte hundrevis eller til og med tusenvis av tegn. Mange av disse, for eksempel spesialsymboler eller tegn for andre språk, brukes kanskje ikke på Deres nettsted.
Subsetting av skrifttyper er prosessen med å opprette en mindre versjon av en skriftfil som bare inneholder de spesifikke tegnene (glyfene) nettstedet faktisk trenger. Dette reduserer filstørrelsen drastisk.
Hvorfor subsette skrifttypene?
Subsetting har en direkte og betydelig innvirkning på nettstedets ytelse:
- Raskere nedlastinger: Mindre skriftfiler lastes ned mye raskere, noe som gir kortere innlastingstid for siden.
- Redusert båndbredde: Dette sparer data for brukerne, noe som er spesielt viktig for dem som bruker mobile abonnementer.
- Bedre brukeropplevelse: Mindre venting betyr at brukerne ser innholdet, med riktig stil, mye raskere.
Verktøy som Font Squirrels Webfont Generator eller Google Fonts kan hjelpe Dem med subsetting.
Test kunnskapene Deres om skrifttyper
Hvilke av følgende er effektive strategier for å optimalisere innlasting og ytelse for webskrifter?
Oppsummering av innlasting av skrifttyper
Vi har gått gjennom viktige teknikker for å optimalisere innlasting av webskrifter:
font-display: Denne CSS-egenskapen styrer hvordan skrifttyper gjengis under nedlasting, og forhindrer FOUT og FOIT.- Forhåndslasting: Ved å bruke
<link rel="preload">i HTML-dokumentet hentes kritiske skrifttyper tidligere, slik at de blir tilgjengelige raskere. - Subsetting: Reduserer størrelsen på skriftfiler ved å bare ta med tegnene nettstedet faktisk trenger.
Ved å bruke disse strategiene kan De forbedre nettstedets opplevde ytelse betydelig og gi en jevnere brukeropplevelse.
Lær deg Optimalisering av webytelse og Lighthouse med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 12
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Optimalisere innlasting av skrifter» gratis?
Ja – hele teksten i «Optimalisere innlasting av skrifter» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Optimalisering av webytelse og Lighthouse-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Optimalisering av webytelse og Lighthouse inneholder totalt 4 leksjoner.
Hva lærer jeg i «Optimalisere innlasting av skrifter»?
Implementer `font-display`, forhåndslasting og delmengder for å sikre at webskrifter lastes inn effektivt uten å forårsake layoutforskyvninger. Du øver på Optimalisering av webytelse og Lighthouse med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Optimalisering av webytelse og Lighthouse?
Ingen tidligere erfaring er nødvendig. Optimalisering av webytelse og Lighthouse på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Optimalisere innlasting av skrifter»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Optimalisering av webytelse og Lighthouse-leksjonen?
Ja. Alle Optimalisering av webytelse og Lighthouse-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Kritisk CSS og CSS-levering
- Optimalisere innlasting av skrifter
- Ytelsespåvirkning fra CSS-in-JS
- Redusere ubrukt CSS