La carga diferida ahorra trabajo por debajo del primer pliegue. Si se aplica a la primera imagen significativa, el navegador puede descubrirla demasiado tarde y mostrar un hero vacío mientras descarga recursos secundarios.
La solución no es desactivar lazy loading en todo el sitio. Identifica la imagen principal, demuestra qué la retrasa y excluye únicamente los medios que deben llegar inmediatamente.
Reproducir una visita fría
Abre la URL en una ventana privada con caché desactivada, aplica una limitación móvil razonable y recarga desde arriba. Anota qué región queda en blanco.
En Elements, determina si es <img>, <picture>, fondo CSS o slider generado por JavaScript. Después consulta en Network cuándo comienza la petición, su prioridad y el iniciador.
Así diferencias carga diferida de servidor lento, archivo enorme o renderizado JavaScript tardío. Una imagen que empieza pronto pero tarda en descargarse necesita otra reparación.
Detectar sistemas superpuestos
WordPress puede añadir loading="lazy" nativo; tema, constructor, CDN y plugins también pueden incorporar atributos de datos y scripts:
<img
src="placeholder.svg"
data-src="/wp-content/uploads/hero.webp"
class="lazyload"
loading="lazy"
alt="Reparación urgente de WordPress"
>La URL real queda en data-src hasta que JavaScript la mueve a src. Añadir además lazy loading nativo no acelera nada. Averigua qué componente controla el comportamiento antes de crear exclusiones.
Confirmar si es el elemento LCP
Graba Performance o revisa Largest Contentful Paint en una prueba de laboratorio. No supongas que cualquier hero grande es LCP.
Si la primera imagen de contenido lo es, normalmente no debería cargarse de forma diferida. Debe exponer src o <source> desde el HTML inicial y ofrecer candidatos adaptables:
<img
src="/wp-content/uploads/repair-team-1280.webp"
srcset="/wp-content/uploads/repair-team-640.webp 640w,
/wp-content/uploads/repair-team-1280.webp 1280w"
sizes="100vw"
width="1280"
height="720"
fetchpriority="high"
alt="Especialista en reparación de WordPress"
>Usa fetchpriority="high" solo en el recurso realmente crítico. Varias prioridades altas compiten con CSS, fuentes y el propio LCP.
Excluir el objetivo mínimo
La mayoría de herramientas permiten excluir por clase, fragmento de URL, ID o posición. Prefiere un selector estable asignado solo al hero. No excluyas todas las imágenes de la cabecera si únicamente una es crítica.
Después inspecciona el HTML final de un visitante desconectado. La URL principal debe estar disponible sin esperar al scroll; las imágenes inferiores deben conservar la carga diferida.
Documenta la exclusión si el constructor regenera el marcado. Un cambio de plantilla puede reemplazar la clase o el widget.
Revisar sliders y heroes creados con JavaScript
Un slider puede retrasar la primera diapositiva incluso después de retirar loading="lazy". Algunas librerías inyectan las URL desde JSON, esperan al evento de documento o calculan dimensiones después de las fuentes.
Prueba en staging una primera imagen estática. Si aparece antes, la inicialización del slider es el cuello de botella. No precargues todas las diapositivas: transferirías imágenes que muchos visitantes nunca verán.
Una solución robusta suele renderizar la primera imagen en HTML y mejorar después el resto de diapositivas.
Preservar dimensiones y recortes
Al retirar un sistema de placeholders pueden faltar width y height. Añade dimensiones intrínsecas o una proporción estable para reservar espacio.
Compara recortes de escritorio y móvil. El constructor quizá seleccionaba otra fuente o aplicaba object-fit. La optimización no debe estirar retratos, ocultar productos ni introducir CLS.
Verificar más que la puntuación
Tras limpiar una vez caché de página, CDN y recursos generados, repite una visita móvil fría. Confirma que la petición crítica comienza antes, su URL está en el marcado inicial, solo ella recibe prioridad alta y los medios inferiores siguen esperando.
Revisa LCP, CLS, menús, formularios y slider. Prueba varias plantillas: una exclusión global de «primera imagen» puede priorizar el logotipo o una miniatura en vez del contenido.
Solicita evaluación si varias herramientas reescriben imágenes, la primera diapositiva nace en JavaScript o las exclusiones cambian según plantilla. Aporta URL, dispositivo y ajustes ya probados, nunca contraseñas inicialmente.
La reparación correcta deja un único propietario de lazy loading, protege el LCP real y conserva el ahorro bajo el primer pliegue.