Al usar fuentes en Bootstrap, ¿es más rápido usar la API de fuentes de Google o simplemente instalar el archivo de fuente en el servidor?

Normalmente diseñador de UX, actualmente también soy gerente de producto para una variedad de herramientas web, pero mis habilidades de desarrollo no son muy buenas en absoluto, así que perdónenme si esta es una pregunta tonta. Estamos creando una variedad de páginas de Bootstrap para un conjunto de herramientas corporativas y, en este momento, usamos la API de Google Fonts para nuestras fuentes. Estoy un poco preocupado por el tiempo de carga y creemos que puede ser Google Fonts recopilando datos. Antes de desmontar nuestros diseños actuales e instalar los archivos de fuentes en el servidor, me preguntaba si alguien más notó algún tiempo de carga al usar Google Fonts y si cargar las fuentes en sí era una solución, o si eso solo empeoraría las cosas.

Hola caztec, bienvenido a GDSE y gracias por tu respuesta. Si tiene alguna pregunta, consulte el centro de ayuda o comuníquese con uno de nosotros en el chat una vez que su reputación sea suficiente (20). ¡Sigue contribuyendo y disfruta del sitio!
Esta es más una pregunta para Stack Overflow que para GD.SE, creo.
Sí, esta es una pregunta SO. No es una pregunta de GD.
También asegúrese de tomar solo los pesos de fuente que necesita (frente a toda la familia de fuentes)
¿Estás en una intranet? Entonces supongo que será mejor que no saques nada de ningún lado .

Respuestas (4)

Respuesta corta : Google es mucho más rápido que usted mismo.

Respuesta larga : ponerlo en su propio servidor puede parecer una buena idea para mejorar los tiempos de carga. Después de todo, los archivos están más cerca de su página web. Pero no. Después de todo, cuando un usuario va a su sitio web, inicialmente solo obtiene algo de HTML. Aquí tenemos referencias a otros archivos: Imágenes, JS, CSS y, en su caso, Fuentes.

Para cada uno de estos recursos externos, el cliente realizará una nueva llamada al servidor web donde se proporciona la ubicación del archivo. Entonces, ya sea que aloje los archivos usted mismo o haga referencia a Google, la llamada a ese recurso se realizará al mismo tiempo.

Sin embargo, a menos que sea una empresa excepcional, el servidor de Google responderá mucho más rápido. También usará el ancho de banda de Google, en lugar del tuyo, ahorrándote (quizás, un poco) de dinero en eso.

Tenemos que salir de la red corporativa para buscar archivos, creo que esa era mi preocupación: hay un par de barreras que tenemos que atravesar para llegar a Google y regresar. Sin embargo, probablemente estés en lo cierto, ¡gracias!
@caztec esto es una intranet? Si es así, entonces este es un problema bastante discutible ya que, con suerte, la red interna ya es bastante rápida.
Y si se trata de una intranet, lo que significa que es probable que tenga una cantidad relativamente pequeña y bastante controlable de máquinas que visitarán las páginas, tener la fuente instalada en las máquinas para que no tenga que buscarlas desde ningún lado será, por supuesto, lo más rápido. de todo.
@ DA01 es sí, es súper rápido. Estamos teniendo este extraño retraso en todas las páginas que usamos con Google Fonts, realmente extraño
@caztec eso suena como un problema de firewall de algún tipo. Las respuestas aquí son bastante amplias y no pueden abordar problemas específicos con su red interna. Así que tenlo en mente. En su caso particular, probablemente tenga sentido alojar los archivos usted mismo para mantener todo en su propia red.

La carga de archivos desde servidores de terceros (google) puede ralentizar el tiempo de carga, ya que el navegador tiene que realizar una solicitud a una máquina diferente. Básicamente, cargar todo desde un dominio debería ser más rápido que cargar archivos desde diferentes servidores web.

Sin embargo, lo más probable es que la fuente de Google ya esté en el archivo de caché del visitante . Esto nuevamente aceleraría las cosas ya que el navegador no tendría que cargarlo nuevamente.

Lo mismo se aplica a otros activos como bibliotecas jquery, etc., como se describe aquí: "Por qué no debería usar archivos javascript externos" (http://www.elxis.org/de/blog/external-js-files.html )

Esto no es realmente cierto. Ya sea que una solicitud vaya a un servidor o a muchos, es irrelevante. Lo que es un problema mayor son las conexiones simultáneas... la mayoría de los servidores limitarán la cantidad de solicitudes simultáneas, lo que significa que acceder a servidores de terceros suele ser una solución más rápida .
@ DA01 Correcto. Especialmente porque las CDN (redes de entrega de contenido, como las bibliotecas alojadas de Google) están optimizadas para la respuesta más rápida posible. Pero sí, a qué servidor se dirige su solicitud es irrelevante.
En cuanto al artículo vinculado: 1) Target domain not availableNo hay problema con los CDN que tienen cantidades masivas de servidores de respaldo. Por supuesto, no debe cargar su js desde grannysknittingwear.com. 2) Speed reducesimplemente no es cierto a partir de ahora. La hora a la que comienza la solicitud es siempre la misma, y ​​un servidor CDN responde más rápido que el suyo. 3) y 4) no son, nuevamente, un problema con los CDN reales. No eliminarán las versiones que usa durante mucho tiempo y puede apostar mucho a que sus propios archivos alojados se comprometen y cambian mucho antes que los de ellos.
¿Alguien puede apoyar sus sugerencias al menos con enlaces o citas o algo por el estilo? Quiero decir, ¿ no los enlaces de Google? Aquí hay dos enlaces para personas que explican por qué el alojamiento de fuentes web de terceros es ( puede ser ) técnicamente más lento: feedthebot.com/pagespeed/web-font-options.html y bdadam.com/blog/loading-webfonts-with-high-performance. html Pero como dije anteriormente: si se trata de fuentes (populares) de Google, lo más probable es que la fuente ya esté en la memoria caché del navegador del usuario, y eso puede hacer que se cargue aún más rápido. Salud.
@ DA01 En algún momento veo su punto: el límite de 'solicitudes simultáneas' puede convertirse en un problema. Pero apuntar a 'solicitudes concurrentes' en el contexto de fuentes web (u otras 'solicitudes simples') simplemente no se ajusta al problema. Siéntase libre de leer aquí: stackoverflow.com/questions/5017392/… o aquí: serverfault.com/questions/75054/…
@tillinberlin No puedo encontrar una explicación en ninguno de sus artículos vinculados de por qué el alojamiento propio es más rápido que el alojamiento de CDN. El primer artículo menciona que no tiene que depender de que el servidor de terceros esté activo, pero ese es el objetivo de una CDN... siempre están activos.
En cuanto a que las solicitudes concurrentes sean un problema, eso depende completamente de lo que esté solicitando, en qué orden y desde qué servidor. Definitivamente puede ser un problema. Sin embargo , definitivamente no es un problema si solicita la fuente de un servidor diferente.
@tillinberlin estamos usando Roboto, que la mayoría de los usuarios de Android tendrán instalado en sus dispositivos, pero la mayoría de los usuarios de escritorio no lo tendrán instalado

Cuando solicita una página web, solicita más que la página web. Está solicitando el archivo HTML, todas las imágenes, todos los archivos CSS, todos los archivos JS, todos los archivos de fuentes, etc.

Su servidor rara vez le permitirá solicitar todos esos artículos a la vez. En su lugar, limitará el número de solicitudes simultáneas y le pedirá que ponga en cola el resto. Esto no es un gran problema, pero cuantas más solicitudes, más probable es que algo se ponga en cola. Además, muchos servidores bloquearán todas las solicitudes mientras se descarga un archivo JS.

Por eso es mejor solicitar un archivo CSS de 100k en lugar de 10 archivos CSS de 10k. Los datos son todos iguales, pero pierde eficiencia al tener que hacer todas esas solicitudes por separado.

Entonces, al menos para CSS, una recomendación es simplemente combinar todo su CSS en un archivo CSS.

Sin embargo, no puedes hacer eso con las fuentes.

La recomendación es cargarlos desde servidores de terceros. Hay algunas razones para esto:

  • si el servidor de terceros es popular y el archivo solicitado es popular, es probable que ya esté almacenado en caché en el navegador del usuario final
  • si es un tercero grande (también conocido como Google), es probable que tenga una gran infraestructura con mucho ancho de banda
  • si es una CDN (red de entrega de contenido... que creo que es Google Fonts), entonces tiene la ventaja adicional de que los datos están alojados en varios servidores en todo el mundo y la solicitud se enruta a la ubicación más cercana a la persona que la solicita.

Por lo tanto, en general, siempre cargue activos comunes de grandes terceros siempre que sea práctico.

Deberías ponerlos en tu servidor :-)

Razón:

1) Será más rápido, incluso si lo tienen almacenado en caché desde un sitio anterior que usa Google, creará el caché la primera vez de todos modos, por lo que solo afectaría la primera experiencia.

2) digamos que el servidor de Google se cae y no las ha puesto en su servidor... entonces esas fuentes desaparecen y se reemplazan por lo que sea que sea el valor predeterminado de sus navegadores.

Definitivamente debería cargarlo en el servidor, llamar a la API de Google es más rápido de configurar y otras cosas, pero siempre existe la posibilidad de que se caiga sin que usted lo sepa.

"Será más rápido" no es necesariamente cierto. Y aunque el tiempo de inactividad del servidor siempre es una preocupación, me atrevo a suponer que Google se encuentra en la fracción superior de un percentil en términos de tiempo de actividad.
Al usar fuentes en Bootstrap, ¿es más rápido usar la API de fuentes de Google o simplemente instalar el archivo de fuente en el servidor?
RespuestasAquíPolítica de privacidad1y, 0v