A partir de Chrome 83, se pueden combinar link rel="preload" y font-display: optional para quitar por completo el salto de diseño
Al optimizar los ciclos de renderización, Chrome 83 elimina el cambio de diseño cuando se precargan fuentes opcionales.
Combinar <link rel="preload"> con font-display: optional es la forma más eficaz de garantizar que no haya bloqueos de diseño cuando se renderizan fuentes personalizadas.
Compatibilidad del navegador
Consulta los datos de MDN para obtener información actualizada sobre la compatibilidad entre navegadores:
Renderización de fuentes
El cambio de diseño, o el nuevo diseño, se produce cuando un recurso de una página web cambia de forma dinámica, lo que provoca un "cambio" de contenido. La recuperación y la renderización de fuentes web pueden causar cambios de diseño directamente de una de las siguientes maneras:
- Se intercambia una fuente de resguardo con una fuente nueva ("destello de texto sin estilo").
- Se muestra texto "invisible" hasta que se renderiza una fuente nueva en la página ("destello de texto invisible").
La propiedad CSS font-display proporciona una forma de modificar
el comportamiento de renderización de las fuentes personalizadas a través de una variedad de valores compatibles diferentes (auto, block,
swap, fallback, y optional). La elección del valor que se usará depende del comportamiento preferido
para las fuentes cargadas de forma asíncrona. Sin embargo, cada uno de estos valores compatibles puede activar un nuevo diseño de una de las dos maneras mencionadas anteriormente, hasta ahora.
Fuentes opcionales
La propiedad font-display usa una línea de tiempo de tres períodos para controlar las fuentes que deben descargarse antes de que se puedan renderizar:
- Block: Renderiza texto "invisible", pero cambia a la fuente web en cuanto termine de cargarse.
- Swap: Renderiza texto con una fuente de resguardo del sistema, pero cambia a la fuente web en cuanto termine de cargarse.
- Fail: Renderiza texto con una fuente de resguardo del sistema.
Anteriormente, las fuentes designadas con font-display: optional tenían un período de bloqueo de 100 ms y ningún período de intercambio. Esto significa que el texto "invisible" se muestra 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.
font-display: optional en Chrome cuando la fuente se descarga después del período de bloqueo de 100 msSin embargo, en el caso de que la fuente se descargue antes de que se complete el período de bloqueo de 100 ms, la fuente personalizada se renderiza y se usa en la página.
font-display: optional en Chrome cuando la fuente se descarga antes del período de bloqueo de 100 msChrome vuelve a renderizar la página dos veces en ambas instancias, independientemente de si se usa la fuente de resguardo o si la fuente personalizada termina de cargarse a tiempo. Esto provoca un ligero parpadeo de texto invisible y, en los casos en que se renderiza una fuente nueva, un bloqueo de diseño que mueve parte del contenido de la página. Esto ocurre incluso si la fuente se almacena en la memoria caché del disco del navegador y se puede cargar mucho antes de que se complete el período de bloqueo.
Las optimizaciones llegaron a Chrome 83 para quitar por completo el primer ciclo de renderización de las fuentes opcionales
que se precargan con <link rel="preload'>.
En cambio, la renderización se bloquea hasta que la fuente personalizada termina de cargarse o hasta que transcurre un período determinado. Actualmente, este período de tiempo de espera está establecido en 100 ms, pero es posible que cambie en el futuro cercano para optimizar el rendimiento.
font-display: optional en Chrome cuando se precargan fuentes y la fuente se descarga después del período de bloqueo de 100 ms (sin destello de texto invisible)
font-display: optional en Chrome cuando se precargan fuentes y la fuente se descarga antes del período de bloqueo de 100 ms (sin destello de texto invisible)La precarga de fuentes opcionales en Chrome elimina la posibilidad de que haya saltos de diseño y destellos de texto sin estilo. Esto coincide con el comportamiento requerido, como se especifica en el Módulo de fuentes CSS de nivel 4, en el que las fuentes opcionales nunca deben causar un nuevo diseño y los agentes de usuario pueden retrasar la renderización durante un período adecuado de tiempo.
Aunque no es necesario precargar una fuente opcional, mejora en gran medida la posibilidad de que se cargue antes del primer ciclo de renderización, en especial si aún no está almacenada en la caché del navegador.
Conclusión
El equipo de Chrome está interesado en conocer tus experiencias con la precarga de fuentes opcionales con estas nuevas optimizaciones. Informa un problema si tienes algún problema o quieres enviar sugerencias de funciones.