Web Performance Cockpit

Optimización Core Web Vitals
fundacionexito.org

Metodología de 4 ciclos cerrados · Análisis → Plan → Implementación → Despliegue. No avanzamos al siguiente ciclo hasta que el anterior esté en producción.

Ciclo activo

01 · LCP

Largest Contentful Paint

Pipeline

C1● LIVE

LCP

< 2.5s

C2○

INP

< 200ms

C3○

CLS

< 0.1

C4○

REFACTOR

> 90

01

Ciclo 1 · LCP

Largest Contentful Paint

EN EJECUCIÓN

Pintar el contenido principal por debajo del umbral de 2.5s

Métrica

LCP

Objetivo

< 2.5s

Actual

4.1s

Progreso15%

Diagnóstico

El hero principal y las imágenes de campaña dominan el LCP. TTFB elevado + JS bloqueante en <head> retrasan el primer pintado útil.

Acciones clave

  • Marcar la imagen del hero con fetchpriority="high" y preload
  • Servir imágenes en WebP/AVIF con srcset responsivo
  • Inline del CSS crítico para above-the-fold (< 14KB)
  • Preconnect a CDN de imágenes y a Google Fonts
  • Diferir JS no crítico con defer/module y eliminar render-blocking

URLs objetivo (5)

P0

Home

fundacionexito.org/

P0

Causas

fundacionexito.org/causas

P1

Quiénes Somos

fundacionexito.org/quienes-somos

P1

Programas

fundacionexito.org/programas

P2

Gen Cero

fundacionexito.org/gen-cero

02

Ciclo 2 · INP

Interaction to Next Paint

EN COLA

Garantizar respuesta a interacciones por debajo de 200ms

Métrica

INP

Objetivo

< 200ms

Actual

—

Progreso0%

Diagnóstico

GTM, Hotjar y el widget de donación bloquean el main thread. Long Tasks > 200ms en mobile mid-tier.

Acciones clave

  • Romper Long Tasks con scheduler.yield() / setTimeout(0)
  • Cargar GTM, Hotjar y píxeles tras first-interaction o requestIdleCallback
  • Reemplazar listeners onScroll con IntersectionObserver
  • Code-splitting del formulario de donación (lazy on intent)
  • Debounce + passive listeners en filtros y acordeones

URLs objetivo (5)

P0

Donar

fundacionexito.org/donar

P0

Proyectos

fundacionexito.org/proyectos

P1

Aliados

fundacionexito.org/aliados

P1

Voluntariado

fundacionexito.org/voluntariado

P2

Contacto

fundacionexito.org/contacto

03

Ciclo 3 · CLS

Cumulative Layout Shift

EN COLA

Estabilidad visual con score por debajo de 0.1

Métrica

CLS

Objetivo

< 0.1

Actual

—

Progreso0%

Diagnóstico

Saltos provocados por banners dinámicos sin reserva de espacio y FOUT por carga tardía de fuentes web.

Acciones clave

  • Definir width/height o aspect-ratio en TODA imagen y embed
  • min-height en slots de anuncios/banners y contenedores async
  • font-display: optional + preload de fuentes principales
  • Reservar el alto del header sticky y mega-menús desplegables
  • Evitar inserción de DOM por encima de contenido ya pintado

URLs objetivo (5)

P0

Noticias

fundacionexito.org/noticias

P0

Home

fundacionexito.org/

P1

Blog

fundacionexito.org/blog

P1

Eventos

fundacionexito.org/eventos

P2

Transparencia

fundacionexito.org/transparencia

04

Ciclo 4 · REFACTOR

Refactor & Pulido

EN COLA

Cerrar remanentes con datos reales post-despliegue (CrUX/RUM)

Métrica

Score

Objetivo

> 90

Actual

—

Progreso0%

Diagnóstico

Auditoría final con PageSpeed Insights, WebPageTest y RUM. Eliminar CSS/JS muerto y consolidar caché.

Acciones clave

  • Tree-shake CSS/JS no usado (coverage report)
  • HTTP cache headers + Service Worker para assets estáticos
  • Comprimir respuestas con Brotli en edge
  • Revisar third-parties con bajo ROI y eliminarlos
  • Monitoreo continuo con web-vitals.js → endpoint analytics

URLs objetivo (3)

P0

Home

fundacionexito.org/

P0

Donar

fundacionexito.org/donar

P1

Sitemap muestra

fundacionexito.org/sitemap