Er din hjemmeside også for langsom? Hurtigere hjemmeside fra 695,- ex moms

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

ikoner sloever hjemmesiden

Optimering af ikoner

Ikoner er kommet for at bliveIndhold1 Ikoner er kommet for at blive2 De største fejl med ikoner3 Ikoner på den rette måde3.1 Ikoner over folden3.2 Ikoner under folden3.3 Alternativet til ovenstående (CSS metoden)4 Til sidst Der er ingen tvivl om at ikoner er kommet for at blive, men langt de fleste hjemmeside bruger det forkert … Læs mere

over under folden

Over folden / under folden

Hvorfor lige over / under foldenIndhold1 Hvorfor lige over / under folden2 Hvad er over folden og under folden?3 de typiske regler4 ja det kan virke forvirrende Der tales meget i min verden om over og under folden og det gør der af den simple årsag at det har positiv indflydelse på hastigheden og renderingstiden, … Læs mere

seo fejl find dem 1

Tekniske seo fejl kan findes

Det kan være svært at finde de tekniske seo fejl som der er på ens hjemmeside. Dagens tip er hvilke programmer og metoder jeg blandt andet benytter i kampen mod dårlig teknisk seo samt seo generelt på hjemmesider. Lad os starte med det øjet ser At sørge for at UX er godt, at CTR bliver … Læs mere

seo lex start din seo her

Nutidens SEO tips

Når man skal i gang med SEO kan det være svært at vide hvor man skal starte og hvad der er vigtigt og ikke helt så vigtigt. Hvad angår SEO har jeg selv været med i mange år, men jeg tyr alligevel til dette tip hver gang jeg lige skal have frisket op hvad der … Læs mere

julekalender kim tetzlaff tips

Årets Julekalender

Hastighedsoptimering Ordbogen

Skriv en kommentar

Kim Tetzlaff ApS - Hastighed, SEO og Teknisk optimering

Målet er kvalitet

Det er mit mål at levere kvalitetsløsninger med høj fokus på hastighed og teknisk seo. Uanset om der er tale om små eller store løsninger, vil fokus altid være på hastighed og teknisk seo.

KTJ-Media.dk - Hastighed, SEO og Teknisk optimering