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

julekalender kim tetzlaff tips

Årets Julekalender

Hastighedsoptimering Ordbogen

font optimering jul

Font optimering

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 … Læs mere

godt tema vaelg det rette fra start

Super godt tema

Når jeg skal vælge et tema til en kunde, eller til et af mine egne projekter, står jeg faktisk i samme situation som langt de fleste. Skal jeg gå med et der koster lidt, skal det være nemt at bruge, skal der være mange funktioner indbygget, skal det være med indbygget redigeringsværktøj og meget mere. … Læs mere

hurtigere woocommerce del1

Langsom WooCommerce webshop – 3dec

Benytter du WooCommerce ligesom rigtig mange andre med en wordpress hjemmeside gør? så har du helt sikkert oplevet at din woocommerce hjemmeside bliver langsom. Og selv hvis du lige har installeret WooCommerce, så vil du også opleve at den bliver langsom med tiden. Det kan være mens du arbejder med shoppen, det kan også være … Læs mere

4 dec caching

Caching gør hjemmesiden hurtigere

For at gøre det nemt Der er ingen grund til at jeg på ny skriver en masse om caching, og hvorfor det er vigtigt. Jeg har i stedet samlet en række indlæg der beskriver netop caching, hvorfor det er vigtigt. Og så får du samtidig en masse andre tips. Der er masser at gå i … Læs mere

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.