¿Por qué no se recomienda hacer que se convierta en las fuentes de Google?

Google Fonts es uno de los recursos de terceros más utilizados en muchos sitios web. Facilitan una mejor unificación y presentación del contenido de los sitios web. Con más de 999 familias de fuentes gratuitas y únicas para elegir, los usuarios han visto colectivamente a Google más de 40 billones de veces (julio de 2020). Las fuentes alojadas externamente, como Google Fonts, también son una de las tercera parte más difícil de cargar. No solo se suma al peso de la página, sino que los sitios web deben hacer solicitudes HTTP adicionales para tomarlas. El éxito de rendimiento es aún más prominente al cargar múltiples familias de fuentes con múltiples pesos de fuentes.
Por lo tanto, parece una gran idea alojar las fuentes locales de Google y servirlas desde su servidor, en lugar de cargarlas de Google CDN. Teóricamente podría hacer que sus sitios se carguen más rápido. Pero resulta que las fuentes son particularmente complejas, y su alojamiento automático puede hacer el rendimiento de su sitio. En este artículo, descubrirá los elementos básicos de las fuentes web, incluidas las fuentes de Google y cómo puede alojarlos localmente. Luego descubrirá si influye en el rendimiento de un sitio web. ¿Entusiasmado? Vamos a empezar. ¿Qué son las fuentes web? Las fuentes web se refieren a las fuentes que puede usar para mostrar sitios web con texto. Soy una colección de Glife, en la que cada glif es un vector que muestra una letra, un número o un símbolo.
En los primeros días de la web, los desarrolladores tenían fuentes web limitadas para elegir. Los principales sistemas operativos llegaron con estas fuentes (por ejemplo, Arial, Georgia, Times New Roman). Por lo tanto, también se conocen como fuentes web seguras. Su especificación obliga al navegador a descargarlos junto con otros recursos del sitio web. Esta función ha abierto nuevas formas interesantes de diseñar sitios web. La web ya no era una colección de textos aburridos.

Algunas de las fuentes web más populares utilizadas hoy en día son Open Sans, Roboto y Lato. Estas también son Google Fonts. Puede obtener más información sobre las fuentes web en la Guía de optimización de fuentes web de WP Rocket.
Hay una fuente de Google para casi cualquier uso (fuente: Google) ¿Qué son Google Fonts? Google Fonts es un catálogo masivo de fuentes libres, código abierto. Facilitan a los creadores y desarrolladores de sitios web hermosos, con excelente tipografía. Google Fonts actualmente incluye fuentes web para más de 135 idiomas.

Las fuentes de Google son utilizadas por más de 10 millones de sitios web (fuente: similares) Google Fonts no solo tratan los requisitos de licencia para todas las fuentes web, sino que también se ocupan de su alojamiento y entrega. Incluso puede considerarlo un CDN para fuentes. Por lo tanto, todos pueden aprovechar ellos cuando lo deseen, agregando una sola línea a los encabezados de su sitio.

Google Fonts y el rendimiento del sitio de Google Fonts afirman hacer que las páginas web se carguen más rápido al memorizar las fuentes en varios sitios, de modo que cada fuente solo cobre por todos los sitios web. El navegador puede usar la misma fuente almacenada en caché para cualquier otro sitio web que requiera la misma fuente de Google. También detecta el navegador de un usuario y envía el archivo de fuente más pequeño en función de las últimas tecnologías que acepta su navegador. Por ejemplo, sirve a las fuentes de los usuarios con formato Woff 2.0 cuando sea apropiado, porque tiene una compresión más alta en comparación con otros formatos de fuente web. Con todo esto, cuando se usa Google Fonts en su sitio web, la hoja del estilo principal del sitio web envía Una solicitud HTTP para hacerse cargo de la hoja de estilo de Google Fonts (un archivo CSS). El cliente envía esta solicitud al dominio Fonts.googleapis.com. Por lo general, se genera una solicitud para cada fuente que use. La hoja de estilo de Google Fonts hace otra solicitud para descargar el archivo de fuentes (por ejemplo, un archivo Woff o Woff 2.0). La hoja de estilo dirige estas solicitudes al campo de las fuentes.gstac.com, donde se alojan todas las fuentes de Google.
Hacer solicitudes HTTP adicionales en sus sitios web requiere tiempo. Puede confirmar esto verificando el diagrama de cascada generado por la herramienta WebPageTest.
El uso de Google Font agrega al menos dos solicitudes HTTP adicionales para Google Fonts establece un tiempo de vencimiento bajo de 1 día para la memoria caché de Font. No puede cambiar esto porque Google genera el archivo CSS automático en función de varios factores. Algunas herramientas de prueba de velocidad del sitio enfatizan esto como un problema de rendimiento y sugieren fuentes locales. De esta manera, puede aumentar manualmente el tiempo de vencimiento de las fuentes y almacenarlas en caché durante un período de tiempo más largo. La sección a continuación cubre cómo puede hacer esto exactamente en su sitio web de WordPress. Cómo servir las fuentes de Google en su forma más sencilla de molestar a las fuentes de Google en su sitio web de WordPress es con WordPress de complemento OMGF gratuito. Use la API de Google Fonts Helper para descargar fuentes a su servidor web. Después de eso, OMGF genera una hoja de estilo para las fuentes descargadas y la agrega al encabezado de su sitio.
El complemento de WordPress OMGF es fácil de buscar en cualquier familia de fuentes de Google que desee con OMFG. También puede hacer clic en el botón de detección automático para permitirle analizar qué fuentes de Google están en su sitio web.

Junta administrativa de OMGF Después de establecerse con una cierta familia de fuentes, puede especificar qué subconjuntos y estilos de fuente desea descargar. Esto puede ayudarlo a reducir significativamente el tamaño de las fuentes de transmisión.
El servicio local de Google Font debería disminuir los tiempos de carga de la página, minimizando las demandas de DNS y capitalizando el caché del navegador. ¿Pero es esta suposición verdadera? La prueba de rendimiento del sitio web con Google Autoguette Fonts WP Rocket Development Team ha creado un sitio web inactivo que ha utilizado Google Fonts. El primer sitio de prueba usó solo una familia de fuentes. Luego realizaron algunas pruebas de rendimiento con él, tanto con el complemento WP Rocket como con la discapacidad. Luego cambiaron el sitio web para servir a Google Fonts y lo probaron nuevamente. Como antes, realizaron las pruebas por separado, con el complemento de cohete WP activado y desactivado. Nota: GTMetrix se ha utilizado para realizar esta prueba de rendimiento del sitio web. El sitio web utilizó la versión de compilación de WP Rocket 3.6-Alpha3 con Google Fonts optimizar y optimizar la configuración de entrega de CSS. El complemento de WordPress OMGF se ha utilizado para autoectacarse de Google Fonts.

Los resultados para la transmisión de Google CDN versus la fuente de los resultados locales de Google Fonts de la prueba de velocidad sugieren que el alojamiento local de Google no ofrece beneficios de rendimiento específicos. Se ve casi idéntico.

Para confirmar esta teoría, agregaron muchas otras fuentes al sitio web antes de probarla nuevamente. Los resultados a continuación proporcionan una imagen más clara.

Repita la prueba de velocidad anterior con muchas otras fuentes agregadas con WP Rocket activadas, se ha demostrado que las transmisiones de fuentes directamente desde Google CDN son la opción más rápida. De lo contrario, no hay beneficios de rendimiento específicos que se ven aquí como antes. A continuación hay algunas pantallas de los informes de prueba de velocidad realizados anteriormente. Observe el tiempo de carga de fuente entre diferentes pruebas. Google CDN con WP Rocket WP Rocket En la prueba aquí, el archivo Font Modules.tff sirve como grupo de control. Está alojado en el mismo servidor que el sitio de prueba en ambos casos.
Google Fonts localmente alojados con los resultados activados por el cohete WP muestran que las fuentes de Google son significativamente más rápidas de Google CDN. Incluso la fuente de módulos. TFF se alojan localmente se carga más rápido en el primer caso en comparación con el segundo. La adición de muchas fuentes de Google solo exacerba el rendimiento aún más.

Fuentes de Google ofrecidas por Google CDN
Las fuentes alojadas locales incluso con las solicitudes HTTP adicionales agregadas por Google Fonts, cobran mucho más rápido de Google CDN que cuando se alojan localmente. Entonces, ¿qué puede explicar esta anomalía? La siguiente sección proporciona una breve explicación.

Por qué Google Fonts es mejor

Google es inteligente sobre cómo ofrecen fuentes a cada usuario. No proporciona el mismo CSS a todos, pero decide qué hoja de estilo transmitir según el dispositivo del usuario, el navegador y otros factores. Por ejemplo, servirá fuentes con funciones ricas en recursos, como Woff, Kerning y Sugerencias, solo aquellos agentes de usuarios que las aceptan. En todos los demás casos, utilizará el estándar de compresión superior de Woff 2.0. Esto puede ayudar a reducir el tamaño de las fuentes entregadas, haciendo que se carguen mucho más rápido. La API de Google Font escribe las fuentes en la página, en función de varios factores, incluso si el encabezado de la página incluye. Si una página web no usa las fuentes especificadas, Google Fonts no lo cargará. Si aloja fuentes locales, será difícil activar esta funcionalidad.

Aunque reducir el número de solicitudes HTTP es una excelente manera de acelerar el rendimiento de su sitio web en la mayoría de los casos, los resultados de las pruebas sugieren que este no es el caso de Google Fonts. El tiempo de carga real de su sitio web sufrirá si aloja a Google Local.

Google utiliza las mejores tecnologías de rendimiento web para proporcionar fuentes. Incluso si sabe poco sobre las fuentes web y cómo usarlas, Google Fonts facilita su implementación en su sitio web, sin pérdidas significativas de rendimiento.

Cuando ocurre una nueva tecnología de fuente web (por ejemplo, fuentes variables, enriquecimiento de fuente progresiva, mejor compresión), Google Fonts API traerá inmediatamente a millones de sitios web. No tienes que hacer mucho para activarlo.