Aloja Google Fonts en tu servidor para mejorar los Core Web Vitals

Aloja Google Fonts en tu servidor para mejorar los Core Web Vitals

A medida que los propietarios de sitios web y los desarrolladores se esfuerzan por optimizar sus páginas web para una mejor experiencia de usuario y mejores posiciones en los motores de búsqueda, los Core Web Vitals se han convertido en un conjunto crucial de métricas. Google Fonts, aunque ofrece una amplia gama de opciones tipográficas, a veces puede afectar negativamente a los Core Web Vitals. En este artículo, exploraremos por qué alojar Google Fonts en tu propio servidor puede ser beneficioso para el rendimiento de tu sitio web, particularmente en relación con los Core Web Vitals. También proporcionaremos ejemplos y mejores prácticas para demostrar cómo alojar las fuentes localmente puede llevar a mejoras significativas.

Entendiendo los Core Web Vitals

Los Core Web Vitals son un conjunto de tres métricas de rendimiento que miden diferentes aspectos de la velocidad de carga, la interactividad y la estabilidad visual de una página web:

1. Largest Contentful Paint (LCP): LCP mide el tiempo que tarda el elemento más grande de una página web (generalmente una imagen o un bloque de texto) en hacerse visible dentro del viewport. Un LCP ideal debería ocurrir dentro de los primeros 2,5 segundos para garantizar una visualización rápida del contenido.

2. First Input Delay (FID): FID mide el retraso entre la primera interacción del usuario con una página (por ejemplo, hacer clic en un botón) y la respuesta del navegador a esa interacción. Un buen FID debería estar por debajo de 100ms para una experiencia de usuario fluida.

3. Cumulative Layout Shift (CLS): CLS mide la cantidad de cambios de diseño inesperados que ocurren durante la carga de la página. Un valor bajo de CLS (por debajo de 0,1) indica una experiencia visual estable, ya que a los usuarios no les gusta que el contenido se mueva inesperadamente mientras intentan leer o interactuar con la página.

Impacto de Google Fonts en los Core Web Vitals

Google Fonts, que a menudo se incluye en las páginas web para mejorar la tipografía y el diseño, puede tener un impacto significativo en los Core Web Vitals, principalmente en el Largest Contentful Paint (LCP) y el Cumulative Layout Shift (CLS):

Para la mayoría de las personas con las que hablo, esta es información nueva. Se supone que el CDN de Google es el mejor del mundo. Entonces, ¿por qué Google Fonts es malo para la velocidad de la página?

1. La hoja de estilos nunca está en la caché del navegador para los nuevos visitantes. El primer problema con Google Fonts es que depende de una hoja de estilos externa alojada en fonts.google.com o fonts.googleapis.com. Esta hoja de estilos no puede ser reutilizada por diferentes dominios (como muchas personas parecen pensar). Esto significa que la hoja de estilos que bloquea el renderizado nunca se sirve desde la súper rápida caché del navegador para los visitantes nuevos y siempre ralentizará un poco la parte de renderizado de la página. 

2. Requiere 2 conexiones a 2 servidores nuevos. El segundo problema es que para descargar el archivo CSS y los archivos de fuente tenemos que conectarnos a 2 servidores diferentes. Cada conexión inicial a un nuevo servidor tiene una sobrecarga importante y toma algo de tiempo extra. Tiempo que podríamos haber ahorrado sirviendo los archivos desde nuestra conexión ya abierta a nuestro servidor. Para evitar esto, Google recomienda preconectar a sus dominios. Eso mitigará el problema un poco, pero todavía está lejos de ser perfecto
   

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

3. Tienes control limitado sobre el atributo font-display. Aunque Google fonts te permite configurar el atributo font-display, solo puedes definirlo de forma global. Esto significa que todos los archivos woff2 tendrán la misma configuración de font-display 
   

4. La ubicación final del archivo woff2 es desconocida. Esto significa que no podemos precargar nuestras fuentes más importantes. Esto significa que nuestros archivos de fuente se ponen en cola para descarga relativamente tarde y probablemente obtendremos un cambio de diseño visible causado por el destello de texto sin estilo (FOUT)

5. No tienes control sobre los archivos de fuente. 

Ventajas de alojar Google Fonts en tu propio servidor

Alojar Google Fonts en tu propio servidor implica servir los archivos de fuente desde tus propios servidores en lugar de depender de los servidores externos de Google. Este enfoque puede ofrecer varios beneficios, particularmente en relación con los Core Web Vitals:

1. Mejora en la velocidad de entrega de fuentes: Alojar las fuentes localmente reduce la dependencia de servidores externos, lo que lleva a una entrega más rápida de fuentes y, en consecuencia, a un renderizado más rápido del contenido de texto. Esta mejora puede impactar positivamente en el LCP, asegurando que el elemento de texto más grande se haga visible más rápido.

2. Reducción de cambios de diseño: Al alojar Google Fonts en tu propio servidor, puedes controlar cómo se carga y se muestra la fuente, minimizando las posibilidades de cambios de diseño causados por un renderizado retrasado de la fuente. Esto ayuda a mejorar la estabilidad visual general de tu página web y afecta positivamente al CLS.

Mejores prácticas para alojar Google Fonts en tu propio servidor

Para optimizar tus Google Fonts autoalojadas y obtener un mejor rendimiento en los Core Web Vitals, considera implementar las siguientes mejores prácticas:

1. Usa el formato WOFF2: Usa únicamente el formato de archivo WOFF2, ya que ofrece mejor compresión y tiempos de carga más rápidos, contribuyendo a mejorar los valores de LCP y CLS.

2. Subconjuntos de fuentes: Para reducir aún más el tamaño de los archivos de fuente, considera usar subconjuntos de fuentes, que consiste en incluir solo los caracteres necesarios para el contenido de tu página web. Esto puede llevar a una carga de fuentes más rápida y a mejores Core Web Vitals.

3. Atributo font-display estratégico: Configura el atributo font-display estratégicamente para controlar el renderizado del texto durante la carga de fuentes. El valor "swap", por ejemplo, acelerará el First Contentful Paint asegurando que las fuentes de respaldo se muestren hasta que la fuente web esté completamente cargada. El valor "optional" evitará cambios de diseño al no intercambiar nunca el archivo de fuente. Una combinación estratégica de estos dos a menudo optimizará tanto el Cumulative Layout Shift como el First Contentful Paint.

4. Precarga de fuentes: Asegúrate de que las fuentes estén disponibles lo antes posible precargando las fuentes más importantes con el mecanismo de link preload
   
   

   <link rel="preload" as="font" href="fonts.woff2" crossorigin>

Cómo alojar una Google Font en tu servidor (de la forma correcta)

Descargar y alojar una Google Font en tu servidor es un proceso sencillo. Ten en cuenta que siempre debes revisar la licencia y los derechos de uso de la fuente antes de descargarla y usarla en tu sitio web o proyectos. Muchas Google Fonts están disponibles bajo licencias de código abierto, pero algunas pueden tener restricciones para uso comercial.

Aquí tienes un ejemplo de cómo descargar y alojar una Google Font en tu servidor:

1. Ve al sitio web de Google Fonts en https://fonts.google.com/.

2. Selecciona la fuente que quieres usar y elige los tamaños de fuente que deseas incluir. 

3. En la página de la fuente, en la barra superior haz clic en el botón 'familias seleccionadas'. Allí encontrarás el enlace a la hoja de estilos alojada en Google. 
   
   

   

4. Copia la url de esta hoja de estilos y ábrela en tu navegador. Ahora verás todas las declaraciones font-face disponibles para la fuente. 
   
   

   

5. Puede que notes que hay más de 1 archivo woff2 aunque solo usamos un archivo de fuente. Esto se debe a que hay un archivo de fuente diferente para diferentes rangos unicode. Para saber qué fuentes debemos descargar, debes añadir temporalmente la hoja de estilos alojada en Google a tu sitio web. Usa el atajo Ctrl-Shift-I para abrir las herramientas de desarrollo de Chrome. Navega a la pestaña de red y haz clic en Fuente. Ahora actualiza la página (Ctrl-r) para ver qué fuente se activa para descarga.
   
   

6. Haz coincidir este nombre de archivo de fuente con el archivo woff2 correspondiente en la hoja de estilos. ¡Perfecto! ¡Ahora sabes qué archivo de fuente se usa para tu sitio web!
   

7. El siguiente paso es copiar la URL completa de la fuente y abrirla en tu navegador. Esto activará la descarga de este archivo de fuente. Copia este archivo a tu sitio web.
   

8. Copia el CSS de la fuente web usada en el paso 7 y pégalo en tu hoja de estilos. No olvides cambiar la url del CDN de Google a tu propio servidor (por ejemplo '/fonts/roboto400.woff2')

9. Precarga la fuente (si es una fuente visualmente importante)

Ahora has descargado y alojado con éxito la Google Font de tu elección en tu propio servidor. Recuerda cumplir con los términos de licencia de la fuente y atribuir la fuente según lo requiera la licencia si es necesario.

Un ejemplo de la vida real

<!DOCTYPE html>
<html>
<head>
  <title>Self-Hosted Google Fonts</title>
  <!-- preload the font -->
  <link rel="preload" as="font" href="/path/to/google-sans.woff2" crossorigin>
  <style>
    /* Self-hosted Google Sans font with WOFF2 format */
    @font-face {
      font-family: 'Google Sans';
      font-style: normal;
      font-weight: 400;
      src: url('/path/to/google-sans.woff2') format('woff2');
      font-display: optional;
    }

    /* Fallback to system-ui font */
    body {
      font-family: 'Google sans', system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a page using the Google-sans with system-ui fallback font.</p>
</body>
</html>