A partir de Chrome 83, se pueden combinar link rel="preload" y font-display: optional para quitar por completo los saltos de diseño
Al optimizar los ciclos de renderización, Chrome 83 elimina los cambios 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 tirones en el 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 rediseño, se produce cuando un recurso de una página web cambia de forma dinámica, lo que genera 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 dos maneras:
- Se intercambia una fuente de resguardo por una 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 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 usará depende del comportamiento preferido para las fuentes cargadas de forma asíncrona. Sin embargo, cada uno de estos valores admitidos puede activar un 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 se deben
descargar antes de que se puedan renderizar:
- Bloquear: Renderiza texto "invisible", pero cambia a la fuente web en cuanto termine de cargarse.
- Intercambio: Renderiza el texto con una fuente del sistema de resguardo, pero cambia a la fuente web en cuanto termine de cargarse.
- Falla: Se renderiza el texto con una fuente del sistema de resguardo.
Anteriormente, las fuentes designadas con font-display: optional tenían un período de bloqueo de 100 ms y no tenían un período de intercambio. Esto significa que el texto "invisible" se muestra muy brevemente antes de cambiar a una fuente
alternativa. Si la fuente no se descarga en un plazo de 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 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 leve parpadeo del texto invisible y, en los casos en que se renderiza una fuente nueva, un salto 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.
Se realizaron 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'>.
En cambio, se bloquea la renderización hasta que se termina de cargar la fuente personalizada 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 las fuentes se cargan previamente y se descargan después del período de bloqueo de 100 ms (sin destello de texto invisible)
font-display: optional en Chrome cuando las fuentes se cargan previamente y se descargan antes del período de bloqueo de 100 ms (sin destello de texto invisible)La carga previa de fuentes opcionales en Chrome elimina la posibilidad de que se produzcan saltos en el diseño y destellos de texto sin estilo. Esto coincide con el comportamiento requerido, como se especifica en el nivel 4 del módulo de fuentes CSS, en el que las fuentes opcionales nunca deben provocar un cambio de diseño y, en su lugar, los usuarios-agentes pueden retrasar la renderización durante un período adecuado.
Aunque no es necesario precargar una fuente opcional, esto 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
Al equipo de Chrome le interesa conocer tus experiencias con la carga previa de fuentes opcionales con estas nuevas optimizaciones implementadas. Informa un problema si tienes algún inconveniente o quieres enviar sugerencias de funciones.