¿Cómo medir la velocidad de carga de un sitio web…

La velocidad de carga de un sitio web se puede medir de varias maneras:

Herramientas de desarrollo en el navegador:
- Abrir la pestaña "Network" (Red) en las herramientas de desarrollo (F12).
- Actualizar la página.
- Analizar los indicadores de tiempo para cada recurso (HTML, CSS, JS, imágenes):
  - Waiting (TTFB): Tiempo hasta recibir el primer byte del servidor.
  - Content Download: Tiempo de descarga del contenido.
  - Total: Tiempo total de carga del recurso.
- Prestar atención al diagrama Waterfall (cascada) para visualizar la secuencia de carga de recursos.
- Analizar el Resumen (Summary) en la parte inferior de la pestaña para el tiempo total de carga y la cantidad de solicitudes.
Servicios en línea para medir la velocidad:
- Google PageSpeed Insights: Analiza el rendimiento en dispositivos móviles y de escritorio, ofrece recomendaciones de optimización.
- GTmetrix: Proporciona métricas de PageSpeed y YSlow, informe detallado de carga, rendimiento y recomendaciones.
- Pingdom Website Speed Test: Mide la velocidad desde diferentes ubicaciones, ofrece análisis detallado del rendimiento.
- WebPageTest: Permite probar desde diferentes ubicaciones y navegadores, proporciona muchas métricas y visualización.
Métricas a las que vale la pena prestar atención:
- Time to First Byte (TTFB): Tiempo hasta recibir el primer byte del servidor.
- Largest Contentful Paint (LCP): Tiempo en que aparece el elemento de contenido más grande en la parte visible de la pantalla.
- First Input Delay (FID): Tiempo desde la primera interacción del usuario con el sitio hasta la respuesta del navegador.
- Cumulative Layout Shift (CLS): Indicador total de desplazamiento del diseño durante la carga.
- DOMContentLoaded: Tiempo en que el navegador ha cargado y analizado completamente el documento HTML.
- Load: Tiempo de carga completa de todos los recursos de la página.

Automatización con frameworks:

Lighthouse (herramienta de Google): Se puede usar como herramienta CLI o integrarse en pipelines CI/CD.

# Ejemplo de uso de Lighthouse CLI
lighthouse https://www.ejemplo.com --output json,html --output-path ./reporte.json

Selenium/WebDriver: Se puede usar para cargar la página y obtener el tiempo de carga mediante la API Performance de JavaScript.

# Ejemplo de obtención del tiempo de carga con Selenium y Performance API
from selenium import webdriver
import time

driver = webdriver.Chrome() # O otro navegador
driver.get("https://www.ejemplo.com")

# Esperar a que la página cargue completamente
time.sleep(5) # Se pueden usar esperas más confiables

# Obtener el objeto PerformanceTiming
performance_timing = driver.execute_script("return window.performance.timing")

# Calcular el tiempo de carga
load_time = performance_timing['loadEventEnd'] - performance_timing['navigationStart']
print(f"Tiempo de carga: {load_time} ms")

driver.quit()

Cypress: También proporciona acceso a la API Performance.

Sistemas de Monitoreo en Tiempo Real (RUM):
- Herramientas que recopilan datos de rendimiento directamente de usuarios reales en el sitio. Ejemplos: Sentry, New Relic Browser.

La elección del método depende de los objetivos: para una evaluación rápida, los servicios en línea son adecuados; para análisis detallados y depuración, las herramientas de desarrollo; y para monitoreo regular e integración en procesos de desarrollo, la automatización y los sistemas RUM.

¿Cómo medir la velocidad de carga de un sitio web?