Evita los cambios de diseño y los destellos de texto invisible (FOIT) precargando fuentes opcionales.

A partir de Chrome 83, se pueden combinar link rel="preload" y font-display: opcional para quitar por completo el bloqueo de diseño.

Houssein Djirdeh

Al optimizar los ciclos de renderización, Chrome 83 elimina los cambios de diseño cuando se precarga fuentes opcionales. Combinar <link rel="preload"> con font-display: optional es la forma más eficaz de garantizar que no se bloquee el diseño cuando se renderizan fuentes personalizadas.

Compatibilidad del navegador

Consulta los datos de MDN para obtener información actualizada sobre la compatibilidad en varios navegadores:

Renderización de fuentes

El cambio de diseño, o rediseño, ocurre cuando un recurso de una página web cambia de forma dinámica, lo que genera un "cambio" del contenido. La recuperación y renderización de fuentes web pueden provocar cambios de diseño directamente de una de estas dos maneras:

  • Una fuente de resguardo se intercambia por una fuente nueva ("flash de texto sin estilo")
  • El texto "Invisible" se muestra hasta que se representa una nueva fuente en la página ("destello de texto invisible")

La propiedad font-display de CSS proporciona una forma de modificar el comportamiento de renderización de las fuentes personalizadas a través de un rango de diferentes valores admitidos (auto, block, swap, fallback y optional). La elección del valor que se debe usar depende del comportamiento preferido para las fuentes cargadas de forma asíncrona. Sin embargo, cada uno de estos valores admitidos puede activar el nuevo diseño de una de las dos maneras mencionadas anteriormente, hasta ahora.

Fuentes opcionales

La propiedad font-display usa un cronograma de tres períodos para controlar las fuentes que deben descargarse antes de que se puedan renderizar:

  • Bloquear: Renderiza el texto "invisible", pero cambia a la fuente web en cuanto termina de cargarse.
  • Swap: Renderiza texto con una fuente de sistema de resguardo, pero cambia a la fuente web en cuanto termine de cargarse.
  • Error: Renderiza texto con una fuente de sistema de resguardo.

Anteriormente, las fuentes designadas con font-display: optional tenían un período de bloqueo de 100 ms y sin período de intercambio. Eso significa que el texto "invisible" se muestra muy brevemente antes de cambiar a una fuente de resguardo. Si la fuente no se descarga en 100 ms, se usa la fuente de resguardo y no se produce ningún intercambio.

Diagrama que muestra el comportamiento opcional de la fuente anterior cuando no se carga la fuente
El comportamiento anterior de font-display: optional en Chrome cuando se descarga la fuente después del período de bloqueo de 100 ms

Sin embargo, en el caso de que la fuente se descargue antes de que finalice el período de bloqueo de 100 ms, la fuente personalizada se renderizará y se usará en la página.

Diagrama que muestra el comportamiento opcional de la fuente anterior cuando la fuente se carga a tiempo
Comportamiento anterior de font-display: optional en Chrome cuando se descarga la fuente antes del período de bloqueo de 100 ms

Chrome vuelve a renderizar la página dos veces en ambos casos, independientemente de si se usa la fuente de resguardo o si la fuente personalizada termina de cargarse a tiempo. Como resultado, se produce un leve parpadeo del texto invisible y, en los casos en que se renderiza una fuente nueva, se bloquea el diseño que mueve parte del contenido de la página. Esto ocurre incluso si la fuente se almacena en la caché de disco del navegador y puede cargarse mucho antes de que finalice el período de bloqueo.

Llegaron las optimizaciones en Chrome 83 para quitar por completo el primer ciclo de renderización de las fuentes opcionales que se precargan con <link rel="preload'>. sino que se bloquea la renderización hasta que la fuente personalizada termina de cargarse o hasta que transcurre un período determinado. Este tiempo de espera se establece en 100 ms, pero es posible que cambie en un futuro cercano para optimizar el rendimiento.

Diagrama que muestra el nuevo comportamiento de la fuente opcional precargada cuando la fuente no se carga
Nuevo comportamiento de font-display: optional en Chrome cuando las fuentes están precargadas y la fuente se descarga después del período de bloqueo de 100 ms (sin flash de texto invisible)
Diagrama que muestra el nuevo comportamiento de la fuente opcional precargada cuando la fuente se carga a tiempo
Nuevo comportamiento de font-display: optional en Chrome cuando las fuentes están precargadas y la fuente se descarga antes del período de bloqueo de 100 ms (sin flash de texto invisible)

La precarga de fuentes opcionales en Chrome quita la posibilidad de bloqueos de diseño y flash de texto sin estilo. Esto coincide con el comportamiento requerido que se especifica en el nivel 4 del módulo de fuentes de CSS, en el que las fuentes opcionales nunca deben cambiar el diseño y los usuarios-agentes pueden, en cambio, retrasar la renderización durante un período adecuado.

Si bien no es necesario precargar una fuente opcional, mejora considerablemente las posibilidades de que se cargue antes del primer ciclo de renderización, en especial, si aún no se almacenó en la caché del navegador.

Conclusión

Al equipo de Chrome le interesa conocer tu experiencia con la precarga de fuentes opcionales con estas nuevas optimizaciones implementadas. Informa un problema si tienes algún inconveniente o si quieres descartar sugerencias de funciones.