Optimering af fonte

Skrifttyper på din hjemmeside kan også optimeres

Vidste du at hvis fonte på din hjemmeside loader forkert, loades de sent og langsomt og kan faktisk i optimeret tilstand ændre drastisk på din hjemmesides hastighed både visuelt og i tests. Du får herunder en lille forsmag på hvad en lille omgang fontoptimering kan gøre for din hjemmeside. En optimering der ikke tager mere end 15-30 minutter.

font optimering jul

Når man har med fonte at gøre, hvilket du med stor sandsynlighed har. Så har du sikkert også oplevet at hjemmesider som bruger mange fonte, også loader langsommere end en side der fx kun bruger system fonte.

Det er ikke sjældent at jeg møder hjemmesider der har op imod 15 fonte installeret på hjemmesiden, og det er ganske simpelt fordi en font, kun dækker en type skrift. fx er der en font til den normale størrelse, så er der en til den fede, og så er der en til den fede og kursive og endnu en til den der er lidt federe osv. Det skaber altså i længden, ret mange fonte.

Det bedste er helt klart at bruge system fonte, der er ingen load, og brugerens enhed har allerede fonten og skal derfor ikke til at hente den fra fx google eller dit eget domæne.

Nå, nu til hvordan man optimerer sine fonte

Der er nogle regler jeg altid fortæller mine kunder når der er tale om optimering af fonte

  • Fonte skal loade før alt andet
  • Kald til fonte må ikke ske gennem css filer, det skal være direkte i html koden før andre kald til css
  • Fonte skal aktiveres og bruges så hurtigt i dokumentet som muligt

Har man 15 fonte, skal man selvfølgelig ikke optimere dem alle, man skal udvælge de fonte som benyttes over folden.

Load fonte før alt andet

Man loader fonte som noget af det første ved at benytte sig af et link rel preload tag. det er et link tag, som har fået sat rel=”preload” på. det ser ud sådan:

<link rel="preload" href="/google-fonten/fontnavn.woff2" as="font" type="font/woff2" crossorigin>

der skal oprettes en for hver vigtig font der er på siden.

Kald til fonte må ikke ske gennem css filer

Ret ofte, faktisk hver gang jeg optimere en hjemmeside. Loades alle fonte gennem eksterne css filer. Fx via kald til Google efter en fil med adresser og stier til fonte der skal hentes, eller via temaets css kode hvor der også er referencer til fonte.

Det må man ikke

For det der sker er jo at browseren jo reelt ikke kender stien til fonten, før css filen er hentet ned. Og faktisk ikke engang før fonten bliver brugt.

Så sådanne kald:

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;1,100&display=swap" rel="stylesheet">

Skal væk, og indholdet af dem skal indsættes lige under de preloads du før lavede.

Så skal fontene aktiveres

Man aktivere fonten ved at benytte sig af den så hurtigt som muligt. Så de css koder som du egentlig har i din css fil, som referere til fontene der skal bruges på fx overskrifter, tekst, menu etc, skal også ind og sidde lige under de fonte du lige har kopieret ind.

Det var lige nogle hurtige tips til optimering af fonte, god arbejdslyst og god jul.

Årets julekalender

kim tetzlaff

Om forfatteren

Se mere Kim Tetzlaff

Jeg har siden 1995 arbejdet med og haft stor fokus på Teknisk SEO og hastighed på hjemmesider. Jeg er programmør, nørd og stolt af det. Jeg bygger hjemmesider, hastighedsoptimere, ser på det SEO tekniske og det er mere end 25 års erfaring der ligger bag – Du er i gode hænder når jeg laver noget for dig 🙂

Skriv en kommentar

Kategorier og tags på dette indlæg

, , ,

Måske du også vil læse disse indlæg

Ja, jeg har også skrevet andre indlæg som måske kunne have din interesse