¿Qué es GTmetrix?
GTmetrix es una herramienta de análisis de rendimiento y velocidad de página extremadamente popular y gratuita desarrollada por la amable gente de GT.net , una empresa de alojamiento web con sede en Vancouver.
Combina lo mejor de las pruebas PageSpeed de Google con la matriz de puntuación YSlow de Yahoo.
Lo que hizo que esta herramienta fuera tan popular es que proporciona una gran cantidad de datos calificados sobre exactamente qué está causando los problemas de velocidad de su sitio.
Y lo hace de una forma mucho más práctica y visual que la igualmente popular herramienta Google Pagespeed Insights.
Además, existe la ventaja adicional de que GTmetrix también interactúa completamente con WordPress a través de su complemento , disponible en el repositorio de WP.
Para que puedas realizar pruebas de velocidad sin tener que alquilar tu panel de WordPress:
Sin embargo, el problema con estas herramientas de análisis de velocidad es que los resultados que arrojan suelen ser un poco crípticos y no muy claros.
Entonces, en esta publicación, mi objetivo es identificar los problemas más comunes que pueden aparecer cuando usa GTmetrix y decirle qué significan y qué considerar para solucionarlos.
De esta manera, puedes acelerar tu sitio por tu cuenta, incluso si no eres un nerd en tecnología.
Nota: Tendrá que registrarse para obtener una cuenta GTmetrix gratuita para generar la clave API necesaria para ejecutar este complemento.
Configurando la prueba perfecta
También recomendamos encarecidamente crear una cuenta gratuita en GTmetrix si desea aprovechar al máximo esta herramienta.
No es necesario que proporciones información de pago, por lo que no hay excusa para no registrarte.
Ah, y también es muy importante si desea configurar correctamente los parámetros para su prueba.
Ubicación del servidor de prueba
Elija el servidor que sea más cercano geográficamente al suyo.
Esto le brindará una representación precisa de la experiencia real del usuario basada en puntuaciones de velocidad de página localizadas.
tipo de navegador
A continuación, puede elegir qué navegador de escritorio o móvil se utilizará para probar la representación de su URL:
Velocidad de conexión
También puede elegir la velocidad de conexión con la que se debe realizar la prueba, por ejemplo, 3G frente a Fast Broadband.
Esta es una configuración crítica si estás probando cómo se cargan y muestran las páginas en dispositivos móviles:
También hay algunas opciones de prueba adicionales que puede activar o desactivar:
- Crear video: esto genera un video corto que muestra exactamente cómo se carga su página, lo que le permite identificar componentes que podrían bloquear o ralentizar el procesamiento.
- Adblock Plus: puede utilizar esta configuración para desactivar los anuncios y evaluar cómo afectan la velocidad general de su sitio.
- Detener la carga de la prueba: las pruebas de GTmetrix esperan de forma predeterminada 2 segundos de inactividad de la red antes de calificar su sitio, lo que a veces puede sesgar los datos de los resultados. Puede dejar esto deshabilitado en la mayoría de las circunstancias.
Cómo leer un informe de rendimiento de GTmetrix
Comencemos desde arriba con el panel de informes: esta es una descripción general «de un vistazo» del rendimiento de su URL:
- PageSpeed: esta es la calificación que recibe su página según las métricas de Google.
- YSlow : esta es la calificación que recibió su página en función de cómo la calificaría Yahoo.
En el ejemplo anterior, nuestra puntuación de PageSpeed es del 72 % (calificación C), por lo que tenemos trabajo por hacer.
Nuestro puntaje YSlow es 81% (calificación B), lo cual no es perfecto, pero probablemente solo necesitemos modificar un poco las cosas para acercarlo a una calificación del 90% (calificación A).
El siguiente conjunto de resultados que debemos considerar son los ‘Detalles de la página’:
1. Tiempo completamente cargado
El tiempo necesario para que su página se vuelva interactiva en el navegador de prueba.
2. Tamaño total de página
La cantidad total de datos descargados al servidor de prueba, incluidos todos los activos multimedia, como imágenes.
3. Solicitudes
Esta es la cantidad de solicitudes HTTP individuales generadas por su sitio a través de scripts, CSS, etc.
Recomendaciones de PageSpeed
Ahora echemos un vistazo a los problemas que tienen el mayor impacto en la velocidad de su página y los pasos que puede seguir para solucionarlos.
Optimizar imágenes
Las imágenes representan al menos el 60% del peso total de una página, por lo que las imágenes no optimizadas son la causa principal de que las páginas se carguen lentamente.
Como puede ver, obtuvimos una F en esta sección, pero podemos solucionar este problema usando un complemento como Smush , o incluso mejor usando ShortPixel .
Servir imágenes escaladas
Si carga imágenes que son demasiado grandes o demasiado pequeñas, su tema y/o navegador intentarán cambiar su tamaño.
Obviamente, hacer esto hace que esa página en particular se cargue más lentamente.
Entonces, el truco consiste en ofrecer imágenes escaladas que sean » perfectas «.
Minimizar redirecciones
Los redireccionamientos suelen ocurrir cuando cambia la URL de una página y redirige la página anterior a la nueva. Si su sitio tiene docenas de redireccionamientos, puede afectar seriamente la velocidad de su sitio.
La solución simple aquí es, en primer lugar, evitar el uso de redireccionamientos aprendiendo las mejores prácticas para la estructura de URL .
Si ya tiene varias redirecciones en cadena, puede usar un complemento como redirección para cortar varias redirecciones en una sola.
Esto es importante y mejorará la calidad de su estructura de enlaces internos y el «jugo de enlace» se pierde en las redirecciones de cadena larga.
Minimizar CSS y JS
La minificación básicamente significa eliminar todo el espacio no utilizado que queda en el código debido al formateo. Incluso un espacio en blanco tiene un tamaño en bytes, por lo que minimizar archivos CSS, JavaScript y HTML puede reducir el tamaño del archivo, aumentando la velocidad de la página en el proceso.
La mayoría de los complementos de almacenamiento en caché gratuitos ofrecen al menos alguna funcionalidad de minificación, pero WP Rocket ( revisión ) es la mejor de las opciones pagas que existen.
Tenga en cuenta que si no quiere o no puede usar un complemento de almacenamiento en caché, Cloudflare también minimiza CSS y Javacript a nivel de CDN.
CSS y JS en línea
La mejor práctica para optimizar la velocidad del sitio suele ser combinar secuencias de comandos de varias páginas en una sola secuencia de comandos que luego se puede cargar de forma asincrónica.
Pero si los scripts se componen de sólo unas pocas líneas de código, a veces puede tener más sentido colocarlos en línea en la página.
Entonces, si su puntaje es realmente malo, pídale a un desarrollador que mueva la mayor parte de su CSS en línea a su hoja de estilos CSS. Pero si todavía está en verde, considere ignorarlo, de todos modos no agrega mucho tiempo de carga de la página.
Aplazar el análisis de JavaScript
Las solicitudes de JavaScript son uno de los principales culpables de los tiempos de carga lentos de las páginas. Esto se debe a que todos los elementos script deben cargarse antes que otros elementos de la página, incluso si es solo su código de Google Analytics.
Esto se conoce como «bloqueo de renderizado». Y a menudo esto se debe a complementos de WordPress mal codificados .
Puede solucionar este problema con la función » Agregar archivos JS » en el excelente (y gratuito) Autoptimize .
Aprovechar el almacenamiento en caché del navegador
El almacenamiento en caché del navegador es donde el navegador de destino almacena contenido estático para un sitio localmente, generalmente cosas como imágenes o cualquier otro activo de gran tamaño.
Esto evita que el navegador envíe una solicitud HTTP a un servidor.
Puede implementar el almacenamiento en caché del navegador con un complemento de almacenamiento en caché gratuito como W3 Total Cache.
Algunos hosts como Siteground o Kinsta ofrecen su propia solución de almacenamiento en caché, así que consulte primero con su proveedor, ya que sus soluciones suelen estar personalizadas para la configuración de su servidor.
Habilitar la compresión gzip
Esta es una forma del lado del servidor de reducir el tamaño de los archivos sobre la marcha. Archivos pequeños = tiempos de carga de página más rápidos. Piense en ello como WinZip o WinRAR para su servidor web.
Puede configurar la compresión gzip usted mismo , pedirle a su servidor web que lo haga o usar algo como Cloudflare CDN en su lugar .
Recomendaciones lentas
Para esta sección, nos centraremos solo en las métricas que son exclusivas de la puntuación YSlow porque aquí hay un poco de superposición con PageSpeed.
Utilice una red de entrega de contenido
Una red de entrega de contenido básicamente almacena una copia de su sitio en servidores en diferentes ubicaciones alrededor del mundo.
Hacer esto garantiza que alguien que viva en Francia no experimente ningún retraso perceptible cuando vea su contenido en un servidor con sede en EE. UU.
Hay muchos CDNS disponibles en este momento, pero Cloudflare es nuestro favorito.
Agregar encabezados de vencimiento
Un ‘Encabezado de caducidad’ es un pequeño fragmento de código en su sitio que le indica a un servidor cuándo ya no usar una versión almacenada en caché de la página y cargar una nueva en su lugar.
Estos pueden tener mucho sentido si tiene contenido que no cambia dramáticamente o con mucha frecuencia.
Puede aprender cómo implementar ‘Encabezados de vencimiento’ aquí .
Nota: Hacer esto incorrectamente podría «romper» su tema, así que tenga cuidado.
Utilice dominios sin cookies
Las cookies son pequeños archivos de texto que se envían a la computadora de un visitante para personalizar su experiencia de visualización o para asegurarse de obtener crédito por una venta de afiliado, por ejemplo.
Cuantas más cookies se envíen desde su página, más lenta se vuelve, lo que se refleja en esta parte de su puntuación YSlow.
Por lo tanto, es una buena práctica utilizar dominios sin cookies para optimizar la velocidad de su sitio.
Sin embargo, si necesita utilizar cookies para servicios como anuncios de Facebook, Google Analytics u otros, NO las elimine por razones de velocidad del sitio. No vale la pena.
Simplemente evite usarlos en exceso si realmente no utiliza los servicios asociados.
Evite el error HTTP 404 (No encontrado)
Los propietarios de sitios saben que deben evitar dirigir a las personas a páginas «rotas», pero esto nos sucede a todos.
Los 404 son un problema porque son una respuesta generada por el servidor después de que ha transcurrido un cierto tiempo al intentar cargar la página que falta.
Puede utilizar un complemento de verificación de enlaces rotos (no es ideal) o la versión gratuita del rastreador Screaming Frog para rastrear 404 en su sitio.
Reducir las búsquedas de DNS
Una búsqueda de DNS es cuando su sitio tiene que consultar un servidor DNS para encontrar la dirección IP actual de un sitio web.
Un puñado de búsquedas de DNS no son un problema, pero si su sitio genera docenas, esto puede causar problemas con la velocidad de la página.
Si ese es el caso de su sitio, deberá recortar la cantidad de búsquedas de DNS que genera su sitio.
Cascada
Este es un gráfico de cada solicitud realizada por su sitio, incluidos archivos multimedia, JavaScript, CSS, etc.
Lo bueno de la función ‘Cascada’ es que elimina las conjeturas sobre lo que podría estar ralentizando su sitio.
En su lugar, puede ver una representación visual y en qué orden se ejecutó cada solicitud.
Las bandas de colores tienen el siguiente significado:
- Verde azulado: búsqueda de DNS
- Marrón – Bloqueo
- Verde – Conectando
- Rojo – Enviando
- Púrpura – Esperando
- Gris: recepción
En el ejemplo anterior, podemos ver que a medida que se carga la página, los retrasos más prolongados se producen después de que se haya cargado el certificado SSL.
Esto podría indicar que se está utilizando un servidor lento o compartido.
Luego, si nos desplazamos un poco más hacia abajo podremos ver grandes secciones de color marrón:
Cada una de estas secciones marrones indica que otros elementos de la página no se pueden cargar hasta que se hayan cargado estos elementos JS y CSS.
Entonces, la solución fácil a este problema en particular es posponer el análisis de ambos tipos de archivos usando el complemento Autoptimize y minimizarlos con un complemento de almacenamiento en caché como WP Rocket .
Horarios
Esto es muy similar a lo que encontrarías en un resultado típico de PageSpeed de Google debido a la terminología que utiliza, es decir, «Pintura con contenido».
- Entonces, como puede ver, el servidor entrega el primer byte de datos (tiempo hasta el primer byte) al navegador después de 119 ms.
- La ‘Primera pintura’ se realiza después de 366 ms: este es el tiempo que se tarda en representar cualquier página de la página en el navegador.
- La «Primera pintura de contenido» se lleva a cabo al mismo tiempo, por lo que el usuario ya está comenzando a ver parte del contenido del sitio.
- Después de 1,4 segundos, el DOM (modelo de objetos de documento) se ha cargado, por lo que todos los scripts comenzarán a cargarse.
- El sitio ahora debería estar completamente cargado (Onload) después de 9,0 segundos.
La puntuación importante a la que prestar atención aquí es el tiempo de «carga» porque indica que el diseño del sitio es demasiado complejo y/o hay docenas de solicitudes HTTP generadas por múltiples archivos JS.
418 de ellos, para ser exactos.
Sí, hay una diferencia de casi 4 segundos entre el tiempo de ‘carga’ y el ‘tiempo de carga completa’ porque GTmetrix ahora espera 2 segundos de inactividad de la red antes de calcular la puntuación de ‘completamente cargada’.
Y también hay que tener en cuenta que el disparador ‘Onload’ a veces omite algunos eventos, lo que representa los otros 1,8 segundos.
Alternativas a GTmetrix
Entonces, ¿estás buscando algo un poco diferente a GTmetrix?
A continuación te presentamos algunas opciones para que las consultes.
pingdom
Pingdom es ideal si no solo desea ejecutar pruebas de velocidad detalladas, sino que también necesita un monitoreo activo de su(s) sitio(s).
Es un servicio pago, pero puedes obtener una prueba gratuita sin tener que utilizar una tarjeta de crédito.
Estadísticas de PageSpeed de Google
Esta es una excelente herramienta gratuita de Google para ejecutar pruebas de velocidad de sitios; solo vale la pena echarle un vistazo a las pruebas de velocidad para dispositivos móviles.
Visualmente esta herramienta ha avanzado mucho en los últimos 12 meses.
Prueba de página web
Web Page Test es algo antiguo pero bueno, y sigue siendo muy popular entre los SEO y los diseñadores de sitios. Incluye una función de cascada similar a la de GTmetrix y la función TraceRT también es bastante interesante.
Y, por último, también puedes utilizar las funciones básicas de prueba de velocidad que se encuentran en Google Analytics:
Los datos que encontrará aquí son interesantes porque le brindan una indicación clara de los resultados de velocidad de la página en múltiples dispositivos en todo el mundo.
Conclusión
Realmente esperamos que haya disfrutado de nuestro recorrido por GTmetrix y que pueda apreciar mejor la cantidad de datos que realmente le brinda esta herramienta, de forma gratuita, para mejorar el rendimiento de su sitio.
¡Háganos saber en los comentarios a continuación si logró mejorar la velocidad de su sitio con alguno de los consejos que encontró en esta publicación!