¿Por qué vamos a hablar de fuentes? Las fuentes y tipografías están en la web desde sus inicios, porque para esto fue creada, para compartir documentos.
Con el paso del tiempo se fueron agregando elementos de diseño como imágenes, grillas y fuentes personalizadas. Hoy en día no existe sitio web que no contenga texto, y en la gran mayoría estos se renderizan con fuentes personalizadas.
Entonces podemos afirmar con bastante seguridad que las fuentes son un recurso importante y debemos prestarle atención.
Pero, ¿cómo podemos hacer para mejorar la performance sobre este tema? Veamos algunos puntos a trabajar.
Self-hosted
Las fuentes deben ser self-hosted. Es decir, las fuentes deben ser parte de nuestro proyecto y debemos tratar de evitar a toda costa cargar fuentes de CND externas como por ejemplo de Google Fonts.
¿Por qué? Porque traer recursos desde orígenes externos genera nuevas conexiones HTTP y varios viajes de ida y vuelta a ese origen.
¿Viajes de ida y vuelta? What? 🤔 Te recomiendo este artículo si no sabes de que estoy hablando.
Subsetting & convert format
Los archivos de fuentes suelen ser super pesados. Cuando se descargan de Google Fonts generalmente una sola variante tipográfica pesa aproximadamente 250kb. Si necesitamos 4 variantes como regular, light, regular italic y bold por ejemplo, nuestro usuario debe descargar 1mb solo para leer el contenido. 😱
Entonces, lo primero que podemos hacer es un subsetting de las fuentes, es decir, eliminar todos lo glifos o caracteres que nada tienen que ver con el idioma del sitio que estemos construyendo. EJ: generalmente todo lo que no sea latín.
En este link te dejo una herramienta en linea para esto.
Una vez que limpiamos nuestras fuentes, podemos convertirla a formatos que estén optimizados para web, como WOFF y WOFF2.
Siempre debemos evitar el uso de fuentes TTF y EOT porque son archivos que por defecto no están comprimidos. El uso de este tipo de fuentes debe ser solo como fallback para dar soporte a navegadores antiguos.
Acá dejo otra herramienta en línea para esto.
Luego de aplicar un subsetting y convertidas a un formato optimizado para web, un archivo va a estar pesando entre 15kb y 20kb, una reducción impresionante. 😎
Preload
Bien, pasamos de tener un archivo de 250kb a un archivo que no supera los 20kb. OK, pero esos 20kb de todavía nuestro usuario tiene que descargarlos.
Para que esta descarga suceda lo antes posible, podemos hacer un preload a nuestro archivo de fuente para indicarle al navegador que se trata de un recurso prioritario y que empiece a cargarlo cuanto antes.
Ejemplo:
<link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
font-display
Ya tenemos nuestras fuentes optimizadas e hicimos un preload de las mismas para que estén disponible lo antes posible.
Pero puede pasar que el contenido se pinte y por algún motivo la fuente todavía no se cargó. Entonces ¿el usuario no va a poder leer el contenido de nuestro sitio hasta que la fuente se cargue?. Y, ¿si la fuente se demora? o ¿nunca se carga?
Veamos un poco cómo funcionan los distintos navegadores en cuanto a la estrategia de renderizado de fuentes.
Safari oculta el texto hasta que la fuente se haya descargado. Chrome y Firefox ocultan el texto por 3 segundos, si en ese tiempo la fuente no se cargó, renderizan el texto con la fuente del sistema hasta que la fuente personalizada esté cargada.
En cualquiera de estos casos el usuario va a ver la pantalla en blanco por un tiempo.
¿Cómo podemos resolver este problema? ¡CSS al rescate! 🦸
La propiedad font-face
sirve para indicarle al navegador qué estrategia seguir en cuanto a al renderizado de fuentes.
Los valores que acepta esta propiedad son auto, block, swap, fallback, optional. Pero el valor que nos interesa es swap
, porque le indica al navegador que muestre el texto de manera inmediata con las fuentes del sistema, y cuando la fuente personaliza esté lista para usarse, haga el reemplazo.
Ejemplo:
@font-face {
font-family: 'Roboto Mono';
src: url('/fonts/RobotoMono-Regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
De esta manera nuestro usuario va a poder leer el contenido de nuestro sitio de manera inmediata, sin tener que esperar.
Variable fonts
Y cuando creías que ya no podías optimizar más, aparecen las variable fonts o fuentes variables.
Pero antes de definir que son las variable fonts, debemos entender la diferencia entre estilo tipográfico y familia tipográfica.
Un estilo tipográfico es un tipo de letra único y específico, como puede ser regular, o regular italic, o bold italic.
Una familia tipográfica es el conjunto de estilos.
Ahora que ya tenemos claro está diferencia, podemos definir a las variable fonts como un solo archivo que contiene todos los estilos. Es decir, podemos tener la familia entera, dentro de un solo archivo.
Eso es todo por ahora, voy a estar subiendo más artículos de web performance ⚡️
Nos vemos pronto 👋🏻
Top comments (1)
Excelente aporte Lucho 👏✨