¿Tienes buena puntuación en Google page speed test?
Cada vez más y más webmasters están interesados en que sus sitios web tengan una mejor puntuación en esta prueba.
Y esto, en parte es porque el buscador ha dado a entender en varias ocasiones que su puntuación en dicho test de velocidad influye de forma activa en el SEO interno de un sitio web.
Hablemos de Google page speed test
Debemos tener en cuenta que las reglas que nos marca Google Speed Page Insights y 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.
En las últimas actualizaciones Google ha orientado su algoritmo a 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.
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 cumplen y en las 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 las de 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í obligatoriamente.
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 por ejemplo.
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 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 a 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 el .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.
En este caso, 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 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 está 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 a 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 y, 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 entre muchos otros.
Módulo 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 módulo 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 los 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.