Web Performance

web performance

El RENDIMIENTO WEB es uno de los temas más importantes para el ÉXITO de tu página. Pero casi nadie conoce las métricas MÁS IMPORTANTES. Te las explico. ↓

📡 Time to First Byte (TTFB)

Mide el tiempo desde que el navegador hace la petición de la página hasta que el primer byte es recibido.

🆗 Bastante importante, ya que afecta a todas las demás.

✅ <600ms

Se extrae de datos de laboratorio 🧪 y usuarios reales 👨‍👩‍👧‍👦

🎨 First Contentful Paint (FCP)

Señala el tiempo que se ha tardado en renderizar cualquier texto o imagen (incluido fondos)

🆗 Le dice al usuario si realmente la web funciona y pueda empezar a consumir la web.

✅ <1.8s

Datos de laboratorio 🧪 y usuarios reales 👨‍👩‍👧‍👦

🖼 Largest Contentful Paint (LCP)

El tiempo que tarda en renderizarse la pieza de contenido más grande que está en el viewport.

🆗 Es una de las tres Web Vitals de Google.

👀 Visualmente impacta mucho al usuario.

✅ <2.5s

Datos de laboratorio 🧪 y usuarios reales 👨‍👩‍👧‍👦

📈 Speed Index (SI)

Calcula cómo de rapido el contenido visual se ha renderizado progresivamente en el viewport.

🆗 No es lo mismo que una página en blanco 3 segundos y se muestre todo de golpe, a hacerlo progresivamente. Se percibe distinto.

✅ <2.5s

Sólo en laboratorio 🧪

☝️ First Input Delay (FID)

Mide el tiempo que tarda en responder la interfaz a la primera interacción del usuario.

🆗 Es la Web Vital de interactividad. ¿Sabes cuando haces clic y no responde la web? Pues eso.

✅ <100ms

Fiable en datos de campo de usuarios reales 👨‍👩‍👧‍👦

🛑 Total Blocking Time (TBT)

Suma la duración de las tareas largas (más de 50ms) de JS que han bloqueado el hilo principal después del FCP.

🆗 Cuanto más tiempo está bloqueado el hilo, menos usable es la página.

✅ <200ms

Datos de laboratorio 🧪

👐 Max Potential First Input Delay (mFID)

Mide el máximo FID posible teniendo en cuenta el tiempo que el hilo principal está bloqueado.

🆗 Interesante para detectar en pruebas posibles valores del FID.

✅ <130ms

Datos de laboratorio 🧪

🎡 Cumulative Layout Shift (CLS)

Mide los saltos que ha dado el layout de tu página mientras se cargaba.

🆗 La Web Vital de estabilidad visual. Suele pasar con imágenes y banners de publicidad.

✅ <0.1

Datos de laboratorio 🧪 y usuarios reales 👨‍👩‍👧‍👦

🏃‍♀️ Time to Interactive (TTI)

El tiempo que tarda la página en haber mostrado todo el contenido útil, los eventos de los elementos más visibles han sido registrados y la página responde a interacciones en 50ms.

🆗 Inestable, mejor mirar el TBT.

✅ <3.8s

Datos de laboratorio 🧪

Los datos que extraes con Lighthouse o herramientas similares desde tu máquina o una máquina preparada.

Datos de campo con usuarios reales 👨‍👩‍👧‍👦

Usando la Performance API puedes extraer las métricas y enviarlas a un servicio. También con Chrome UX Report.