Como solucionar los errores de PageSpeed

Si has llegado aquí buscando como solucionar los errores de PageSpeed, has llegado al artículo idóneo. Desde hace un tiempo cada vez le da más importancia a que el usuario que entre a nuestra web se sienta agusto, que tenga un impacto muy bueno de nuestra web y como no… por sus intereses. A Google le interesa que no tengas errores de PageSpeed ya que así significa que has optimizado WordPress y así puede estimar mejor cuanto crawl budget asignarte.

¿Cómo? ¿Aún no sabes lo qué es el Crawl Budget?.

Antes de continuar, te aconsejo que no te obsesiones con los errores de PageSpeed puesto que no todas las webs del mundo pueden cumplir el 100% de los requisitos. Cada web es un mundo, por lo tanto, no todas se puede optimizar de la misma forma. Sabiendo esto, te explico como solucionar los problemas de PageSpeed y si tienes alguna duda, déjanos un comentario abajo que estaremos encantados de ayudarte.

¿Cuál es el resultado idóneo?

Tienes que buscar el equilibrio entre carga y usabilidad. Puede que tu página web, por razones cuales sean, no puede llegarse a optimizar con un 100/100 (Que es la métrica con la que Google PageSpeed trabaja).  Los colores que usa son el verde (¡Perfecto!), amarillo/naranja (Se podría mejorar…), rojo (Revisa esto, tienes problemas). Hoy en día, Google es más específico en los errores que te devuelve y puedes optimizarlos mejor. Antes era algo más difuso.

¿Cuáles son los errores de PageSpeed que me puedo encontrar?

A continuación te dejo un listado de lo que considera Google que son los puntos fuertes o puntos que tienes que trabajar para lograr optimizar la carga de tu página web. Son en total unas 10 reglas (o mandamientos..) que debes intentar cumplir. Te los digo y luego te ayudo a optimizarlos:

  • Optimizar las imágenes
  • Evita los redireccionamientos a páginas de destino
  • Minificar HTML, JavaScript y CSS
  • Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página
  • Prioriza el contenido visible
  • Especificar caché del navegador
  • Habilitar compresión
  • Reducir el tiempo de respuesta del servidor

La buena noticia es que no son errores o problema independientes y tengamos que optimizar uno por uno. Algunos trabajan de la mano. Por ejemplo, si habilitamos la compresión estamos ayudando a reducir el tiempo de respuesta del servidor. Lo mismo ocurre si minificas los archivos CSS, HTML y JS y además optimizas las imágenes.

Ahora que ya sabes que no todos los errores de PageSpeed se pueden solucionar y que hay que buscar un punto de equilibrio, te voy a contar como solucionar esos problemas. Por cierto, es muy importante que hagas una copia de seguridad de tu web. Al fin y al cabo vamos a tocar archivos de la web y es probable que podamos cometer un error y dejar la web no transitable.

Optimizar las imágenes

Este quizá uno de los errores de PageSpeed más fáciles de solucionar, y mucho más si trabajamos con WordPress. La propia herramienta de PageSpeed ya nos recomienda que imágenes optimizar en la URL que hemos señalado en la herramienta. Por ejemplo, a mi para un proyecto que tengo me recomienda estas imagenes:

errores de pagespeed como optimizar las imagenes WordPress

Si te fijas me dice la herramienta que si puedo optimizar la imagen IBM-7090.jpg, que está dentro de /wp-content/uploads/, en un 15% sería perfecta. Tienes muchas maneras de optimizar imágenes y hacer que este error desaparezca (todo depende de la cantidad de imágenes que tengas para optimizar, en este caso yo solo tengo una). Te las digo:

  1. Usando PhotoShop para exportar las imágenes ya comprimidas por el propio software
  2. Usar herramientas de terceros como:
    1. Kraken – Te permite optimizar las imágenes para tu web en diferentes modos como “lossy compresión”, “lossyless compresion”, “expert mode”.
    2. Compress JPEG – Es una herramienta muy sencilla que te permitirá comprimir imágenes JPG y JPEG.
    3. Image Compressor – De la misma familia de la anterior pero esta te deja optimizar imágenes PNG también.
    4. Puedes buscar en Google, hay infinidad de herramientas
  3. Usar plugins en WordPress para optimizar imágenes:
    1. Puedes usar Imagify que es una herramienta de pago que hace muy bien su trabajo.
    2. También puedes elegir EWW Image Optimizer, un plugin gratuito que funciona muy bien y es muy sencillo de usar
    3. Tienes por otro lado a WP Smush It que para ser gratuita funciona muy bien aunque carece de funcionalidades que solo tendrás si haces uso de la versión de pago.
    4. Lo mismo te digo que antes, existen infinidad de plugins de optimización de imágenes en WordPress. ¡Tú eliges!.
  4. Usa las imágenes que la propia herramienta de Google te genera. Si te fijas en la imagen anterior, el enlace señalado con una cajita roja contiene un manula que te explica como optimizarlas. Y justo más abajo hay otro enlace que pone: Descarga los recursos de imagen, javascript y CSS ya comprimidos como considera Google que deben estar. Sólo súbelos a tu servidor y ¡Ya estaría!

Tras hacer la optimización de la imagen que nos señalaba PageSpeed, obtenemos el siguiente resultado tras volver a mandar analizar la página:

errores de pagespeed imagenes optimizadas WordPress

¡Uno de los errores de PageSpeed ya están corregidos! Vamos a por el siguiente 😉

Evita los redireccionamientos a páginas de destino

Este error de PageSpeed de produce cuando Google o un usuario intenta acceder a tu web www.webdestino.com pero es redireccionado a otras páginas diferentes. Por ejemplo, se suele producir mucho en páginas web antiguas que no son responsive y creen que la solución es redireccionar al usuario a su versión móvil con el dominio m.webdestino.com. Esto es un error garrafal. Para empezar, ¿Qué haces que no tienes una web responsive en pleno 2018?.

Otro de los casos que se producen, aunque con menor frecuencia, es cuando un usuario accede a webdestino.com y el proceso es el siguiente (siguiendo con el ejemplo anterior):

  1. El usuario accede a webdestino.com
  2. Se le redirecciona a la versión www.webdestino.com
  3. Se le vuelve a redireccionar a www.m.webdestino.com

Como ves, Google detecta que esto, en la jerga humana, es un mareo. La idea es que el ciclo de vida de la conexión entre usuario y servidor sea un único ciclo de conexión TCP de ida y vuelta. Puede ser alguno más con las negociaciones con TLS (para que tu web sea segura o tenga un certificado SSL HTTPS) pero lo que no podemos permitir es hacer tantos redireccionamientos como en el caso anterior y encima sin contar con el negociado con la capa TLS.

Esto es un trabajo que deberás solucionar desde la raíz. Si tu web se quedó antigua y no hay posibilidad de hacer una web responsive, no la hagas, pero no tengas innumerables redirecciones. Mejor una web no responsive que tener muchos redireccionamientos. Puede ser que requieras ayuda de un administrador de sistemas para solucionar este problema.

Minificar HTML, CSS y JavaScript

errores de pagespeed minificar css js y html wordpress

Ya hablamos largo y tendido sobre la minificación de archivos HTML, CSS y JS en este artículo. Aún así te vuelvo a explicar por encima en que consiste minificar los archivos. Una web se compone de archivos que trabajan de la mano para proporcionar al usuario una respuesta. Unos son de código que se ejecutan en el servidor, otros se interpretan o leen desde el navegador del cliente, etc. En eso archivos puede haber espacios entre líneas, en las propias líneas, etc.

Leer 1000 líneas de CSS de un único archivo puede ser pesado para el navegador. Imagina si además hay 10 archivos CSS y 20 de JavaScript. Es perder el tiempo leyendo huecos o líneas en blanco. La minificación consiste en eliminar esos espacios y que todo el CSS, HTML y HTML quede compacto en una única linea sin saltos de línea ni huecos innecesarios en sus respectivo archivos.

Por otro lado existe la combinación de archivos que trabaja de la mano con la minificación. Una vez que cada archivo CSS, JS y HTML tiene minificadas sus líneas, lo que consiste la técnica de combinar archivos es unir todos los CSS en un único archivo CSS y todos los JS en un único archivo JS. Esto se trata de una técnica WPO (Web perfomance Optimization) que puede poner en riesgo la visibilidad de tu web. Por eso te recomendaba hacer una copia de tu página web.

¿Cómo minificar los archivos entonces?

Para solucionarlo te recomiendo leer el artículo que te reseñaba al comienzo de este punto: Minificar y combinar archivos en WordPress.

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

Cuando cargas una web, cargas todos los elementos HTML, JS y CSS para que la tu web funcione y se vea bonita y usable. El problema reside en que si no hacemos nada, por defecto los archivos JS y CSS bloquean la entrada del contenido HTML que a lo que le interesa leer a los motores de búsqueda como Google. Y también es un problema de cara al usuario. Le estás haciendo esperar a leer el contenido que le interesa porque estás cargando elementos que quizá no sean tan necesarios como el texto o imágenes.

Para solucionar este problema existen técnicas que te voy a enseñar a continuación. Gracias al WPO podemos decir que hacer por defecto con estos elementos y cuando cargarlos. Por defecto los elementos JS y CSS se cargan en el <header>, justo antes del <body> que es donde está el contenido que le interesa al usuario. Por ello, mis consejos son:

  • Aplazar el contenido JS y CSS al footer de la página web para que primero cargue el texto e imágenes y después lo que hace bonita la web (CSS y HTML).
  • Cargar los elementos de forma asíncrona o diferida. Puede que cargar los elementos CSS y JS al final de la web te de problemas así que puedes cargarlos de forma asíncrona. Si no te da problemas, te recomiendo cargarlos de forma diferida.

Cual es la diferencia entre carga normal, asíncrona y diferida

  • Carga normal: Los archivos CSS y JS se cargarán en el orden expuesto en el código fuente bloqueando posiblemente la carga del HTML ya que normalmente suelen encontrarse en el <header> de una web.
  • Carga diferida: Los archivos CSS y JS se descargan con la ejecución del HTML  y se ejecutan una vez que la web o el contenido de la web HTML se hay procesado.
  • Carga asíncrona: Es una mezcla entre los anteriores. Digamos que la carga asíncrona se irá cargando cuando “le apetezca” y detendrá el procesamiento que ya lleve el HTML para ejecutarse y seguir dando paso al HTML. Para mi es la opción recomendable.

¿No lo has entendido? No te preocupes, te dejo una infografía que he hecho sobre los tipos de carga de archivos de una web.

errores de pagespeed eliminar javascript que retrasa la craga de la web

Solucionar el problema de la visualización

Ahora que ya sabes que es la carga normal, asíncrona y diferida (cosa muy importante) te voy a enseñar a como hacerlo realidad. Por suerte en WordPress es muy fácil de hacer. Puedes hacerlo de forma manual o con la instalación de plugins.

Plugins que realizan la carga diferida o asíncrona

  • Async JavaScript: Es un plugin gratuito que te colocará todo el JavaScript posible en el footer. Si quieres cargar el CSS en el fotter deberás usar otro plugin como Autoptimize. Este está especializado en JS. Puedes leer más sobre el plugin y configurarlo aquí: https://es.wordpress.org/plugins/async-javascript/
  • Autoptimize: Como te decía antes, Async javaScript está especializado en JavaScript, para cargar de forma asíncrona el CSS usa este plugin también gratuito. Para leer más, haz click aquí: https://wordpress.org/plugins/autoptimize/.

Priorizar el contenido visible

Es hora de mostrar el contenido HTML cuanto antes por el bien del usuario y de los intereses de Google. Al primero le gusta saber que se va a encontrar y al segundo, saber que contenido hay cuando antes para rastrearlo e indexarlo con el menor Crawl Budget posible. Es un win-win.

¿Qué es el primer impacto?. Para el usuario el primer impacto es lo que ve de la web en la pantalla o en el móvil. Para Google el primer impacto es visualizar el contenido de texto plano sin perder tiempo esperando a que se rendericen los archivos CSS y JS como te enseñé antes. Evita meter contenido dinámico en el primer impacto como widgets de redes sociales, fechas, datos aleatorios, etc. Intenta hablar de que va tu web o tu contenido en cada página lo antes posible.

Especificar caché en el navegador del usuario

La caché en el navegador del usuario es totalmente necesaria para no hacer cargar el mismo recursos estático una y otra vez cada vez que accede a la página web. Digamos que el propio usuario actúa como un sistema de caché propio. Nosotros desde el servidor podemos especificar cuanto tiempo deben durar los archivos estáticos en el ordenador del usuario. Esto se hace gracias o mediante el archivo .htaccess del servidor (En caso de ser un servidor Apache) o del archivo de configuración del servidor web que estés usando.

Ya no solo reducirá el impacto de cara al usuario, sino del servidor y consumirá menos recursos que podrán ser destinados a procesar más solicitudes de otros usuarios u otros quehaceres.  Para ello debemos modificar el archivo .htaccess de nuestro servidor.

Ahí vamos a especificar el tiempo útil de los archivos estáticos que están en nuestro servidor. Y veremos una solución que se aplicará para elementos que se cargan de forma externa como es el recurso de analytics.js que no está en nuestro servidor y por tanto no podemos especificarle un tiempo de vida útil de caché. Recuerda hacer una copia de seguridad del .htaccess. Ábrelo y añade estas línea de código:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 1 week”
</IfModule>

Con este código estamos diciéndole al navegador del usuario: “Oye, mira, si no tienes una copia de mis archivos estáticos como imágenes, archivos JS, CSS, etc, puedes hacerla con una validez de 1 semana. Dentro de una semana, si es que vuelves, tendrás que volver a bajártelos puesto que seguramente ya hayan cambiado.“. Con este código se aplica la regla a todos los archivos por defecto. Si queremos aplicarlo a los distintos tipos de archivos y cambiar la frecuencia para cada uno de ellos usa este código:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType image/x-icon “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresDefault “access plus 1 week”
</IfModule>

Según Google, el tiempo que recomienda para cachear los recursos es de 1 semana pero tú puedes cachearlos hasta 1 año si crees que no van a cambiar en mucho tiempo. Con este fragmento de código estamos especificando que:

  • Los archivos JPG estén cacheados durante 1 año en el navegador del usuario. Si viene antes, que no se los baje.
  • Los archivos JPGE estén cacheados durante 1 año en el navegador del usuario. Si viene antes, que no se los baje.
  • Los archivos GIF estén cacheados durante 1 año en el navegador del usuario. Si viene antes, que no se los baje.
  • Los archivos PNG estén cacheados durante 1 año en el navegador del usuario. Si viene antes, que no se los baje.
  • Los archivos ICO estén cacheados durante 1 año en el navegador del usuario. Si viene antes, que no se los baje.
  • Los archivos CSS estén cacheados durante 1 mes en el navegador del usuario. Si viene antes, que no se los baje.
  • Los archivos JS estén cacheados durante 1 mes en el navegador del usuario. Si viene antes, que no se los baje.
  • Para el resto de tipos de archivos, que lo haga para 1 semana.

Te recomiendo añadir este fragmento de código después de lo que haya en el .htaccess y a ser posible, usando el programa Notepad++ para evitar el uso de porciones de texto hexadecimales invisibles que modifiquen las cabeceras y dejen inservible tu web (Dando posibles errores 500 o 400).

Con esto has aprendido a habilitar la caché en el navegador del usuario, no es muy difícil y ahorrarás peticiones y recursos al servidor.

¿Qué hago con los archivos externos que no se pueden cachear como analytics.js?

No puedes hacer nada a priori puesto que son archivos o elementos externos que no están bajo el control de tu servidor. Uno de los errores de PageSpeed más frecuentes es como no se puede cachear el analytics.js. La solución para quitar este error es la siguiente:

  • Descargar el archivo analytics.js a tu servidor y lo llamas localmente. Esto es totalmente desaconsejable puesto que no sabes cuando el código se actualiza, si los datos que te mostrará analytics son totalmente certeros, o si necesita archivos de los servidores de Google para trabajar.
  • Camuflar el archivo analytics.js averiguando cuando Google viene a tu web. La herramienta de PageSpeed no deja de ser un robot que se pasa por tu sitio y rastrea el contenido. se trata de una araña o “crawler” que no deja rastro por lo que a priori no sabemos como ocultar este fragmento cuando pasa PageSpeed por nuestra web. Por suerte, se ha averiguado que navegador o araña usa Google para PageSpeed y podremos filtrar el archivo .JS cuando venga. Los motores que usan son:

Ordenador: “Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko; Google Page Speed Insights) Chrome/27.0.1453 Safari/537.36”.
Móvil: “Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko; Google Page Speed Insights) Chrome/27.0.1453 Mobile Safari/537.36”.

Si nos fijamos, la única palabra que se repite (Y única) y que nos servirá de variable para filtrar la araña de Google Page Speed es: “Insights“. Abre el header.php o el footer.php o el archivo .PHP donde tengas localizado tu código de Analytics y reemplazalo por:

<?php

if (stripos($_SERVER['HTTP_USER_AGENT'],"Insights") === false) { ?>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-X', 'auto');
ga('send', 'pageview');
</script>

<?php } ?>

Cambia el UA resaltado en negrita para que sea el de tu web. ¡Listo!. Hemos conseguido hacerle creer a PageSpeed que no usamos analytics.js por lo que no podrá mostrarnos uno de los típicos errores de PageSpeed como es este.

Activar la compresión del servidor

Este es un error a nivel servidor que podemos solucionar aplicando la compresión GZIP. Lo que hacemos con esta técnica es comprimir los archivos del servidor al máximo y que los tiempos de respuesta decrezcan. Es como si comprimiesemos varios archivos en un .RAR o .ZIP, para que te hagas una idea. Para hacer esto, nuevamente debemos abrir el .htaccess o el archivo de configuración del servidor y añadimos el siguiente código al archivo:

Formato GZIP

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

Si no te funcionase el formato GZIP tu servidor, prueba eliminando el código anterior GZIP y pon este de formato DEFLATE:

Formato DEFLATE

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript application/xml application/xhtml+xml application/rss+xml application/x-httpd-php application/x-httpd-fastphp image/svg+xml
</IfModule>

Con eso has habilitado la compresión GZIP en el servidor por lo que los archivos cargarán más rápido (mejorando así el Time To First Byte) y harás sufrir menos al servidor. Puedes comprobar si tu servidor tiene activada la compresión GZIP o DEFLATE con herramientas como: https://checkgzipcompression.com/. Haciendo pruebas con uno de mis sitios me dice que si, tengo la compresión GZIP y este es el informe:

Reducir tiempos de respuesta del servidor

Por último, es probable que obtengamos de entre los errores de PageSpeed el siguiente mensaje de error: “Reducir tiempos de respuesta del servidor“. Esto se debe a un tema puramente de WPO y configuración del servidor. No es algo que nosotros, como usuarios tras habilitar la caché, compresión, optimización de imágenes y demás podamos arreglar. Debes contar con un buen proveedor de alojamiento web.

Leer: Requisitos que debe tener un buen alojamiento web

Nosotros somos responsables de brindar elementos optimizados como la minificación y combinación de archivos estáticos, optimización de imágenes, y todo lo que hemos visto anteriormente. Si tu proveedor no cuenta con un buen servidor optimizado donde alojarte nunca lo vas a poder solucionar. Te recomiendo contratar un servidor optimizado + la ayuda de un sysadmin (Administrador de sistemas) que te ayude a optimizar la configuración del servidor al máximo.

Por ejemplo, este sysadmin podría ayudarte con la optimización de la base de datos o quizá con la configuración de la versión de PHP en el servidor donde tengas WordPress.

Conclusión de optimizar los errores de PageSpeed

Está claro que debemos optimizar WordPress al máximo, pero al máximo que sea posible. Como he repetido en varias ocasiones a lo largo del artículo debemos buscar un equilibrio entre optimización, carga y visualización. Llevar al máximo la optimización de los errores de PageSpeed puede hacer que nuestra web se vea mal. Incluso que no cargue. Por eso es necesario que si no tienes conocimientos de optimización de servidores, configuración y programación, dejes esta tarea a sysadmins de verdad.

Si quieres que tu web vaya como un cohete y que Google considere que tu web carga más rápido que la velocidad de la luz deja tu web en manos de los chicos de Raiola Networks. Tienen un departamento especializado en WordPress que buscará optimizar la carga de tu web al máximo. >> Llámalos <<