Rendimiento web vs PageSpeed vs GoogleFont

andrescrea · #1 (**permalink**) 14/04/2015, 07:39

Al pasar el PageSpeed
me indica

Cita:

Elementos que debes corregir:
Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página
Tu página tiene 1 recursos CSS que provocan un bloqueo. Ello causa un retraso en el procesamiento de la página.
No se ha podido visualizar el contenido de la mitad superior de la página sin tener que esperar a que se cargara alguno de los recursos. Intenta aplazar o cargar de forma asíncrona los recursos que bloquean la visualización, o bien inserta porciones críticas de dichos recursos directamente en el HTML.
Optimizar la entrega de CSS de estas URL:
http://fonts.googleapis.com/css?fami...ns:300,600,700

Me parece llamativo que el propio Google considere su propio servicio de fonts como un indicador que ralentiza la web, si quito está llamada externa me indica que está correcto

Una solución sería instalar la fuente en el servidor, con un @font-face
y otra pasar de PageSpeed

Alguna otra idea ?

NueveReinas · #2 (**permalink**) 14/04/2015, 09:12

No se si "instalar" es el término correcto, pero sí, podrías descargar esa tipografía y crear un Webkit con la herramienta de Squirrel Font. Por lo visto esa tipografía solo contiene woff2.

Carlangueitor · #3 (**permalink**) 14/04/2015, 09:15

¿Y probaste con defer o async?

superweb360 · #4 (**permalink**) 14/04/2015, 09:40

pues si pones un anuncio de adsense en tu web, también te baja el porcentaje en PageSpeed insights

andrescrea · #5 (**permalink**) 14/04/2015, 10:30

async se lo coloque a varios js
pero a ser una llamada de css
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,600,700" rel="stylesheet" />

y sobre Webkit... no se.. mete mucho código

voy a probar una info que encontre:
http://www.feedthebot.com/pagespeed/...t-options.html

mbm150 · #6 (**permalink**) 14/04/2015, 10:41

Hola,

Creo que lo que le molesta es que esta en el head, si lo pones al final de la página (justo antes de </body>) no da problemas y se ve igual (bueno, igual no, la tipografía "cambia" al cargarse, antes usa la por defecto).

Saludos.

andrescrea · #7 (**permalink**) 14/04/2015, 10:50

Cita:

Iniciado por mbm150

Hola,

Creo que lo que le molesta es que esta en el head, si lo pones al final de la página (justo antes de </body>) no da problemas y se ve igual (bueno, igual no, la tipografía "cambia" al cargarse, antes usa la por defecto).

Saludos.

Sí, pasa el test
pero como dices hace un efecto horrible para el usuario de cambio de pantallazo

andrescrea · #8 (**permalink**) 14/04/2015, 10:52

google da una solución pero tienes que usar su API
https://developers.google.com/speed/...e-google-fonts

NueveReinas · #9 (**permalink**) 14/04/2015, 11:21

Cita:

Iniciado por andrescrea

google da una solución pero tienes que usar su API
https://developers.google.com/speed/...e-google-fonts

Qué ganas de estar en todos lados que tiene Google...

franciscomarin · #10 (**permalink**) 14/04/2015, 12:23

¿Es necesario que tengas los tres estilos 300,600,700 de la tipografía?

Creo que más bien el error va por ahí. Si solo usas el 300 (por ejemplo), ¿para que cargar los otros dos?

A más estilos más pesado y más tiempo de carga.

andrescrea · #11 (**permalink**) 14/04/2015, 14:41

Es lo mismo, es el recurso en sí lo que considera que ralentiza
supongo que es por que hace una llamada fuera del servidor, sea el recurso que sea
debe ser una chorrada de google

La solución más fácil que veo es usar el Squirrel Font que dijó NueveReinas
subir al servidor la fuente y el kit
y llamarlo con un @font-face

Tengo que hacerlo aún pero es lo que parece más lógico

NueveReinas · #12 (**permalink**) 14/04/2015, 17:34

Claramente ahorras requests. Y más si el contenido es de Google, que tiene algoritmos y cosas que ralentizan la carga de las páginas...

Suerte.