Sørg for, at tekst forbliver synlig under indlæsning af webfont
En fejl som falder ind under FCP og LCP når vi snakker Pagespeed Insights. Læs videre, og find ud af hvorfor og hvordan du retter det.
Oplever du at teksten blinker når du besøger din hjemmeside, eller at der slet ikke er nogen tekst til en start, og så kommer den pludseligt. Så lider du under at tekst ikke forbliver synlig under indlæsningen af skrifttypen
Når det kommer til brug af fonte på hjemmesider, er det vigtigt at være opmærksom på de udfordringer der kan opstå med hensyn til hastighed og ydeevne. Hjemmesider med mange forskellige webfonte kan ofte have længere indlæsningstider i forhold til sider, der kun benytter system fonte.
Det er ikke unormalt at støde på hjemmesider, der gør brug af op til 15 forskellige fonte, da hver font typisk dækker en specifik skrifttype. Dette kan resultere i en stor variation af fonte på en enkelt hjemmeside, hvilket kan påvirke indlæsningstiden negativt.
Som et eksempel, kan din hjemmeside fx have disse størrelser brugt på hjemmesiden:
- brødtekst i open sans google font, Og du bruger både 300, 400, 600, kursiv og normal
- Overskrift i Oswald Google font, denne i 500, 600, kursiv
Det betyder reelt at 8 fonte bliver hentet for at kunne vise tekster og overskrifter på din hjemmeside.
Sådan optimere du fonte og skrifttyper
For at optimere brugen af fonte på en hjemmeside, er der nogle anbefalinger jeg altid deler med mine kunder:
- Fonte bør indlæses før alt andet indhold på siden
- Kald til fonte bør ikke foregå gennem CSS filer, men direkte i HTML koden før andre CSS kald
- Fonte bør aktiveres og bruges så tidligt som muligt i dokumentet
- I tilfælde af flere fonte, bør kun de fonte, der anvendes over folden, prioriteres og optimeres.
Fonte bør indlæses før alt andet indhold på siden
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, især de der er over folden. Når man gør det, så loades de som det første, og gør at de derfor ligger på brugerens enhed. Når man så bruger dem på hjemmesiden, skal de ikke først der hentes ned, og brugeren spare derfor noget tid i forhold til rendering. Men du skal dog være obs på, jo flere Preloads du har, jo længere tid går der faktisk også før siden går i gang med renderingen, men ofte kan det betale sig alligevel.
Det ser ud sådan:
Som du kan se er der 6 fonte der preloades, mens der er 2 google fonte der ikke preloades, hvilket resulterer i at de fonte loades meget senere i processen, og vil derfor betyde det vises langsommere for brugeren.
Kald til fonte bør ikke foregå gennem CSS filer, men direkte i HTML koden før andre CSS kald
Ret ofte, faktisk hver gang jeg optimere en hjemmeside. Loades alle fonte gennem eksterne css filer. Fx via kald til Google fonts efter en fil med adresser og stier til fonte der skal hentes, eller via temaets css kode hvor der også er referencer til eksterne og interne fonte.
Det skal 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">I den fil står der en masse kode som referere til fontenes stier, navne, font style mm:
Det betyder reelt at filen først skal hentes ned før browseren kender stien til fonten, for derefter at hente fonten når den benyttes på hjemmesiden. Det man skal gøre i stedet er at indsætte koden mellem headtaggene, sådan at der IKKE skal hentes yderligere filer før stien kendes. Det ser ud sådan:
<html>
<head>
<style>
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 100;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOiCnqEu92Fr1Mu51QrEz0dL_nz.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 100;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOiCnqEu92Fr1Mu51QrEzQdL_nz.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
</style>
</head>
<body>
</body>
</html>Fonte bør aktiveres og bruges så tidligt som muligt i dokumentet
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 (ofte den kaldet styles.css i temamappen på fx wordpress), 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 og stå imellem style tagget.
I tilfælde af flere fonte, bør kun de fonte, der anvendes over folden, prioriteres og optimeres.
Optimer kun fonte over folden, af den årsag at det har indflydelse på first load, og kan derfor også forlænge renderingsprocessen, hvis for meget bliver optimeret. Derfor find ud af hvilke fonte der bruges over folden, fx overskrift, brødtekst, menu etc. Og optimer så de fonttyper. Det er egentlig ret nemt, og browsere kan ofte fortælle dig hvilke fonte der reelt bruges på siden.
Hvilke fejl kan opstå ved load af fonte?
Der kan være flere tekniske fejl, der kan påvirke load af fonte på en hjemmeside. Her er nogle af de mest almindelige:
Kørselsfejl
Dette opstår, når browsers ikke er i stand til at hente fonten fra den specificerede kilde korrekt. Dette kan skyldes et forkert URL-format, manglende fil eller netværksproblemer. Fejlen vises typisk som en besked om “Kan ikke finde fonten” eller lignende i konsollen.
Ingen systemfont fundet
Hvis du har angivet en systemfont, som brugerens browser ikke understøtter (forkert navngivning), vil browseren forsøge at hente og anvende den angivne font direkte fra webstedet – hvilket ofte resulterer i 404-fejl eller andre netværksrelaterede problemer. Sikrer du dig altid, at dine systemfonte er understøttet på tværs af alle de seneste browsere og operativsystemer for at undgå dette problem.
Browserkompatibilitetsproblemer
Nogle gamle browsere har problemer med specifikke typer CSS-kodning relateret til @font-face regler og Web Open Font Format (WOFF) komprimering formatets support varierer mellem de forskellige webbrowsere – sandsynligvis vil din side se anderledes ud (eller muligvis bryde helt) på disse platforme uden passende kompensation eller fallback fonttyper defineret via CSS
Gratis hastighedstest - udfyld formen nedenfor
Få foretaget en hastighedsanalyse af din hjemmeside med udgangspunkt i den måde Google tænker. 25 års erfaring med hastighedsoptimering og få et godt tilbud på optimering.
Jeg foretager altid tests via mobile enheder da det både er gennem mobil Google kigger og crawler, men også fordi besøgende i højere grad bruger mobilen når de søger.
