Las fuentes también son un recurso estético en una página web. Sin embargo, ¿recurrir a Google Fonts provoca una bajo rendimiento en un sitio web?.
Primero empecemos con conocer que son las Google Fonts.
Google Fonts es un catálogo masivo de fuentes de código abierto gratuitas. Facilitan a los diseñadores y desarrolladores web la creación de hermosos sitios web con una gran tipografía. A partir de ahora, Google Fonts incluye fuentes web para más de 135 idiomas.
Google Fonts no solo se ocupa de los requisitos de licencia para todas las fuentes web que aloja, sino que también gestiona su alojamiento y entrega.
Incluso puede considerarse como un CDN para fuentes. Por lo tanto, todos pueden aprovecharlos en cualquier momento que quieran agregando una sola línea en los encabezados de página de tu sitio web.
Cómo puede afectar el rendimiento de un sitio web
Google Fonts pretende hacer que las páginas web se carguen más rápido al almacenar en caché las fuentes en varios sitios para que cada fuente se cargue solo una vez para todos los sitios web.
El navegador puede utilizar la misma fuente almacenada en caché para cualquier otro sitio web que solicite la misma fuente de Google.
También detecta el navegador de un usuario y le envía el archivo de fuente más pequeño basado en las últimas tecnologías que admite su navegador.
Por ejemplo, sirve a los usuarios fuentes con formato WOFF 2.0 siempre que sea aplicable, ya que tiene una compresión superior en comparación con otros formatos de fuentes web.

Sin embargo, cuando utilizas Google Fonts en tu sitio web, la hoja de estilo principal del sitio web envía una solicitud HTTP para obtener la hoja de estilo de Google Fonts (un archivo CSS). El cliente envía esta solicitud al dominio fonts.googleapis.com. Normalmente, se genera una solicitud para cada fuente que se utiliza.
La hoja de estilo de Google Fonts realiza otra solicitud para descargar el archivo de fuente (por ejemplo, un archivo WOFF o WOFF 2.0). La hoja de estilo dirige estas solicitudes al dominio fonts.gstatic.com donde se alojan todas las fuentes de Google.
Realizar solicitudes HTTP adicionales en tus sitios web lleva tiempo.
La API de Google Fonts establece un tiempo de caducidad bajo de 1 día para almacenar fuentes en caché. No se puede modificar esto ya que Google genera el archivo CSS automáticamente basándose en múltiples factores.
Algunas herramientas de prueba de velocidad de sitios web señalan esto como un problema de rendimiento y sugieren alojar fuentes localmente. De esta manera, se puede aumentar el tiempo de caducidad de las fuentes manualmente y almacenarlas en caché durante más tiempo.
Cómo almacenar las fuentes en tu servidor
La forma más sencilla de autohospedar Google Fonts localmente en tu sitio de WordPress es con el complemento gratuito OMGF WordPress.
Utiliza la API de ayuda de Google Fonts para descargar fuentes a tu servidor web. Después de eso, OMGF genera una hoja de estilo para las fuentes descargadas y la agrega al encabezado de tu sitio.
Es fácil buscar cualquier familia de fuentes de Google que desee con OMFG. También se puede hacer clic en el botón Detectar automáticamente para permitir analizar qué fuentes de Google se están utilizando en el sitio web.
Una vez que hayas decidido por una familia de fuentes en particular, puede especificar qué subconjuntos y estilos de fuentes deseas descargar. Esto puede ayudarte a reducir significativamente el tamaño de las fuentes que se publican.
La prestación de servicios de Google Fonts de forma local debería reducir los tiempos de carga de páginas al minimizar las solicitudes de DNS y aprovechar la caché del navegador. ¿Pero esta suposición es realmente cierta?
Lo que señalan las pruebas de rendimiento
El equipo de desarrollo de WP Rocket creó un sitio web ficticio que utiliza Google Fonts. El primer sitio de prueba utilizó solo una familia de fuentes. Luego ejecutaron algunas pruebas de rendimiento con él, tanto con el complemento WP Rocket habilitado como deshabilitado.
Luego modificaron el sitio web para almacenar Google Fonts localmente y lo probaron nuevamente.
Como antes, realizaron las pruebas por separado con el complemento WP Rocket habilitado y deshabilitado.
Nota: se utilizó GTMetrix para realizar esta prueba de rendimiento del sitio web. El sitio web utilizó la versión de compilación WP Rocket 3.6-alpha3 con la configuración de Optimizar fuentes de Google y Optimizar la entrega de CSS habilitadas. El complemento OMGF de WordPress se utilizó para autohospedar las fuentes de Google.
Los resultados de la prueba de velocidad sugieren que alojar Google Fonts localmente no ofrece ningún beneficio de rendimiento específico. Parecen casi idénticos.
Para confirmar esta teoría, agregaron muchas más fuentes al sitio web antes de probarlo nuevamente. Los resultados a continuación pintan una imagen más clara.
Veamos en los gráficos los resultados
Primera prueba

Segunda prueba

Saquen sus propias conclusiones sobre cómo optimizar estos recursos ahora en tu sitio web.