Optimiza las fuentes web

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 la Web fuentes.

Las fuentes web pueden afectar el rendimiento de la página tanto en el tiempo de carga como en el de renderización. Los archivos con fuentes grandes pueden tardar un poco en descargarse y pueden afectar negativamente la primera Procesamiento de imagen con contenido (FCP), mientras que el valor font-display incorrecto podría provocar cambios de diseño no deseados que contribuyen al Cambio de diseño acumulado de una página (CLS).

Antes de analizar la optimización de las fuentes web, es importante saber cómo las descubren el navegador puede ser útil, para que puedas comprender cómo CSS evita que la recuperación de fuentes web innecesarias en determinadas situaciones.

Discovery

Las fuentes web de una página se definen en una hoja de estilo con un @font-face declarativa:

@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". le indica al navegador dónde encontrar el recurso de fuente web correspondiente. Para conservar de ancho de banda, el navegador no descarga la fuente web hasta que se determine que el diseño de la página actual lo necesite.

h1 {
  font-family: "Open Sans";
}

En el fragmento de CSS anterior, el navegador descarga el archivo de fuente "Open Sans". ya que analiza un elemento <h1> en el código HTML de la página.

preload

Si tus declaraciones @font-face se definen en una hoja de estilo externa, el elemento navegador solo puede comenzar a descargarlas después de haber descargado la hoja de estilo. Esto hace que las fuentes web sean recursos de detección tardía, pero existen formas de ayudar al navegador descubran fuentes web más rápido.

Puedes iniciar una solicitud anticipada de recursos de fuentes web con preload. directiva. La directiva preload permite que las fuentes web se detecten con anticipación durante cargar la página y el navegador inmediatamente comienza a descargarlas sin esperar para 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 más temprano durante la carga de la página mediante la intercalación 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 detecta fuentes web al inicio de la carga de la página, ya que no necesita esperar un la hoja de estilo para descargar.

La intercalación de declaraciones de @font-face tiene una ventaja en comparación con el uso de preload. sugerencia, ya que el navegador solo descarga las fuentes necesarias para mostrar el . De esta manera, se elimina el riesgo de descargar fuentes que no se usan.

Descargar

Después de descubrir las fuentes web y asegurarte de que son necesarias para la configuración de la página actual el navegador puede descargarlos. el número de fuentes web, su codificación, y el tamaño de su archivo puede afectar significativamente la rapidez con la que se ejecuta una fuente web que el navegador descarga y procesa.

Aloja por tu cuenta tus fuentes web

Las fuentes web se pueden publicar a través de servicios de terceros, como Google Fonts o puede estar autoalojado en tu origen. Cuando usas un servicio de terceros, tu contenido web la página debe abrir una conexión con el dominio del proveedor antes de que pueda iniciarse descargando las fuentes web necesarias. Esto puede retrasar el descubrimiento y la posterior la descarga de fuentes web.

Esta sobrecarga se puede reducir con la sugerencia del recurso preconnect. Mediante preconnect, puedes indicarle al navegador que abra una conexión con el origen cruzado antes de lo que normalmente lo haría el navegador:

<link rel="preconnect" href="https://fonts.googleapis.com">  
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

El fragmento de HTML anterior sugiere al navegador que establezca una conexión con fonts.googleapis.com y una conexión CORS a fonts.gstatic.com. Algunos los proveedores de fuentes, como Google Fonts, entregan recursos CSS y de fuentes de diferentes orígenes.

Puedes eliminar la necesidad de una conexión de terceros alojando tu fuentes web. En la mayoría de los casos, las fuentes web de hosting automático son más rápidas que descargarlas. de origen cruzado. Si tienes previsto usar fuentes web de hosting propio, comprueba que tu sitio usa una red de distribución de contenidos (CDN), HTTP/2 o HTTP/3, y establece la encabezados de almacenamiento en caché correctos para las fuentes web que necesitas para tu sitio web.

Usa WOFF2 y WOFF2 únicamente.

WOFF2 disfruta de gran compatibilidad con los navegadores y la mejor compresión, hasta un 30% mejor. que WOFF. El tamaño reducido de los archivos acelera los tiempos de descarga. WOFF2 es el único que se necesita para lograr una compatibilidad total navegadores.

Agrupa las fuentes web en subconjuntos

Las fuentes web suelen incluir una amplia variedad de glifos, que son necesarios para representar la amplia variedad de caracteres que se usan en diferentes idiomas. Si el publica contenido en un solo idioma, o usa un único alfabeto, entonces puedes reducir el tamaño de las fuentes web mediante la subdivisión. A menudo, esto lo hace especificar un número o un rango de puntos de código Unicode

Un subconjunto es un conjunto reducido de glifos que se incluyeron en la Web original. archivo de fuente. Por ejemplo, en lugar de incluir todos los glifos, es posible que tu página muestre una subconjunto específico de caracteres latinos. Según el subconjunto necesario, quitar los glifos pueden reducir considerablemente el tamaño de un archivo de fuente.

Algunos proveedores de fuentes web, como Google Fonts, ofrecen subconjuntos automáticamente a través de el uso de un parámetro de cadena de consulta. Por ejemplo, el La URL https://fonts.googleapis.com/css?family=Roboto&subset=latin publica un 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 subconjunto de fuentes web proporcionadas por Google Fonts especificando un text adicional parámetro de cadena de consulta que contenga solo los puntos de código Unicode necesarios para tu sitio web. Por ejemplo, si tienes una fuente web de Display en tu sitio que solo necesita la pequeña cantidad de caracteres necesaria para la frase "Te damos la bienvenida", puedes solicita 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 su sitio web, si este subconjunto extremo puede resultarle útil.

Renderización de fuentes

Después de que el navegador detecta y descarga una fuente web, se puede se renderizan. De forma predeterminada, el navegador bloquea la representación de cualquier texto que use un elemento hasta que se haya descargado. Puedes ajustar la renderización de texto del navegador y configura qué texto debe mostrarse (o no) hasta que se muestre Se cargó por completo la fuente con la propiedad font-display de CSS.

block

El valor predeterminado para font-display es block. Con block, el navegador bloquea la representación de cualquier texto que use la fuente web especificada. Diferente los navegadores se comportan de forma ligeramente diferente. En Chromium y Firefox, se bloquea la renderización en hasta un máximo de 3 segundos antes de usar un resguardo. Safari se bloquea indefinidamente. hasta que se cargue la fuente web.

swap

swap es el valor de font-display más usado. swap no bloquea renderizando y muestra el texto inmediatamente en un resguardo antes de cambiar la fuente web especificada. Esto te permite mostrar tu contenido de inmediato sin esperar para que se descargue la fuente web.

Sin embargo, la desventaja de swap es que provoca un cambio de diseño si el resguardo la fuente web y la fuente web especificada en tu CSS varían mucho en términos de línea altura, interletraje y otras métricas de la fuente. Esto puede afectar el CLS de su sitio web en los siguientes casos: no uses la sugerencia preload para cargar un recurso de fuente web en cuanto como sea posible o si no tienes en cuenta otros valores de font-display.

fallback

El valor de fallback para font-display es una especie de equilibrio entre block y swap. A diferencia de swap, el navegador bloquea la renderización de una fuente, pero intercambiar texto de resguardo solo por un período muy corto. A diferencia de block, Sin embargo, 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 las descargas rápidamente, la fuente web es el tipo de letra que se usa inmediatamente en la página renderización inicial. Sin embargo, si las redes son lentas, se ve el texto de resguardo. una vez transcurrido el período de bloqueo y, luego, se intercambien cuando la fuente web llega.

optional

optional es el valor de font-display más estricto y solo usa la Web un recurso de fuente si se descarga en menos de 100 milisegundos. Si una fuente web toma que la carga sea más larga, no se usa en la página y el navegador usa el tipo de letra de resguardo para la navegación actual mientras se descarga la fuente web en en segundo plano y se coloca en la caché del navegador.

Como resultado, las siguientes navegaciones de páginas pueden usar la fuente web inmediatamente, ya que ya está descargado. font-display: optional evita que se produzca el cambio de diseño. con swap, pero algunos usuarios no ven la fuente web si llega demasiado tarde al navegación inicial de la página.

Demostraciones de fuentes

Ponga a prueba sus conocimientos

Cuándo descarga el navegador un recurso de fuente web (suponiendo que no está se recupera con una directiva preload)?

Cuando se crea el CSSOM de la página y se determina que la fuente web se necesario para el diseño actual.
En cuanto se descubre la referencia en una hoja de estilo.

¿Cuál es el único formato (y el más eficiente) necesario para entregar contenido web fuentes a todos los navegadores modernos?

WOFF2
TTF
EOT
WOFF

A continuación: JavaScript dividido de código

Ahora que ya conoces la optimización de fuentes, puedes en el siguiente módulo, que aborda un tema que tiene un alto potencial para mejorar velocidad de carga inicial de la página para los usuarios, con el fin de postergar la carga de JavaScript a través de la división de código. Así, puedes mantener el ancho de banda y la CPU la contención más baja posible durante la fase de inicio de una página, un período de durante el cual es más probable que los usuarios interactúen con él.