Medir rendimiento web en consola

En este artículo vamos a explicar cómo podemos medir el rendimiento de una web en la consola del navegador. Este artículo forma parte de la serie la consola del navegador. Una serie de diez artículos donde se explican todas las funcionalidades de la consola del navegador y que facilitan el proceso de desarrollo, depuración y optimización de sitios y aplicaciones web.

La capacidad de medir el rendimiento de una web en tiempo real en la consola del navegador es una herramienta potente para los desarrolladores web. En este artículo, vamos a explicar cómo utilizar esta funcionalidad para probar, depurar y optimizar el rendimiento de nuestras webs de manera rápida y eficiente.

Medir rendimiento de red en consola

La consola del navegador no solo es útil para depurar JavaScript y aplicar estilos CSS en vivo, sino que también proporciona herramientas interesantes para medir el rendimiento de una página web y depurar problemas de red. En este artículo, vamos a explicar cómo utilizar la consola para medir y analizar el rendimiento web y resolver problemas relacionados con la red.

Medir el rendimiento web

Al abrir la consola y seleccionar la pestaña de «Red» podemos acceder a recursos para depurar problemas de red, como solicitudes HTTP, tiempos de carga y errores de red.

Tiempos de carga de la página

Una de las funciones de rendimiento más importantes de la consola es medir el tiempo que tarda una página web en cargarse completamente. Esto se puede hacer utilizando el panel de «Rendimiento» de la consola, que proporciona una desglose detallado de los recursos cargados y el tiempo que tardó cada uno en descargarse.

Una vez en el panel de rendimiento, puedes iniciar la grabación de la carga de la página y luego detenerla para ver el resultado. Esto te dará una visión detallada de los recursos cargados y los tiempos de carga asociados.

Esto incluye métricas importantes como el tiempo total de carga de la página, el tiempo de inicio de la carga, el tiempo de respuesta del servidor, el tiempo de descarga de los recursos y más.

Uso de recursos

Además de medir el rendimiento de los tiempos de carga de la web, la consola también proporciona información sobre el uso de recursos, el consumo de CPU, la memoria o el ancho de banda de red. Esto es útil para identificar posibles cuellos de botella y optimizar el rendimiento general de la página.

Registro de solicitudes HTTP

El panel de «Red» de la consola es una herramienta que también permite depurar problemas relacionados con solicitudes HTTP fallidas o lentas. Este panel muestra una lista detallada de todas las solicitudes realizadas por la página, incluyendo su método, estado, tiempo de carga y tamaño. Esto incluye solicitudes de recursos como archivos HTML, CSS, JavaScript, imágenes y solicitudes de API.

Cada solicitud se muestra en la lista junto con información detallada, como la URL solicitada, el método HTTP utilizado (GET, POST, etc.), el código de estado de la respuesta, el tiempo de carga y el tamaño de la respuesta.

Análisis de errores de red

Además de registrar las solicitudes HTTP, el panel de red también puede mostrar errores específicos que pueden estar afectando el rendimiento de la página. Estos errores pueden incluir problemas de conexión, tiempos de espera agotados y solicitudes fallidas.

Al utilizar la consola para depurar problemas de red, es importante prestar atención a los errores y advertencias que se muestran en el panel de red. Estos pueden proporcionar pistas importantes sobre la causa subyacente del problema y ayudarte a tomar medidas correctivas.

Ejemplos de medir rendimiento web

Una forma sencilla y práctica de medir el rendimiento de una página web en la consola, podría ser comprobar la velocidad de ejecución de un código JavaScript con las siguientes instrucciones:

console.time('Inicio código');
// Código JavaScript ...
console.timeEnd('Fin de código');

Este código permite medir el tiempo que tarda una sección específica de código JavaScript en ejecutarse. Esto puede ser útil para identificar cuellos de botella en el rendimiento de la página y optimizar el código para mejorar la velocidad y rendimiento de ejecución.

Registro de solicitudes HTTP

fetch('https://api.example.com/data')
  .then(response => {
    console.log('Solicitud exitosa:', response);
  })
  .catch(error => {
    console.error('Error en la solicitud:', error);
  });

Este código utiliza la API Fetch para realizar una solicitud HTTP a una URL específica y maneja tanto la respuesta exitosa como los errores que puedan ocurrir durante la solicitud. Esto es útil para interactuar con servicios web y recuperar datos de forma asíncrona en aplicaciones web.

En la consola del navegador, verás mensajes impresos dependiendo del resultado de la solicitud:

Si la solicitud se completa con éxito, verás un mensaje que indica «Solicitud exitosa», seguido de información sobre la respuesta de la solicitud. La información de la respuesta puede incluir el estado de la respuesta (por ejemplo, 200 OK), los encabezados de la respuesta y los datos devueltos por el servidor.
Si ocurre un error durante la solicitud, verás un mensaje que indica «Error en la solicitud», seguido de información sobre el error que ocurrió durante la solicitud. Esto puede incluir un mensaje de error específico, como «NetworkError», «TypeError», etc., junto con detalles adicionales sobre el error.

Los mensajes impresos en la consola del navegador proporcionan información sobre el resultado de la solicitud. Esto te ayudarán a depurar y solucionar problemas relacionados con la comunicación con el servidor.