Google PageSpeed Insights

Publicado por JC

Google PageSpeed Insights es la herramienta que nos proporciona Google para medir el rendimiento de nuestra Web.

A pesar de ser la herramienta de referencia te recomiendo que NO te obsesiones con ella. En la mayoría de los casos solo puedes conseguir 100/100 a costa de una disminución de la velocidad de carga de tu página Web o de una peor experiencia de usuario. Tendrás contento a Google pero quizás con un resultado de 70/100 tu página irá mejor.

A continuación voy a analizar esta herramienta y luego voy a recomendarte otras más fiables que deberías usar para medir el rendimiento de tu Web.

Nota: Desde la publicación de esta entrada la herramienta ha cambiado bastante, tanto la interfaz como las prácticas recomendadas (que ahora son mejoras y oportunidades, y son diferentes). 

Google pagespeed insights

Google PageSpeed Insights

Google PageSpeed Insights te dice si tu página Web aplica la mayoría de prácticas recomendadas de rendimiento. Vamos a estudiar una por una cada una de ellas.

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página / Priorizar el contenido visible

Google te recomienda que solo se carguen los recursos necesarios para mostrar la parte visible de la página antes de hacer scroll (above the fold).

Esto en cuanto a JavaScript es fácil (de hecho no debería cargarse JavaScript al principio). Si el problema está en el JavaScript hay que solucionarlo porque probablemente sí hay bloqueo.

Si Google en cambio te indica que el problema está en el CSS es diferente. Puede que la solución que te propone te cause problemas de visualización o de rendimiento.

Para «solucionar» esta advertencia habría que mirar qué estilos se aplican en la parte visible y cargar solo esos. El resto se carga más adelante. Si ya es una tarea un poco tediosa en páginas sencillas, no quiero hablar de páginas en las que se usan muchas hojas de estilo (del tema, personalizadas, de frameworks CSS como Bootstrap o Foundation, de fuentes como FontAwesome, de plugins usados, etc.).

¿Qué problemas puede darte hacerle caso a Google?

Puede haber elementos en la página a los que no se le apliquen los estilos inmediatamente:

Eso es así porque si no se refactoriza bien el código, algunos estilos tardarán unas milésimas de segundo en aplicarse. En ese sentido hemos ganado unos puntos para Google pero ofrecemos una peor experiencia a nuestros visitantes.

Puede haber elementos en la página a los que no se le apliquen los estilos de forma correcta:

Esto es así porque hemos optimizado los estilos de la parte visible. Si se modifica esa parte (editando la página) e incluimos nuevos elementos hay que optimizar también los estilos que se aplican a esos elementos. Por otro lado no hace falta que editemos nosotros una página, cualquier plugin puede hacerlo. En este caso no solo perdemos en el aspecto visual, Google se volvería a quejar.

Lo curioso de todo esto es que esta práctica en muchos de los casos no hace falta aplicarla bien porque esos recursos que se cargan son necesarios (Google no lo sabe) o bien porque realmente no bloquean (Google avisa cuando se sobrepasa cierto tamaño, sobre todo en móviles).

En resumen somos nosotros quienes tenemos que ver si realmente esos recursos bloquean la carga de la página o no. ¿Cómo hacerlo? Midiendo el tiempo de carga, por ejemplo. Si va rápida puedes olvidarte de esta advertencia.

Especificar caché de navegador

Esta práctica se aplica para que no volvamos a solicitar de nuevo los recursos al servidor si la yo lo tenemos en caché. Con eso ganamos tiempo de carga. En el caso de que estemos desarrollando o queramos modificar por ejemplo un estilo es muy importante tener esto en cuenta, ya que puede que se siga cargando el recurso que tenemos cacheado y no ver los cambios.

Podemos especificar el tiempo que queremos que estén en caché en el archivo .htaccess si usamos Apache o en el caso de WordPress podemos dejar que lo haga un plugin como W3 total cache, WP Super cache, WP Rocket, o alguno de tantos que hay. Es recomendable especificar mínimo una semana.

La ventaja de usar un plugin de caché es que además te cachean las páginas para que se entreguen de forma más rápida.

Evita los redireccionamientos a páginas de destino

Esto básicamente te dice que usemos las URL donde estén los recursos y no otra que nos lleve a ese recurso para evitar una petición nueva. Normalmente es una advertencia fácil de corregir porque te indican cuáles son esas URL.

Habilitar compresión

Otra práctica que debemos llevar a cabo. Con ella el servidor nos entrega los archivos comprimidos en gzip, así podremos obtenerlos antes. La habilitación de habilita desde .htaccess o en el caso de WordPress en casi todos los plugins de caché más conocidos.

CloudFlare también permite configurar tanto esto como el caché del navegador. Si lo usamos no necesitamos plugins para aplicar estas dos prácticas.

Minificar CSS, HTML y JavaScript

Esta recomendación debemos seguirla. Sobre todo en WordPress, y más si usamos temas pesados y muchos plugins. Con esto eliminamos los espacios en blancos y los caracteres que el navegador no necesita, aumentando el tiempo de carga. Podemos hacerlo a mano, usar herramientas como Node.js, Grunt, Gulp Webpack. En el caso de WordPress tenemos muchos plugins para ello. Si usamos CloudFlare solo tenemos que marcar las casillas correspondientes.

Además de minificar podemos combinar para que el servidor nos entreguen todos los archivos JavaScript o CSS en una sola petición. También podemos sacar los CSS y JavaScript del archivo HTML. Éstas son opciones más avanzadas. En el caso de no estar seguro de lo que haces con minificar debería ser suficiente.

El CSS debe ir dentro del HEAD y el JavaScript al final de la etiqueta BODY. En caso de no ser así debemos intentar cargar el Javascript al final siempre que se pueda para que éste no bloquee la carga de la página.

Optimizar imágenes

Las imágenes pueden ralentizar mucho tu Web por lo que hay que intentar comprimirlas lo máximo posible para que tarden menos en descargarse del servidor. Personalmente recomiendo hacerlo antes de subirla a la página Web y así te olvidas de tener que optimizarla luego.

Google te dice cuales son las imágenes que pueden optimizarse, así que esta recomendación es fácil de solucionar. O debería, porque Google a veces te pide optimizar imágenes que ya has optimizado y si lo haces más pierdes calidad.

Reducir el tiempo de respuesta del servidor

El tiempo de respuesta del servidor es el tiempo que pasa desde que pides el primer recurso hasta que te lo entrega.

Esta advertencia aparece cuando solicitamos un archivo muy grande (por ejemplo un archivo HTML sin optimizar). En este caso hay que minificarlo, extraer el JS o el CSS incrustrado en el caso de que haya que hacerlo, etc.

También puede ser que nuestro servidor sea lento. Por eso es importante la elección del servidor. Yo tengo mi página Web alojada en los servidores de Raiola (enlace de afiliado) y puedo decir que los tiempos de respuesta son bastante buenos.

Conclusión

Es mejor mirar las optimizaciones que la puntuación. Si ves que tu Web está optimizada no le des mucha importancia al resultado de Google PageSpeed Insights. Otra cosa es tener 50/100, ahí sí tendrías que plantearte mejorar tu Web.

Alternativas para medir el rendimiento de tu página Web

Pindgom

Esta herramienta al igual que Google PageSpeed Insights mide el rendimiento de nuestra página Web.

Con ella podemos ver el tiempo de carga de la página, puedes realizar el test desde diferentes servidores.

Además nos muestra las peticiones y sus respuestas. Esto es importante porque nos ayuda a identificar cuál es la que hace que nuestra Web tarde más en cargar.

Prueba de optimización para móviles de Google

Esta herramienta te dice si tu Web está preparada para los móviles. Debe usarse junto con Pingdom.

La razón por la que debe usarse es que aunque aparentemente esté optimizada puede estar bloqueando recursos a Google.

Si nuestra Web no permite que Google acceda a ella no se posicionará.

Google PageSpeed Insights vs Pingdom

Google PageSpeed Insights: Es una gran herramienta para ver qué optimizaciones tiene en cuenta Google. No es una herramienta para obsesionarse con el resultado.

Pingdom: Es una gran herramienta para ver qué optimizaciones necesita nuestra Web y para comprobar los tiempos de respuesta. Tanto el general como el de las peticiones.

La mayoría de los profesionales usamos Pingdom porque nos ayuda más y es más fiable.