Domine GTmetrix: la herramienta esencial para optimizar su sitio web

Un sitio web mal optimizado hace que la navegación sea lenta y desagradable para sus visitantes. Esto repercute en su tasa de retención, en el rendimiento de los servidores e incluso en el posicionamiento de su sitio en los buscadores. Por suerte, existe una herramienta excelente para guiarle en la optimización de sus sitios web: GTmetrix. Se la explicamos.

GTmetrix, una herramienta de medición

Antes de optimizar un sitio, primero hay que poder medir su rendimiento con precisión. Estas mediciones deberán repetirse a lo largo de todo el proceso de optimización para comprobar la eficacia de cada mejora aplicada.

El sitio https://gtmetrix.com/ es la herramienta perfecta para ello. Mide el rendimiento de los sitios desde el punto de vista de los visitantes y le indica con precisión qué aspectos se pueden optimizar.

Le recomendamos crear una cuenta gratuita: le permitirá definir sus preferencias (ubicación del servidor y navegador de prueba), consultar sus resultados anteriores y, sobre todo, tener prioridad en las colas de prueba, con lo que ganará minutos muy valiosos durante las numerosas pruebas necesarias para optimizar bien un sitio.

Nota: por regla general, conviene comprobar primero el rendimiento de las páginas más visitadas. Por eso, la primera prueba suele realizarse en la página de inicio, punto de entrada de la mayoría de los sitios.

Realizar su primera prueba con GTmetrix

Acceda a la página de inicio del sitio, introduzca la URL de su sitio web y haga clic en «Analyze».

Solo queda esperar unos instantes para ver el resultado.

En este ejemplo, nuestro sitio WordPress no sufre problemas graves de optimización. Una nota «B» suele ser aceptable. Aun así, nos proponemos conseguir una «A» y le mostraremos cómo en un próximo artículo dedicado. Por ahora, nos centraremos en entender GTmetrix, porque es imprescindible para optimizar su sitio de forma eficaz.

Primer vistazo a GTmetrix

GTmetrix está extraordinariamente bien diseñado y le ofrece de un solo vistazo una idea precisa de la optimización del sitio analizado. Repasemos los distintos elementos de este resumen.

Performance Scores

Estas puntuaciones son el resultado de la combinación de numerosas pruebas que detallaremos a continuación.

• El PageSpeed Score se basa en las pruebas de Google. Sus detalles se muestran en la página por defecto. Esta prueba analiza directamente el contenido que el sitio envía a los visitantes, ya sean imágenes o scripts, así como su metainformación. La nota mínima recomendada es «B». Por debajo, conviene revisar seriamente la optimización del sitio. Esta puntuación es crucial: al haberla creado Google, puede afectar a su posicionamiento, algo fundamental para cualquier actividad en línea.
• El YSlow Score muestra optimizaciones más técnicas, por ejemplo el número de peticiones realizadas, las cabeceras de los archivos enviados (es decir, la metainformación que el servidor web envía sobre los archivos), las malas prácticas en los scripts utilizados, etc. Al igual que con el PageSpeed Score, la nota mínima recomendada es «B». Por debajo, conviene revisar seriamente la optimización del sitio.

Page Details

• Fully Loaded Time indica el tiempo que ha tardado el servidor de GTmetrix en cargar la página por completo. Conviene elegir el servidor de GTmetrix más cercano a sus visitantes para obtener un valor más representativo de lo que ellos experimentarán. Para ello, debe crear una cuenta gratuita en GTmetrix. Lo ideal es que la carga dure menos de 3 s. Tenga en cuenta que el servidor de GTmetrix puede cargar la página más despacio que un visitante real con una conexión excelente y cercano a su servidor, pero, en promedio, sus visitantes tendrán una conexión bastante parecida a la de GTmetrix. Con un sitio WordPress que incorporaba todas las optimizaciones imaginables, el mejor resultado que hemos medido ronda los 0,9 s de carga. Tenga en cuenta que muchos factores pueden influir en este resultado, como los crons de WordPress (tareas programadas que se ejecutan una vez por minuto), la carga del servidor, etc. No dude, por tanto, en lanzar 2 o 3 pruebas seguidas para obtener un valor más fiable. Por último, recuerde que este tiempo es la suma del tiempo que necesita el servidor para generar la página (que depende de la optimización de los scripts de su sitio) y del envío de los archivos. Para saber en qué aspecto trabajar, habrá que examinar sobre todo el «TTFB» (time to first byte), del que hablaremos al final del artículo.
• Total Page Size es el tamaño de su página en KB o MB. Se recomienda no superar 1 MB en la mayoría de los sitios y un máximo de 2 MB en los sitios más gráficos. Aun ignorando todos los demás retrasos que se producen antes de enviar los archivos del sitio al visitante, 2 MB con una conexión ADSL de 8 Mbit/s ya suponen 2 segundos de carga, en el mejor de los casos. 2 segundos por página pueden ser ya mucho si la navegación por su sitio exige numerosos clics. Los sitios de fotografía u otros ámbitos multimedia pueden ser una excepción a este límite y utilizar el peso necesario para una visualización de calidad; aun así, es preferible optar por imágenes que solo se amplíen cuando sea necesario.
• Requests indica el número de peticiones, o archivos, necesarios para mostrar el sitio. Este factor puede tener un impacto muy importante en la velocidad de su sitio. Lo ideal es que este valor esté por debajo de 20 peticiones, con un máximo tolerado de 40. Si supera las 50 peticiones, su sitio puede empezar a ralentizarse notablemente, sobre todo con conexiones a internet más lentas. A partir de 200 peticiones, suelen perderse varios segundos largos (de 5 a 10 s) de carga según la procedencia de los archivos, ya que algunos recursos pueden cargarse desde fuentes distintas de su sitio, como scripts, fuentes tipográficas u hojas de estilo, algo que, idealmente, debe evitarse.

Las pruebas de PageSpeed y YSlow en detalle

Aquí le mostraremos los problemas de optimización más frecuentes. Con ello tendrá una base sólida para entender los principales problemas de optimización de los sitios web. No obstante, esta lista no es exhaustiva: si su problema aparece en otra prueba, GTmetrix ofrece explicaciones breves (en inglés) de cada una al desplegar la línea correspondiente. También encontrará con bastante facilidad recursos (a menudo foros) que detallan los errores menos habituales que pueda encontrarse.

PageSpeed en detalle

Estos son los puntos que aparecen con más frecuencia y cómo solucionarlos.

• Serve scaled images: significa que envía imágenes de mayor tamaño que el que se muestra. Tendrá que redimensionar las imágenes de su sitio o generar miniaturas de distintos tamaños para servirlas a la escala adecuada, sea cual sea el tamaño de la pantalla del visitante.
• Optimize images: significa que la compresión de las imágenes no es lo bastante fuerte para PageSpeed.
• Defer parsing of JavaScript: significa que hay scripts JS que bloquean la visualización del sitio mientras se cargan, por lo que deben cargarse al final. Este problema suele deberse a la plantilla, el tema o el maquetador (builder) utilizado. Algunos CMS o scripts también son muy pesados y están mal optimizados, así que conviene elegir scripts (CMS, temas, maquetadores) bien optimizados en este aspecto. A veces es posible paliar este problema con algunos plugins de caché (por ejemplo, W3 Total Cache para WordPress).
• Leverage browser caching: aparece cuando se cargan archivos sin que el servidor indique una duración de caducidad (las famosas cabeceras Expires de Apache). El valor recomendado es de 15 días. Puede configurarse en el archivo .htaccess del sitio. En un servidor virtual o dedicado, Plesk también permite modificar el valor por defecto en «Configuración de Apache y nginx» y después «Expires», donde debe indicarse el valor personalizado de 15 días. En un alojamiento compartido, puede pedir al soporte de HaiSoft que aumente este valor abriendo un ticket. En WordPress, algunos plugins de caché también permiten gestionarlo. ¡Atención! Existe un límite: si su sitio (o su tema/maquetador) utiliza recursos externos, no controla las cabeceras Expires de esos archivos (por ejemplo, las fuentes de Google, que provocarán este error), y eso basta a veces para rebajar notablemente la puntuación de GTmetrix. En ese caso, elija un tema bien optimizado en este sentido, que evite en la medida de lo posible recurrir a recursos externos.
• Minify JavaScript/CSS/HTML: consiste en comprimir los archivos de scripts. Si no vienen comprimidos de origen, utilice un plugin de caché que incluya esta opción.

YSlow en detalle

Esta prueba suele ser más sencilla de entender. Estos son la mayoría de los mensajes que encontrará:

• Add Expire headers: es similar a Leverage browser caching de PageSpeed.
• Make fewer HTTP requests: ocurre cuando su sitio solicita demasiados recursos. Puede deberse al número de imágenes, pero suele venir más bien del tema o del maquetador utilizado. Es preferible, por tanto, un tema nativo antes que un maquetador, y elegirlo bien asegurándose de que no recurra a recursos demasiado dispersos.
• Use a Content Delivery Network (CDN): aquí se le aconseja utilizar una CDN como Cloudflare. Permite descargar al servidor y enviar sus archivos más rápido cuando los visitantes están lejos del servidor (a más de 2000 km). Conviene plantearlo sobre todo en sitios con muchísimo tráfico. HaiSoft puede implantar y gestionar su CDN si lo necesita.
• Reduce the number of DOM elements: indica que hay demasiados elementos en su página, lo que puede ralentizar al navegador al mostrarla mientras interpreta los scripts que se le aplican.

Waterfall

La vista «Waterfall» le permite observar el tiempo de carga de todos los archivos, así como el uso de recursos del navegador que carga la página. Esta herramienta permite visualizar el impacto de los archivos y scripts del servidor y, potencialmente, localizar los scripts menos optimizados para retocarlos o sustituirlos.

Timings

Por último, los timings indican las distintas fases de carga de la página.

• TTFB, o «Time To First Byte», indica el tiempo que necesita el servidor para enviar la primera respuesta a la petición de carga de la página del cliente. Refleja indirectamente el tiempo que tarda el servidor en generar la página y depende del rendimiento del servidor. Cuando este es óptimo (¡como en HaiSoft!), depende sobre todo de la optimización de su sitio: calidad y cantidad de los scripts utilizados, compatibilidad con versiones recientes, etc. Un servidor dedicado o virtual bien dimensionado para sus necesidades ofrecerá el TTFB más bajo y estable posible. Tenga en cuenta que, en sitios como WordPress que ejecutan un cron cada minuto, el TTFB puede variar mucho si la prueba de GTmetrix coincide con ese cron.
• DOM int. indica el tiempo necesario para que el HTML de la página se descargue en el equipo del visitante.
• DOM loaded indica el tiempo necesario para procesar el código HTML no bloqueado por scripts JS u otros.
• First paint indica el momento en que la página empieza realmente a mostrarse en el navegador del visitante.
• Onload indica el momento en que la página y todos sus scripts se han cargado y ejecutado por completo.

Se recomienda un máximo de 3 s en total. Lo ideal es que este valor ronde más bien 1 segundo.

Conclusión

Hemos visto que GTmetrix es una herramienta potente e imprescindible para diagnosticar la optimización de un sitio.

También hemos comprendido que optimizar consiste en reducir al máximo los tiempos de carga para los visitantes. Puede hacerse en dos frentes principales: por un lado, optimizando el tiempo que tarda el servidor en generar las páginas del sitio (para lo que hay que optimizar los scripts, evitar multiplicar los plugins, etc.) y, por otro, optimizando los recursos enviados a los visitantes, es decir, las distintas imágenes, scripts y fuentes.

Esto implica diversos aspectos a veces poco intuitivos, como la elección del tema del sitio y de los plugins instalados, lo que influye en otro criterio importante: el número de archivos enviados a los visitantes. Asimismo, la metainformación de los archivos, el dimensionamiento y la compresión de las imágenes, etc. son elementos cuyas causas e implicaciones conviene entender, y ese es el propósito de este artículo.

Aunque ya puede deducir de ello formas de optimizar su sitio, no pensamos quedarnos aquí: ¡muy pronto le guiaremos en la optimización concreta de su sitio WordPress con la ayuda de GTmetrix!

Para no perderse la continuación, ¡síganos en las redes sociales!