Cómo mejorar el LCP de WordPress optimizando imágenes
Reducir el archivo ayuda, pero el LCP también depende de cuándo descubre el navegador la imagen, su prioridad y el HTML que la reserva.
Cuando la imagen principal es el Largest Contentful Paint, reducir su peso es importante, pero no suficiente. El navegador también necesita descubrirla pronto, darle prioridad y reservar su espacio antes de descargarla.
Identifica primero el elemento LCP
No asumas que siempre es la cabecera. Compruébalo en las herramientas de rendimiento del navegador o en PageSpeed Insights. En móvil y escritorio pueden aparecer elementos distintos debido al layout responsive.
Reduce los bytes que llegan por la red
Redimensiona la imagen a un tamaño razonable, escoge WebP o AVIF cuando el resultado visual sea adecuado y evita una calidad innecesariamente alta. Compressify puede automatizar estas tres decisiones para las nuevas subidas y ayudarte a procesar la biblioteca existente.
Haz que el navegador la encuentre pronto
Una imagen LCP insertada tarde por JavaScript o escondida como fondo CSS empieza a descargarse después. Cuando sea posible, usa un elemento de imagen presente en el HTML inicial. No le apliques carga diferida si aparece en el primer viewport y considera una prioridad alta únicamente para el recurso principal.
<img src="hero.webp" width="1280" height="720" fetchpriority="high" alt="...">Reserva el espacio
Los atributos width y height permiten al navegador calcular la proporción antes de recibir el archivo. Esto reduce desplazamientos visuales y evita que la página tenga que recolocarse cuando aparece la imagen.
No cargues diez candidatos prioritarios
La prioridad deja de ser útil si se asigna a cada miniatura. Resérvala para uno o dos recursos críticos. Las imágenes fuera de pantalla sí pueden usar carga diferida para no competir con el contenido inicial.
Mide el LCP completo
El tiempo final incluye respuesta del servidor, retraso hasta descubrir el recurso, descarga y renderizado. Si comprimir reduce 200 ms pero el recurso sigue oculto durante un segundo, el cuello de botella está en otro punto. Repite la traza después de cada cambio.
Lista de comprobación
- elemento LCP identificado en móvil y escritorio;
- dimensiones ajustadas al diseño;
- formato y calidad validados;
- imagen presente en el HTML inicial;
- sin lazy loading para la imagen visible al cargar;
- width y height declarados;
- caché y CDN revisados.
Compressify resuelve la preparación del archivo; el tema sigue controlando el descubrimiento, la prioridad y el marcado. Tratar ambos lados juntos es lo que produce una mejora estable.
La guía de optimización de LCP de web.dev explica por qué el peso, el descubrimiento, la descarga y el retraso de renderizado deben medirse por separado.
