Optimering av webbprestanda och Lighthouse · Lektion

Optimera teckensnittsinläsning

Implementera `font-display`, förinläsning och subsetting för att säkerställa att webbteckensnitt läses in effektivt utan att orsaka layoutförskjutningar.

Lektion 2 av 410 steg

Optimera teckensnittsinläsning är en gratis lektion i Optimering av webbprestanda och Lighthouse på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Optimering av webbprestanda och Lighthouse, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Optimering av webbprestanda och Lighthouse innehåller totalt 4 lektioner.

Varför optimera teckensnitt?

Webbteckensnitt gör webbplatser vackra och unika, men kan också vara en betydande flaskhals för prestandan. Stora teckensnittsfiler innebär längre hämtningstider, vilket direkt påverkar webbplatsens övergripande hastighet och användarupplevelse.

Långsam inläsning av teckensnitt kan leda till problem som ”Flash of Unstyled Text” (FOUT) eller ”Flash of Invisible Text” (FOIT). I den här lektionen går vi igenom praktiska tekniker för effektiv inläsning av teckensnitt.

Styr inläsningen av teckensnitt med `font-display`

CSS-egenskapen font-display ger er kontroll över hur webbteckensnitt läses in och visas. Den talar om för webbläsaren vilken strategi som ska användas medan ett teckensnitt fortfarande hämtas, vilket bidrar till att förhindra plötsliga visuella förändringar.

auto: Webbläsarens standardbeteende.
block: Kort blockering (osynlig text), därefter obegränsad ersättning.
swap: Mycket kort blockering (osynlig text), därefter obegränsad ersättning.
fallback: Mycket kort blockering, därefter kort ersättningsperiod och sedan permanent reservteckensnitt.
optional: Mycket kort blockering, ingen ersättning och permanent reservteckensnitt.

`font-display: swap` i praktiken

font-display: swap är ett populärt val för att balansera prestanda och utseende. Det talar om för webbläsaren att använda ett reservteckensnitt direkt. När ert anpassade webbteckensnitt har hämtats ersätter det reservteckensnittet.

Det säkerställer att texten alltid är synlig och prioriterar innehållets läsbarhet framför teckensnittets utformning under den första inläsningen.

@font-face {
  font-family: 'MyWebFont';
  src: url('mywebfont.woff2') format('woff2');
  font-display: swap;
}

Strategierna `optional` och `fallback`

Andra värden för font-display innebär andra avvägningar:

fallback: Det anpassade teckensnittet får en mycket kort blockeringsperiod (cirka 100 ms) och en kort ersättningsperiod (cirka 3 sekunder). Om det anpassade teckensnittet inte är klart inom dessa tidsperioder används ett reservteckensnitt permanent.
optional: Liknar fallback, men webbläsaren avgör om det anpassade teckensnittet ska hämtas över huvud taget utifrån nätverksförhållandena. Om teckensnittet inte hämtas snabbt används reservteckensnittet permanent, vilket förhindrar layoutförändringar.

Förladda kritiska teckensnitt

Normalt upptäcker webbläsare teckensnitt när de tolkar er CSS. Med förladdning kan ni dock instruera webbläsaren att hämta en resurs *tidigare* än den annars skulle upptäcka den.

För teckensnitt innebär <link rel="preload"> att webbläsaren kan börja hämta dem innan CSS-filen som använder dem har tolkats helt. Det minskar tiden avsevärt tills texten visas med rätt teckensnitt.

Så förladdar ni ett teckensnitt

Ni kan förladda teckensnitt genom att lägga till en <link>-tagg i HTML-dokumentets avsnitt <head>. Det är viktigt att inkludera as="font" och crossorigin för att säkerställa att teckensnittet hämtas korrekt och förhindra dubbla hämtningar.

<!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>

Minska teckensnittets storlek med subsetting

Teckensnittsfiler innehåller ofta hundratals eller till och med tusentals tecken. Många av dessa, till exempel specialsymboler eller tecken för andra språk, kanske inte används på just er webbplats.

Subsetting av teckensnitt innebär att skapa en mindre version av en teckensnittsfil som endast innehåller de specifika tecken (glyfer) som webbplatsen faktiskt behöver. Det minskar filstorleken kraftigt.

Varför subsetta teckensnitt?

Subsetting påverkar webbplatsens prestanda direkt och betydande:

Snabbare hämtningar: Mindre teckensnittsfiler hämtas mycket snabbare, vilket leder till kortare laddningstider för sidan.
Minskad bandbredd: Det sparar data för användarna, vilket är särskilt viktigt för dem som använder mobildata.
Bättre användarupplevelse: Kortare väntan innebär att användarna mycket snabbare ser innehållet med rätt utformning.

Verktyg som Font Squirrels Webfont Generator eller Google Fonts kan hjälpa er att subcutta teckensnitt.

Testa era kunskaper om teckensnitt

Vilka av följande är effektiva strategier för att optimera inläsning och prestanda för webbteckensnitt?

Besvara frågan i den interaktiva lektionen

Repetition: Inläsning av teckensnitt

Vi har gått igenom viktiga tekniker för att optimera inläsningen av webbteckensnitt:

font-display: Den här CSS-egenskapen styr hur teckensnitt renderas under hämtningen och förhindrar FOUT och FOIT.
Förladdning: Genom att använda <link rel="preload"> i HTML hämtas kritiska teckensnitt tidigare, så att de blir tillgängliga snabbare.
Subsetting: Minskar teckensnittsfilens storlek genom att endast inkludera de tecken som webbplatsen faktiskt behöver.

Genom att använda dessa strategier kan ni avsevärt förbättra webbplatsens upplevda prestanda och skapa en smidigare användarupplevelse.

Gratis att börja

Lär dig Optimering av webbprestanda och Lighthouse med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Optimera teckensnittsinläsning” gratis?

Ja – hela texten till ”Optimera teckensnittsinläsning” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Optimering av webbprestanda och Lighthouse, kan Ni uppgradera till CoddyKit PRO. Kursen i Optimering av webbprestanda och Lighthouse innehåller totalt 4 lektioner.

Vad lär jag mig i ”Optimera teckensnittsinläsning”?

Implementera `font-display`, förinläsning och subsetting för att säkerställa att webbteckensnitt läses in effektivt utan att orsaka layoutförskjutningar. Ni övar på Optimering av webbprestanda och Lighthouse med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Optimering av webbprestanda och Lighthouse?

Du behöver inga förkunskaper. Utbildningen i Optimering av webbprestanda och Lighthouse på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Optimera teckensnittsinläsning”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Optimering av webbprestanda och Lighthouse-lektionen?

Ja. Varje Optimering av webbprestanda och Lighthouse-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Optimering av webbprestanda och Lighthouse