Cómo optimizar las fuentes para mejorar el rendimiento

Buenas prácticas en el uso de fuentes

A la hora de elegir un tipo de letra para su sitio web, es importante tener en cuenta varios criterios para optimizar el rendimiento y la experiencia del usuario.

Elección del tipo de letra

Legibilidad: elija un tipo de letra que sea fácil de leer en pantalla, con letras claramente distinguibles y un espaciado regular. Evite las fuentes demasiado estilizadas o decorativas, que pueden dificultar la lectura a los usuarios.
Peso: elija un tipo de letra ligero para reducir el tiempo de carga de su sitio web. Las fuentes grandes pueden ralentizar considerablemente el tiempo de carga de su sitio web, sobre todo en dispositivos móviles.
Compatibilidad: compruebe que la fuente es compatible con distintos navegadores y sistemas operativos. Es importante probar su sitio web en distintos navegadores y dispositivos para asegurarse de que la fuente se muestra correctamente.

Cargando desde Google Fonts

La carga de una fuente de Google Fonts puede estar menos optimizada por varios motivos:

Tiempo de carga: cuando carga una fuente desde un servidor externo, puede aumentar el tiempo de carga de su sitio web. Las fuentes deben descargarse antes de poder mostrar el contenido, lo que puede provocar que la página se muestre lentamente.
Solicitudes HTTP: cada fuente que carga desde un servidor externo requiere una solicitud HTTP adicional. Esto puede ralentizar el tiempo de carga de su sitio web, especialmente si carga varias fuentes.
Dependencia de terceros: cuando carga una fuente desde un servidor externo, depende de la disponibilidad y confiabilidad de ese servidor. Si el servidor no funciona o la conexión es lenta, puede afectar el rendimiento de su sitio web.
Privacidad: cuando carga una fuente desde un servidor externo, el proveedor de la fuente puede recopilar información sobre los visitantes de su sitio web. Esto puede generar preocupaciones sobre la privacidad y la protección de datos.

Si necesita utilizar Google Fonts para su sitio web, existen varias formas de optimizar la carga de fuentes:

Utilice únicamente las fuentes que necesita: limite la cantidad de fuentes que carga desde Google Fonts utilizando únicamente las que realmente necesita. Evite cargar fuentes innecesarias que no se utilizan en su sitio web.
Utilice la sintaxis de subconjunto de caracteres: si solo necesita un subconjunto de caracteres para una fuente determinada, puede utilizar la sintaxis de subconjunto de caracteres para reducir el tamaño de la fuente. Por ejemplo, si solo necesita caracteres latinos básicos, puede agregar &subset=latin a la URL de la fuente.
Utilice la propiedad font-display: la propiedad CSS font-display se puede utilizar para controlar cómo se muestran las fuentes durante la carga. Al utilizar font-display: swap;, puede mostrar una fuente alternativa hasta que se cargue la fuente personalizada, lo que puede mejorar la experiencia del usuario.
Utilice la precarga: la precarga de fuentes puede ayudar a reducir el tiempo de carga al indicarle al navegador que cargue las fuentes antes de que sean necesarias. Puede utilizar la etiqueta <link> con el atributo rel="preload" para precargar fuentes.
Utilice la preconexión: DNS Prefetch y Preconnect son dos técnicas que se utilizan para mejorar el rendimiento de un sitio web al reducir la latencia asociada con las consultas DNS y las conexiones de red.

DNS Prefetch

La captación previa de DNS implica realizar una resolución DNS preventiva para dominios que se utilizarán en consultas futuras. Esto ayuda a reducir la latencia asociada con la resolución de DNS al realizar esta operación antes de que el usuario necesite el recurso.

Para implementar la captación previa de DNS para Google Fonts, simplemente agregue esta línea a la parte <head> de sus páginas web:

<link rel="dns-prefetch" href="//fonts.googleapis.com">Lenguaje del código: HTML, XML (xml)

Preconnect

Preconnect, por su parte, permite profundizar en la captación previa de DNS, establece una conexión de red temprana (Resolución DNS + Negociación TCP/TLS) con los servidores que alojan los recursos necesarios para la página web. Esto ayuda a reducir la latencia asociada con el establecimiento de la conexión de red al hacerlo antes de que el usuario necesite el recurso. Ahora es compatible con todos los navegadores recientes.

Soporte para el atributo de preconexión por parte de los navegadores. — Soporte para el atributo `preconnect` por parte de los navegadores.

<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin>Lenguaje del código: HTML, XML (xml)

Aquí hay un ejemplo de código completo para cargar una fuente de Google Fonts con las optimizaciones anteriores:

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap&subset=latin" as="style" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap&subset=latin" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-display: swap;
    }
  </style>
</head>Lenguaje del código: HTML, XML (xml)

En este ejemplo, precargamos la fuente Roboto con pesos 400 y 700, el subconjunto de caracteres latin y la propiedad font-display: swap; También utilizamos una etiqueta <noscript> para proporcionar un respaldo para los navegadores que no admiten la precarga.

Aunque Google Fonts es un servicio popular y conveniente para cargar fuentes personalizadas, es importante considerar estos factores y lograr un equilibrio entre la personalización y la optimización del rendimiento de su sitio web. El uso de fuentes locales o del sistema puede ser una alternativa más optimizada para mejorar el rendimiento de su sitio web.

Uso de fuentes locales y del sistema

Otra opción es utilizar fuentes locales o del sistema en lugar de fuentes externas. Las fuentes del sistema ya están instaladas en el dispositivo del usuario, lo que significa que se cargan más rápido que las fuentes externas. Las fuentes locales se almacenan localmente en el servidor de su sitio web, lo que también reduce el tiempo de carga.

Aquí hay un código de ejemplo para usar una fuente del sistema:

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}Lenguaje del código: CSS (css)

Este código utiliza una pila de fuentes comunes del sistema para garantizar que la fuente se muestre correctamente en diferentes dispositivos y navegadores.

Las siguientes fuentes del sistema se consideran «safe fonts» porque están instaladas en la mayoría de los sistemas operativos modernos:

Arial
Helvetica
Verdana
Tahoma
Trebuchet MS
Times New Roman
Georgia
Courier New
Palatino
Garamond
Bookman Old Style
Arial
Impact
Comic Sans MS

Estas fuentes se utilizan a menudo como fuentes alternativas en hojas de estilo CSS para garantizar que el contenido se muestre correctamente, incluso si la fuente principal no está disponible. Aunque puedan parecer un poco genéricos, ofrecen buena legibilidad y alta compatibilidad con diferentes navegadores y sistemas operativos.

Si prefiere utilizar una fuente local, puede almacenarla en su servidor y utilizar el siguiente código para incluirla en su sitio web:

@font-face {
  font-family: 'MyFont';
  src: url('/path/to/font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}Lenguaje del código: CSS (css)

Este código define una nueva fuente llamada «MyFont» y especifica la ubicación de los archivos de fuentes en su servidor. Luego puede usar esta fuente en su hoja de estilo CSS configurando la propiedad font-family.

Al utilizar fuentes locales o del sistema, puede mejorar el rendimiento de su sitio web y brindar una experiencia de usuario más rápida y fluida.

El formato WOFF2

WOFF2 (Web Open Font Format 2.0) es un formato de fuente comprimido que ofrece varias ventajas sobre otros formatos de fuente. Aquí hay algunas razones por las que debería utilizar el formato WOFF2:

Tamaño de archivo reducido: el formato WOFF2 está diseñado para reducir el tamaño de los archivos de fuente manteniendo la calidad de la fuente. Esto significa que las fuentes WOFF2 se cargan más rápido que otros formatos de fuentes, lo que puede mejorar el rendimiento de su sitio web.
Compatibilidad cruzada: el formato WOFF2 es compatible con la mayoría de los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera. Esto significa que puede utilizar fuentes WOFF2 en su sitio web sin preocuparse por la compatibilidad entre navegadores.
Mejor compresión: el formato WOFF2 utiliza una compresión más avanzada que otros formatos de fuentes, lo que ayuda a reducir aún más el tamaño de los archivos de fuentes. Esto puede resultar especialmente útil para fuentes grandes o complejas.
Compatibilidad con Unicode: el formato WOFF2 es compatible con Unicode, lo que significa que puede utilizar fuentes WOFF2 para mostrar caracteres en diferentes idiomas y escrituras.

En resumen, el uso del formato WOFF2 puede mejorar el rendimiento de su sitio web al reducir el tamaño de los archivos de fuente y, al mismo tiempo, brindar compatibilidad cruzada y soporte Unicode. Si utiliza fuentes personalizadas en su sitio web, se recomienda utilizar el formato WOFF2 para optimizar el rendimiento de su sitio.

Usando una sola fuente

Existen varias ventajas al utilizar una única fuente para todo su sitio web. En primer lugar, reduce la cantidad de solicitudes HTTP necesarias para cargar fuentes, lo que puede mejorar el rendimiento de su sitio web. De hecho, cada solicitud HTTP lleva tiempo y puede ralentizar la carga de su sitio. Al utilizar una sola fuente, reduce la cantidad de solicitudes HTTP necesarias para cargar fuentes, lo que puede reducir el tiempo de carga de su sitio.

Además, utilizar una única fuente ayuda a armonizar la apariencia visual de su sitio. Al utilizar la misma fuente para todos los elementos de su sitio, crea una apariencia consistente y profesional. Esto puede ayudar a los usuarios a familiarizarse con su sitio y navegar más fácilmente.

Configurar un respaldo

Aunque las fuentes web son ampliamente compatibles con los navegadores modernos, es importante implementar un respaldo para garantizar la compatibilidad con navegadores más antiguos que no admiten fuentes web. Una fuente alternativa es una fuente alternativa que se mostrará si la fuente principal no está disponible.

Para implementar una alternativa, puede utilizar la propiedad CSS font-family. En esta propiedad, especifica una lista de fuentes separadas por comas. El navegador utilizará la primera fuente de la lista que esté disponible en el sistema del usuario.

A continuación se muestra un ejemplo de código para configurar un respaldo:

body {
  font-family: 'Roboto', Arial, sans-serif;
}Lenguaje del código: CSS (css)

En este ejemplo, la fuente Roboto se utilizará como primera opción. Si la fuente Roboto no está disponible en el sistema del usuario, el navegador utilizará la fuente Arial. Si la fuente Arial tampoco está disponible, el navegador utilizará una fuente sans-serif genérica.

Optimizar la visualización

Para optimizar la visualización de las fuentes web, existen diferentes opciones avanzadas: size-adjust, fuentes variables, subconjuntos de fuentes y precarga.

Escale las fuentes alternativas con ajuste de tamaño para reducir CLS

Cuando se utilizan alternativas, es importante establecer el valor de size-adjust para cada fuente en la lista de alternativas. Esto garantiza que el tamaño de fuente será consistente, incluso si la fuente principal no está disponible y en su lugar se utiliza una fuente alternativa.

Los ejemplos de la derecha utilizan size-adjust para garantizar que 64px sea el tamaño final consistente. — Los ejemplos de la derecha utilizan `size-adjust` para garantizar que 64px sea el tamaño final consistente.

Esta propiedad se puede utilizar para crear una fuente personalizada con un tamaño de glifo ajustado.

Aquí hay un código de muestra para usar size-adjust:

@font-face {
    font-size: 16px;
    font-family: "Roboto-fallback";
    size-adjust: 100.05%;
    ascent-override: 97%;
    src: local("Arial");
}

body {
  font-family: Roboto, "Roboto-fallback", Arial, sans-serif;
}Lenguaje del código: CSS (css)

Si la fuente Roboto no está disponible en el sistema del usuario, el navegador utilizará la fuente Arial. Sin embargo, el tamaño de fuente Arial puede ser diferente al de Roboto. Al establecer el valor de size-adjust para cada fuente en la lista alternativa, podemos garantizar que el tamaño de fuente será consistente, incluso si se utiliza una fuente alternativa.

Encontrar el tamaño de fuente correcto

Existe esta calculadora de tallas para ahorrarle tiempo. La ventaja es que todas las fuentes de Google están disponibles, pero solo funciona en los navegadores Chromium. De lo contrario, puede ajustar manualmente con herramientas como Fallback Font Generator o Font style matcher.

Interfaz de la herramienta generadora de fuentes alternativas

Es importante tener en cuenta que el valor de size-adjust puede variar según la fuente utilizada. Por lo tanto, se recomienda probar el valor de size-adjust con cada fuente en la lista alternativa para garantizar que el tamaño de fuente sea consistente en todos los casos.

Al utilizar size-adjust con opciones alternativas, puede asegurarse de que el tamaño de fuente sea consistente en todos los navegadores y sistemas operativos, incluso si la fuente principal no está disponible. Esto puede ayudar a mejorar la experiencia del usuario y garantizar que su sitio web sea accesible para todos los usuarios.

Si las opciones genéricas de escala de glifos no son suficientes para ajustar su diseño o estrategias de carga, existen opciones de ajuste más detalladas que funcionan con size-adjust. Las propiedades de ascent-override, descent-override y line-gap-override son actualmente compatibles con los navegadores más recientes.

Ascent-override: la propiedad ascent-override establece la altura sobre la base de una fuente. Esta propiedad le permite ajustar la altura de las letras mayúsculas para que encajen perfectamente dentro del cuadro delimitador general.
Descent-override: la propiedad descent-override establece la altura debajo de la referencia de fuente. Esta propiedad te permite ajustar las letras para que encajen perfectamente en la base.
Line-gap-override: la propiedad line-gap-override establece la métrica de espacio de línea para la fuente. Este es el interlineado recomendado o el interlineado exterior para la fuente.

Reducir el CLS

Cumulative Layout Shift (CLS) es un indicador de rendimiento que mide la estabilidad visual de una página web. Cuando se cargan fuentes, pueden provocar retrasos en el diseño, lo que puede afectar negativamente a la experiencia del usuario.

Para reducir CLS, se recomienda utilizar la técnica de reemplazo suave de fuentes. Esta técnica implica mostrar una fuente del sistema de carga rápida para mostrar el contenido primero y luego reemplazarla con una fuente web una vez que termine de cargarse. Sin embargo, esto a veces puede provocar un cambio en el diseño cuando se carga la fuente web.

Para evitar este problema, puede utilizar size-adjust para ajustar el tamaño de los glifos de fuente del sistema para que coincida con el de la fuente web. Esto permite un intercambio fluido de fuentes sin retrasos en el diseño.

Aquí hay un código de muestra para usar size-adjust con la técnica de reemplazo de fuente suave:

/* Establecer fuente del sistema alternativo con ajuste de tamaño */
@font-face {
  font-family: 'Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Arial');
  size-adjust: 55%; /* Ajuste del tamaño del glifo */
}

/* Establece la fuente web al mismo tamaño que la fuente alternativa del sistema */
@font-face {
  font-family: 'Web Font';
  font-style: normal;
  font-weight: 400;
  src: url('/path/to/font.woff2') format('woff2');
  font-size: 16px; /* Mismo tamaño de fuente que la fuente alternativa del sistema */
}

/* Aplicar la fuente alternativa del sistema a todos los elementos de la página */
body {
  font-family: 'Fallback', sans-serif;
}

/* Reemplace la fuente del sistema alternativo con la fuente web una vez cargada */
@font-face {
  font-family: 'Web Font';
  font-display: swap; /* Intercambio fluido de fuentes */
}Lenguaje del código: CSS (css)

En este ejemplo, definimos una fuente alternativa del sistema con size-adjust para ajustar el tamaño de los glifos. Luego configuramos la fuente web con el mismo tamaño de fuente que la fuente alternativa del sistema. Finalmente, aplicamos la fuente del sistema alternativo a todos los elementos de la página y la reemplazamos con la fuente web una vez cargada usando la propiedad font-display: swap;.

Fuentes variables

Diferentes pesos de fuente en un único archivo "variable" — Diferentes pesos de fuente en un único archivo «variable»

Las fuentes variables son una nueva tecnología que permite reducir el peso de las fuentes combinando varias variaciones de la misma fuente en un solo archivo. Con las fuentes variables, puedes ajustar el peso, la cursiva, el ancho y otras propiedades de una fuente continuamente, en lugar de tener varios archivos para cada variación. Esto proporciona varios beneficios de rendimiento:

Solicitud HTTP única: al utilizar una única fuente variable en lugar de varias fuentes estáticas, la cantidad de solicitudes HTTP necesarias para cargar todas las fuentes necesarias para una página web se reduce a 1. Esto puede reducir el tiempo de carga de la página y mejorar la experiencia del usuario.
Tamaño de archivo reducido: las fuentes variables suelen ser más pequeñas que las fuentes estáticas equivalentes porque solo almacenan la información necesaria para generar variaciones intermedias. Esto puede reducir la cantidad de datos a descargar, lo que puede ser especialmente importante para usuarios de dispositivos móviles con conexiones lentas.
Mejor flexibilidad tipográfica: las fuentes variables le permiten crear diseños más flexibles y adaptables porque ofrecen una mayor variedad de variaciones de fuentes. Esto puede permitir a los diseñadores crear diseños más expresivos y creativos, manteniendo al mismo tiempo un alto rendimiento.

Aquí hay un código de ejemplo para usar fuentes variables de Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap" rel="stylesheet">Lenguaje del código: HTML, XML (xml)

En este ejemplo, estamos usando la fuente Roboto con un rango de peso (grosor) entre 100 y 900. Luego podemos usar la propiedad font-variation-settings para ajustar el peso de la fuente según nuestras necesidades.

Para utilizar fuentes variables, primero debe asegurarse de que su fuente admita esta función. Muchas fuentes populares, como Roboto, Arial y Helvetica, tienen versiones variables disponibles. Luego puede utilizar la siguiente sintaxis CSS para definir una fuente variable:

@font-face {
  font-family: 'MyVariableFont';
  src: url('/path/to/font.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 50% 200%;
}Lenguaje del código: CSS (css)

En este ejemplo, definimos una fuente variable llamada MyVariableFont con un rango de grosor entre 100 y 900 y un rango de extensión entre 50% y 200%. También utilizamos el formato woff2-variations para indicar que la fuente admite variaciones.

Una vez que haya definido su fuente variable, puede usarla en su CSS como cualquier otra fuente. Puede utilizar la propiedad font-variation-settings para ajustar las variaciones de fuente, como esta:

h1 {
  font-family: 'MyVariableFont';
  font-size: 48px;
  font-weight: 700;
  font-stretch: 125%;
  font-variation-settings: 'wght' 700, 'wdth' 125;
}Lenguaje del código: CSS (css)

En este ejemplo, utilizamos la fuente variable MyVariableFont para el título h1, con un tamaño de fuente de 48px, un ancho de 700 y una extensión del 125%. También utilizamos la propiedad font-variation-settings para ajustar las variaciones de grosor y estiramiento a 700 y 125 respectivamente.

Al utilizar fuentes variables, puede reducir la cantidad de solicitudes HTTP, reducir el tamaño y la cantidad de archivos y mejorar la flexibilidad tipográfica de su sitio web, mientras mantiene un alto rendimiento.

Subconjunto de fuentes para reducir el tamaño del archivo

El subconjunto de fuentes es una técnica que consiste en cargar sólo los caracteres necesarios de una fuente, en lugar de todo el conjunto de fuentes. Esto reduce significativamente el tamaño del archivo de fuente, lo que puede mejorar los tiempos de carga y el rendimiento general del sitio web.

Puede analizar sus fuentes en línea para identificar caracteres no utilizados en una fuente determinada. Esto puede ayudar a reducir el tamaño de fuente eliminando caracteres innecesarios, lo que puede mejorar los tiempos de carga y el rendimiento general del sitio web.

Existen varias herramientas online gratuitas para analizar fuentes, como Wakamai Fondue o FontDrop.

Para realizar subconjuntos de fuentes, existen varias herramientas en línea gratuitas, como Font Squirrel y Transfonter. Estos son los pasos generales para realizar subconjuntos de fuentes usando Font Squirrel:

Vaya al sitio web de Font Squirrel y seleccione la opción «Generador de fuentes web».
Descargue la fuente que desea utilizar en su sitio web.
Seleccione la opción «Óptimo» o «Experto» para acceder a la configuración avanzada.
En la sección «Subconfiguración», seleccione los caracteres que desea incluir en su fuente. Puede elegir entre opciones predefinidas como «Latin Basic» o «Cyrillic», o seleccionar manualmente los caracteres que necesita.
Haga clic en el botón «Cargar su kit» para generar su fuente con el subconjunto de fuente aplicado.
Descargue el kit de fuentes generado y utilícelo en su sitio web.

Interfaz de subconjunto de Font Squirrel

Para crear un subconjunto de fuentes con más posibilidades, puede utilizar herramientas como Glyphhanger basadas en el proyecto fonttools de código abierto. Estos son los pasos a seguir:

Instale Python: debe descargar e instalar la última versión de Python 3 siguiendo las instrucciones del instalador.
Instale fonttools: una vez que Python 3 se haya instalado correctamente, abra la terminal e instale fonttools usando pip (que viene con Python) escribiendo el siguiente comando:

python3 -m pip install fonttoolsLenguaje del código: Shell Session (shell)

Instale Brotli: A continuación instale la compresión Brotli, que es necesaria para generar un archivo WOFF2. Escriba el siguiente comando:

python3 -m pip install brotliLenguaje del código: Shell Session (shell)

Mover a la carpeta que contiene la fuente: use el comando cd para moverse a la carpeta que contiene el archivo de fuente que desea convertir. Por ejemplo :

cd /your-project/fonts/Lenguaje del código: Shell Session (shell)

Ejecute fonttools: Finalmente, ejecute la rutina de subconjunto de fonttools usando las opciones deseadas. Por ejemplo :

pyftsubset Roboto-variable.ttf 
  --unicodes="U+0020-007F, U+00A0-00FF, U+0100-017F, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2100-214F, U+2200-22FF, U+FB00-FB4F" 
  --layout-features='*' 
  --flavor="woff2" 
  --output-file="Roboto-variable.woff2"Lenguaje del código: Shell Session (shell)

En este ejemplo, a partir de la fuente Roboto-variable.ttf generamos un archivo WOFF2 en la misma carpeta.

La opción unicodes especifica los caracteres que se incluirán en la fuente, utilizando rangos de caracteres Unicode. Si la fuente no contiene todos los caracteres dentro de los rangos Unicode especificados, simplemente se ignorarán. En este ejemplo tenemos los siguientes rangos:

U+0020-007F: Latín Básico
U+00A0-00FF: Suplemento Latino-1
U+0100-017F: Latín Extendido-A
U+2000-206F: Puntuación General
U+2070-209F: Superíndices y Subíndices
U+20A0-20CF: Símbolos de moneda
U+2100-214F: Símbolos tipo letras
U+2200-22FF: Operadores Matemáticos
U+FB00-FB4F: Formularios de presentación alfabéticos

La opción layout-features especifica qué características OpenType incluir, como interletraje, ligaduras, números y caracteres alternativos. En este ejemplo, usamos layout-features='*' para incluir todas las funciones disponibles. También puedes agregar funciones seleccionadas al juego predeterminado. Por ejemplo, layout-features+=onum,pnum,ss01 mantendrá el conjunto de características predeterminado y agregará onum, pnum y ss01 (dígitos antiguos, proporcional y conjunto de estilos 1).

Utilizando este método de subconjunto para la fuente variable Roboto, reducimos el tamaño del archivo original de 913 KB a 207 KB. Aunque todavía es relativamente grande, hemos sido conservadores en el subconjunto al mantener muchos caracteres europeos y características OpenType. y como fuente variable, este archivo cubrirá todas las situaciones de peso y contraste óptico.

Es importante tener en cuenta que el subconjunto de una fuente puede tener consecuencias en su representación visual. Por lo tanto, se recomienda probar cuidadosamente la fuente después del subconjunto para garantizar que se incluyan todos los caracteres necesarios y que la fuente se muestre correctamente.

Al utilizar estas técnicas, puede reducir significativamente el tamaño de la fuente y al mismo tiempo conservar los caracteres necesarios para su contenido. Esto puede ayudar a mejorar el rendimiento de su sitio web y brindar una mejor experiencia de usuario.

Precarga de fuentes para reducir LCP

LCP mide el tiempo que lleva mostrar el elemento visible más grande en el área de visualización inicial de la página. Las fuentes web pueden retrasar LCP si no se cargan y procesan rápidamente.

La precarga es una técnica para cargar recursos críticos en una página web antes de que sean necesarios. Al precargar fuentes web, puede mejorar el rendimiento de su sitio web y reducir el tiempo de carga de sus páginas.

A continuación se explica cómo configurar la precarga de fuentes web:

Identifique fuentes web críticas para su sitio web. Estas son las fuentes que se utilizan para títulos, botones y otros elementos importantes de su sitio.
Agregue una etiqueta <link> en la sección <head> de su HTML para precargar estas fuentes. La etiqueta <link> debe incluir el atributo rel="preload" y el atributo as=»font» para indicar que el recurso es una fuente.

Voici un exemple de code pour précharger une police :

<link rel="preload" href="/fonts/roboto-variable.woff2" as="font" type="font/woff2" crossorigin="anonymous">Lenguaje del código: HTML, XML (xml)

En este ejemplo, precargamos la fuente Roboto Regular en formato WOFF2. El atributo crossorigin="anonymous" se utiliza para permitir compartir recursos entre dominios.

El atributo crossorigin se utiliza para indicar cómo el navegador debe manejar las solicitudes de intercambio de recursos entre orígenes (CORS) para un recurso determinado. Cuando el atributo se establece en anonymous, significa que la solicitud CORS se realizará sin enviar cookies u otra información de identificación. Esto permite compartir recursos entre dominios sin comprometer la seguridad.

Es importante tener en cuenta que el atributo crossorigin también se puede establecer con un valor vacío, es decir, crossorigin="", que tendrá el mismo efecto que crossorigin="anonymous".

En el caso de la precarga de fuentes, utilizar el atributo crossorigin="anonymous" es importante porque permite al navegador recuperar la fuente de otro dominio sin restricciones de seguridad. Si el atributo crossorigin no está incluido o se establece en un valor que no sea anonymous o vacío, el navegador puede bloquear la solicitud CORS e impedir que la fuente se cargue correctamente.

Al utilizar el atributo crossorigin="anonymous", puede asegurarse de que la fuente se cargará correctamente desde otro dominio, lo que puede resultar especialmente útil si utiliza una CDN para alojar sus fuentes. Esto también ayuda a reducir los tiempos de carga al permitir que el navegador busque la fuente en paralelo con otros recursos.

Al implementar la precarga de fuentes web, puede mejorar el rendimiento de su sitio web y brindar una experiencia de usuario más rápida y fluida.

Conclusión

Por lo tanto, la optimización de las fuentes web es un elemento clave para mejorar el rendimiento de un sitio web y proporcionar una experiencia de usuario óptima. Para hacer esto, es importante elegir una fuente única, configurar una alternativa para navegadores más antiguos y evitar CLS. También es necesario utilizar tecnologías avanzadas, como size-adjust y fuentes variables. Mientras precarga fuentes y utiliza subconjuntos para reducir el tamaño del archivo.

Si sigue estas mejores prácticas, puede reducir el tiempo de carga de su sitio web, mejorar las métricas de LCP y CLS y brindar una experiencia de usuario más placentera. Recuerde que la optimización de fuentes web es un proceso continuo y es importante probar el rendimiento de su sitio web con regularidad para realizar los ajustes necesarios.

Finalmente, el uso de herramientas como Perfect-ish Font Fallback y fonttools pueden ayudarlo a optimizar aún más sus fuentes para la web.

Preguntas frecuentes

¿Qué hace el subconjunto y cómo puede mejorar el rendimiento de mi sitio web?

El subconjunto de fuentes es una técnica que consiste en reducir el tamaño de una fuente conservando solo los caracteres necesarios para mostrar el contenido de su sitio web. Esto reduce el tamaño del archivo de fuente y por tanto mejora los tiempos de carga de su sitio web. Para crear un subconjunto de fuentes, puede utilizar herramientas como fonttools o Glyphhanger.

¿Qué son las fuentes variables y cómo pueden mejorar el rendimiento de mi sitio web?

Las fuentes variables son una nueva tecnología que permite almacenar múltiples variaciones de una fuente en un solo archivo, en lugar de tener un archivo separado para cada variación. Esto ayuda a reducir la cantidad de solicitudes HTTP necesarias para cargar fuentes, lo que puede mejorar los tiempos de carga de su sitio web. Además, las fuentes variables permiten una mayor flexibilidad en el diseño tipográfico, lo que puede mejorar la experiencia del usuario.

¿Qué es la precarga de fuentes y cómo puede mejorar el rendimiento de mi sitio web?

La precarga de fuentes implica informar al navegador que cargue una fuente antes de que sea necesaria para mostrar el contenido. Esto reduce el tiempo de espera para que se cargue la fuente y por lo tanto mejora los tiempos de carga de su sitio web. Para precargar una fuente, puede utilizar la etiqueta <link> con el atributo rel=»preload» en el código HTML de su página web.

¿Qué es CLS y cómo afecta el rendimiento de mi sitio web?

CLS (Cumulative Layout Shift) es una medida de la estabilidad visual de una página web. Cuando los elementos de la página se mueven mientras se carga, puede alterar la experiencia del usuario y afectar negativamente el rendimiento de su sitio web. Para reducir CLS, puede utilizar técnicas como subconjuntos de fuentes, precarga de fuentes y uso de tamaños de fuente fijos.

¿Cuáles son los beneficios de utilizar fuentes del sistema para mi sitio web?

Las fuentes del sistema son fuentes instaladas de forma predeterminada en los sistemas operativos de los usuarios. Al utilizar fuentes del sistema para su sitio web, puede reducir el tiempo de carga y mejorar el rendimiento de su sitio web porque los usuarios no necesitan descargar nuevas fuentes. Además, las fuentes del sistema suelen estar optimizadas para su visualización en pantalla y pueden proporcionar una mejor legibilidad a los usuarios. Sin embargo, el uso de fuentes del sistema puede limitar las opciones de diseño tipográfico de su sitio web.