Optimiza las fuentes web para las Métricas web esenciales.
En este artículo, se analizan las prácticas recomendadas de rendimiento para las fuentes. Existen varias maneras en las que las fuentes web afectan el rendimiento:
- Renderización de texto retrasada: Si una fuente web no se cargó, por lo general, los navegadores retrasan la representación del texto. En muchas situaciones, esto retrasa el First Contentful Paint (FCP). En algunas situaciones, esto retrasa el Largest Contentful Paint (LCP).
- Cambios de diseño: La práctica del intercambio de fuentes tiene el potencial de provocar cambios de diseño y, por lo tanto, afectar el Cambio de diseño acumulado (CLS). Estos cambios de diseño ocurren cuando una fuente web y su fuente de resguardo ocupan diferentes cantidades de espacio en la página.
Este artículo se divide en tres secciones: carga de fuentes, entrega de fuentes y renderización de fuentes. En cada sección, se explica cómo funciona ese aspecto en particular del ciclo de vida de la fuente y se proporcionan las prácticas recomendadas correspondientes.
Cargando fuente
Las fuentes suelen ser recursos importantes, ya que sin ellas el usuario podría no poder ver el contenido de la página. Por lo tanto, las prácticas recomendadas para la carga de fuentes generalmente se enfocan en garantizar que las fuentes se carguen lo antes posible. Debes tener especial cuidado con las fuentes cargadas desde sitios de terceros, ya que la descarga de estos archivos requiere configuraciones de conexión independientes.
Si no sabes si las fuentes de la página se solicitan a tiempo, consulta la pestaña Timing del panel Red en las Herramientas para desarrolladores de Chrome para obtener más información.
Conoce @font-face
Antes de sumergirte en las prácticas recomendadas para la carga de fuentes, es importante comprender cómo funciona @font-face y cómo esto afecta la carga de fuentes.
La declaración @font-face es una parte fundamental del trabajo con cualquier fuente web. Como mínimo, declara el nombre que se usará para referirse a la fuente e indica la ubicación del archivo de fuente correspondiente.
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
Un error común es pensar que se solicita una fuente cuando se encuentra una declaración @font-face, pero no es así. Por sí misma, la declaración de @font-face no activa la descarga de fuentes. En su lugar, una fuente se descarga solo si se hace referencia a ella mediante el estilo que se usa en la página. Por ejemplo:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
h1 {
font-family: "Open Sans"
}
En otras palabras, en el ejemplo anterior, Open Sans solo se descargaría si la página contenía un elemento <h1>.
Por lo tanto, al pensar en la optimización de fuentes, es importante dar a las hojas de estilo la misma consideración que los archivos de fuente. Cambiar el contenido o la entrega de las hojas de estilo puede tener un impacto significativo en el momento en que llegan las fuentes. Del mismo modo, quitar las CSS que no se usan y dividir las hojas de estilo puede reducir la cantidad de fuentes que carga una página.
Declaraciones de fuentes intercaladas
La mayoría de los sitios se beneficiarían mucho de la incorporación de declaraciones de fuente y otros estilos críticos en el <head> del documento principal en lugar de incluirlos en una hoja de estilo externa. Esto permite que el navegador descubra las declaraciones de fuente más rápido, ya que no necesita esperar a que se descargue la hoja de estilo externa.
<head>
<style>
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
body {
font-family: "Open Sans";
}
...etc.
</style>
</head>
Incorporar CSS crítico puede ser una técnica más avanzada que no todos los sitios podrán lograr. Los beneficios de rendimiento son claros, pero se requieren procesos y herramientas de compilación adicionales para garantizar que la CSS necesaria (y, idealmente, solo la CSS crítica) esté correctamente alineada y que cualquier CSS adicional se proporcione sin bloquear la renderización.
Establece una conexión previa con orígenes críticos de terceros
Si tu sitio carga fuentes de un sitio de terceros, te recomendamos que uses la sugerencia del recurso preconnect para establecer conexiones tempranas con el origen del tercero. Las sugerencias de recursos deben colocarse en el <head> del documento. La sugerencia de recursos que aparece a continuación establece una conexión para cargar la hoja de estilo de fuente.
<head>
<link rel="preconnect" href="https://fonts.com">
</head>
A fin de preconectar la conexión que se usa para descargar el archivo de fuente, agrega una sugerencia de recurso preconnect independiente que use el atributo crossorigin. A diferencia de las hojas de estilo, los archivos de fuentes deben enviarse a través de una conexión CORS.
<head>
<link rel="preconnect" href="https://fonts.com">
<link rel="preconnect" href="https://fonts.com" crossorigin>
</head>
Cuando uses la sugerencia de recursos preconnect, ten en cuenta que un proveedor de fuentes puede publicar hojas de estilo y fuentes de orígenes independientes. Por ejemplo, así es como se usaría la sugerencia del recurso preconnect para Google Fonts.
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
Ten cuidado cuando uses preload para cargar fuentes
Si bien preload es muy eficaz para hacer que las fuentes sean detectables al principio del proceso de carga de la página, esto tiene el costo de quitar los recursos del navegador de la carga de otros recursos.
Incorporar declaraciones de fuentes y ajustar las hojas de estilo puede ser un enfoque más efectivo. Estos ajustes se acercan a abordar la causa raíz de las fuentes descubiertas tardía, en lugar de solo proporcionar una solución alternativa.
Además, el uso de preload como estrategia de carga de fuentes también debe usarse con cuidado, ya que evita algunas de las estrategias de negociación de contenido integradas del navegador. Por ejemplo, preload ignora las declaraciones unicode-range y, si se usa con prudencia, solo debe usarse para cargar un único formato de fuente.
Sin embargo, al usar hojas de estilo externas, precargar las fuentes más importantes puede ser muy eficaz, ya que el navegador no descubrirá si la fuente es necesaria hasta mucho más adelante.
Entrega de fuentes
Una entrega más rápida de fuentes permite una renderización de texto más rápida. Además, si una fuente se entrega lo suficientemente pronto, esto puede ayudar a eliminar los cambios de diseño que resultan del intercambio de fuentes.
Cómo usar fuentes autoalojadas
En teoría, el uso de una fuente alojada en una ubicación propia debería brindar un mejor rendimiento, ya que elimina la configuración de conexión de terceros. Sin embargo, en la práctica, las diferencias de rendimiento entre estas dos opciones son menos claras: por ejemplo, Web Almanac descubrió que los sitios que usan fuentes de terceros tenían una renderización más rápida que las fuentes que usaban fuentes propias.
Si estás considerando usar fuentes autoalojadas, confirma que tu sitio use una red de distribución de contenidos (CDN) y HTTP/2. Sin el uso de estas tecnologías, es mucho menos probable que las fuentes autoalojadas brinden un mejor rendimiento. Para obtener más información, consulta Redes de distribución de contenidos.
Si usas una fuente alojada en una ubicación propia, se recomienda que también apliques algunas de las optimizaciones de archivos de fuentes que los proveedores de fuentes de terceros suelen proporcionar automáticamente; por ejemplo, la subdivisión de fuentes y la compresión WOFF2. El esfuerzo que se deba realizar para aplicar estas optimizaciones dependerá, de alguna manera, de los idiomas que admita tu sitio. En particular, ten en cuenta que optimizar las fuentes para los idiomas CJK puede ser particularmente complejo.
Usar WOFF2
De las fuentes modernas, WOFF2 es la más reciente, cuenta con la compatibilidad más amplia de navegadores y ofrece la mejor compresión. Debido a que usa Brotli, WOFF2 comprime un 30% mejor que WOFF, por lo que se descargan menos datos y, por lo tanto, un rendimiento más rápido.
Dada la compatibilidad con los navegadores, los expertos ahora recomiendan utilizar solo WOFF2:
De hecho, creemos que también es momento de proclamar lo siguiente: solo usa WOFF2 y olvídate de todo lo demás.
Bram Stein, de 2022 Web Almanac
Esto simplificará enormemente tu CSS y tu flujo de trabajo y también evitará que se descarguen fuentes dobles o incorrectas por accidente. Ahora, WOFF2 es compatible en todas partes. Así que, a menos que necesites admitir navegadores realmente antiguos, solo usa WOFF2. Si no puedes hacerlo, considera no ofrecer ninguna fuente web a esos navegadores anteriores. Esto no será un problema si tienes una estrategia de resguardo sólida implementada. Los visitantes de navegadores más antiguos simplemente verán las fuentes alternativas.
Fuentes de subconjuntos
Por lo general, los archivos de fuentes incluyen una gran cantidad de glifos para todos los caracteres que admiten. Sin embargo, es posible que no necesites todos los caracteres de tu página y puedes reducir el tamaño de los archivos de fuentes subdividiendo las fuentes.
El descriptor unicode-range en la declaración @font-face informa al navegador para qué caracteres se puede usar una fuente.
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
unicode-range: U+0025-00FF;
}
Se descargará un archivo de fuente si la página contiene uno o más caracteres que coinciden con el rango Unicode. Por lo general, unicode-range se usa para publicar diferentes archivos de fuentes según el idioma que se use en el contenido de la página.
unicode-range a menudo se usa junto con la técnica de subdivisión. Una fuente de subconjunto incluye una parte más pequeña de los glifos contenidos en el archivo de fuente original. Por ejemplo, en lugar de mostrar todos los caracteres a todos los usuarios, un sitio podría generar fuentes subconjuntos independientes para caracteres latinos y cirílicos. La cantidad de glifos por fuente varía mucho: las fuentes latinas suelen tener una magnitud de 100 a 1,000 glifos por fuente; las fuentes CJK pueden tener más de 10,000 caracteres. Quitar los glifos que no se utilizan puede reducir significativamente el tamaño de archivo de una fuente.
Algunos proveedores de fuentes pueden proporcionar automáticamente distintas versiones de archivos de fuentes con diferentes subconjuntos. Por ejemplo, Google Fonts hace esto de forma predeterminada:
/* devanagari */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Cuando pasas al alojamiento propio, esta es una optimización que puede pasarse por alto con facilidad y generar archivos de fuente más grandes a nivel local.
También es posible establecer subconjuntos de fuentes de forma manual si tu proveedor de fuentes lo permite, ya sea a través de una API (Google Fonts lo admite proporcionando un parámetro text) o editando de forma manual los archivos de fuentes y luego autoalojando. Entre las herramientas para generar subconjuntos de fuentes se incluyen subfont y glyphanger. Sin embargo, revisa la licencia de las fuentes que usas para permitir la subdivisión y el autoalojamiento.
Usar menos fuentes web
La fuente más rápida para entregar es aquella que no se solicita primero. Las fuentes del sistema y las fuentes variables son dos maneras de reducir potencialmente la cantidad de fuentes web que se usan en tu sitio.
Una fuente del sistema es la fuente predeterminada que usa la interfaz de usuario del dispositivo de un usuario. Las fuentes del sistema generalmente varían según el sistema operativo y la versión. Como la fuente ya está instalada, no es necesario descargarla. Las fuentes del sistema pueden funcionar particularmente bien para el texto del cuerpo.
Para usar la fuente del sistema en tu CSS, enumera system-ui como la familia de fuentes:
font-family: system-ui
La idea detrás de las fuentes variables es que se puede usar una sola fuente variable como reemplazo de varios archivos de fuentes. Las fuentes variables definen un estilo de fuente "predeterminado" y proporcionan "ejes" para manipular la fuente. Por ejemplo, se podría usar una fuente variable con un eje Weight para implementar letras que anteriormente requerían fuentes separadas para clara, normal, negrita y negrita extra.
No todos se beneficiarán de cambiar a fuentes variables. Las fuentes variables contienen muchos estilos, de modo que, por lo general, tienen tamaños de archivo más grandes que las fuentes individuales no variables que solo contienen un estilo. Los sitios que mejorarán notablemente las fuentes variables son aquellos que usan (y deben usar) una variedad de estilos y grosores de fuente.
Renderización de fuentes
Cuando se encuentra una fuente web que aún no se cargó, el navegador se enfrenta a un dilema: ¿debe abstenerse de procesar el texto hasta que llegue la fuente web? ¿O debe renderizar el texto en una fuente de resguardo hasta que llegue la fuente web?
Cada navegador controla esta situación de manera diferente. De forma predeterminada, los navegadores basados en Chromium y Firefox bloquearán la renderización de texto durante un máximo de 3 segundos si no se cargó la fuente web asociada. Safari bloqueará la renderización de texto de forma indefinida.
Este comportamiento se puede configurar mediante el atributo font-display. Esta elección puede tener implicaciones significativas: font-display puede afectar la estabilidad del diseño, el LCP y el FCP.
Elige una estrategia de font-display adecuada
font-display informa al navegador cómo debe proceder con la renderización de texto cuando no se haya cargado la fuente web asociada. Se define por tipo de fuente.
@font-face {
font-family: Roboto, Sans-Serif
src: url(/fonts/roboto.woff) format('woff'),
font-display: swap;
}
Hay cinco valores posibles para font-display:
| Valor | Período de bloqueo | Período de intercambio |
|---|---|---|
| Automático | Varía según el navegador | Varía según el navegador |
| Bloqueo | 2 a 3 segundos | Infinito |
| Cambiar | 0ms | Infinito |
| Resguardo | 100 ms | 3 segundos |
| Opcional | 100 ms | Ninguno |
- Período de bloqueo: El período de bloqueo comienza cuando el navegador solicita una fuente web. Durante el período de bloqueo, si la fuente web no está disponible, se renderiza en una fuente de resguardo invisible, por lo que el usuario no podrá ver el texto. Si la fuente no está disponible al final del período de bloqueo, se renderizará en la fuente de resguardo.
- Período de intercambio: El período de intercambio es posterior al período de bloqueo. Si la fuente web está disponible durante el período de intercambio, se "intercambiará".
Las estrategias de font-display reflejan diferentes puntos de vista sobre la compensación entre rendimiento y estética. Por lo tanto, es difícil dar un enfoque recomendado, ya que depende de las preferencias individuales, lo importante que es la fuente web para la página y la marca, y lo irregular que puede ser una fuente tardía cuando se la reemplaza.
Para la mayoría de los sitios, estas son las tres estrategias más aplicables:
Si el rendimiento es una prioridad, usa
font-display: optional. Este es el enfoque más "rendimiento": la renderización de texto se retrasa no más de 100 ms y es seguro que no habrá cambios de diseño relacionados con el intercambio de fuentes. Sin embargo, la desventaja es que la fuente web no se utilizará si llega tarde.Si mostrar texto rápidamente es una de las prioridades, pero quieres asegurarte de que se use la fuente para sitios web: Usa
font-display: swap, pero asegúrate de enviar la fuente lo suficientemente temprano para que no se produzca un cambio en el diseño. La desventaja de esta opción es el cambio radical cuando la fuente llega tarde.Si garantizar que el texto se muestre en una fuente web es una prioridad principal, usa
font-display: block, pero asegúrate de enviar la fuente lo suficientemente temprano como para reducir la demora en el texto. La desventaja de esto es que la visualización inicial del texto se demorará. Ten en cuenta que, a pesar de esta representación, aún puede provocar un cambio de diseño, ya que el texto se dibuja invisible y, por lo tanto, el espacio de la fuente de resguardo se usa para reservar el espacio. Una vez que se carga la fuente web, es posible que se requiera un espacio diferente y, por lo tanto, que se produzca un cambio. Sin embargo, este cambio puede ser menos molesto quefont-display: swap, ya que no se verá que el texto en sí cambie.
Además, ten en cuenta que estos dos enfoques se pueden combinar: por ejemplo, usa font-display: swap para la marca y otros elementos de página visualmente distintivos; usa font-display: optional para las fuentes utilizadas en el texto del cuerpo.
Reduce el cambio entre la fuente de resguardo y la fuente web
Para reducir el impacto de CLS, puedes usar los nuevos atributos size-adjust. Para obtener más información, consulta el artículo sobre CSS size-adjust. Es una adición muy nueva a nuestro conjunto de herramientas, por lo que es más avanzada y un poco manual en la actualidad. Sin embargo, definitivamente debes experimentar y observar las mejoras de las herramientas en el futuro.
Conclusión
Las fuentes web siguen siendo un cuello de botella en el rendimiento, pero tenemos un rango de opciones en constante crecimiento que nos permite optimizarlas para reducir este cuello de botella tanto como sea posible.