Reserva de fuentes y CLS
- Temas:
- Edge Delivery Services
…en el contexto de Core Web Vitals
Cargar una fuente personalizada (una fuente que no se conoce de manera predeterminada en todos los exploradores) puede producir fácilmente algunos retrasos en la secuencia de carga y un problema de CLS (desplazamiento del diseño acumulativo). Esto ocurre durante la primera carga de página del sitio, hasta que el explorador almacena la fuente en caché.
Puede intentar cargar previamente o insertar la fuente personalizada, pero siempre habrá un momento en el que el explorador renderizará el cuerpo con una fuente predeterminada. Esto es especialmente cierto en dispositivos lentos o con una conexión lenta. Puede ocultar todo el cuerpo hasta que se cargue la fuente, pero las puntuaciones FCP (Primera pintura de contenido) y LCP (Pintura de contenido más grande) se verán muy penalizadas.
También puede usar trucos de CSS como font-display: optional, pero es posible que la fuente no se cargue en absoluto con una conexión lenta: el explorador tiene las instrucciones para ignorarla después de un cierto retraso (corto).
Esta última solución no impide que la puntuación de CLS se vea afectada: al intercambiar la fuente, el tamaño del contenido puede cambiar y el diseño puede "cambiar".
Existe otro mecanismo que se puede utilizar para evitar estos 2 problemas (retraso de carga de fuentes y CLS): utilizar una reserva de fuente.
La idea de la reserva de fuente es escalar una fuente predeterminada del navegador para que, cuando se aplique al contenido de una página, este ocupe el mismo "espacio" con la reserva de fuente y con la fuente personalizada. De este modo, puede intercambiar uno con el otro sin un cambio de diseño. Si utiliza una fuente predeterminada que tenga un aspecto lo suficientemente "similar" como para la fuente personalizada, esos pocos milisegundos de carga de la página por primera vez lucirán muy cerca de la experiencia que desea proporcionar con la fuente personalizada. A continuación, puede retrasar la carga de la fuente personalizada o, al menos, hacerla sin bloqueo en la secuencia de carga.
La extensión de reserva de fuente
Hemos creado una extensión de Chrome para ayudar a calcular la reserva de fuente.
Al abrir la extensión en una página, se analizan las caras de la fuente que se utilizan en esa página: una cara de fuente es una combinación de familia de fuentes y peso de fuente. Ahora, para cada una de estas caras de fuente, puede seleccionar una fuente predeterminada del explorador y ejecutar el cálculo de reserva de fuente. Para cada fuente, la extensión calcula qué size-adjustment de la fuente predeterminada del explorador es necesaria para que el contenido tenga la misma anchura con ambas fuentes.
El cálculo solo se realiza en la anchura porque la altura debe controlarse mediante line-height: debe establecer un line-height en el sitio para que la fuente no decida cuál es la altura del texto. Esto es así para párrafos, encabezados, listas…
Nota: con los kits de fuentes, existe una tendencia a cargar muchas caras de fuentes que nunca se utilizan (o que se utilizan en algún otro lugar del sitio que no sea la página actual). La extensión también muestra cuántas se cargan en total. También es un buen indicador si se puede hacer alguna optimización: optimizar el kit de fuentes al reducir las caras de fuentes que ofrece, puede ahorrar una gran cantidad de bytes para transferir!
Una vez finalizado el trabajo de cálculo, puede copiar el CSS calculado y pegarlo en el CSS principal.
Las familias de fuentes generadas deben agregarse después de la fuente personalizada en el CSS font-family: el explorador no encontrará inicialmente la fuente personalizada, use la reserva hasta que, más tarde, se cargue la fuente personalizada. Dado que utilizan el mismo espacio, el intercambio no genera CLS.
Para ajustar el valor de ajuste de fuente, también puede utilizar el panel de simulación.
Al marcar la casilla, se sustituye la fuente personalizada por la fuente de reserva calculada directamente en la página. La entrada de texto le permite cambiar el valor size-adjust y visualizar inmediatamente el resultado (debe activar o desactivar la casilla de verificación cada vez que cambie el valor).
Casos de Edge
La extensión realiza un cálculo basado en un sitio existente, con contenido existente y reglas CSS. En un contexto diferente, es posible que size-adjust no se ajuste perfectamente y que el intercambio de fuentes siga produciendo CLS:
- Dependencia del contenido: el texto
iiiiitiene una anchura menor quemmmmmpara el mismo número de caracteres. El número demdel texto tiene una influencia mayor en la anchura. Pero puede encontrar un(a)size-adjustque coincida con el texto promedio ejecutando la extensión en varias páginas y tomando un promedio desize-adjust. - Contenedor pequeño: si el texto está en un contenedor pequeño (especialmente true en dispositivos móviles) con una anchura y altura restringidas, el espacio permitido para el texto es entonces limitado y el cálculo de la reserva puede tener que ser más preciso, es decir, realizarse en este texto exacto.
Encontrará más detalles técnicos y otras herramientas directamente en el repositorio de extensiones: https://github.com/adobe/helix-font-fallback-extension