Cómo medir el rendimiento del sitio web con Herramientas para desarrolladores de Google Chrome

Este artículo describe cómo usar las Herramientas para desarrolladores de Google Chrome para medir y supervisar el rendimiento de un sitio web.

Uso de Herramientas para desarrolladores de Chrome

El navegador web Google Chrome incluye Herramientas para desarrolladores, una función que ayuda a los desarrolladores web a depurar problemas con HTML, CSS y JavaScript:

• Para acceder a las Herramientas de desarrollador en Microsoft Windows o Linux, presione Ctrl + Mayús + I.
• Para acceder a las Herramientas de desarrollador en Apple Mac OS X, presione Opción + Comando + I.

La siguiente imagen muestra las Herramientas de desarrollador abiertas en la página de inicio de Google:

En la ficha Red del panel Herramientas para desarrolladores, Chrome muestra todas las conexiones de la página actual. Para probar una página específica, abra Herramientas para desarrolladores y vaya a la página que desea probar. Alternativamente, si desea probar la página actual, simplemente actualice la página.

Chrome muestra información para cada recurso de página y su solicitud:

Nombre: El nombre o la URL del recurso solicitado.Método

: El método HTTP (GET o POST).Estado

: El código de estado HTTP devuelto por el servidor.Tipo

: El tipo MIME del recurso.Iniciador

: El referente enviado al servidor; esta suele ser la URL de la página que está viendo.

Tamaño: El tamaño del recurso recibido por el navegador (si la página fue comprimida por el servidor, este valor es menor que el tamaño de archivo real).

Tiempo: El tiempo total para recuperar el recurso, incluido el tiempo de búsqueda y descarga de DNS.

Línea de tiempo: La línea de tiempo es una vista de lapso de tiempo de “cascada” de cada solicitud. Si coloca el puntero del ratón sobre una barra en la cascada, aparecerá una descripción con un desglose detallado del tiempo de descarga:

• Bloqueo: Esto incluye tiempo para la búsqueda de DNS, el apretón de manos SSL y el establecimiento de una conexión con el servidor.
• Envío: Esto incluye tiempo para enviar la solicitud con todos los datos de la solicitud al servidor y para recibir confirmación del servidor de que ha recibido la solicitud.
• Espera: Esto incluye tiempo para que el servidor procese el contenido que se va a servir y comience a enviarlo al navegador.
• Recepción: Esto incluye el tiempo que lleva descargar el contenido.

La combinación de los tiempos de espera y recepción es el factor más importante para determinar la velocidad del sitio. Sin embargo, la velocidad de conexión a Internet también puede afectar el rendimiento, por lo que siempre debe comparar los tiempos desde la misma ubicación cuando establezca puntos de referencia de rendimiento del sitio.

En la parte inferior de la pestaña Red hay un resumen del proceso de carga de la página. Este resumen incluye el número total de solicitudes, el tamaño total de toda la página, incluidos sus recursos, y un desglose del tiempo dedicado a renderizar la página en el navegador.

El valor de la primera vez es el tiempo total dedicado a cargar todo el contenido de la página. Este valor incluye el contenido cargado por JavaScript después de que la página se haya renderizado; como resultado, este número puede cambiar si las solicitudes se producen en segundo plano.

Los dos valores de tiempo Dentro de los paréntesis son eventos importantes para la optimización del sitio:

• cargar: Este evento es el momento de cargar la página, incluidos todos los archivos JavaScript, CSS e imagen que se encuentran en el documento HTML original. Este evento generalmente toma más tiempo que el evento DOMContentLoaded.
• DOMContentLoaded: Este evento representa el tiempo percibido por un usuario para cargar la página. Es el momento de representar la página como se describe en el documento original antes de que JavaScript solicite recursos adicionales. Este tiempo se almacena cuando el navegador activa el evento DOMContentLoaded en JavaScript. (Un ejemplo de recurso que se solicita fuera del DOM es Google Analytics.)