¿La carga diferida afecta la visibilidad para la IA? Señales contradictorias sobre esto

Déjame desglosar cada tipo de carga diferida.

1. Carga diferida nativa para imágenes (loading=“lazy”):

<img src="image.jpg" loading="lazy" alt="Descripción">

Impacto: Generalmente bien para los rastreadores de IA.

• La URL de la imagen está en el HTML
• Los rastreadores pueden ver la referencia
• No necesitan “renderizar” la imagen para saber que existe

2. Carga diferida de imágenes con JavaScript:

<img data-src="image.jpg" class="lazy">
// JS cambia data-src a src al hacer scroll

Impacto: Potencialmente problemático.

• Sin ejecución de JS, src está vacío
• Los rastreadores podrían no ver la imagen
• Usa loading=“lazy” en su lugar

3. Intersection Observer para contenido:

observer.observe(element);
// Carga contenido cuando el elemento entra en el viewport

Impacto: Problemático para la IA.

• Los rastreadores de IA no tienen “viewport”
• No hacen scroll ni disparan intersecciones
• El contenido podría no cargarse nunca

4. Scroll infinito:

Impacto: Muy problemático.

• El contenido más allá de la página inicial es invisible
• Los rastreadores no harán scroll para activar la carga
• Solo la primera página de contenido es visible

La regla general:

Si el contenido requiere interacción del usuario o la presencia en el viewport para cargarse, es probable que los rastreadores de IA no lo vean.

Compromisos entre rendimiento y visibilidad para la IA.

Por qué usamos carga diferida:

• Carga inicial de página más rápida
• Mejores Core Web Vitals
• Menor consumo de ancho de banda para los usuarios

La tensión:

• Lo que es bueno para el rendimiento puede afectar la visibilidad para la IA
• Especialmente la carga diferida dependiente de JavaScript

La solución:

Para imágenes: La carga diferida nativa ofrece ambos beneficios. Úsala.

Para contenido: Renderiza en el servidor el contenido crítico. Carga diferida solo para:

• Contenido suplementario bajo el pliegue
• Recomendaciones que no sean objetivo de cita
• Mejoras de UI que no afecten el contenido indexable

La prioridad:

Identifica qué contenido quieres que la IA cite. Ese contenido debe estar en el HTML inicial. Todo lo demás puede optimizarse para el rendimiento.

Ejemplo práctico:

Página de artículo:

• Texto del artículo: Siempre en HTML (objetivo de cita)
• Artículos relacionados: Puede cargarse de forma diferida (no objetivo de cita)
• Comentarios: Puede cargarse de forma diferida (no objetivo de cita)
• Botones para compartir: Puede cargarse de forma diferida (solo UI)

Lo que sabemos sobre el comportamiento de los rastreadores de IA.

GPTBot:

• Solicitudes HTTP básicas
• Ejecución mínima de JavaScript
• Sigue enlaces que puede ver en el HTML

ClaudeBot:

• Similar a GPTBot
• Rastreo enfocado en HTML
• Manejo limitado de contenido dinámico

PerplexityBot:

• Más sofisticado
• Algo de manejo de JavaScript
• Pero sigue enfocado principalmente en HTML

Común a todos:

• No hacen scroll
• No simulan interacción del usuario
• Procesamiento limitado en tiempo
• Prioridad al contenido HTML

La implicación:

Contenido que requiera:

• Scroll
• Interacciones de clic
• Ejecución extendida de JavaScript
• Presencia en el viewport

…probablemente sea invisible para estos rastreadores.

La estrategia de prueba:

1. Ver el código fuente de la página (no inspeccionar elemento)
2. ¿Está ahí tu contenido crítico?
3. Si no, los rastreadores no lo ven

Simple pero definitivo.

Recomendaciones de implementación.

Para nuevas implementaciones:

Imágenes:

<img src="image.jpg" loading="lazy" alt="Descripción">

Listo. Lo nativo es lo mejor.

Secciones de contenido:

<div class="content">
  <!-- Todo el contenido en HTML -->
  Texto completo del artículo aquí
</div>

Carga diferida solo para mejoras visuales, no para el contenido.

Listas/cuadrículas:

<ul class="items">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <!-- Al menos 10-20 elementos en HTML -->
</ul>
<a href="?page=2">Cargar más</a>

Elementos iniciales en HTML, paginación para el resto.

Para implementaciones existentes:

Si tienes carga diferida dependiente de JS:

1. Audita qué contenido está afectado
2. Prioriza los objetivos críticos de cita
3. Migra esos a renderizado en servidor
4. Deja la carga diferida para contenido no crítico

La comprobación:

Después de los cambios:

curl -s https://tusitio.com/pagina | grep "frase de contenido crítico"

Si está ahí, todo bien.

Perspectiva de monitoreo.

Cómo saber si la carga diferida te está afectando:

1. Revisa los datos de Am I Cited

• ¿Las páginas con contenido cargado de forma diferida se citan menos?
• Compara páginas similares con diferentes implementaciones

2. Pruebas manuales

• Pregunta a la IA sobre contenido en secciones cargadas de forma diferida
• ¿Conoce la información?
• Si no, el contenido podría ser invisible

3. Registros del servidor

• ¿Cómo interactúan los rastreadores de IA con tu sitio?
• ¿Reciben respuestas completas?

Lo que hemos visto:

Sitios con mucha carga diferida (especialmente scroll infinito):

• 40-60% menos contenido visible para la IA
• Menor tasa de citas para ese contenido
• Se soluciona tras implementar SSR/paginación

Sitios con solo carga diferida de imágenes:

• Sin impacto significativo
• La carga nativa loading=“lazy” funciona bien

La recomendación:

Audita, prueba y monitorea. No asumas que tu implementación está bien. Verifícalo.

Plan de acción claro ahora.

Lo que mantenemos:

• Carga diferida nativa para imágenes - sin problemas

Lo que cambiamos:

Secciones con Intersection Observer:

• Moviendo contenido crítico al HTML inicial
• Solo carga diferida para mejoras de UI

Páginas con scroll infinito:

• Añadiendo paginación
• Primeros 20 elementos en HTML
• Botón “Cargar más” para el resto

Enfoque de prueba:

1. Hacer curl a las páginas tras los cambios
2. Verificar que el contenido crítico esté en el HTML
3. Monitorear visibilidad en IA con Am I Cited
4. Comparar tasas de cita antes y después

El principio: Contenido que queremos que la IA cite = siempre en HTML Todo lo demás = puede optimizarse para rendimiento

¡Gracias por la claridad técnica!