Si hasta ahora no te habĆa preocupado la velocidad de carga de tu web, dĆ©jame decirte que va siendo el momento de prestarle atenciĆ³n.
No te preocupes, no es complicado. Hay herramientas gratuitas que te facilitan mucho el trabajo.
Y una de las mejores que conozco es GTmetrix.
En este artĆculo voy a comentarte por quĆ© deberĆas revisar el rendimiento de tus pĆ”ginas y cĆ³mo puedes hacerlo a travĆ©s de esta herramienta SEO que tenemos la suerte de poder utilizar sin ningĆŗn coste.
ĀæMe acompaƱas en este repaso de las funcionalidades de GTmetrix?
QuƩ es GTmetrix y para quƩ sirve
GTmetrix es una herramienta online que realiza un anĆ”lisis de carga de tu pĆ”gina web para comprobar su rendimiento y ofrecerte mejoras de optimizaciĆ³n.
ĀæPor quĆ© es importante para el SEO medir la velocidad de tu web?
Imagina que te sientas en una terraza a tomar algo.
Pasan los minutos y nadie te hace caso.
Preguntas a un camarero si te puede tomar nota y te dice que enseguida te atiende.
Pero sigue pasando el tiempo y continĆŗas esperando.
Al final, te desesperas y terminas yƩndote a otro bar.
Con tu web pasa lo mismo. Pero, en este caso, no hablamos de minutos, sino de segundos e incluso milƩsimas de segundo.
Si un usuario entra a tu pƔgina y Ʃsta tarda en cargar, acaba por irse a otro sitio.
Google lo sabe y, por eso, el rendimiento de una web es hoy en dĆa un factor mĆ”s de posicionamiento.
CĆ³mo usar GTmetrix
A la hora de utilizar GTmetrix, puedes elegir entre 3 modalidades diferentes, en funciĆ³n de cuĆ”l sea el grado de vinculaciĆ³n que quieras adquirir con la herramienta.
En primer lugar, tienes la manera mĆ”s directa, ideal si Ćŗnicamente quieres hacer un anĆ”lisis rĆ”pido de tu web de forma ocasional.
No necesitas proporcionar ningĆŗn dato personal. Simplemente, indica la URL de tu sitio en la pĆ”gina de inicio del portal de GTmetrix, espera unos segundos y ya podrĆ”s analizar los resultados.
Ahora bien, si lo que quieres es llevar un mĆnimo seguimiento de tu web, te recomiendo crearte una cuenta gratuita.
NecesitarĆ”s dejar una direcciĆ³n de correo y, opcionalmente, tu nombre. A cambio, tendrĆ”s una serie de ventajas, como:
- Ciertas opciones de configuraciĆ³n para los tests.
- Almacenamiento de los Ćŗltimos informes.
- MonitorizaciĆ³n de tu pĆ”gina principal.
- ConfiguraciĆ³n de alertas.
- Acceso a la API.
Por Ćŗltimo, si lo que quieres es utilizar GTmetrix de manera profesional, tienes a tu disposiciĆ³n la versiĆ³n PRO, con varios planes premium de pago.
Vamos a ver quƩ ventajas tienen.
Diferencias entre la versiĆ³n gratuita de GTmetrix y los planes de pago
En funciĆ³n de cuĆ”les sean las necesidades de tu negocio, GTmetrix PRO te ofrece diferentes planes de pago entre los que elegir.
Desde la opciĆ³n mĆ”s econĆ³mica, que cuesta 13 $ al mes, hasta un plan pensado para empresas de cierto volumen, que tienen un uso mĆ”s exigente.
Incluso existe la posibilidad de configurar un plan a medida, si no te encaja ninguno de los paquetes disponibles.
En cualquier caso, los planes de pago ofrecen varios beneficios sobre la versiĆ³n gratuita. Ćstos son los que encuentro mĆ”s relevantes:
- EjecuciĆ³n de los test desde servidores ubicados en un mayor nĆŗmero de paĆses.
- SimulaciĆ³n de peticiones desde dispositivos mĆ³viles.
- Muchas mĆ”s opciones de configuraciĆ³n de los tests.
- Informes en PDF mucho mƔs completos.
- MonitorizaciĆ³n de mĆ”s pĆ”ginas.
- Mayores posibilidades de uso de la API.
GuĆa de GTmetrix paso a paso
A continuaciĆ³n te voy a comentar cĆ³mo utilizar las principales funciones de GTmetrix.
VerƔs que no es demasiado complicado. Simplemente requiere tener claros ciertos conceptos.
Al terminar, serƔs capaz de realizar un anƔlisis de rendimiento de tus sitios web sin demasiadas dificultades.
El panel principal
Para la realizaciĆ³n de este tutorial he utilizado la versiĆ³n gratuita de GTmetrix, ya que es mĆ”s que suficiente para efectuar un anĆ”lisis y realizar un seguimiento bĆ”sico de nuestra web.
Una vez hacemos login con nuestro usuario y contraseƱa, la herramienta nos lleva a un panel de control compuesto por tres zonas principales.
En la parte inferior tenemos dos pestaƱas.
- La primera nos da acceso a los informes de los tests que ya hemos ejecutado.
- La segunda nos muestra los proyectos que estamos monitorizando.
AdemƔs, podemos crear nuevas pestaƱas con los filtros que configuremos.
En la parte superior del panel de control podemos ver una caja de texto donde deberemos introducir la URL de nuestra pƔgina para realizar nuevos tests.
Vamos entonces a realizar un anƔlisis de la pƔgina de DinoRANK.
Pero antes de lanzar la ejecuciĆ³n, configuraremos algunas opciones.
Opciones de anƔlisis de GTmetrix
Justo debajo del botĆ³n āAnalyzeā tenemos un desplegable para acceder a las opciones de configuraciĆ³n.
Como podrĆ”s ver, la mayorĆa de las posibilidades sĆ³lo estĆ”n disponibles para los planes PRO.
No obstante, vamos a ver quƩ podemos configurar para nuestro anƔlisis:
- LocalizaciĆ³n. UbicaciĆ³n del servidor desde donde se lanzarĆ”n los tests. Conviene configurarlo si queremos que nuestra web se dirija a un paĆs especĆfico. Nosotros seleccionaremos San Antonio para ver cĆ³mo se comporta la web para USA.
- Dispositivo. En este caso sĆ³lo podemos seleccionar que el test de velocidad se realice para escritorio (mediante el navegador web Google Chrome).
- ConexiĆ³n. Por si queremos analizar un tipo de conexiĆ³n concreta. Dejamos el valor por defecto.
- VĆdeo. Se crearĆ” un vĆdeo con la secuencia de carga de nuestra web. Lo activamos.
- Adblock Plus. Para evitar la carga de anuncios de terceros. En nuestro caso, lo dejamos desactivado.
AdemĆ”s de estas opciones de configuraciĆ³n, GTmetrix nos ofrece otras opciones avanzadas.
De este modo, si lo necesitas, puedes configurar la autenticaciĆ³n para acceder a tu web, el almacenamiento de cookies o el bloqueo de URLs con recursos que no quieres cargar.
TambiĆ©n tienes mĆ”s parĆ”metros de configuraciĆ³n para la versiĆ³n PRO.
Normalmente, estas opciones adicionales no suelen ser necesarias. Pero, si en algĆŗn momento quieres utilizarlas, estĆ” bien saber dĆ³nde encontrarlas.
AnĆ”lisis de una web e interpretaciĆ³n de los resultados
Una vez hemos configurado nuestro anĆ”lisis, es el momento de pulsar el botĆ³n azul āAnalyzeā para ejecutarlo.
Al terminar, GTmetrix nos muestra una pƔgina con los resultados.
En la parte superior podremos ver una captura de nuestra web, junto con el resumen de la configuraciĆ³n del test.
A continuaciĆ³n, obtendremos la puntuaciĆ³n general que asigna GTmetrix a nuestra web.
Esta puntuaciĆ³n general viene representada por una letra (de la A a la F) y se calcula como una media de las dos mĆ©tricas siguientes (en una proporciĆ³n 70 / 30):
- Performance Score. Nos indica cĆ³mo es el rendimiento de nuestra web, en base a los parĆ”metros que mide la herramienta Lighthouse de Google.
- Structure Score. Nos da una idea sobre cĆ³mo estĆ” construido nuestro sitio web en cuanto a la implementaciĆ³n de buenas prĆ”cticas para lograr un buen rendimiento.
Junto a las puntuaciones de GTmetrix, tenemos tambiĆ©n una visiĆ³n de las principales mĆ©tricas de los Web Vitals de Google.
Finalmente, en la parte inferior se muestran una serie de pestaƱas, a travĆ©s de las que podemos acceder a informaciĆ³n mĆ”s detallada y que vamos a explicar a continuaciĆ³n.
PestaƱa Summary (resumen)
La pestaƱa resumen nos proporciona un visiĆ³n general del rendimiento de la pĆ”gina.
La parte mĆ”s interesante, en mi opiniĆ³n, se encuentra al principio y es una representaciĆ³n grĆ”fica de la carga de la web.
Podemos observar cĆ³mo se va mostrando el contenido de la pĆ”gina a lo largo del tiempo, asĆ como los momentos en los que tienen lugar las principales mĆ©tricas que se usan en el anĆ”lisis.
A continuaciĆ³n tenemos las recomendaciones de GTmetrix para mejorar los tiempos de carga del sitio web.
Este listado es simplemente una visiĆ³n rĆ”pida de lo que encontraremos en la pestaƱa Structure.
Finalmente, la pestaƱa Resumen nos muestra una representaciĆ³n grĆ”fica de la distribuciĆ³n de los recursos de nuestra pĆ”gina desde dos puntos de vista: el tamaƱo que representan y el nĆŗmero de peticiones que se realizan para cada tipo de recurso.
De este modo, podemos hacernos una idea sobre el impacto que tienen dichos recursos en la carga de la pƔgina.
PestaƱa Performance (rendimiento)
En esta pestaƱa localizamos el detalle de cada una de las mƩtricas.
En primer lugar, vemos las mediciones de la herramienta Lighthouse de Google, aplicadas a los parĆ”metros para los que hemos configurado nuestro test de velocidad en GTmetrix (localizaciĆ³n, dispositivo, conexiĆ³n, etc).
Estas mƩtricas son:
- First Contentful Paint (FCP). Tiempo en mostrarse la primera imagen o texto completo en la web.
- Speed Index. Tiempo en el que los elementos de la pƔgina son visibles.
- Largest Contentful Paint (LCP). Tiempo que tarda en pintarse el elemento mƔs grande de la web.
- Time to Interactive. CuƔnto tardan en cargar todos los elementos para permitir interactuar completamente con la pƔgina.
- Total Blocking Time (TBT). Tiempo, tras FCP, en el que la pĆ”gina estĆ” bloqueada por la ejecuciĆ³n de scripts y no permite ninguna interacciĆ³n.
- Cumulative Layout Shift (CLS). Indica si hay elementos que cambian de posiciĆ³n durante la carga de la pĆ”gina.
La evaluaciĆ³n de estas 6 mĆ©tricas determinan el Performance Score de la pĆ”gina, que ya hemos visto anteriormente.
Por otro lado, esta pestaƱa muestra otras mĆ©tricas que, si bien no influyen directamente en el Performance Score, sĆ que ofrecen informaciĆ³n sobre el rendimiento de la web.
Si quieres conocer quĆ© significa cada una de estas mĆ©tricas, tan sĆ³lo tienes que pulsar el icono con forma de interrogante que tienes junto a ellas.
Esto es debido a las diferencias de configuraciĆ³n de los entornos para los tests, que pueden arrojar mediciones diferentes en funciĆ³n de sus caracterĆsticas.
Factores como la ubicaciĆ³n de los servidores, el hardware utilizado o las conexiones de las redes utilizadas por cada herramienta afectan en cierta medida a los resultados.
En cualquier caso, estas diferencias no deberĆan ser sustanciales y cualquiera de las dos aplicaciones es vĆ”lida a la hora de evaluar el rendimiento de una web.
PestaƱa Structure (estructura)
Esta secciĆ³n es probablemente la parte mĆ”s prĆ”ctica del informe, ya que nos indica las acciones que podemos llevar a cabo para mejorar el rendimiento de nuestra pĆ”gina web.
Cada sugerencia estĆ” marcada de un color, en funciĆ³n del impacto que tendrĆa en tu web si la llegaras a implementar.
TambiĆ©n estĆ”n etiquetadas con las mĆ©tricas que podrĆas mejorar al ejecutarlas, de modo que puedes filtrar los resultados en funciĆ³n de estas etiquetas.
Si desplegamos el detalle de cada acciĆ³n podremos ver una pequeƱa descripciĆ³n de la misma, los recursos que se verĆan afectados, asĆ como un enlace a mĆ”s informaciĆ³n sobre cĆ³mo llevar a cabo la mejora.
PestaƱa Waterfall (cascada de peticiones)
A travĆ©s de la pestaƱa Waterfall obtenemos una visiĆ³n grĆ”fica y muy detallada de las peticiones que se producen para cargar por completo una pĆ”gina web.
De este modo, podemos ver, ordenados temporalmente, todos los recursos que se solicitan para mostrar todos los elementos de la pƔgina.
Disponemos de varias columnas (URL, cĆ³digo de respuesta, tamaƱo del recurso, etc), pero la mĆ”s interesante es sin duda la denominada Timeline.
AquĆ se nos muestra el tiempo que tarda en cargarse un recurso concreto mediante una escala de colores que nos indican las distintas secuencias de la carga:
- MarrĆ³n. Tiempo que permanece bloqueado.
- Verde azulado. ResoluciĆ³n DNS.
- Verde. ConexiĆ³n con el servidor.
- Rojo. EnvĆo de la peticiĆ³n al servidor.
- Morado. Esperando la respuesta.
- Gris. RecepciĆ³n del recurso.
Al pasar el ratĆ³n por encima del recurso podemos ver mĆ”s detalles sobre estas peticiones, asĆ como otras mĆ©tricas relacionadas.
Finalmente, si hacemos clic en cada fila de la tabla, accederemos al detalle de la peticiĆ³n del recurso y de la respuesta.
PestaƱa Video (representaciĆ³n en vĆdeo)
ĀæRecuerdas la opciĆ³n de configuraciĆ³n que nos permitĆa crear un vĆdeo con la secuencia de carga?
En esta pestaƱa puedes ver el resultado.
De este modo, puedes visualizar fĆ”cilmente cĆ³mo se van cargando los elementos de tu web.
AdemĆ”s, para hacerte mĆ”s fĆ”cil la tarea, tienes marcas de tiempo sobre el vĆdeo con los momentos clave de cada mĆ©trica y la posibilidad de reproducirlo a velocidad reducida.
PestaƱa History (historial)
La Ćŗltima de las pestaƱas te da acceso al histĆ³rico de tus peticiones.
Si has ejecutado varias veces el mismo test, desde esta secciĆ³n puedes ver la evoluciĆ³n a travĆ©s de diferentes grĆ”ficas.
ComparaciĆ³n de informes
GTmetrix te da la posibilidad de comparar informes entre sĆ.
De este modo, puedes observar las variaciones en el rendimiento de una web bajo diferentes configuraciones (ubicaciones, dispositivos, conexiones, etc).
TambiĆ©n podrĆas comparar dos pĆ”ginas distintas, por ejemplo para estudiar las diferencias con tus competidores.
AsĆ, la pantalla de comparaciĆ³n de informes nos muestra todos los anĆ”lisis, uno a continuaciĆ³n de otro.
En la parte superior observamos sus mƩtricas principales. De un rƔpido vistazo podemos ver los aspectos diferenciales mƔs importantes.
Debajo tenemos informaciĆ³n mĆ”s extendida, agrupada en varias pestaƱas mediante las que podemos comparar:
- Las secuencias de carga.
- Las mƩtricas de rendimiento.
- Las optimizaciones en la estructura.
- Las sucesiĆ³n de peticiones.
Finalmente, en la Ćŗltima pestaƱa tenemos diferentes grĆ”ficas que ponen en contraposiciĆ³n las mĆ©tricas mĆ”s destacadas.
MonitorizaciĆ³n y alertas
Una de las utilidades de GTmetrix es la posibilidad de monitorizar ciertas pƔginas web.
Ahora bien, en la versiĆ³n gratuita esta funcionalidad estĆ” restringida a un Ćŗnico informe y sĆ³lo para aquellos tests que hayas configurado con el servidor web por defecto (Vancouver, CanadĆ”).
Por lo tanto, si quieres una mayor flexibilidad te tocarĆ” pasar por caja.
Para hacer el seguimiento de un informe simplemente tienes que indicarlo a travĆ©s del botĆ³n Monitor que aparece a derecha de la pĆ”gina e indicar la frecuencia de seguimiento.
AdemƔs, puedes definir alertas.
Nuevamente, la opciĆ³n se encuentra en los botones de la derecha de la pĆ”gina.
Tan sĆ³lo tendrĆ”s que definir diferentes condiciones que deben cumplir las mĆ©tricas que desees vigilar para que GTmetrix te envĆe un email si en algĆŗn momento se cumplen.
GTmetrix API
GTmetrix dispone de una API para poder integrar sus mediciones en otras aplicaciones.
Esta API funciona en base a crĆ©ditos. En la versiĆ³n gratuita son prĆ”cticamente testimoniales y van aumentando segĆŗn el plan de pago que contrates.
No obstante, si usas GTmetrix de manera ocasional, las limitaciones de su versiĆ³n gratis pueden ser mĆ”s que suficientes para ti.
Entre las aplicaciones existentes que hace uso de la API, hay que destacar un plugin para wordpress que permite consultar las mƩtricas de GTmetrix desde el propio CMS.
ConclusiĆ³n y opiniones
GTmetrix es una herramienta muy Ćŗtil para mejorar el rendimiento de una pĆ”gina web.
No sĆ³lo te ofrece mĆ©tricas para valorar la velocidad de carga y el comportamiento de la pĆ”gina, sino que ademĆ”s te indica cĆ³mo puedes optimizarla.
Y lo mejor de todo es que puedes utilizar la herramienta de manera gratuita.
Si no quieres, no hace falta ni registrarte.
No obstante, si tienes una web y quieres mejorarla, sĆ que te recomendarĆa abrirte una cuenta.
No pierdes nada y vas a tener acceso a muchas mƔs opciones, que estoy seguro te ayudarƔn a mejorar el rendimiento de tu web.
