javascript - superior - ¿Cómo utilizo las fuentes de Google en mi sitio sin comprometer la velocidad de la página del sitio?

google fonts

Question

Utilizo las fuentes de Google y la tipografía de mi sitio. Se ve muy bien, pero agrega una gran sobrecarga. ¿Hay alguna manera en la que pueda obtener la misma apariencia de mi sitio web sin comprometer la velocidad del sitio?

Estoy analizando mi sitio aquí https://developers.google.com/speed/pagespeed y cuando uso las fuentes de Google, obtengo una puntuación muy baja en torno a 60, pero si elimino estas fuentes, tengo una buena puntuación. ¿Hay alguna manera de utilizar estas fuentes sin comprometer la calidad de la página web? Mi prioridad es la optimización de la página.

Answer 1

Respuesta corta: no. Respuesta un poco más larga: no, puedes intentarlo, pero es muy poco probable que superes lo que Google WebFonts te ofrece. Ahora vamos a analizar el problema un poco más ...

En primer lugar, debe tener una página bastante liviana si agregar un único recurso externo (webfont) tiene un impacto tan negativo en su puntuación de PageSpeed. Podría decirse que deberíamos solucionarlo en el lado de PageSpeed. Ahora, de vuelta a webfonts!

Punto cero: agregar cualquier recurso externo a su página tendrá un impacto negativo en el rendimiento general de su página. Con webfonts, esto puede ser un problema aún mayor porque CSS se considera un "recurso crítico" que retrasará el procesamiento hasta que llegue la fuente. Si tuviéramos que omitir este paso, el usuario podría obtener un "flash de contenido sin estilo" ( FOUC), donde la página se representa con una fuente, y luego se vuelve a diseñar cuando llega la fuente. Esta es una experiencia discordante, definitivamente no quieres esto.

Paso dos: usar una fuente web significa que debemos incluir un archivo CSS externo, en este caso, servido por los servidores de Google. Estos servidores están muy optimizados para una baja latencia, pero al mismo tiempo, no hay magia aquí, ¡todavía llevará algo de tiempo!

Paso 3: ¿Qué hay dentro del archivo CSS? Aquí es donde mucha gente critica a Google WebFonts. La hoja de estilo proporciona referencias url() a los archivos webfont. ¿Por qué no base64 / inline la fuente? Bueno, Google WebFonts se procesa en miles de millones de páginas todos los días, por lo que optamos por usar las URL específicamente porque la fuente es muy probable que esté en el caché de su navegador . Si está actualizando su página con un caché frío (como debería) para probar la carga de la primera página, entonces siempre obtendrá la fuente ... pero esa no es la experiencia que estamos optimizando.

Además, ¿por qué no simplemente alinear la fuente en tu página? Bueno, cada plataforma tiene diferentes formatos de archivo que acepta (woff, eot, ttf, etc.) y Google WebFonts ofrece de forma dinámica el formato más optimizado basado en su plataforma actual. Si simplemente descarga WebFont (ex, woff) y lo inserta, puede funcionar bien para usted, pero no para sus visitantes en diferentes plataformas. Además, la compresión detrás de estas fuentes siempre se mejora: si se queda con los servidores de Google, heredará estas mejoras automáticamente. Si haces el tuyo, estás atascado.

En pocas palabras: si desea rodar la suya, entonces asegúrese de optimizar las fuentes para cada plataforma, sirva fuentes condicionales basadas en la plataforma y continúe con las mejoras de compresión a lo largo del tiempo. Si puede hacer todo eso, entonces puede hacerlo mejor de lo que se proporciona. :-)

Por último, si bien no menos importante. No tengas miedo de usar webfonts . Sí, añaden tiempo adicional, pero la presentación también importa. Es tu llamada. Si la latencia impuesta no es aceptable, entonces quédese con las fuentes predeterminadas. Pero es poco probable que tratar de superar lo que la infraestructura de Google WebFonts / CDN le lleve muy lejos.

Un último consejo de PS: asegúrate de utilizar realmente todos los pesos y tipos de letra que incluyas. Muchas personas seleccionan familias enteras (por si acaso) y terminan por no usarlas, lo que en algunos navegadores conduce a descargas innecesarias.

Answer 2

Sí tu puedes.

1. descarga tus archivos de fuentes web de google
2. subirlos a la fuente de ardilla generador de web
3. seleccione Configuración de expertos y marque: Base64 CSS.
4. al cargar la fuente a través de base64, no está esperando a que finalice una llamada http externa.
5. Esto eliminará el Flash de contenido sin estilo (FOUC)

Referencia: https://robert.accettura.com/blog/2009/07/03/optimizing-font-face-for-performance/ y puede buscar en línea muchos otros artículos. También lo he probado en mi sitio web, y funciona.