logo-small
Funciones Precios
Noticias 0
Últimas noticias Ver todos

No disponible temporalmente. Por favor, visítanos en otro momento.

Ver todos
Webinars 0
Próximos webinars Ver todos
Próximos webinars

Lo sentimos, no se han podido encontrar próximos webinars.

Visualiza los webinars grabados
Blog 0
Posts recientes Ver todos

No disponible temporalmente. Por favor, visítanos en otro momento.

Ver todos
Alvaro Fontela

Google Page speed test ¡Todo lo que necesitas saber!

Alvaro Fontela
Google Page speed test ¡Todo lo que necesitas saber!

¿Tienes buena puntuación en Google Page Speed test?

Cada vez más webmasters están interesados en que sus sitios web tengan una mejor en este Test.

Y esto, en parte, es porque el buscador ha dado a entender en varias ocasiones que su puntuación de dicho Speed test influye de forma activa en el SEO interno de un sitio web.

Debemos tener en cuenta, que las reglas que nos marca Google Speed Page Insights que podemos mejorar, son simplemente buenas prácticas que nos ayudarán a conseguir una mejor puntuación y un mejor posicionamiento SEO pero que en la mayoría de las ocasiones no tienen por qué mejorar la velocidad de carga.

Hago esta aclaración porque me encuentro a diario muchos clientes que confunden ambos conceptos: velocidad de carga con puntuación de Page Speed test.

Google Page Speed test

En las últimas actualizaciones Google ha orientado su algoritmo en conseguir una mejor experiencia y usabilidad (UX) en dispositivos móviles como smartphones y tablets.

Esta usabilidad hace que cada vez sea más difícil crear sitios web vistosos y dinámicos a la vez, ya que, nos encontramos con un cuello de botella impuesto por los algoritmos del buscador si queremos tener una puntuación alta en el test de Google Page Speed.

Ejemplo de puntuación alta en el test de Google Page Speed

Cuando el Page Speed Insights analiza un sitio web, saca una serie de conclusiones y organiza los consejos en tres bloques diferentes identificados por colores:

  • Rojo: Cosas que se deben solucionar y que al hacerlo la puntuación mejorará considerablemente.
  • Amarillo: Cosas que se pueden solucionar si son fáciles de solucionar pero que, al hacerlo la puntuación no va a variar de forma significativa.
  • Verde: Reglas que ya se cumple y que no es necesario hacer nada.

Independientemente de eso, en la interfaz de Google Page Speed Insights tenemos dos secciones, una para dispositivos móviles y otra sección para ordenadores de escritorio y portátiles.

Las reglas de una sección, no tienen por qué tener nada que ver con la otra sección, son casi independientes y deben “tratarse” por separado.

Eso sí, puede que si solucionas problemas en “Desktop”, por ejemplo, también se solucionen problemas en “Mobile”, aunque no tiene por qué ser así.

A partir de aquí, vamos a ir parte por parte destripando la documentación oficial de Google Page Speed Insights y las reglas que allí aparecen para mejorar la puntuación en el mismo.

EVITAR EL EXCESO DE REDIRECCIONAMIENTOS

A pesar de que Google Page Speed suele dar este error pocas veces, cuando lo da, es una “reforma de importancia”, ya que, tendremos que modificar el comportamiento de nuestro blog o sitio web para que no haga tantos redireccionamientos.

Un ejemplo de exceso en esta práctica es, por ejemplo, si nuestro sitio al entrar sin WWW hiciera las siguientes redirecciones:

Dominio.es  ⇒ www.dominio.es  ⇒ m.dominio.es

Lo ideal sería que lo hiciese de manera directa:

Dominio.es  ⇒ m.dominio.es

En sitios web responsive donde no existen casi redirecciones y sólo existe una versión de la web, este error no suele aparecer en Google Page Speed Insights.

Es imposible aclarar como solucionar este punto, ya que, depende del sitio web y de cómo lo tengas montado.

Lo que sí es posible es que tengas que replantearte algunas cosas de tu sitio web, sobre todo de funcionamiento.

HABILITAR LA COMPRESIÓN

La mayoría de los servidores web de Internet están configurados para comprimir los recursos de los sitios web con GZIP antes de ser enviados a los navegadores de los visitantes.

Para comprimir el contenido antes de enviarlo al visitante, los servidores web pueden utilizar varios métodos, de hecho, Apache puede usar GZIP o Deflate.

Aclarar que, aunque GZIP es más efectivo suele ser más compatible Deflate.

Solucionar esto es fácil, aunque depende del servidor web que tengamos en nuestro servidor o hosting.

En servidores Apache basta con modificar el .htaccess para activar GZIP o Deflate, mientras que en servidores Nginx, tendremos que modificar los archivos de configuración.

Lo único que debemos tener en cuenta es que solo podremos comprimir los recursos del sitio web alojados en nuestro servidor web.

Y no podremos hacer nada para comprimir los recursos desde servidores externos como los de Facebook o Google Plus.

MEJORAR EL TIEMPO DE RESPUESTA DEL SERVIDOR

Este es el único punto donde se unifican la puntuación de Google Page Speed y la velocidad de carga de la web, ya que, al mejorar el tiempo de respuesta del servidor podremos bajar los tiempos de carga y el tiempo que tarda el servidor en servir los contenidos.

Para cumplir esta regla de Google Page Speed nuestro servidor web debe tener un tiempo de respuesta inferior a 200 ms (0,2 segundos).

Esto es prácticamente imposible si usamos un CMS como WordPress y Prestashop y, sin usar ningún tipo de caché.

Por el contrario, con un caché efectivo sí se consigue cumplir esta regla sin problemas.

Si tu web falla en esta regla, tienes que revisar la optimización del sitio web, instalar un plugin de caché y, si ni aun así consigues pasar esta regla, contacta con un profesional que te oriente mejor sobre el tema o con el proveedor de hosting si es administrado.

ESPECIFICAR CACHÉ DE NAVEGADOR

El caché de navegador es otra de las reglas fáciles de cumplir en Google Page Speed Insights, aunque al igual que con la compresión, los cambios que debemos hacer varían dependiendo del servidor web que estemos usando.

En Apache el proceso de activación del caché de navegador es similar al de la compresión.

Solo debemos editar el archivo .htaccess, pero en otros servidores como Nginx deberemos modificar los archivos de configuración.

Debes tener cuidado con el caché del navegador, ya que, en determinados momentos podemos tener problemas con la actualización de contenido si configuramos unos TTL muy altos.

De todas formas, los TTL mínimos impuestos por Google Page Speed son bastante bajos por lo que no suelen dar ningún problema.

Realmente este tema puede dar mucho “juego”, pero si buscas por Internet lo que tienes que poner en él .htaccess o en el archivo de configuración correspondiente lo encontrarás sin complicaciones.

MINIFICAR RECURSOS

Dentro de esta sección se encuentra la minificación de archivos HTML, CSS y Javascript y que son los tres archivos de tipo texto que son servidos a los visitantes.

Minificar es el proceso mediante el cual se optimizan los archivos, para ello, se sacan elementos como los comentarios y los saltos de línea, se abrevia todo para que el archivo final pese lo menos posible y, por lo tanto, los archivos se descarguen algo más rápido al navegador.

La minificación puede hacerse de varias maneras, incluso puede hacerla un módulo instalado en el servidor web pero, en condiciones normales en un CMS como Wordpress suele hacerse mediante un plugin del tipo “Autoptimize para Wordpress”.

Debemos tener especial cuidado con la minificación de CSS y Javascript, ya que, si lo hacemos sin pensar y sin control podemos descomponer la apariencia del sitio web.

La misma configuración no siempre es acertada para todos los sitios webs, depende del theme usado y los elementos que tengan.

OPTIMIZAR IMÁGENES

Las imágenes suelen ser la parte que más pesa en un sitio web, por esta razón, necesitamos optimizar las imágenes para conseguir bajar los tiempos de carga al reducir el tiempo que tarda el navegador web en descargar los recursos.

Si Google Page Speed Insights nos marca este error, lo que tenemos que hacer es fácil, tenemos que optimizar las imágenes de nuestro sitio web.

Podemos optimizar las imágenes de varias maneras: desde el servidor, con un plugin, con un servicio externo, con una aplicación local, etc…

La forma más automática para hacerlo es a través de un plugin.

En el caso de Wordpress podemos hacerlo con EWWW Image Optimizer o si recurrimos a una opción Premium, podemos usar el plugin de Kraken.io con el servicio Premium correspondiente.

Esta última opción resulta mucho más eficiente que la opción de EWWW Image Optimizer.

Algunas imágenes aunque se optimicen con un plugin seguirán marcando que no están optimizadas, estas imágenes debemos optimizarlas manualmente con otro tipo de aplicación local o reducir su tamaño con el fin de bajar su peso.

OPTIMIZAR LA ENTREGA DE CSS

Este error actualmente no suele aparecer mucho en sitios web actuales, ya que, normalmente todos los estilos se meten dentro de una sola hoja de estilos CSS.

De hecho, por esta razón es más probable que aparezca un error que te indique “Prioriza el contenido visible”.

Si tu web esta creada con un CMS y te aparece “Optimizar la entrega de CSS” en Google Page Speed, lo mejor que puedes hacer es cambiar el theme.

En el caso de que sea un desarrollo propio en HTML y CSS, lo mejor que puedes hacer es volver a darle forma al sitio web.

REDUCIR EL TAMAÑO DEL CONTENIDO DE LA MITAD SUPERIOR DE LA PÁGINA

Este es otro error que suele aparecer bastante en themes actuales que sobrecargan mucho la parte de arriba de la web, ya que, es lo primero que ven los visitantes al entrar.

Técnicamente, este mensaje suele aparecer cuando hay tantos elementos insertados en la parte superior de la página que el navegador web tiene que realizar más peticiones al servidor de las que debería y, por eso, se ralentiza la carga de la página.

Si te sale este error y estás usando un CMS, cambia de theme o revisa si algún plugin está insertando elementos adicionales.

Si te sale este error y tu web está desarrollada por ti, vas a tener que sacar elementos manualmente del código.

QUITAR EL JAVASCRIPT QUE BLOQUEA LA VISUALIZACIÓN DEL CONTENIDO

Últimamente este error suele aparecer bastante por culpa de los sliders en javascript que se suelen insertar en la parte de arriba de las páginas.

El error aparece cuando el HTML carga código javascript desde orígenes externos y el navegador debe esperar para descargar el javascript, por lo tanto, se ralentiza la velocidad de carga del sitio web.

¿Cuál es la solución en este tipo de situaciones? Pues la solución idónea es mover el javascript al final de la página o hacer que carguen de forma asíncrona.

En cualquier caso, si eres un usuario principiante te costará entender este proceso, por lo que, tendrás que buscar a alguien que realice las modificaciones necesarias, ya que, ni con plugins en los CMS se consigue solucionar este problema de forma eficiente.

Si buscas un script/plugin que te permita insertar un slider asíncrono puedes probar con Revolution Slider.

Al menos en Wordpress con la configuración adecuada suele cargar bien de forma asíncrona.

Existen otros scripts externos de javascript que podemos hacer que carguen de forma asíncrona, como por ejemplo, el javascript de Adsense o el de Google Plus entre muchos otros.

MODULO DE GOOGLE PAGE SPEED

El gigante de internet también ha desarrollado módulos para integrar las optimizaciones de Google Page Speed en los servidores web más usados: Apache y Nginx.

En el caso de Apache el modulo se llama mod_pagespeed y en el caso de Nginx se llama ngx_pagespeed.

En cualquiera de los dos casos el módulo detecta qué reglas puede aplicar a tu sitio web y realiza las optimizaciones necesarias en el código servido a los visitantes.

Estos módulos suelen acelerar algo la web, ya que, también implementan caché y realizan la optimización de imágenes al vuelo siguiendo las reglas de Google Page Speed, que suelen ser bastante efectivas.

A pesar de que tener instalado estos módulos de Page Speed es bueno, hay servidores que no lo tienen instalados, por ejemplo, los de hosting compartido.

Esto es debido a que, la configuración que puede ser buena para una web puede destrozar completamente la apariencia de otra web similar.

Foto (velocidad web): Shutterstock

¿Te animas a contarnos cómo anda de salud tu velocidad web?

Mi nombre es Alvaro, soy consultor especializado en Wordpress y co-fundador de Raiola Networks, un proveedor de hosting especializado en la administración de servidores Linux y en Wordpress.
Soy la persona encargada de publicar en el blog de Raiola Networks donde hablo sobre Wordpress y sobre servidores intentando llegar al máximo número de lectores.

2000 es el número máximo de caracteres permitido
Tehagolacompra.es
Tehagolacompra.es
Hola Alvaro, tengo una tienda online que reciente he inaugurado. Al utilizar pageSpeed de google aparte de darme un suspenso en nota me ha metido un script en cada producto que tengo publicado en mi tienda, esto lo puedo ver al editar un producto en la pestaña HTML. ¿ Esto es normal? El script empieza tal que asi..
//
Juan Manuel Rodriguez Cozar
Juan Manuel Rodriguez Cozar
Genial Álvaro por el post, tengo una pregunta ya que no soy un programador y me encuentro dificultades para intentar solucionar esto más eficientemente.

¿Sabes de algún artículo que explico de forma muy sencilla como solucionar esto que me sucede en PageSpeed? "Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página, Minificar CSS, Minificar JavaScript y HTML"

No tiene porque ser un artículo extenso sino de alguno que lo explique bastante básico para personas como yo que le cuesta más que a otros usuarios.

Muchas gracias de verdad!
Alvaro Fontela Sanchez
Juan Manuel Rodriguez Cozar
Hola, el problema se encuentra en que ese problema no siempre se soluciona de la misma manera, teóricamente con pasar los JS a cargar al footer el problema esta solucionado, pero claro, muchas cosas dejaran de funcionar...

Un saludo.
teenvio.com
teenvio.com
Nos encantan los artículos de la gente de Raiola Networks, muy útil tu artículo Álvaro! ;)
Alvaro Fontela Sanchez
teenvio.com
Muchísimas gracias, me alegro de que os gusten.

Un saludo.
Have a Suggestion?