Reduce el LCP y el ancho de banda hasta en un 40 %, preserva el presupuesto de rastreo y supera a la competencia mediante el lazy loading de plantillas con gran carga multimedia.
La carga diferida (lazy loading) retrasa la obtención de imágenes, iframes y scripts ubicados por debajo del pliegue hasta que se acercan al viewport, reduciendo la carga inicial para mejorar los Core Web Vitals, recortar costes de servidor y preservar el presupuesto de rastreo. Impleméntala en plantillas con mucho contenido multimedia (rejillas de e-commerce, blogs extensos) mediante el atributo loading="lazy" nativo o fallbacks noscript para que Googlebot pueda seguir renderizando los recursos diferidos.
Carga diferida (lazy loading) es una técnica de rendimiento que pospone la descarga de recursos no críticos (imágenes, iframes, widgets de terceros) hasta que están cerca del viewport del usuario. Para los responsables de SEO, es menos un “nice-to-have” y más una palanca para:
Las señales de experiencia de página de Google siguen influyendo en el ranking en escenarios de desempate. Una mejora de 0,2 puntos en Core Web Vitals mueve con frecuencia los sitios del rango 3–5 al top 3, donde las tasas de clic aumentan más del 30 %. En los canales de pago, cada 100 KB ahorrados reduce el CPC de las landings gracias a la mejora del Quality Score. Los competidores que ignoran la carga diferida pagan dos veces: mayores costes de adquisición y un crecimiento orgánico más lento.
<img loading="lazy"> es compatible con Chromium, WebKit y Firefox. Envíalo como valor por defecto y permite loading="eager" para los elementos hero por encima del pliegue.<noscript> que contenga el mismo marcado. Googlebot renderiza el contenido lazy de todos modos, pero el fallback protege casos extremos (JS deshabilitado, cadenas de UA antiguas).aspect-ratio o con el truco de padding para evitar desplazamientos y hundir el CLS.Los motores generativos (ChatGPT, Perplexity, Google AI Overviews) analizan el contenido renderizado para crear resúmenes. Si las imágenes, los esquemas de producto o las infografías no se cargan, tu marca pierde oportunidades de citación. Al garantizar que los recursos diferidos se rendericen con rapidez tanto del lado del servidor como del cliente, aseguras visibilidad en los SERPs clásicos y en los snippets impulsados por IA. Combina la carga diferida con datos estructurados (product, how-to, imageObject) para que los modelos generativos referencien tus visuales al componer respuestas.
En resumen, la carga diferida es una optimización de alto rendimiento: código mínimo, impacto medible y beneficios multicanal que se alinean con los objetivos SEO tradicionales y la nueva realidad GEO.
src y eliminan tu directiva loading; bloquea el conjunto de reglas antes del despliegue. Las páginas con scroll infinito pueden exceder el crawl budget (presupuesto de rastreo): define umbrales de IntersectionObserver para que el nuevo contenido solo se monte cuando esté a 2–3 viewports de distancia y mantén URLs paginadas para los bots. Asigna un sprint de QA por marca porque los design systems difieren; saltarse esto suele generar problemas de CLS duplicados que hunden las métricas compartidas de Core Web Vitals en los informes agregados de Google.
El lazy loading nativo expone el elemento <img> completo (incluido el atributo src) en el HTML que Googlebot descarga, de modo que Google puede poner en cola la URL de la imagen de inmediato, aunque el navegador retrase su descarga hasta que se acerque al viewport. Una solución basada en JavaScript suele reemplazar el src mediante JS después de que se active Intersection Observer; si Googlebot renderiza la página pero el script falla o se retrasa, el crawler podría no llegar a ver nunca la URL real de la imagen. Para proteger la rastreabilidad con un enfoque en JS, incluye un fallback <noscript> que contenga una etiqueta <img src="…"> estándar, o asegúrate de que la URL real de la imagen esté presente en un data-attribute que tu servicio de prerender exponga a los bots.
1) Pagina el contenido del lado del servidor (p. ej., ?page=2) y expón los enlaces de paginación con rel="next"/"prev" o un botón <a>«Ver más»</a> para que cada fragmento tenga una URL rastreable. 2) En la primera página, carga normalmente solo las imágenes que aparecen por encima del pliegue; añade loading="lazy" a las imágenes que se encuentran por debajo del pliegue. 3) Usa Intersection Observer para obtener páginas adicionales cuando el usuario se acerque al final, pero actualiza la URL con pushState (p. ej., /categoria?page=3) para que la sesión sea compartible. 4) Para cada lote cargado de forma diferida, inyecta elementos reales <img> con atributos src —no imágenes de fondo— de modo que el DOM renderizado por Google contenga las URLs. 5) Incluye la lista completa de productos en un sitemap XML para garantizar el descubrimiento incluso si el JS falla. Esta configuración reduce la carga inicial para el LCP, conserva las rutas de rastreo y permite que Google indexe cada producto.
Lighthouse marcó imágenes fuera de pantalla, pero el banner principal está dentro del viewport en muchos dispositivos. Al aplicarle carga diferida (lazy loading), retrasaste la descarga del recurso que contribuye al LCP, por lo que la métrica empeoró. Solución: carga normalmente las imágenes de la ruta crítica (las que probablemente aparezcan en el viewport inicial en los breakpoints más comunes)—omitiendo loading="lazy"—y reserva el lazy loading para el contenido que comienza realmente por debajo del pliegue. Prueba con el modo responsive de Chrome DevTools para identificar qué imágenes quedan por encima del pliegue en anchos de 320–1920 px.
Error 1: El script asigna las URL de las imágenes solo después de que el usuario hace scroll, por lo que el HTML renderizado inicialmente no incluye <img src="…">. Googlebot agota el tiempo de espera antes de que se ejecute el JS, así que las imágenes nunca se indexan. Confirmación: Utiliza la pestaña de HTML renderizado de la herramienta de Inspección de URL; si los atributos src siguen siendo marcadores de posición, ese es el problema. Solución: pre-renderizar o añadir copias de seguridad <noscript>. Error 2: El script sustituye el atributo src por data-src y depende de JS inline que está bloqueado por la Content Security Policy (CSP). Googlebot ve imágenes rotas. Confirmación: Revisa la consola de DevTools en busca de errores de CSP y el encabezado CSP del sitio. Solución: actualiza la CSP para permitir el script o cambia al loading="lazy" nativo, que mantiene atributos src válidos en el HTML.
✅ Better approach: Excluye explícitamente la imagen hero (imagen principal) y las imágenes de fondo críticas de tu script de carga diferida. Sírvelas con <link rel="preload"> o fetchpriority="high" y deja loading="eager" (o bien omite el atributo) para que el navegador las priorice.
✅ Better approach: Añade un elemento <img> idéntico envuelto en <noscript> para cada imagen que se cargue de forma diferida, o utiliza el atributo nativo loading="lazy" en lugar de JavaScript personalizado siempre que sea posible. Verifica con la herramienta de Inspección de URL de Google que el HTML renderizado contenga la imagen.
✅ Better approach: Configura un umbral de píxeles o el rootMargin de IntersectionObserver para que solo se difieran las imágenes que queden fuera del primer viewport. Inserta en línea los sprites críticos de SVG/íconos o las hojas de sprites, y aplica lazy-load únicamente a los recursos multimedia que superen un umbral de bytes definido (p. ej., >4 KB).
✅ Better approach: Trata las imágenes como recursos indexables independientes: incluye sus URL directas en los sitemaps XML con etiquetas <image:image>, escribe texto alternativo y nombres de archivo descriptivos, y pruébalas en Google Imágenes. El lazy loading (carga diferida) no sustituye las prácticas estándar de SEO para imágenes.
Identifica y cierra las brechas de cobertura de schema para …
Prioriza al instante las páginas que perjudican los ingresos con …
Los backlinks de alta calidad potencian la autoridad, reducen drásticamente …
Identifica la saturación de schema a tiempo para evitar marcado …
Domina la elegibilidad para resultados enriquecidos para asegurar posiciones premium …
Valida la preparación de INP para confirmar reacciones por debajo …
Get expert SEO insights and automated optimizations with our platform.
Start Free Trial