Optimiza las fuentes web

En los módulos anteriores, aprendiste a optimizar los recursos de HTML, CSS, JavaScript y multimedia. En este módulo, descubrirás algunos métodos para optimizar las fuentes web.

Las fuentes web pueden afectar el rendimiento de la página tanto en el tiempo de carga como en el tiempo de renderización. Los archivos de fuentes grandes pueden tardar en descargarse y afectar negativamente el Procesamiento de imagen con contenido (FCP), mientras que el valor font-display incorrecto podría provocar cambios de diseño no deseados que contribuyan al Cambio de diseño acumulado (CLS) de una página.

Antes de analizar la optimización de las fuentes web, puede ser útil saber cómo las descubre el navegador para que puedas comprender cómo CSS evita la recuperación de fuentes web innecesarias en ciertas situaciones.

Discovery

Las fuentes web de una página se definen en una hoja de estilo con una declaración @font-face:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

El fragmento de código anterior define un font-family llamado "Open Sans" y le indica al navegador dónde encontrar el recurso de fuente web correspondiente. Para conservar el ancho de banda, el navegador no descarga la fuente web hasta que se determina que el diseño de la página actual la necesita.

h1 {
  font-family: "Open Sans";
}

En el fragmento de CSS anterior, el navegador descarga el archivo de fuente "Open Sans" mientras analiza un elemento <h1> en el código HTML de la página.

preload

Si tus declaraciones @font-face se definen en una hoja de estilo externa, el navegador solo puede comenzar a descargarlas después de que haya descargado la hoja de estilo. Esto hace que las fuentes web sean recursos que se descubren tarde, pero hay formas de ayudar al navegador a descubrirlas antes.

Puedes iniciar una solicitud anticipada de recursos de fuentes web con la directiva preload. La directiva preload hace que las fuentes web se puedan descubrir al principio de la carga de la página, y el navegador comienza a descargarlas de inmediato sin esperar a que se complete la descarga y el análisis de la hoja de estilo. La directiva preload no espera hasta que se necesite la fuente en la página.

<!-- The `crossorigin` attribute is required for fonts—even
     self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>

Declaraciones intercaladas de @font-face

Puedes hacer que las fuentes se detecten antes durante la carga de la página intercalando CSS que bloquea la renderización, incluidas las declaraciones @font-face, en el <head> de tu HTML con el elemento <style>. En este caso, el navegador descubre las fuentes web antes en la carga de la página, ya que no necesita esperar a que se descargue una hoja de estilo externa.

Insertar declaraciones @font-face tiene una ventaja sobre el uso de la sugerencia preload, ya que el navegador solo descarga las fuentes necesarias para renderizar la página actual. Esto elimina el riesgo de descargar fuentes sin usar.

Descargar

Después de descubrir las fuentes web y asegurarse de que el diseño de la página actual las necesita, el navegador puede descargarlas. La cantidad de fuentes web, su codificación y el tamaño de sus archivos pueden afectar significativamente la rapidez con la que el navegador descarga y renderiza una fuente web.

Aloja tus propias fuentes web

Las fuentes web se pueden publicar a través de servicios de terceros, como Google Fonts, o bien se pueden alojar por tu cuenta en tu origen. Cuando usas un servicio de terceros, tu página web debe abrir una conexión al dominio del proveedor antes de poder comenzar a descargar las fuentes web necesarias. Esto puede retrasar el descubrimiento y la descarga posterior de las fuentes web.

Esta sobrecarga se puede reducir con la sugerencia de recurso preconnect. Con preconnect, puedes indicarle al navegador que abra una conexión con el origen cruzado antes de lo que lo haría normalmente:

<link rel="preconnect" href="https://fonts.googleapis.com">  
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

El fragmento de código HTML anterior sugiere al navegador que establezca una conexión con fonts.googleapis.com y una conexión CORS con fonts.gstatic.com. Algunos proveedores de fuentes, como Google Fonts, publican recursos de CSS y fuentes desde diferentes orígenes.

Puedes eliminar la necesidad de una conexión de terceros autoalojando tus fuentes web. En la mayoría de los casos, alojar fuentes web por tu cuenta es más rápido que descargarlas desde un origen cruzado. Si planeas alojar tus propias fuentes web, verifica que tu sitio use una red de distribución de contenido (CDN), HTTP/2 o HTTP/3, y que establezca los encabezados de almacenamiento en caché correctos para las fuentes web que necesitas para tu sitio web.

Usa WOFF2, y solo WOFF2

WOFF2 tiene compatibilidad con una amplia variedad de navegadores y la mejor compresión, hasta un 30% mejor que WOFF. El tamaño de archivo reducido permite tiempos de descarga más rápidos. El formato WOFF2 suele ser el único necesario para lograr una compatibilidad total en los navegadores modernos.

Crea subconjuntos de tus fuentes web

Las fuentes web suelen incluir una amplia variedad de glifos diferentes, que son necesarios para representar la gran variedad de caracteres que se usan en diferentes idiomas. Si tu página publica contenido en un solo idioma o usa un solo alfabeto, puedes reducir el tamaño de tus fuentes web a través de la creación de subconjuntos. Esto se suele hacer especificando un número o un rango de puntos de código Unicode.

Un subconjunto es un conjunto reducido de los glifos que se incluyeron en el archivo de fuente web original. Por ejemplo, en lugar de publicar todos los glifos, tu página podría publicar un subconjunto específico para los caracteres latinos. Según el subconjunto necesario, quitar glifos puede reducir significativamente el tamaño de un archivo de fuente.

Algunos proveedores de fuentes web, como Google Fonts, ofrecen subconjuntos automáticamente a través del uso de un parámetro de cadena de consulta. Por ejemplo, la URL https://fonts.googleapis.com/css?family=Roboto&subset=latin publica una hoja de diseño con la fuente web Roboto que solo usa el alfabeto latino.

Si decidiste alojar tus propias fuentes web, el siguiente paso es generar y alojar esos subconjuntos por tu cuenta con herramientas como glyphanger o subfont.

Sin embargo, si no tienes la capacidad de alojar tus propias fuentes web, puedes crear un subconjunto de las fuentes web que proporciona Google Fonts. Para ello, especifica un parámetro de cadena de consulta text adicional que contenga solo los puntos de código Unicode necesarios para tu sitio web. Por ejemplo, si tienes una fuente web de visualización en tu sitio que solo necesita una pequeña cantidad de caracteres para la frase "Bienvenido", puedes solicitar ese subconjunto a través de Google Fonts con la siguiente URL: https://fonts.googleapis.com/css?family=Monoton&text=Welcome. Esto puede reducir significativamente la cantidad de datos de fuentes web necesarios para un solo tipo de letra en tu sitio web, si esta reducción extrema puede ser útil en tu sitio web.

Renderización de fuentes

Una vez que el navegador descubre y descarga una fuente web, se puede renderizar. De forma predeterminada, el navegador bloquea la renderización de cualquier texto que use una fuente web hasta que se descargue. Puedes ajustar el comportamiento de la renderización de texto del navegador y configurar qué texto se debe mostrar (o no mostrar) hasta que la fuente para sitios web se haya cargado por completo con la propiedad font-display de CSS.

block

El valor predeterminado para font-display es block. Con block, el navegador bloquea la renderización de cualquier texto que use la fuente web especificada. Los diferentes navegadores se comportan de manera ligeramente diferente. Chromium y Firefox bloquean la renderización durante un máximo de 3 segundos antes de usar una alternativa. Safari se bloquea de forma indefinida hasta que se carga la fuente web.

swap

swap es el valor de font-display más utilizado. swap no bloquea la renderización y muestra el texto de inmediato en una alternativa antes de intercambiarlo por la fuente web especificada. Esto te permite mostrar tu contenido de inmediato sin esperar a que se descargue la fuente web.

Sin embargo, la desventaja de swap es que provoca un cambio de diseño si la fuente web de resguardo y la fuente web especificada en tu CSS varían mucho en términos de altura de línea, kerning y otras métricas de fuentes. Esto puede afectar el CLS de tu sitio web si no tienes cuidado de usar la sugerencia preload para cargar un recurso de fuente web lo antes posible o si no tienes en cuenta otros valores de font-display.

fallback

El valor de fallback para font-display es una especie de compromiso entre block y swap. A diferencia de swap, el navegador bloquea la renderización de una fuente, pero intercambia el texto de resguardo solo por un período muy corto. Sin embargo, a diferencia de block, el período de bloqueo es extremadamente corto.

Usar el valor fallback puede funcionar bien en redes rápidas en las que, si la fuente web se descarga rápidamente, esta es la tipografía que se usa de inmediato en la renderización inicial de la página. Sin embargo, si las redes son lentas, el texto de resguardo se ve primero después de que transcurre el período de bloqueo y, luego, se reemplaza cuando llega la fuente web.

optional

optional es el valor de font-display más estricto y solo usa el recurso de fuente web si se descarga en un plazo de 100 milisegundos. Si una fuente web tarda más en cargarse, no se usa en la página y el navegador usa el tipo de letra de resguardo para la navegación actual mientras la fuente web se descarga en segundo plano y se coloca en la caché del navegador.

Como resultado, las navegaciones de páginas posteriores pueden usar la fuente web de inmediato, ya que ya se descargó. font-display: optional evita el cambio de diseño que se observa con swap, pero algunos usuarios no ven la fuente web si llega demasiado tarde en la navegación inicial de la página.

Demostraciones de fuentes

Ponga a prueba sus conocimientos

¿Cuándo descarga el navegador un recurso de fuente web (suponiendo que no se recupera con una directiva preload)?

Cuando se compila el CSSOM de la página y se determina que la fuente web es necesaria para el diseño actual.
Tan pronto como se descubre la referencia a él en una hoja de estilo.

¿Cuál es el único formato (y el más eficiente) necesario para publicar fuentes web en todos los navegadores modernos?

TTF
WOFF
EOT
WOFF2

Próximo: División del código JavaScript

Ahora que comprendes la optimización de fuentes, puedes pasar al siguiente módulo, que abarca un tema con un gran potencial para mejorar la velocidad de carga inicial de la página para tus usuarios: diferir la carga de JavaScript a través de la división del código. De esta manera, puedes mantener la contención de CPU y ancho de banda lo más baja posible durante la fase de inicio de una página, un período en el que es muy probable que los usuarios interactúen con ella.