Activar lazy load para todas las imágenes puede estar empeorando el LCP de tu portada sin que lo notes: la fotografía destacada principal tarda más en aparecer, aunque bajes las solicitudes iniciales. En una web de noticias, ese retraso afecta a la percepción de carga, a Core Web Vitals y, si varios plugins intervienen, puede provocar imágenes duplicadas, ausentes o cargadas con reglas contradictorias.
Desde WordPress 5.5, las imágenes e iframes pueden cargarse de forma diferida, pero en una web de noticias no conviene retrasar la imagen LCP, el logo ni el contenido visible al abrir la portada. Configura el lazy load solo para el contenido situado bajo el primer pantallazo, evita duplicados entre WordPress, caché, CDN y plugins de optimización, y valida cada ajuste con PageSpeed, DevTools y los datos reales de Core Web Vitals.
Índice
Anuncio
Qué cargar al instante en una portada editorial
La imagen que Google identifica como LCP no debe llevar loading="lazy". En una portada de noticias suele ser la fotografía destacada de apertura, aunque en móvil puede ser otro bloque distinto al de escritorio.
El LCP mide cuándo aparece el elemento visual más grande dentro de la zona inicial de lectura. Piénsalo como el escaparate de un quiosco: si el titular y su foto tardan en aparecer, da igual que el almacén esté muy ordenado.
Excluye la imagen LCP y la hero
Revisa PageSpeed Insights y busca el apartado que identifica el elemento LCP. Copia su URL y confirma que esa imagen tiene un atributo src real, no solo data-src, y que no recibe carga diferida.
Cuando esa imagen es claramente la protagonista editorial, puede llevar fetchpriority="high". Este atributo indica al navegador que esa descarga merece prioridad, pero no sustituye una imagen ligera ni una buena caché.
Diferir lo que queda tras el scroll
Las imágenes de noticias relacionadas, módulos de «más leído», archivos, galerías largas y pie de página sí suelen ser buenas candidatas. También lo son vídeos de YouTube, mapas y publicaciones sociales que estén fuera de la pantalla inicial.
El error más frecuente que se detecta aquí es excluir únicamente el logo y dejar diferida la imagen destacada principal. El resultado puede ser una puntuación global aceptable, pero un LCP peor y una portada que parece vacía durante uno o dos segundos.
En portales de Madrid con portadas actualizadas varias veces al día, conviene revisar la plantilla y no una URL aislada. La noticia de apertura cambia, pero la regla debe mantenerse para cualquier imagen que ocupe ese primer hueco editorial.
Con esta exclusión se evita el daño más caro. Ahora conviene entender por qué bajar solicitudes no siempre acelera la percepción de carga.
Por qué menos imágenes puede empeorar el LCP
Reducir peticiones iniciales no mejora el LCP si retrasas la petición de la imagen principal. El navegador ahorra trabajo al principio, pero descubre demasiado tarde justo el recurso que el lector necesita ver antes.
La carga diferida nativa espera a que una imagen se aproxime a la zona visible. Es útil para contenido lejano, pero es como pedir al repartidor un periódico cuando ya estás delante del quiosco: llega tarde aunque el almacén tenga menos pedidos pendientes.
PageSpeed señala el elemento concreto
PageSpeed Insights no solo da una nota entre 0 y 100. Muestra qué elemento ha sido el LCP, cuánto tardó el servidor, cuándo se descubrió el recurso y cuánto tiempo esperó para descargarse.
Comprueba el mismo dato en Chrome DevTools, dentro de Performance o Network. Filtra por imágenes y mira si la URL de la foto principal empieza a descargarse al inicio o varios segundos después.
La documentación de Google sobre carga diferida para rastreo e indexación insiste en que Google debe poder encontrar el contenido al cargar la página. Esa condición importa tanto para SEO técnico como para el LCP.
El cuello de botella puede ser otro
Una imagen LCP sin lazy load aún puede tardar demasiado si pesa varios megabytes. También puede quedar bloqueada por CSS, JavaScript, fuentes web, una respuesta lenta del servidor o una CDN mal configurada.
Lo que la práctica demuestra en estos casos es que quitar el diferido de la hero no arregla por sí solo una imagen de 2,5 MB servida sin compresión. Para una foto de portada, busca tamaños ajustados al contenedor y comprueba que WordPress entregue variantes srcset para móvil y escritorio.
Un caso habitual: una imagen de 1.920 píxeles se descarga en un móvil donde se muestra a 720 píxeles. Tras servir una versión adecuada y excluirla del diferido, la descarga inicial baja sin sacrificar el recurso que mide el LCP.
La prioridad correcta depende de la posición real. La siguiente matriz evita decidir por intuición cada vez que se publica una noticia.
Anuncio
Matriz para excluir recursos críticos del diferido
Excluye del diferido todo recurso visible antes de hacer scroll y todo contenido que sostenga la primera decisión de lectura. La regla debe variar por plantilla, porque una categoría, una portada y un artículo no muestran el mismo orden visual.
La primera imagen de un artículo puede quedar visible en escritorio y fuera de pantalla en móvil. Por eso hay que probar ambos formatos, con la sesión cerrada y sin la caché local del navegador.
| Recurso y ubicación | ¿Carga diferida? | Criterio verificable |
|---|---|---|
| Imagen destacada principal | No | Es el elemento LCP o aparece en el primer pantallazo |
| Logo de cabecera | No | Se ve al abrir la página y forma parte de la navegación |
| Primera tarjeta de portada | No | Aparece sin hacer scroll en la versión revisada |
| Tarjetas de «más leído» | Sí | Quedan bajo el primer bloque editorial |
| Galería de 20 fotos | Sí, salvo la primera visible | Las restantes imágenes quedan fuera de pantalla |
| Vídeo o mapa incrustado | Sí, si está bajo el inicio | No forma parte del arranque editorial |
Carruseles que esconden el problema
Un carrusel visible no necesita descargar todas sus diapositivas al instante. La primera sí debe cargar de forma normal si aparece al abrir la página; las siguientes pueden esperar hasta que el usuario navegue o se acerquen a la vista.
No uses un carrusel como excusa para diferir la diapositiva inicial. Si esa imagen ocupa el área principal, Google y el lector la tratan como contenido prioritario.
Portada, categoría y artículo
La portada exige más cuidado porque mezcla muchos módulos. En una página de categoría, la primera tarjeta suele ser crítica; en un artículo, lo es la imagen destacada o la primera fotografía integrada antes del primer subtítulo.
Entre 3 y 7 plantillas suelen concentrar la mayor parte del tráfico en un medio editorial pequeño o mediano. Audita esas plantillas primero, antes de tocar páginas antiguas que reciben pocas visitas.
Esta matriz define qué proteger. El siguiente riesgo es técnico: varios sistemas pueden intentar aplicar la misma regla a la vez.
Elige un solo motor para aplicar la carga diferida
Desde WordPress 5.5, las imágenes e iframes pueden recibir el atributo loading="lazy". Las versiones actuales del núcleo también usan funciones como wp_get_loading_optimization_attributes para decidir atributos de carga en contextos concretos.
Nativo, plugin o JavaScript propio
La Intersection Observer API detecta cuándo un elemento se aproxima al área visible. Es válida para componentes dinámicos, pero no debe reemplazar el HTML de una imagen editorial crítica por un placeholder dependiente de JavaScript.
Detecta el lazy load duplicado
Abre el código fuente y el inspector del navegador. Una imagen problemática puede mostrar loading="lazy", una clase de un plugin, data-src de otro y una URL reescrita por la CDN.
El error más frecuente que se detecta aquí es instalar un segundo plugin porque PageSpeed sigue avisando de imágenes fuera de pantalla. Ese aviso no prueba que falte otro sistema; puede indicar que el primero está mal excluido o que la imagen ya se comprime tarde.
El HTML Living Standard de WHATWG define el atributo loading, y navegadores como Chrome y Firefox lo interpretan de forma nativa. Elige esa base sencilla cuando no exista una necesidad real de JavaScript adicional.
Para activar la carga diferida sin crear conflictos, parte siempre del HTML que ya genera la plantilla. Si las imágenes secundarias incluyen loading="lazy" y las críticas no lo llevan, la implementación nativa es suficiente y no hace falta otro plugin. Si usas un plugin de caché u optimización, activa únicamente su función de lazy load, añade exclusiones por clase o selector para la imagen destacada, la imagen hero y el primer módulo de la portada editorial, y desactiva cualquier opción equivalente de la CDN.
En componentes creados con JavaScript, IntersectionObserver debe conservar una URL de imagen válida y transferir data-src a src antes de que el recurso entre en pantalla; no conviene usarlo para el contenido del primer pantallazo.
Configura caché y CDN sin duplicar transformaciones
Activa la carga diferida en un solo punto y desactívala en los demás. Antes de cambiar una casilla, identifica si el tema, la caché, el optimizador de imágenes o la CDN ya reescriben etiquetas <img>.
Una CDN es una red de servidores que entrega archivos desde ubicaciones cercanas al visitante. Puede acelerar imágenes, pero también añadir su propio lazy load, conversión a WebP o sustitución de URL.
Revisa la cadena completa de entrega
Haz una lista simple de qué herramienta controla cada cosa: caché de página, formatos WebP o AVIF, compresión, carga diferida, minificación y CDN. Si dos herramientas controlan el mismo punto, deja solo una activa.
Después de cada cambio, purga caché de página, caché de objetos y CDN. Comprueba la web en incógnito y desde móvil, porque la barra de administrador y las cookies pueden alterar lo que ves.
Un SSD externo permite guardar copias locales antes de tocar reglas de caché, CDN o imágenes. Es una medida sencilla para volver atrás si una portada editorial muestra recursos vacíos.
- Guarda una copia de archivos y base de datos antes de cambiar ajustes visibles
- Permite conservar varias versiones de una web de noticias con imágenes y contenido reciente
- Facilita restaurar una prueba fallida sin depender solo de la copia del hosting
Excluye por plantilla, no por noticia
Crea excepciones por clase CSS o contenedor de la destacada, la hero y el primer módulo. Excluir una URL concreta falla en cuanto se publique la siguiente noticia de apertura.
Una copia previa en un SSD de 500 GB suele costar entre 45 y 70 euros en tiendas españolas, mientras que una incidencia visible en portada puede costar muchas más horas de revisión. El objetivo no es comprar hardware, sino poder probar con una vuelta atrás clara.
Si el portal usa AMP, revisa esa plantilla por separado. AMP aplica sus propias reglas de carga de imágenes y no conviene copiar sin revisar las exclusiones de la versión web normal.
Cuando una imagen no aparece al desplazarse, abre Chrome DevTools y revisa primero la consola:
- Un error de JavaScript puede impedir que el script cambie
data-srcporsrc. Después, en la pestaña Network, comprueba si la URL de la imagen llega a solicitarse y si responde con código 200, 403 o 404. Un 403 suele apuntar a permisos, hotlink protection o una regla de CDN. - Un 404 indica una URL transformada incorrectamente.
- La ausencia total de solicitud suele revelar un selector, un umbral de IntersectionObserver o un script de lazy load que no se ha ejecutado.
Tras corregirlo, purga la caché y prueba en incógnito, porque la versión almacenada puede ocultar el fallo.
Anuncio
Protege indexación, CLS y la lectura móvil
La carga diferida no perjudica el SEO si Google puede descubrir las imágenes y si el diseño reserva su espacio antes de descargarlas. La visibilidad editorial depende tanto de una URL de imagen accesible como de evitar que el texto salte mientras llega la fotografía.
Google puede procesar JavaScript, pero no es buena idea obligarle a descubrir una imagen clave solo tras una cadena de scripts. Mantén src, srcset, sizes y alt válidos en los recursos editoriales importantes.
Conserva URLs, alt y feeds accesibles
El texto alternativo, o atributo alt, explica una imagen cuando no carga y ayuda a lectores de pantalla. No es un lugar para repetir palabras clave, sino para describir una foto informativa cuando aporta contexto al titular.
Verifica también la imagen destacada en RSS, metadatos sociales y datos estructurados del artículo. Si una CDN bloquea la URL original o exige cookies, esa fotografía puede fallar en Google Noticias, Discover o herramientas de previsualización.
Las fuentes especializadas sobre este tema coinciden en recomendar mantener URLs rastreables y evitar depender de eventos como scroll, clic o interacción para revelar contenido. Esa regla encaja con las pautas de accesibilidad del W3C y con un rastreo más previsible.
Reserva espacio contra el CLS
El Cumulative Layout Shift (CLS) mide movimientos inesperados de elementos mientras la página carga. Si una foto aparece y empuja el titular o un anuncio desplaza el texto que ya se estaba leyendo, la experiencia empeora aunque la imagen pese poco.
Mantén width y height en las imágenes de WordPress. Cuando uses contenedores propios, fija una proporción con CSS, por ejemplo aspect-ratio: 16 / 9, para que el hueco exista antes de descargar el archivo.
Valida antes y después del cambio
Mide una URL de portada, una categoría y un artículo antes de editar. Tras el cambio, revisa PageSpeed Insights, el elemento LCP, el CLS y el waterfall de red en DevTools; después navega rápido con móvil para comprobar que las imágenes aparecen al hacer scroll.
Resuelve tus dudas
¿Qué es el lazy load en WordPress?
La carga diferida retrasa imágenes o iframes hasta que se acercan a la pantalla visible. Desde WordPress 5.5 puede aplicarse mediante loading="lazy", pero las imágenes iniciales deben quedar excluidas.
¿El lazy load mejora el SEO?
El lazy load puede ayudar al SEO si mejora el rendimiento sin ocultar contenido a Google. Empeora el resultado si retrasa el LCP o deja la URL real de una imagen solo en JavaScript.
¿Qué imágenes no deben llevar loading lazy?
No deben llevarlo la imagen LCP, la hero, el logo visible y el primer bloque editorial. Tampoco debe aplicarse a la primera diapositiva visible de un carrusel de portada.
¿Cómo sé si hay lazy load duplicado?
Hay duplicidad si varios sistemas añaden atributos o sustituyen la URL de la misma imagen. Revisa el inspector para detectar combinaciones de loading, data-src, placeholders y scripts de CDN.
¿WordPress tiene carga diferida nativa?
WordPress incorpora carga nativa de imágenes e iframes desde la versión 5.5. Antes de añadir un plugin, revisa si el tema, la caché o la CDN ya hacen ese trabajo.
¿Lazy load funciona con AMP?
Puede funcionar con AMP, pero la plantilla AMP debe revisarse por separado. Sus componentes de imagen tienen reglas propias y no deben heredar exclusiones sin una prueba real.
¿Cómo evito que salte el contenido al cargar?
Evitas saltos manteniendo width y height o una relación de aspecto CSS en cada recurso. Aplica la misma reserva de espacio a anuncios, vídeos, mapas y publicaciones incrustadas.
¿Debo medir solo la nota de PageSpeed?
No, porque una nota alta puede esconder una imagen LCP tardía o un CLS visible. Comprueba al menos el elemento LCP, el waterfall de red y la carga al hacer scroll en móvil.
Actúa con una regla editorial clara
La carga diferida bien configurada acelera contenido secundario sin retrasar la noticia que el lector vino a leer. El cambio seguro empieza por identificar el LCP, no por activar una casilla.
- Lo esencial: la imagen LCP y el primer contenido visible deben cargar sin lazy load.
- Lo esencial: usa un solo sistema entre WordPress, plugins, caché y CDN.
- Lo esencial: conserva URLs, texto alt y dimensiones para proteger indexación y CLS.
- Lo esencial: valida portada, categoría y artículo con PageSpeed, DevTools y pruebas de scroll móvil.
Para continuar con la revisión técnica, consulta también los contenidos sobre caché de WordPress, optimización de imágenes WebP y AVIF, y mejora de Core Web Vitals.
Anuncio
Lecturas adicionales
Si quieres ampliar información sobre este tema, estas fuentes pueden interesarte:
- Cómo mejorar la carga de tu WordPress con lazy load — raiolanetworks.com
- Lazy Load en WordPress, ¡mejora la velocidad de tu web! — webempresa.com
- Tu vídeo con lazy load puede empeorar el LCP
- SEO técnico y velocidad: mejorar rapidez para posicionar
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.