Módulo 2: Aumentar la velocidad de los sitios web móviles

2.1.1 Herramientas básicas

En este tutorial paso a paso aprenderás a usar el panel Network (Red) de DevTools de Chrome para saber por qué la página se carga lentamente.

Nota: Este tutorial se basa en Chrome 57, es decir, en Canary.

Paso 1: Configurar DevTools

Supongamos que algunos usuarios de dispositivos móviles te indican que una página concreta de tu sitio web funciona con lentitud. Tu trabajo consiste en hacer que la página funcione rápido.

  1. Haz clic en Abrir página lenta. La página se abre en una nueva pestaña.
  2. ABRIR PÁGINA LENTA
  3. En la página, pulsa Comando+Opción+I (Mac) o Control+Mayús+I (Windows y Linux) para abrir DevTools.
  4. En DevTools, haz clic en la pestaña Network (Red).

    Figura 1. El panel Network (Red) de DevTools de Chrome abierto junto a la página que carga lentamente y que se va a diagnosticar.

    Nota: En el resto de capturas de pantalla, se mostrará DevTools en una ventana independiente para que puedas ver mejor el contenido.
  5. Activa Capture Screenshots (Obtener capturas de pantalla) . Cuando lo hagas, se pondrá de color azul. DevTools realiza capturas de pantalla durante la carga de la página.

Paso 2: Emular la experiencia de un usuario de dispositivo móvil

No es fiable probar el rendimiento de la red en un ordenador portátil o de sobremesa. La conexión a Internet es más rápida que la del usuario de un dispositivo móvil y el navegador almacena en caché recursos de visitas anteriores.

  1. Marca la casilla de verificación Disable Cache (Desactivar memoria caché). Si esta casilla está activada, DevTools no utiliza ningún recurso de la memoria caché. De esta manera, se emulará con más precisión la experiencia de los nuevos usuarios cuando vean la página.
  2. En el menú desplegable que indica No Throttling (Sin limitación), selecciona Regular 3G (Conexión 3G estándar). DevTools limita la conexión de red para simular una experiencia 3G estándar. Así es cómo verán los usuarios de dispositivos móviles el sitio web en lugares con conexiones de baja calidad.

Figura 2. El panel Network (Red) de DevTools de Chrome configurado para emular la experiencia de un usuario de dispositivo móvil. Las opciones de captura de pantalla, desactivación de la memoria caché y limitación se muestran en color azul y de izquierda a derecha, respectivamente.

Esta sería la configuración para el peor de los casos. Si consigues que la página cargue rápido con esta configuración, cargará rápido para todos los usuarios.

Paso 3: Analizar solicitudes

Al volver a cargar la página y analizar las solicitudes que recibimos, averiguaremos qué es lo que provoca que la página sea lenta.

Parte A: Encontrar secuencias de comandos que bloquean el renderizado

Cuando el navegador detecta una etiqueta <script>, debe pausar el renderizado y ejecutar la secuencia de comandos inmediatamente. Encuentra secuencias de comandos que no son necesarias para que la página se cargue y márcalas como asíncronas o aplaza su ejecución para acelerar el tiempo de carga.

  1. Pulsa Comando+R (Mac) o Control+R (Windows, Linux) para volver a cargar la página. La página tarda más de 10 segundos en cargarse completamente con una buena conexión Wi-Fi.

    Figura 3. El panel Network (Red) de DevTools de Chrome tras volver a cargar la página.

  2. Observa el valor de DOMContentLoaded en el panel Summary (Resumen) que aparece en la parte inferior del panel Network (Red). Deberías ver un valor de 4 segundos como mínimo. Cuando veas que este evento se activa tarde, como en este caso, comprueba las secuencias de comando que están retrasando la carga y el análisis del documento principal.
  3. Haz clic en main.js para investigar dicha solicitud. DevTools muestra un conjunto de pestañas nuevas que proporcionan más información acerca de la solicitud.
  4. Haz clic en la pestaña Preview (Vista previa) para ver el código fuente de la solicitud. Puedes ver que la secuencia de comandos no responde durante 4000 ms. Si marcas esta secuencia de comandos con el atributo asíncrono y la trasladas a la parte inferior de <body> en el documento, la página se puede cargar sin tener que esperar a la secuencia de comandos.

Figura 4. Vista del código fuente de main.js en el panel Preview (Vista previa).

Consulta el artículo Parser-blocking versus asynchronous JavaScript (Comparación de bloqueo del analizador con JavaScript asíncrono) para obtener más información sobre secuencias de comandos que bloquean el renderizado.

Parte B: Encontrar solicitudes de gran tamaño

Cuando la página se cargó, ¿te diste cuenta de que el logotipo de DevTools tardó mucho en cargarse? No bloquea la carga, pero da la impresión de que la página se carga lentamente. A los usuarios les gusta que las páginas sean rápidas.

  1. Haz clic en Close (Cerrar) para volver a ver el panel Requests (Solicitudes).
  2. Haz doble clic en la parte superior izquierda de la captura de pantalla.
  3. Pulsa la tecla de flecha derecha para examinar el conjunto de capturas de pantalla. El tiempo que aparece debajo de la captura de pantalla indica cuándo se realizó. La captura de pantalla tarda varios segundos en cargarse. Esto significa que es probable que el archivo sea muy grande.
  4. Haz clic en cualquier parte fuera de la captura de pantalla para minimizarla.
  5. Coloca el cursor sobre la cascada de la solicitud logo-1024px.png. La solicitud dedica la mayor parte del tiempo a descargar la imagen. Esto nos confirma que la imagen es demasiado grande.

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

Paso 4: Comprobar las correcciones en la página actualizada

Ya casi has terminado. Supongamos que ya has realizado dos cambios en la página:

  • Has trasladado la secuencia de comandos a la parte inferior de <body> y la has marcado como asíncrona para que no impida que la página se cargue.
  • Has convertido el logotipo en una imagen SVG para reducir su tamaño.

Solo queda probar la página actualizada para verificar que las correcciones que has realizado permiten que la página se cargue más rápido.

  1. Haz clic en Abrir página rápida. La página corregida se abre en una nueva pestaña.
  2. ABRIR PÁGINA RÁPIDA
  3. Configura DevTools igual que antes. Habilita las capturas de pantalla y la desactivación de la memoria caché y configura la limitación de red como Regular 3G (Conexión 3G estándar).
  4. Vuelve a cargar la página. La página se carga mucho más rápido.

Figura 6. Registro de la carga de la página después de aplicar las correcciones. La página tardaba 10 segundos en visualizarse completamente. Ahora solo tarda un segundo.

¿Te ha sido útil este artículo?
¿Cómo podemos mejorar esta página?