Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Primeros pasos con el análisis del rendimiento de red en Chrome DevTools

Nota: En Optimize Website Speed (Optimización de la velocidad de sitios web) puedes encontrar un enfoque detallado para mejorar la velocidad de carga. Ese instructivo incluye el flujo de trabajo recomendado para analizar el rendimiento de carga.

Usa este instructivo interactivo y detallado para aprender a usar el panel Network de Chrome DevTools a fin de comprender por qué una página carga con lentitud.

Paso 1: Configura DevTools

Supongamos que recibes informes de usuarios móviles que te advierten que una página específica de tu sitio es lenta. Tu trabajo es lograr que la página sea rápida.

  1. Haz clic en Open Slow Page. La página se abre en una pestaña nueva.

  2. Con la página en foco, presiona Command+Option+I (Mac) o Ctrl+Mayús+I (Windows o Linux) para abrir DevTools en la página.

  3. En DevTools, haz clic en la pestaña Network.

    Panel Network de Chrome DevTools abierto en la página
          lenta que deseas diagnosticar.
    Figura 1. Panel Network de Chrome DevTools abierto junto a la página lenta que deseas diagnosticar.

  4. Habilita Capture Screenshots Capture
   Screenshots, que se pone de color azul cuando se habilita. DevTools hace capturas de pantalla durante la carga de la página.

Paso 2: Emula la experiencia de un usuario móvil

Las pruebas de rendimiento de red que se hacen en una laptop o un equipo de escritorio pueden ser engañosas. Tu conexión a Internet es mucho más rápida que la de un usuario de dispositivo móvil, y tu navegador almacena en caché recursos de visitas anteriores.

  1. Marca la casilla de verificación Disable Cache. Cuando esta casilla de verificación está habilitada, DevTools no entrega ningún recurso desde la caché. Esto emula mejor la experiencia inicial de los usuarios cuando visualizan tu página.

  2. En el menú desplegable que actualmente dice No Throttling, selecciona Regular 2G. DevTools aplica un límite a la conexión de red para simular una experiencia 2G normal. Así es como los usuarios móviles experimentan tu sitio cuando no tienen una buena conexión.

Panel Network de Chrome DevTools después de configurar las capturas de pantalla,
         deshabilitar la caché y aplicar un límite a la conexión de red.
Figura 2. Panel Network de Chrome DevTools configurado para emular la experiencia de un usuario móvil. Las capturas de pantalla, la caché deshabilitada y la limitación de la conexión de red están marcadas en azul, de izquierda a derecha, en ese orden.

Esta configuración simula el peor de los casos. Si logras que la página cargue con rapidez con esta configuración, será rápida para todos los usuarios.

Paso 3: Analiza las solicitudes

Para averiguar el motivo por el que la página es lenta, recárgala y analiza las solicitudes que llegan.

Parte A: Busca secuencias de comandos que bloqueen la representación

Cuando el navegador encuentra una etiqueta <script>, debe pausar la representación y ejecutar la secuencia de comandos de inmediato. Busca secuencias de comandos que no sean necesarias para que cargue la página y márcalas como asíncronas o difiere su ejecución para acelerar el tiempo de carga.

  1. Presiona Command+R (Mac) o Ctrl+R (Windows, Linux) para volver a cargar la página. Con una buena conexión inalámbrica, la página tarda más de 10 segundos para cargar por completo.

    Panel Network de Chrome DevTools después de volver a cargar la página.
    Figura 3. Panel Network de Chrome DevTools después de volver a cargar la página.

  2. Toma nota del valor de DOMContentLoaded en el panel Summary, en la parte inferior del panel Network. Deberías ver un valor de al menos 4 segundos. Si ves que este evento se activa tarde como en este caso, busca secuencias de comandos que estén retrasando la carga y el análisis del documento principal.

  3. Haz clic en main.js para investigar la solicitud en más detalle. DevTools muestra un juego de pestañas nuevas que proporcionan más información acerca de esta solicitud.

  4. Haz clic en la pestaña Preview para ver el código fuente de la solicitud. Puedes ver que la secuencia de comandos se detiene durante 4,000 ms. Al marcar esta secuencia de comandos con el atributo async y moverla al final del <body> del documento, la página puede cargarse sin tener que esperar a la secuencia de comandos.

    Visualización del código fuente de main.js en el panel Preview.
    Figura 4. Visualización del código fuente de main.js en el panel Preview.

Consulta Bloquear el analizador en comparación con JavaScript asincrónico para obtener más información acerca de secuencias de comandos que bloquean la representación.

Parte B: Busca solicitudes grandes

Cuando la página se cargó, ¿notaste que el logotipo de DevTools tardó mucho en cargar? No bloquea la carga, pero hace que la página parezca lenta. A los usuarios les gusta que las páginas parezcan rápidas.

  1. Haz clic en Close Close para volver a ver el panel Requests.

  2. Haz doble clic en la captura de pantalla de la parte superior izquierda.

  3. Presiona la tecla de la flecha hacia la derecha para ver todas las capturas de pantalla, una a la vez. El tiempo debajo de la captura de pantalla indica cuándo se generó. La captura de pantalla tarda varios segundos en cargar. Eso significa que probablemente sea un archivo demasiado grande.

  4. Haz clic en cualquier lugar fuera de la captura de pantalla para minimizarla.

  5. Coloca el cursor sobre la cascada de la solicitud de logo-1024px.png. La solicitud pasa la mayor parte de su tiempo descargando la imagen. Esto confirma que la imagen es demasiado grande.

    Cascada de logo-1024px.png.
    Figura 5. Cascada de logo-1024px.png.

Paso 4: Verifica las correcciones en la página actualizada.

Ya casi terminas. Supongamos ahora que ya hiciste dos cambios en la página:

  • Moviste la secuencia de comandos al final del <body> y la marcaste como async para impedir que bloquee la carga de la página.
  • Convertiste el logotipo a SVG para reducir su tamaño.

Todo lo que queda por hacer es probar la página actualizada para verificar que las correcciones realmente hagan que la página se cargue más rápido.

  1. Haz clic en Open Fast Page. La página corregida se abre en una pestaña nueva.

  2. Configura DevTools como antes. La deshabilitación de las capturas de pantalla y la caché deben estar activadas, y la limitación de la red debe estar configurada con el valor Regular 2G.

  3. Vuelve a cargar la página. La página carga mucho más rápido.

    Registro de la carga de la página después de aplicar las correcciones.
    Figura 6. Registro de la carga de la página después de aplicar las correcciones. La página tardaba unos 10 segundos en aparecer completa visualmente. Ahora solo tarda 1 segundo.

Próximos pasos

Buen trabajo. Ya eres todo un experto en el panel Network de Chrome DevTools. Bueno, tal vez no un experto. Pero tienes una base excelente de habilidades y conocimiento.

Comentarios

Was this page helpful?