Fonts

Google Fonts ha facilitat molt l’ús de tipografies modernes i atractives. Tot i això, la seva implementació pot tenir un impacte significatiu i sovint subestimat en el rendiment d’un lloc web. Analitzem detalladament com les fonts externes poden afectar negativament la velocitat de càrrega de la teva pàgina web.

Retard en la representació del contingut

Bloqueig del renderitzat inicial

Les fonts web externes generen un dels seus impactes més notables en la fase inicial de càrrega d’una pàgina. Quan un usuari visita un lloc web que utilitza fonts externes, aquestes s’han de descarregar completament abans que el text es pugui mostrar correctament. Aquest comportament pot retardar de manera considerable mètriques crítiques com el First Contentful Paint (FCP), que mesura el temps que triga a aparèixer el primer contingut visible.

Complexitat de les peticions HTTP

Les fonts allotjades externament, com les de Google Fonts, impliquen un procés complex de peticions HTTP. Aquest procés sol incloure:

1. Una petició inicial al servei de fonts
2. La descarrega d’una fulla d’estils CSS
3. I finalment, la descarrega dels fitxers de la font pròpiament dits

Aquest encadenament de peticions afegeix latència, especialment en connexions lentes. Per exemple, quan s’utilitza Google Fonts, el navegador ha de connectar-se primer a fonts.googleapis.com i després a fonts.gstatic.com abans de poder iniciar la descarrega real de les fonts.

Afectació a les mètriques Core Web Vitals

Impacte en el Largest Contentful Paint (LCP)

El LCP, que mesura quan es carrega el contingut principal visible d’una pàgina, pot veure’s greument afectada per fonts externes. Si aquestes fonts s’utilitzen en elements crítics com ara títols o contingut destacat, el navegador pot retardar la seva visualització fins que les fonts estiguin carregades.

Generació de Cumulative Layout Shift (CLS)

L’intercanvi de fonts durant la càrrega pot provocar canvis significatius en el disseny, cosa que perjudica el CLS. Aquests canvis es produeixen quan:

1. El navegador mostra inicialment el text amb una font alternativa (del sistema)
2. Quan es descarrega la font web externa, es torna a renderitzar el text amb la nova font
3. Si les dues fonts tenen amplades diferents, els elements es desplacen, generant una mala experiència d’usuari

Aquest fenomen és especialment problemàtic en dispositius mòbils o amb connexions lentes.

Problemes específics de renderització de text

Flash of Unstyled Text (FOUT)

El FOUT és un fenomen visual on el text es mostra inicialment amb una font alternativa (normalment del sistema) abans de canviar sobtadament a la font web un cop està carregada. Pot resultar visualment molest i transmetre la sensació que el lloc està mal dissenyat.

Flash of Invisible Text (FOIT)

Encara més problemàtic és el FOIT, on alguns navegadors opten per no mostrar cap text fins que la font externa s’ha carregat completament. Això pot generar una experiència desastrosa:

1. L’usuari veu una pantalla parcial o completament en blanc
2. El contingut textual essencial roman invisible
3. Augmenta la taxa de rebot si el retard és prolongat

Problemes relacionats amb el format i el pes de les fonts

Mida excessiva dels fitxers

Els formats tradicionals de fonts com TrueType (TTF) o OpenType (OTF) no estàn optimitzats per a la web. Poden ser fins a tres vegades més grans que formats web moderns, la qual cosa provoca descàrregues més lentes i un consum major d’ample de banda.

Variants i pesos innecessaris

En moltes implementacions es descarreguen totes les variants d’una tipografia (negreta, cursiva, condensada…), encara que només se n’utilitzin algunes. Cada variant addicional incrementa el pes total de la descàrrega i, per tant, el temps de càrrega.

Sobrecàrrega de famílies tipogràfiques

L’ús excessiu de diferents famílies tipogràfiques en un mateix lloc web agreuja tots els problemes anteriors. Cada nova família implica noves peticions HTTP, més pes de descàrrega i més riscos de problemes de renderització. Com diu un expert: “Com més fonts té una web, pitjors són les mètriques de WPO i més difícil és optimitzar-la per obtenir un bon rendiment.”

Limitacions de rendiment en diferents contextos

Dispositius amb recursos limitats

En dispositius mòbils o de gamma baixa, el processament i renderització de fonts externes pot consumir molts recursos de CPU i memòria, alentint tota l’experiència de navegació.

Connexions de xarxa variables

Dependre de serveis externs per a fonts afegeix un punt de fallada. Si el servei de fonts és lent o inaccessibe, tot el lloc pot veure’s afectat, encara que la resta de recursos es carreguin correctament.

Conflictes amb extensions del navegador

Les fonts externes poden tenir interaccions negatives amb algunes extensions, provocant errors o conflictes que degraden encara més el rendiment. Aquests problemes poden variar molt d’un usuari a un altre.

Conclusions

Les fonts web externes aporten personalitat i coherència visual, però també introdueixen nombrosos desafiaments de rendiment que poden degradar seriosament l’experiència de l’usuari. Retards en la renderització, afectació a mètriques com LCP i CLS, problemes visuals com FOUT i FOIT, i pes addicional dels fitxers són factors que poden convertir una experiència fluida en una espera frustrant.

Aquests problemes són especialment rellevants el 2025, quan les expectatives dels usuaris sobre la velocitat de càrrega són més exigents que mai i els motors de cerca donen cada cop més pes al rendiment com a factor de posicionament. Entendre aquests impactes negatius és el primer pas per trobar estratègies que equilibrin la identitat visual amb un bon rendiment web.