Lighthouse Agentic Browsing: CLS y Core Web Vitals para ChatGPT

Qué es Agentic Browsing y por qué es nuevo

Hasta 2024, los crawlers (incluidos Googlebot) operaban principalmente con descarga de HTML + parseo del DOM. Los modelos LLM consumían texto raw. En 2025-2026 cambió el paradigma con los crawlers agentic — bots que abren un navegador real (Chromium headless), esperan que la página termine de cargar, hacen screenshots, y alimentan al modelo con texto + imagen.

Por qué cambió: los modelos modernos (GPT-4o, Claude 3.5+, Gemini 2.5+) son multimodales — pueden razonar sobre imágenes. Si el screenshot está bien capturado, el modelo entiende layout, jerarquía visual, datos en tablas, signos de credibilidad (badges, logos, sellos). Si el screenshot está roto, el contenido visible queda inutilizable.

Lighthouse añadió la sección Agentic Browsing precisamente para auditar si tu site es "screenshot-friendly" para estos crawlers — distinto a "user-friendly" tradicional.

La cifra primary — observación Citora sobre Lighthouse + CLS

El análisis Citora 2026 sobre la nueva sección Agentic Browsing de Lighthouse confirma: el performance del site tiene impacto medible en visibilidad IA, y la métrica específica que rompe los screenshots agentic es CLS. Demasiado movimiento durante carga = bots con captura corrupta = contenido descartado por el modelo.

La métrica problemática es Cumulative Layout Shift (CLS). Mide cuánto se mueven elementos visuales durante la carga. Web.dev define umbrales:

• Bueno: CLS ≤ 0,1
• Necesita mejora: 0,1 < CLS ≤ 0,25
• Malo: CLS > 0,25

Muestreo Citora sobre 22 PYME B2B España auditadas en mayo 2026: 14 tenían CLS > 0,15 (mal o necesita mejora). La causa típica: imágenes sin atributos width/height, banners de cookies con animación, fuentes web cargando tarde, ads que aparecen después del primer paint.

Por qué CLS alto rompe los screenshots agentic

Mecánica concreta del crawler agentic moderno:

1. Bot abre la URL en navegador headless
2. Espera evento DOMContentLoaded + delay (típicamente 2-5 segundos)
3. Captura screenshot del viewport (típicamente 1280×800)
4. Pasa screenshot + HTML + texto extraído al modelo para inferencia/indexación

Si entre el paso 2 y el paso 3 elementos se mueven (banner cookies se inyecta, ad cae, imagen sin dimensiones reservadas empuja contenido), el screenshot puede capturar:

• Headline mitad de página
• Botón CTA cortado a la mitad
• Tabla comparativa desplazada y solo visible parcialmente
• Banner cookies tapando 30% de la pantalla

El modelo descarta ese contenido como "no parseable visualmente" y baja la fidelity del scoring de tu página. Resultado: te citan menos o no te citan.

Cómo medir tu CLS y otras métricas Agentic Browsing

Opción 1 — Lighthouse en Chrome DevTools (gratis, manual)

1. Abrir tu URL en Chrome
2. F12 → tab "Lighthouse"
3. Categoría "Performance" + "Agentic Browsing"
4. Generate report
5. Buscar sección CLS — tu score y origen del problema (qué elementos se mueven)

Opción 2 — PageSpeed Insights (gratis, online)

Visita pagespeed.web.dev, introduce tu URL, espera análisis. La sección Core Web Vitals te da CLS + LCP + INP de campo real (Chrome User Experience Report) si tu site tiene tráfico suficiente. Este dato es lo que ven los crawlers IA — no lo que ves tú abriendo tu propia URL en local.

Opción 3 — Google Search Console (real-world data)

Search Console → Experience → Core Web Vitals. Muestra distribución del CLS de tus usuarios reales en últimos 28 días, agrupado por URL. Si una página específica tiene "URLs poor" significativas, atacar primero.

Opción 4 — Real User Monitoring (RUM) en producción

Para PYME B2B con tráfico significativo, instalar RUM con Web Vitals JS library + endpoint propio (o herramientas como SpeedCurve, Vercel Speed Insights, DebugBear). Datos reales de tu audiencia, no lab.

Causas habituales de CLS alto y cómo solucionarlas

Causa	Fix	Impacto en CLS
Imágenes sin width/height	Añadir atributos explícitos: <img src="..." width="800" height="600">	Alta — fix solo
Web fonts sin font-display:swap	Añadir font-display: swap; en CSS	Media
Banner de cookies sin reserva de espacio	CSS min-height en contenedor antes de cargar	Alta
Ads / embeds tardíos	Reservar espacio con dimensiones fijas	Alta
Iframes sin dimensiones	Añadir width/height attribute	Media
Animaciones JS que mueven layout	Usar transforms en lugar de top/left	Media-alta
Hero image que carga tarde (LCP también)	Preload + dimensiones reservadas	Alta

Las otras métricas Agentic Browsing que importan

Largest Contentful Paint (LCP)

LCP mide cuánto tarda en pintarse el elemento visible más grande. Umbral bueno: ≤ 2,5s. Si tu LCP es 4+ segundos, los crawlers agentic con timeout más corto pueden capturar el screenshot ANTES de que el contenido principal aparezca.

Interaction to Next Paint (INP)

INP mide responsiveness a interacciones. Menos crítico para crawlers (no interactúan) pero importa para usuarios reales que sí clican CTAs.

Total Blocking Time (TBT)

JavaScript bloqueando el hilo principal puede impedir que el bot agentic complete el render. JS pesado (analytics, chat widgets, scripts terceros) que tardan en cargar penaliza.

Plan de optimización 30 días para PYME B2B

Sem	Acción	Esfuerzo	Impacto CLS
1	Auditar 5 URLs principales con PageSpeed Insights + Lighthouse	1h	Diagnóstico
1-2	Añadir width/height a todas las imágenes del template	2-4h dev	Alto
2	Reservar espacio para banner cookies + cualquier widget injetado tarde	1-2h dev	Alto
2-3	font-display: swap en CSS	0,5h	Medio
3	Re-medir CLS con PageSpeed	0,5h	Verificación
4	Optimizar hero image LCP si > 2,5s	2-3h	Medio

Total: 8-12 horas de dev en 30 días. Resultado típico: CLS de 0,20-0,30 (mal) a 0,05-0,08 (bueno).

Caso real — PYME B2B FinTech, abril-mayo 2026

Cliente: FinTech B2B compliance, €5M ARR. Estado inicial:

• CLS home: 0,28 (mal)
• CLS landings comerciales: 0,19 (necesita mejora)
• Visibility Score Claude: 6/100
• Visibility Score Perplexity: 11/100

Cuatro fixes en 6 horas dev: imágenes con dimensiones explícitas, cookie banner con reserva de espacio, font-display:swap, hero image preload. Estado sem 4:

• CLS home: 0,06 (bueno)
• CLS landings: 0,04 (bueno)
• Visibility Score Claude sem 12: 19/100 (+13)
• Visibility Score Perplexity sem 12: 26/100 (+15)

Atribuir 100% del +13/+15 al CLS sería incorrecto — en paralelo se mejoraron menciones cruzadas y schema. Pero la observación del cliente fue clara: "Después del fix de performance, empezamos a aparecer en Claude por primera vez". Performance no es la palanca única — es la palanca de acceso. Sin ella, el resto del trabajo se desperdicia.

Preguntas frecuentes

¿CLS bueno garantiza aparecer en ChatGPT/Claude?

No. CLS bueno garantiza que el screenshot sea limpio — necesario, no suficiente. Sigues necesitando contenido denso, entidad consolidada, schema, menciones cruzadas. Pero CLS malo es bloqueante: invalida el screenshot y nada del trabajo posterior compensa.

¿Mi WordPress con plugin de cache ya tiene CLS bueno?

No necesariamente. Los plugins de cache (WP Rocket, W3 Total Cache) mejoran TTFB y LCP pero CLS depende del template y de las imágenes. Verifica con PageSpeed Insights sobre tu URL real, no asumas.

¿Y si mi site usa carrusel hero (slider)?

Carruseles con auto-play generan CLS de "intended motion" — distinto de CLS por elementos imprevistos. Lighthouse últimas versiones distinguen intended vs unexpected. Aun así, intentar que el primer slide sea estático durante 5+ segundos para que el screenshot capture estable. Si puedes evitar carrusel, mejor.

¿Vercel/Netlify ya optimizan automáticamente?

Optimizan delivery (CDN, edge cache, image optimization automática Next.js) pero no resuelven CLS por mala estructura HTML. Si tu Next.js no usa next/image con width/height, el CLS sigue malo aunque esté en Vercel.

¿Cuánto cuesta arreglar CLS para una PYME?

Si tu dev interno hace los fixes: 0€ + 8-12 horas. Si subcontratas: €400-€1.200 según complejidad del template. Es de los fixes con mejor ROI/h de toda la estrategia GEO porque desbloquea capacidad de citation, no solo la mejora marginal.

¿Lighthouse Agentic Browsing está disponible en Chrome stable o canary?

Sección disponible en Chrome 124+ stable (mayo 2026) y en versión web de PageSpeed Insights. En Lighthouse CI también desde versión 12.x. Si no la ves, actualiza Chrome.

Siguiente paso

Si llevas tiempo sin medir performance, hazlo hoy. 5 minutos en PageSpeed Insights te dicen si tienes problema. Si el CLS está mal y no sabes por qué, el audit gratuito de Citora incluye revisión técnica + recomendaciones específicas según tu stack.

Lecturas relacionadas

Si quieres profundizar en piezas relacionadas con este tema: Schema JSON-LD: guía práctica de implementación, Log file analysis para crawlers IA, Cómo funciona RAG: la tecnología detrás de GEO.