PageSpeed Insights es una herramienta de Google bastante eficaz para detectar, analizar y encontrar soluciones a problemas de velocidad y rendimiento de un sitio web. El tiempo de carga es un factor muy importante de cara al posicionamiento en buscadores. De todas formas, actualmente y con el auge de dispositivos móviles, si tus visitas tienen que esperar demasiado tiempo, terminarán marchándose. Si tienes instalado WordPress y quieres mejorar el rendimiento, ejecuta un test de PageSpeed Insights y analiza los resultados con esta guía de los errores más comunes a corregir.
Lanzando PageSpeed Insights
¿Por dónde empezar? Entra en Google PageSpeed Insights e introduce tu url para lanzar el test:
No se demorará demasiado en mostrarte los resultados para tu web. Te encontrarás con dos pestañas: una con las conclusiones para los dispositivos móviles y otra para los ordenadores de escritorio. Cada una con las sugerencias para cada escenario, compartiendo algunos de los problemas pero poniendo importancia en la parte móvil:
Te preguntarás si es posible obtener una puntuación perfecta en el test; para lograr que tu sitio web consiga un 100 en todos los apartados, necesitarás un código muy muy depurado y un hosting «de calidad» (entiéndase esto como «hacer un importante desembolso»).
Pero aún así, es posible que no alcances la perfección; PageSpeed Insights no ve bien que utilices servicios como Google Adsense, Google Analytics o YouTube. En realidad, Google no penaliza el uso de sus propios programas; PageSpeed Insights te sugiere formas de optimizar el rendimiento y la velocidad de tu sitio. Esta herramienta es una guía para las mejores prácticas de mejora web; nos muestra recomendaciones para varias características y de nosotros depende solucionar aquellas que sean más factibles (prueba a poner Google.es y te llevarás una sorpresa). 😉
1.- Reducir el tiempo de respuesta del servidor
El tiempo de respuesta del servidor nos dice lo que tarda en cargar el código HTML necesario para mostrar la página desde tu hosting, restando la latencia de red entre Google y el servidor. Lo normal es un tiempo de respuesta inferior a 0,20 segundos. Si te salta este error, contacta con el servicio técnico de tu hosting para ver si se trata de algo puntual… o hay algo más. Consultas lentas a la base de datos, la falta de recursos del procesador o escasez de memoria son razones de peso que nos lleven a buscar otro alojamiento web.
2.- Evitar los plugins
Lógicamente, se refiere a los que permiten a los navegadores tratar los tipos de contenidos webs exclusivos (Flash, Silverlight o Java). Muchos plugins ya no son compatibles con los dispositivos móviles y pueden provocar errores y problemas de seguridad en algunos navegadores; por eso están limitados.
Si usas la típica animación flash con un archivo .swf incluido en un widget, busca una alternativa. Cualquier efecto chulo puede crearse ya mediante tecnologías web nativas; y en WordPress hay opciones de sobra para tener nuestra web «maqueada».
3.- Configurar ventana gráfica
Cuidado, es un aviso muy raro de ver en WordPress; pero si nos aparece hay un problema con nuestro tema (si es comprado, alguien no ha hecho bien su trabajo). La ventana gráfica revisa que una página web se muestre en un dispositivo móvil. Sin esta ventana gráfica, todos los dispositivos móviles presentarán la página tal como se vería en un ordenador; es decir con el mismo ancho de pantalla, aunque con las proporciones ajustadas a la pantalla del dispositivo.
Una página optimizada tiene que incorporar una meta etiqueta de ventana gráfica en la cabecera con el siguiente formato:
<meta name=viewport content=»width=device-width, initial-scale=1″>
En nuestro caso, es el propio tema el que debe introducirla en el documento. Para solucionarlo, podemos crear un child theme para no perder el código cuando se actualice el tema; o más fácil, cambiar directamente de tema por otro compatible con ventana gráfica. Otra solución es probar si las opciones responsive de Jetpack permiten remediarlo sin tener que reemplazar la plantilla.
4.- Habilitar compresión
PageSpeed Insights ha detectado que los recursos de la página que se pueden comprimir, no se han procesado con compresión HTTP. Aunque existe plugins que hacen esta labor, la mayoría de alojamientos web ya disponen de herramientas accesibles desde el cPanel. Si no tienes muy claro si dispones de esto, dónde se encuentra o cómo hacerlo, pregunta al servicio técnico.
5.- Especificar caché de navegador
Aquí ya tenemos uno de los problemas más complicados de solucionar; si utilizas servicios como Google Analytics o Adsense te aparecerá por defecto este mensaje. Si no los usas, es probable que pases el test; cuando te aparece el error, puedes resolverlo de la manera fácil o de la otra que requiere algo de inversión (pero consigue resultados impresionantes).
Una opción requiere editar nuestro archivo .htaccess, por lo que deberías hacerlo desde el cPanel de tu alojamiento web, o utilizar un editor integrado en WordPress; el conocido plugin Yoast SEO tiene uno muy bueno en sus sección «Herramientas->Editor de archivos«. Una vez dentro, hay que incluir el siguiente código al final del archivo:
## Especificar caché de navegador ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg «access plus 1 year»
ExpiresByType image/jpeg «access plus 1 year»
ExpiresByType image/gif «access plus 1 year»
ExpiresByType image/png «access plus 1 year»
ExpiresByType text/css «access plus 1 month»
ExpiresByType application/pdf «access plus 1 month»
ExpiresByType text/x-javascript «access plus 1 month»
ExpiresByType application/x-shockwave-flash «access plus 1 month»
ExpiresByType image/x-icon «access plus 1 year»
ExpiresDefault «access plus 2 days»
</IfModule>
## Especificar caché de navegador ##
Se podría hacer modificaciones sobre el límite de tiempo de cada archivo; eso depende del volumen de archivos que tengamos de uno u otro tipo, pero así por defecto debería funcionar.
Si por alguna razón nos sigue apareciendo el aviso en PageSpeed Insights o queremos buscar una alternativa para mejorar el resultado, podemos utilizar un CDN (Content Delivery Network). Lo que hace es copiar todos los archivos estáticos y los aloja en distintos servidores alrededor del mundo. Así, a un usuario se le sirve el contenido ubicado en el CDN y no desde tu servidor, por lo que responderá mucho más rápido al tener menos elementos que descargar. Pero es que además, se descargará los archivos que se encuentren ubicados en el servidor geográficamente más cercano a cada usuario.
Aunque creo que hay alguna opción gratuita, lo mejor es optar por realizar un gasto en un buen CDN; rápidamente veremos cómo no nos vuelve a aparecer este error y que los resultados en los test reflejan una velocidad de carga bajísima. Merece la pena.
6.- Optimizar imágenes
PageSpeed Insights nos dice que deberíamos optimizar nuestras imágenes, reduciendo su tamaño, para que carguen más rápido.
Una opción sería utilizar una herramienta externa como Compressor.io que reduce el peso de la imagen todo lo posible, sin casi disminuir la calidad. Simplemente subes la imagen, la comprime en su servidor, y a continuación puedes descargarla lista para ser utilizada en tus proyectos. Lógicamente, está pensado para las imágenes antes de que se suban a nuestra web, o en su defecto, te tocaría hacerlo con todas las ya publicadas.
Otra opción es utilizar un plugin como WP Smush, que comprime las imágenes directamente en WordPress según se van añadiendo a «Medios«; también tiene la posibilidad de tratar todas las imágenes que estén subidas a la web antes de instalar el plugin. Es mucho más cómodo aunque quizá los resultados no sean tan exhaustos como en otras herramientas.
De todas formas, hay que procurar no cargar demasiado las fotografías en tamaño, usar formatos como .jpg antes que .png y ajustar el tamaño de la imagen a lo realmente necesario.
7.- Minificar CSS / JavaScript
Aquí Google nos aconseja minimizar los archivos CSS y JavaScript. Para ello, hay que reducir el tamaño de estos archivos eliminando espacios en blanco, caracteres y sintaxis que no sean fundamentales en el código. Una manera es usar directamente un plugin que lo haga automáticamente, como por ejemplo Autoptimize. Tan simple como instalarlo y marcar las casillas «¿Optimizar el código JavaScript?» y «¿Optimizar el código CSS?«.
Y ya está. Si nuestros archivos son muy grandes es posible reducir su peso en un 50%, quitando código innecesario para el correcto funcionamiento de una web. De todas formas, desde el mismo análisis de PageSpeed Insights tienes un enlace para descargar los recursos de imagen, JavaScript y CSS optimizados para tu web.
8.- Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página
Se necesitaría mover el código de la parte superior al pie de página, para no ralentizar la web y mejorar el tiempo de descarga. Para lograrlo, es preciso también tener conocimientos muy técnicos de programación. Si ya tienes instalado Autopmize en tu WordPress, puede ayudarte en este propósito: entra en la configuración, desmarca la casilla «Force JavaScript in <head>?» y deja marcada «Inline all CSS?«.
No te obsesiones con intentar abarcar todo dentro de PageSpeed Insights. Te darás cuenta que algunos problemas dependerán de tu alojamiento y de cómo esté configurado; en otros, aunque hagas las modificaciones oportunas, no mejorarán demasiado el resultado. Te tiene que servir como orientación para que por lo menos tu web no sea un lastre excesivo, y que tus visitas puedan entrar con normalidad. Si crees que puedes mejorar mucho y dar un salto de calidad, espero que este post te haya servido de inspiración.