Πώς μετράμε την ταχύτητα φόρτωσης ενός ιστότοπου…

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 para visualizar la secuencia de carga de recursos.
- Analizar el resumen en la parte inferior 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, informes detallados sobre carga, rendimiento y recomendaciones.
- Pingdom Website Speed Test: Mide la velocidad desde diferentes ubicaciones, ofrece análisis detallados de rendimiento.
- WebPageTest: Permite realizar pruebas desde diferentes ubicaciones y navegadores, ofrece múltiples métricas y visualizaciones.
Métricas a tener en cuenta:
- 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 vista.
- First Input Delay (FID): Tiempo desde la primera interacción del usuario hasta la respuesta del navegador.
- Cumulative Layout Shift (CLS): Desplazamiento total del diseño de la página durante la carga.
- DOMContentLoaded: Tiempo en que el navegador ha cargado y parseado completamente el 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 CLI o integrar en pipelines CI/CD.

# Ejemplo de uso de Lighthouse CLI
lighthouse https://www.example.com --output json,html --output-path ./report.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.example.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; para monitoreo regular e integración en procesos de desarrollo, la automatización y los sistemas RUM.

Πώς μετράμε την ταχύτητα φόρτωσης ενός ιστότοπου;