5 Extensiones para medir el rendimiento de tu web

¡Hola! ¿Cómo estás hoy? Seguro que genial 🙂 Hoy te traigo un post que te va a resultar muy útil para mejorar el rendimiento de tu página web. Como sabes, este aspecto (conocido también como WPO, siglas de Web Performance Optimization) es fundamental para que la experiencia de usuario de tus visitantes sea grata. Un tiempo de carga que exceda los 3 segundos (4 a lo sumo) se traduce en pérdida de tráfico y por tanto de oportunidades de venta.

Ya te enseñé algunos trucos para optimizar tu web y también cómo aumentar el tiempo de permanencia de los usuarios en la misma. En este post te voy a enseñar 5 extensiones para medir el rendimiento de tu web y con la información que obtengas de esos análisis sabrás qué puntos debes mejorar. Recuerda que el rendimiento de tu web afecta de un modo directo al posicionamiento SEO de tu sitio.

Extensiones de Chrome para WPO (Web Performance Optimization)

En uno de los post que te mencionaba antes ya te enseñé la herramienta GTmetrix que sirve precisamente para analizar el rendimiento de tu página. En esta ocasión no tendrás que visitar otra web para poder hacer dicho análisis, sino que podrás usar herramientas para pruebas de rendimiento directamente desde el navegador, sin abandonar la página que estés viendo. Incluso algunas de ellas te mostrarán información sin siquiera hacer clic en el botón. Vamos a verlas juntos y luego me pones un comentario y me cuentas cuál te parece mejor, ¿trato? 😉

Lighthouse

Empezamos con la más completa de todas, por algo es del propio Google. Se llama Lighthouse y es la herramienta de la que PageSpeed Insights obtiene sus datos.

Lighthouse extension chrome

 

Esta herramienta de análisis web puede funcionar directamente con el botón que la extensión coloca junto a la barra de direcciones del navegador. Como ves en la imagen anterior, pulsando en dicho botón podrás comenzar a analizar la página web que estés viendo. No obstante, te recomiendo que lo hagas de otra manera que te permitirá más control sobre el análisis.

Buceando en Lighthouse

Una vez que tengas cargada la página web que quieres analizar, ve al menú de Chrome y selecciona Ver > Opciones para desarrolladores > Herramientas para desarrolladores. En la ventanita que se te abre, arriba, busca una pestaña que se llame Audits y haz clic sobre ella.

Opciones de Lighthouse

Aquí podrás configurar las opciones que quieres para auditar tu sitio eligiendo entre móvil o escritorio, las características que quieres que mida así como si deseas que simule carga a través de 3G. Una vez configurado a tu gusto, haz clic en el botón azul y comenzará la auditoría de tu web. Cuando acabe, podrás ver el resultado directamente en pantalla.Además podrás exportarlo en un archivo JSON pulsando la flecha de descarga situada en la parte superior de la pestaña Audits.

También podrás, sin abandonar la pestaña, realizar un nuevo análisis cambiando las opciones que consideres sin perder el primero, por lo que podrás comparar uno y otro fácilmente cambiando entre ellos en el desplegable situado junto al botón de descarga del informe. Para hacer un nuevo análisis pulsa en el + que hay en la esquina superior izquierda, verás de nuevo las opciones de configuración.

Resultados analisis Lighthouse

¡Importante! No cambies de pestaña mientras se realiza el análisis o se producirá un error, quédate contemplando el espectáculo 🙂

Performance-Analyser

Otra utilidad que te dará toneladas de información sobre el tiempo de carga y rendimiento web de tu sitio. Performance-Analyser actúa mientras se carga la página, por lo que podrás ver los resultados inmediatamente, sin tener que realizar ningún proceso más.

Performance-Analyser extension Chrome

Como te digo, una vez que la web esté completamente cargada, sólo tendrás que hacer clic en el botón que la extensión habrá colocado junto a tu barra de direcciones y se sobrepondrá un popup con toda la información de carga de tu web.

La primera tanda de información, la que aparece sombreada en gris, es la que te informa del tiempo de carga y número de solicitudes. Debajo de ello puedes ver multitud de gráficos que te dan información mucho más detallada. Puedes ver cuántas solicitudes se hacen a cada dominio, cuánto tiempo tardan, qué tipos de archivo se solicitan, el desglose completo del tiempo de carga de cada archivo… No es el objeto de este post explicar todo eso al detalle, pero analízalo porque te puede ayudar mucho a mejorar el rendimiento de tu sitio. Si quieres que escriba un post explicando qué significa cada cosa, pídemelo en los comentarios.

Resultados Performance-Analyser

Sitespeed Report

Con esta extensión obtendremos bastante menos información que con las dos anteriores, pero es una buena herramienta para tener una rápida visión general del tiempo de carga de tu página.

Sitespeed Report extension Chrome

Sitespeed Report organiza la información en tres columnas que te informan, por este orden, del tiempo de carga de los datos de la página, el tiempo de carga de los datos del servidor y el tiempo de carga del cliente (el navegador). Debajo de ello encontrarás información técnica sobre el uso de la memoria. Por último, podrás ver el número de recursos que se cargan separados por tipo.

Resultados Sitespeed Report

 

Analyze Page Performance

Analyze Page Performance, sin dar demasiada información, es una extensión que resulta de muchísima utilidad. Te cuento por qué.

Analyze Page Performance extension Chrome

Lo que más me gusta de Analyze Page Performance es que muestra el tiempo de carga de la página que estás viendo directamente en el botón de la extensión. Es decir, a un golpe de vista puedes ver cuánto tiempo ha tomado cargar dicha página. Esto resulta francamente cómodo si estás navegando por las diferentes páginas de un sitio y quieres tener una información general de cuánto tarda en cargar cada una de ellas. Esto tiene sentido si quieres realizar una primera criba para priorizar dónde comenzarás con la optimización web.

Por supuesto, si haces clic en el botón desplegará una ventana con información detallada dividida en dos pestañas. Una te mostrará el tiempo de carga, desglosado por los diferentes procesos que tienen lugar. La otra te proporcionará información sobre los recursos que se cargan y cuánto tiempo toma hacerlo, si hay redirecciones en la página, contenedores de imagen vacíos y iframes.

Resultados Analyze Page Performance

Resultados recursosAnalyze Page Performance

Por ponerle un pero, la ventana es demasiado pequeña para analizar la información que proporciona sobre los recursos y no hay manera de exportarla, eso sería un punto a mejorar en el futuro. No obstante, como te he dicho antes, el hecho de que proporcione la información directamente sobre el propio icono compensa el tener esta extensión instalada en tu navegador.

First Paint & Page Load Time

Última extensión de esta recopilación de utilidades para medir el rendimiento web. Esta herramienta, al igual que la anterior, no te ofrecerá ninguna información que no hayas podido obtener con cualquiera de las otras extensiones analizadas en este post. Sin embargo, y de nuevo igual que la anterior, tiene un detalle que la hace fija en mi barra de extensiones.

First Paint Page Load Time

Esta característica es que, del mismo modo que con Analyze Page Performance podías ver el tiempo de carga total de la página a un golpe de vista, con esta tendrás en el mismo botón de la extensión, el tiempo de la primera impresión. Es decir, el tiempo que pasa desde que se solicita la carga de la web hasta que algo (lo que sea) aparece en pantalla. Esto es una métrica que puedes analizar del mismo modo que la anterior, navegando por las diferentes páginas del sitio y viendo las posibles diferencias entre ellas para ver dónde actuarás primero. Este mismo valor te lo ofrecía Lighthouse en su informe como First Contentful Paint.

Aparte de eso, si haces clic en el botón obtendrás información detallada dividida en dos pestañas, Una para las 10 solicitudes que tardan más en cargar y otra con estadísticas de carga. De nuevo aquí tendrás una buena guía de dónde poner el foco primero.

Resultados First Paint Page Load Time RequestsResultados First Paint Page Load Time

Infografía

Por último te dejo una infografía con lo mejor y lo peor de cada extensión. Si quieres descargarla en alta resolución, haz clic aquí.

Extensiones de Chrome para medir el rendimiento web

Conclusión

Como has podido ver, todas las extensiones que aquí te enseño son realmente útiles a la hora de analizar tu página (o la de tus clientes, o la de tu competencia 😉 ) y ver el estado en el que se encuentra. Gracias a ellas sabrás exactamente qué hace que tu página cargue lenta y podrás actuar en consecuencia para solucionarlo, consiguiendo así mayor permanencia en tu sitio y menos porcentaje de rebote. Si te ha parecido útil este post, por favor, comparte y comenta. Y si además lo puntúas con 5 estrellas, entonces ya te hacemos la ola 😀 ¡Gracias por adelantado!

Por favor, puntúa este post.
[Total: 3 Media: 5]

Deja un comentario

Los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Elena Maíllo Caballero como responsable del Sitio Web, siendo la Finalidad: gestionar los comentarios; la Legitimación: se produce gracias a tu consentimiento explícito. Destinatarios: Tus datos serán guardados en Webempresa; Derechos: Podrás ejercer Tus Derechos de Acceso, Rectificación, Limitación o Suprimir tus datos escribiéndome un correo a hola@plan-ab.es. Para más información, te recomiendo que leas mi Política de Privacidad.