Si algunas imágenes desaparecen o el LCP empeora tras activar la carga diferida, dos herramientas pueden estar reescribiendo la misma etiqueta <img>. Deja un solo sistema activo y excluye la imagen visible principal.
Índice
Anuncio
Diagnostica el síntoma antes de cambiar nada
Prueba primero en incógnito, sin iniciar sesión y desde móvil para evitar resultados ocultos por caché.
Busca imágenes ausentes o vacías
Una imagen ausente necesita un src válido o un script que copie correctamente data-src a src. Inspecciona la etiqueta <img> y comprueba que src, srcset y las URLs WebP o AVIF no estén vacíos ni apunten a archivos inexistentes.
Distingue retraso de mal LCP
La imagen LCP suele ser la imagen más grande visible al abrir la página y no debe esperar al scroll. Si la hero tiene loading="lazy", anota su URL o clase y comprueba también si es un fondo CSS gestionado por el constructor.
Comprueba si cargan todas juntas
Si todas las imágenes se descargan al abrir la página, la carga diferida no actúa o su margen previo es excesivo. Carruseles, galerías y módulos del constructor pueden ignorar la regla general y descargar diapositivas para calcular tamaños o animaciones.
Revisa HTML, red y consola sin tocar ajustes
Las herramientas del navegador permiten identificar qué HTML recibió el visitante, qué archivo falló y qué script impidió activarlo.
Compara atributos de una imagen
Una etiqueta con loading="lazy" no suele romper imágenes; el conflicto aparece cuando varios sistemas usan src, data-src o atributos duplicados. Compara una imagen correcta y otra rota, incluyendo srcset, sizes, width y height.
Mantén siempre las dimensiones originales o una proporción CSS equivalente. Reservar el hueco evita el Cumulative Layout Shift (CLS) y mejora la accesibilidad, porque botones y enlaces no se desplazan durante la carga.
Filtra las solicitudes de imagen
La pestaña Red muestra si el navegador pidió la imagen, cuándo lo hizo y qué respuesta recibió. Deshabilita caché en DevTools, recarga y filtra por Img; si la solicitud no aparece al hacer scroll, el script lazy no se ha activado.
| Resultado en Red | Qué significa | Cambio que aplicar |
|---|---|---|
| 200 | La imagen llegó al navegador. | Revisa tamaños, CSS o superposición visual. |
| 404 | La URL apunta a un archivo inexistente. | Regenera miniaturas o corrige la URL. |
| 403 | El servidor o CDN deniega el archivo. | Revisa permisos, hotlink y reglas del CDN. |
| Cancelada | Un script o navegación cortó la descarga. | Mira consola y scripts diferidos. |
Lee errores de consola
La consola revela si JavaScript impide activar la carga diferida. Busca errores rojos con lazy, observer, undefined o el nombre del plugin; un script aplazado o minificado incorrectamente puede impedir que data-src llegue a cargarse.
Anuncio
Corrige duplicados sin apagar la carga diferida
Conserva un único controlador de lazy load y excluye solo los recursos visibles críticos.
Elige quién controla cada imagen
WordPress, el plugin de caché, el constructor y el CDN no deben reescribir la misma etiqueta de imagen. Revisa cuál añade data-src, data-srcset o clases propias y desactiva esa función únicamente en la capa duplicada.
Un caso frecuente combina loading="lazy" nativo, atributos añadidos por caché y un CDN que aplaza el script del plugin. El resultado puede ser una imagen invisible aunque el archivo exista.
Excluye hero y recursos críticos
La hero necesita un src real, sin loading="lazy", y espacio reservado antes de su descarga. Exclúyela por URL, clase o selector; después purga caché y confirma que conserva src, srcset, width y height.
Excluye entre una y tres imágenes por plantilla: hero, primera foto relevante de producto y diapositiva inicial visible. Excluir demasiadas imágenes aumenta la competencia por ancho de banda y puede empeorar el LCP.
Conserva placeholder y proporción
Un placeholder solo ayuda si ocupa exactamente el mismo hueco que la imagen final. No elimines width, height o aspect-ratio para ocultar espacios vacíos; corrige el origen y conserva la proporción real.
El lazy loading en WordPress puede aplicarse de tres formas, pero conviene elegir una sola por tipo de recurso. El núcleo de WordPress añade el atributo loading="lazy" a muchas imágenes de forma nativa; un plugin de rendimiento puede sustituirlo por atributos como data-src y un script basado en IntersectionObserver; y un desarrollo personalizado puede controlar casos concretos mediante clases o selectores. Si usas plugin o código propio, evita que ambos modifiquen la misma etiqueta.
Tras cambiar de sistema, purga la caché de WordPress y el CDN de imágenes, comprueba las versiones WebP y AVIF entregadas al visitante y vuelve a revisar los errores de carga de imágenes en Red y Consola.
La carga diferida no afecta solo a fotos: los vídeos, mapas, formularios incrustados y otros iframes también pueden retrasar mucho la carga inicial. Un vídeo de YouTube o un mapa de Google puede descargar scripts, fuentes y conexiones de terceros antes incluso de que el usuario interactúe. Aplica loading="lazy" a los iframes situados fuera de la primera pantalla o usa una miniatura con botón de reproducción que inserte el reproductor al hacer clic.
No difieras un iframe que sea el contenido principal visible ni un recurso necesario para completar una acción inmediata. Después, haz scroll y verifica en Red que el iframe se solicita al acercarse al área visible y no desde el primer renderizado.
Valida móvil, CLS y caché antes de cerrar
La validación debe reproducir la experiencia de un visitante nuevo, no la de un administrador con caché caliente.
Repite la prueba sin cachés
Una prueba fiable exige purgar la caché del plugin, servidor y CDN antes de abrir una sesión privada. Revisa portada, entrada, servicio y ficha de producto en móvil; busca huecos, parpadeos, botones desplazados o imágenes que solo aparecen tras tocar la pantalla.
Contrasta lighthouse y PageSpeed
Lighthouse y PageSpeed Insights confirman el resultado, pero no sustituyen la inspección visual ni la pestaña Red. Comprueba que la hero sea LCP sin lazy load, que las imágenes mantengan dimensiones para evitar CLS y que las imágenes bajo el primer scroll no se descarguen todas inicialmente.
Documenta el ajuste que quedó activo
Anota qué plugin o CDN controla la carga diferida, las exclusiones configuradas y la fecha de la prueba. Esta nota evita que una actualización reactive una función duplicada y simplifica futuras revisiones.
Preguntas y respuestas
¿Qué es el lazy load de imágenes en WordPress?
La carga diferida retrasa imágenes fuera de pantalla. Manténla en fotos secundarias, pero no en la hero ni en elementos visibles al abrir la URL.
¿Por qué no aparecen mis imágenes con lazy load?
Puede faltar un src válido, fallar el script que procesa data-src o existir una URL con respuesta 404 o 403. Revisa HTML, Red y Consola.
¿Debo desactivar el lazy load para mejorar el LCP?
No, excluye solo la imagen LCP y conserva la carga diferida bajo el primer scroll. Desactivarla globalmente aumenta las solicitudes iniciales en móvil.
¿Cómo sé qué plugin causa el conflicto?
El causante suele añadir data-src, data-srcset o clases propias. Desactiva temporalmente su lazy load, purga caché y revisa el HTML en incógnito.
¿Qué hago si la hero tiene loading lazy?
Quita loading="lazy" mediante una exclusión del plugin o constructor. Confirma que mantiene src, dimensiones y una única prioridad alta si procede.
¿El placeholder puede empeorar el CLS?
Sí, si reserva un tamaño distinto de la imagen final. Mantén width y height o una proporción CSS idéntica a la imagen real.
¿Por qué funciona en ordenador pero no en móvil?
El móvil revela retrasos de JavaScript, redes lentas y cachés distintas. Prueba en incógnito, con conexión lenta simulada y haciendo scroll por varias imágenes.
Anuncio
Mantén una sola capa y la hero libre
Un único sistema de carga diferida evita conflictos entre src y data-src. Excluye la hero visible, conserva proporciones para evitar CLS y valida siempre en móvil, incógnito y con todas las cachés purgadas.
- Lo esencial: revisa primero si dos herramientas han escrito atributos distintos en la misma imagen.
- Lo esencial: excluye una hero visible y otros recursos críticos, no toda la carga diferida.
- Lo esencial: conserva dimensiones o proporción para evitar que la página salte al cargar.
- Lo esencial: valida cada cambio en móvil, incógnito y con todas las cachés purgadas.
Fuentes de interés
Otros artículos que pueden complementar lo que acabas de leer:
- Detener la carga diferida de la primera imagen : r/elementor — reddit.com
- Cómo optimizar WordPress solucionando el error de — ayudawp.com
- Carga diferida para WordPress: imágenes, vídeos y más — onenine.com
- Lazy Loading: Cómo retrasar la carga de imágenes en tu web — google.com
Josu Barrios
Somos especialistas en mantenimiento WordPress para empresas, profesionales y tiendas online. Contamos con experiencia en seguridad web, optimización de rendimiento, actualizaciones, copias de seguridad y resolución de incidencias técnicas, ayudando a que cada sitio funcione de forma rápida, estable y protegida. Nuestro enfoque combina soporte técnico profesional, buenas prácticas de seguridad y seguimiento continuo para ofrecer un servicio fiable, transparente y orientado a resultados reales.