Web Performance - Cómo optimizar tus tipografías

#css #performance #webdev #spanish

¿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.

Ejemplo de la fuente Roboto

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.