Vamos a estudiar la página posicionamiento seo mataró con la herramienta de Google Pagespeed Insights.

Situación inicial: wordpress recién instalado

Instalar wordpress es relativamente sencillo, pero dejarlo para que funcione bien a nivel de velocidad de la web ya es otra cosa.

Lo primero que hago cuando instalo wordpress es poner el plugin smush.it  que es el encargado de optimizar las imágenes, de esta forma desde el inicio , todo lo que suba se optimizará de forma automática.

La versión free del smush.it te deja comprimir de 50 en 50 imágenes, pero no he visto todavía el límite, con lo que si no lo instalas al inicio, después tendrás que dejarlo trabajando. De forma automática cada imagen que se sube a través de los medios de wordpress queda optimizada.

Una vez tenemos esto, ya podemos ir a la herramienta de google Pagespeed Insights, con la que analizaremos la velocidad de la web según google (que es lo que nos interesa)

Pagespeed Insights

Si cogemos como referencia este mismo dominio, ahora que acabamos de empezarlo, nos da estos resultados:

posicionamiento seo mataro pagespeed insights ordenador posicionamiento seo mataro pagespeed insights móvil

 

Vamos a analizar que es cada punto:

Pagespeed Insights – reducir el tiempo del servidor

Este punto es realmente difícil de mejorar, ya que seguramente sea por que el servidor donde tienes alojada la página web esta sobre cargado o con pocos recursos, y eso hace que la respuesta que de sea más lenta.

Por ejemplo, un hosting que estaba pensado para una sola página web, que no es dedicado, y que estás utilizando con 3 páginas, en teoría debería tener falta de recursos, ya que tiene 3 bases de datos, 3 sistemas de directorios… y si una web necesita recursos , se los quitará a la otra.

Otro punto importante a tener en cuenta que no te dice Pagespeed Insights es que igual tienes algún acceso remoto que o bien no funciona o te está ralentizando la web, por ejemplo, algún theme que la web ha caído y aún tiene peticiones a su dominio, al no estar, tarda en dar el error de time out y la página tarda en cargarse más de la cuenta.

Me he encontrado también en algún prestashop, que el theme lleva unos módulos de redes sociales (en ese caso era facebook) que hacia que la carga fuese mucho más lenta de la cuenta, y lo único que me indicaba Pagespeed Insights era que tenia que reducir el tiempo de respuesta del servidor, cuando en verdad eran los accesos externos los que hacían que fuese mucho más lento.

Ambas cosas las analicé con el firebug (plugin de firefox) en el que no vamos a entrar ahora mismo. (Hay manuales por toda la red)

Pagespeed Insights – Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

Este es el punto más difícil de todos, desde mi punto de vista, ya que no soy un experto programador, pero depende al 100% de la plantilla que decidas utilizar.

En este caso, este theme está realmente mal, con lo que seguramente lo acabe cambiando en un futuro si sigo con los artículos, pero de momento se quedará así.

Lo suyo es hablar con un programador que modifique esto, y lo que te está diciendo es que hay javascripts o css que no se están cargando en el html o php de la web, si no que llaman a archivos externos, lo que hace que la carga sea más lenta, hay dos formas de solucionarlo, dependiendo de lo que sea:

Pagespeed Insights –  Cambio de lugar los css y js

Se pueden cambiar de lugar varios js o css con el fin que cuando google carga la mitad superior de la página no se carguen, y no nos altere la velocidad de la web.

Pero no todos se pueden cambiar de orden, ya que si tienen una función que cumplir en la carga de la página y lo cambias a la parte de abajo, esa funciçon no se cargará hasta el final y un slider o el tipo de los h1 sería algo feo ver que cambie cuando ha acabado de descargar toda la web.

Pagespeed Insights – Insertar css y js en el mismo html

Cuando no puedes cambiar la posición del javascript o la css que te esta bloqueando el análisis de Pagespeed Insights , podemos ponerlo directamente en la web, en vez de llamar a un fichero externo para tenerlo todo centralizado, google valora que esos detalles los hagas en la misma página.

Al final es dependiendo de o purista que quieras acabar siendo y de la cantidad de ficheros que haya afectados.

Siempre recomendaría un programador experto para estos temas.

Pagespeed Insights – Prioriza el contenido visible

Pagespeed Insights prioriza el contenido visible

Poco más podemos decir de este mensaje, solo que el theme que hay actualmente no es muy bueno… al menos no para el SEO.

En este caso, nos presenta la opción de ver lo que Pagespeed Insights de google ve en el 65% que ha podido analizar:

Pagespeed Insights prioriza el contenido visible

Mi recomendación es que a menos que tener esta plantilla o theme sea loq ue da sentido a vuestra vida, yo la cambiaría sin dudarlo, si no, tendremos que ir redistribuyendo la plantilla hasta que el contenido visible quede en la parte superior del código html.

Pagespeed Insights – Minificar JavaScript

Cuando hablamos de minificar nos referimos a entregarle a google un fichero con sólo el código, es decir, le quitamos los espacios, comentarios , intros …. y lo dejamos todo bien apretadito en el espacio justo.

No hay que olvidar que Pagespeed Insights es un robot que analiza, y le da igual los comentarios y los espacios, de hecho es mejor si los quitamos.

Nunca recomiendo hacer una minificación del contenido a la brava, ya que pueden fallar muchas cosas, ni mucho menos al principio, porque leer un archivo minificado no es simple.

Sin embargo si que es algo que recomiendo hacer al final de la creación de la página web.

Pagespeed Insights – Minificar css

Sería lo mismo que con los ficheros Javascript, pero esta vez con los ficheros CSS.

Pagespeed Insights – Minificar Html

Idem a lo anterior, pero con los ficheros html, ojo, que un fichero php genera un html que es el que lee google, con lo cual el código ha de modificarse para su correcta entrega.

Hay muchos plugins y módulos que te minifican estos tres tipos de archivo, de hecho, Pagespeed Insights os dará estos archivos minificados, cuidado con ellos que no siempre funcionan de forma correcta, pero deberías probarlos uno a uno, ya que si los da google, será como el los quiera, y todos queremos estar a buenas con el… 😉

Pagespeed Insights – Especificar caché de navegador

Tenemos que especificar el tiempo que queremos que aguanten los archivos en el navegador sin tener que volver a descargarlos cuando llegamos de nuevo a la web, por ejemplo, el logo de la web, cada cuanto lo cambias? es ilógico hacer que cada vez que se conecte alguien a tu web, tenga que descargárselo. Todo tiene sis tiempos, se configura al inicio y luego ya no hay que tocarlo.

Pagespeed Insights – Evita los redireccionamientos a páginas de destino

Google es claro en esto:

  • Ideal: example.com utiliza un diseño web adaptable, no es necesario incluir redireccionamientos
  • Adecuado: example.com -> m.example.com/home
  • Inadecuado: example.com -> www.example.com -> m.example.com -> m.example.com/home

Como veis, el problema está en la cantidad de saltos que ha de dar el usuario para llegar a la web final donde navegar. Contra menos mejor.

Tambi´´en nos comenta esto:

Si tu sitio requiere redireccionamientos, debes realizar estas dos acciones:

  • usar un redireccionamiento HTTP para enviar a los usuarios con agentes de usuario para móviles directamente a la URL equivalente para móviles sin ningún redireccionamiento de por medio,
  • incluir el código &ltlink rel="alternate"&gt en las páginas para ordenador con el fin de identificar la URL equivalente para móviles y que Googlebot pueda detectar las páginas para móviles.

(información extraída de: https://developers.google.com/speed/docs/insights/AvoidRedirects)

Pagespeed Insights – Habilitar compresión

Teniendo en cuenta que lo que queremos es hacer que nuestra web se descargue lo más rápido posible, lo más lógico es comprimir los ficheros, ya que luego será el navegador a nivel local el que los descomprimirá, y esto hará que el tiempo de descarga de la web sea menor.

Recomiendan gzip, pero hay varios sistemas para la compresión de ficheros

Pagespeed Insights – Optimizar imágenes

Esto es lo primero que hemos hablado, yo utilizo generalmente smush.it, pero cualquiera que comprima imágenes debería valer.

Aún así, no cojáis las imágenes que os da Pagespeed Insights, ya que os darán solo las imágenes de la página analizada, no de toda la web, mientras que con este plugin, de forma automática se comprimirán todas las imágenes de la web.

Poco más hay que decir sobre esto, los dos valores más importantes son los del bloqueo de js y css y el tiempo de respuesta del servidor, los más complejos y los que siempre cuesta mejorar.

Con esto quedaría todo bien atadito… si tenéis alguna duda, preguntadme o revisar este post manual de google insights