En los módulos anteriores, aprendiste a optimizar HTML, CSS, JavaScript y recursos multimedia. En este módulo, descubrirás algunos métodos para optimizar las fuentes web.
Las fuentes web pueden afectar el rendimiento de las páginas tanto en el tiempo de carga como en el de renderización.
Los archivos de fuentes grandes pueden tardar un poco en descargarse y afectar de forma negativa al First Contentful Paint (FCP), mientras que el valor font-display incorrecto podría causar cambios de diseño no deseados que contribuyan al Cambio de diseño acumulado (CLS) de una página.
Antes de analizar la optimización de las fuentes web, puede ser útil saber cómo las descubre el navegador, para que puedas comprender cómo CSS evita la recuperación de fuentes web innecesarias en ciertas situaciones.
Campañas discovery
Las fuentes web de una página se definen en una hoja de estilo mediante una declaración @font-face:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
En el fragmento de código anterior, se define un font-family llamado "Open Sans" y se indica al navegador dónde encontrar el recurso de fuente web correspondiente. Para conservar el ancho de banda, el navegador no descarga la fuente web hasta que se determina que el diseño de la página actual la necesita.
h1 {
font-family: "Open Sans";
}
En el fragmento CSS anterior, el navegador descarga el archivo de fuente "Open Sans" mientras analiza un elemento <h1> en el HTML de la página.
preload
Si tus declaraciones @font-face se definen en una hoja de estilo externa, el navegador solo podrá comenzar a descargarlas una vez descargada la hoja de estilo.
Esto hace que las fuentes web se detecten tardíamente los recursos, pero hay formas de ayudar a que el navegador descubra las fuentes web antes.
Puedes iniciar una solicitud anticipada de recursos de fuentes web mediante la directiva preload. La directiva preload permite que las fuentes web sean detectables durante la carga de la página, y el navegador comienza a descargarlas de inmediato sin esperar a que la hoja de estilo termine de descargarse y analizarse. La directiva preload no espera a que se necesite la fuente en la página.
<!-- The `crossorigin` attribute is required for fonts—even
self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>
Declaraciones @font-face intercaladas
Puedes hacer que las fuentes sean detectables antes durante la carga de la página si integras el código CSS que bloquea la renderización (incluidas las declaraciones @font-face) en el <head> de tu HTML con el elemento <style>. En este caso, el navegador descubre las fuentes web antes en la carga de la página, ya que no necesita esperar a que se descargue una hoja de estilo externa.
Integrar declaraciones @font-face tiene una ventaja en comparación con la sugerencia preload, ya que el navegador solo descarga las fuentes necesarias para renderizar la página actual. Esto elimina el riesgo de descargar fuentes que no se usan.
Descargar
Después de descubrir las fuentes web y asegurarse de que el diseño de la página actual las necesite, el navegador podrá descargarlas. La cantidad de fuentes web, su codificación y el tamaño del archivo pueden afectar significativamente la rapidez con la que el navegador descarga y procesa una fuente web.
Aloja por cuenta propia tus fuentes web
Las fuentes web se pueden entregar mediante servicios de terceros, como Google Fonts, o pueden estar autoalojadas en tu origen. Cuando usas un servicio de terceros, tu página web debe abrir una conexión con el dominio del proveedor antes de que pueda comenzar a descargar las fuentes web necesarias. Esto puede retrasar el descubrimiento y la descarga posterior de las fuentes web.
Esta sobrecarga se puede reducir con la sugerencia del recurso preconnect. Si usas
preconnect, puedes indicarle al navegador que abra una conexión al origen cruzado
antes de lo que lo haría el navegador normalmente:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
El fragmento HTML anterior sugiere al navegador que establezca una conexión con fonts.googleapis.com y una conexión CORS con fonts.gstatic.com. Algunos proveedores de fuentes, como Google Fonts, entregan recursos de CSS y fuentes de diferentes orígenes.
Puedes eliminar la necesidad de una conexión de terceros si alojas por tu cuenta tus fuentes web. En la mayoría de los casos, las fuentes web de hosting propio es más rápido que descargarlas desde un origen cruzado. Si planeas alojar fuentes web de autoalojamiento, verifica que tu sitio use una red de distribución de contenidos (CDN), HTTP/2 o HTTP/3, y configura los encabezados de almacenamiento en caché correctos para las fuentes web que necesitas en tu sitio web.
Usa WOFF2 y solo WOFF2
WOFF2 ofrece compatibilidad amplia con navegadores y la mejor compresión, hasta un 30% mejor que WOFF. Gracias a la reducción del tamaño de los archivos, los tiempos de descarga son más rápidos. El formato WOFF2 suele ser el único necesario para lograr una compatibilidad total con los navegadores modernos.
Dividir tus fuentes web en subconjuntos
Por lo general, las fuentes web incluyen una amplia gama de glifos diferentes, que son necesarios para representar la amplia variedad de caracteres que se usan en los distintos idiomas. Si tu página entrega contenido en un solo idioma (o utiliza un solo alfabeto), puedes reducir el tamaño de las fuentes web mediante la subdivisión. Para ello, se suele especificar un número (o un rango de) puntos de código Unicode.
Un subconjunto es un conjunto reducido de los glifos que se incluyeron en el archivo de fuente web original. Por ejemplo, en lugar de entregar todos los glifos, tu página podría mostrar un subconjunto específico de caracteres latinos. Según el subconjunto necesario, quitar glifos puede reducir significativamente el tamaño de un archivo de fuente.
Algunos proveedores de fuentes web, como Google Fonts, ofrecen subconjuntos automáticamente mediante un parámetro de string de consulta. Por ejemplo, la URL
https://fonts.googleapis.com/css?family=Roboto&subset=latin entrega una
hoja de estilo con la fuente web Roboto que solo usa el alfabeto latino.
Si decidiste alojar tus fuentes web por tu cuenta, el siguiente paso es generar y alojar esos subconjuntos por tu cuenta con herramientas como glyphanger o subfont.
Sin embargo, si no tienes la capacidad de alojar tus propias fuentes web, puedes subconfigurar las fuentes web que proporciona Google Fonts. Para ello, especifica un parámetro de cadena de consulta text adicional que contenga solo los puntos de código Unicode necesarios para tu sitio web. Por ejemplo, si tienes una fuente web de anuncios gráficos en tu sitio que solo necesita una pequeña cantidad de caracteres para la frase "Welcome", puedes solicitar ese subconjunto a través de Google Fonts a través de la siguiente URL: https://fonts.googleapis.com/css?family=Monoton&text=Welcome. Esto puede reducir significativamente la cantidad de datos de fuentes web necesarios para un solo tipo de letra en el sitio web, en caso de que esa división extrema pueda ser útil.
Renderización de fuentes
Una vez que el navegador detecta y descarga una fuente web, se puede renderizar. De forma predeterminada, el navegador bloquea la renderización de cualquier texto que use una fuente web hasta que se descarga. Puedes ajustar el comportamiento de renderización de texto del navegador y configurar qué texto se debe mostrar (o no) hasta que la fuente web se haya cargado por completo con la propiedad de CSS font-display.
block
El valor predeterminado para font-display es block. Con block, el navegador bloquea la renderización de cualquier texto que use la fuente web especificada. Los distintos navegadores se comportan de manera un poco diferente. Chromium y Firefox bloquean la renderización por un máximo de 3 segundos antes de usar un resguardo. Safari se bloquea indefinidamente
hasta que se carga la fuente web.
swap
swap es el valor de font-display más usado. swap no bloquea la renderización y muestra el texto de inmediato en un resguardo antes de cambiar a la fuente web especificada. Esto te permite mostrar tu contenido de inmediato sin esperar a que se descargue la fuente web.
Sin embargo, la desventaja de swap es que provoca un cambio de diseño si la fuente web de resguardo y la fuente web especificada en tu CSS varían mucho en términos de altura de línea, interletraje y otras métricas de fuente. Esto puede afectar el CLS de tu sitio web si no tienes cuidado de usar la sugerencia preload para cargar un recurso de fuente web lo antes posible o si no tienes en cuenta otros valores de font-display.
fallback
El valor fallback para font-display es algo así como un compromiso entre block y swap. A diferencia de swap, el navegador bloquea la renderización de una fuente, pero cambia en texto de resguardo solo durante un período muy breve. Sin embargo, a diferencia de block, el período de bloqueo es extremadamente corto.
El uso del valor fallback puede funcionar bien en redes rápidas en las que, si la fuente web se descarga rápidamente, es el tipo de letra que se usa inmediatamente en la renderización inicial de la página. Sin embargo, si las redes son lentas, el texto de resguardo se ve primero después de que finaliza el período de bloqueo y, luego, se intercambia cuando llega la fuente web.
optional
optional es el valor más estricto de font-display y solo usa el recurso de fuente web si se descarga en 100 milisegundos. Si una fuente web tarda más en cargarse, no se usa en la página, y el navegador usa el tipo de letra de resguardo para la navegación actual mientras la fuente web se descarga en segundo plano y se coloca en la memoria caché del navegador.
Como resultado, las navegaciones posteriores de la página pueden usar la fuente web de inmediato, dado que ya está descargada. font-display: optional evita el cambio de diseño que se observa con swap, pero algunos usuarios no ven la fuente web si llega demasiado tarde en la navegación inicial de la página.
Demostraciones de fuentes
Pon a prueba tus conocimientos
¿Cuándo descarga el navegador un recurso de fuente web (suponiendo que no se recupera con una directiva preload)?
¿Cuál es el único formato (y el más eficiente) necesario para entregar fuentes web en todos los navegadores modernos?
A continuación: JavaScript dividido del código
Si ya conoces la optimización de fuentes, puedes continuar con el siguiente módulo, en el que se aborda un tema que tiene un gran potencial para mejorar la velocidad de carga inicial de la página para los usuarios y se trata de postergar la carga de JavaScript mediante la división de código. De esta manera, puedes mantener el ancho de banda y la contención de CPU lo más baja posible durante la fase de inicio de una página, un período en el que es muy probable que los usuarios interactúen con ella.