LCP: qué es y cómo mejorarlo en tu web

Por qué importa

El LCP es lo más parecido a la sensación de “ya ha cargado”. Mientras ese elemento no aparece, el visitante ve una página a medias y tiene la tentación de volver atrás, algo especialmente caro en una ficha de producto o en la página a la que llevan tus anuncios.

Google considera bueno un LCP de hasta 2,5 segundos, mejorable hasta 4 y pobre por encima. Las Core Web Vitals forman parte de las señales de experiencia de página, medidas con visitantes reales. Bajar el LCP en el laboratorio es el primer paso para que también baje en esos datos.

Cómo lo comprueba Posiciona

Tomamos el LCP que mide Lighthouse 13 en la prueba móvil de PageSpeed Insights y usamos su nota de 0 a 100: unos 90 puntos con 2,5 segundos, 50 con 4 segundos y menos cuanto más tarde. En el informe verás el tiempo y si es bueno (hasta 2,5 s), necesita mejora (hasta 4 s) o es pobre. Es un dato de laboratorio: puede diferir del de Search Console, que viene de visitantes reales. Además te decimos qué elemento es el LCP (un texto o una imagen) y qué lo retrasa, según los análisis de Lighthouse: hojas de estilo y fuentes que bloquean el pintado, si la imagen tiene loading="lazy" o le falta prioridad y cuánto tarda el servidor. Si el LCP es un texto, optimizar imágenes no lo acelera.

En la nota de Velocidad esta comprobación cuenta como “importante” (peso 3 de 5).

Cómo solucionarlo

Averigua cuál es tu elemento LCP: PageSpeed Insights lo señala en su diagnóstico, y también el panel Rendimiento de las herramientas para desarrolladores de Chrome.
Si es una imagen, no le pongas carga diferida (loading="lazy"): dale prioridad con fetchpriority="high" y sírvela en WebP o AVIF con el tamaño al que se muestra.
Si la imagen es un fondo de CSS o la inserta un script, el navegador la descubre tarde: pásala a una etiqueta <img> o precárgala con <link rel="preload">.
Acelera la respuesta del servidor con caché de página y, si tienes visitantes lejos del servidor, un CDN. Mientras no llega el HTML, no empieza nada.
Reduce el CSS y el JavaScript que bloquean el renderizado: aplaza con defer los scripts que no sean imprescindibles y elimina las hojas de estilo que no uses.
Si el LCP es un texto, usa font-display: swap en tus fuentes web para que se muestre con una fuente del sistema mientras llega la tuya.

Imagen principal con prioridad altaHTML

<img src="/img/portada-1200.webp" width="1200" height="600" fetchpriority="high" alt="Colección de otoño">

Precargar una imagen que se usa como fondo en CSSHTML

<link rel="preload" as="image" href="/img/portada-1200.webp" fetchpriority="high">

En WordPress

Desde WordPress 6.3, el núcleo intenta no aplicar carga diferida a la primera imagen grande y le añade fetchpriority="high". Si un plugin de optimización fuerza la carga diferida en todas las imágenes, excluye la principal en sus ajustes.
Con WP Rocket o LiteSpeed Cache, activa la caché de página y el aplazamiento del JavaScript, y comprueba después que la portada sigue funcionando.

En Shopify

En Shopify, si la imagen principal está en la primera sección (banner o presentación de diapositivas), comprueba en Tienda online → Temas → Editar código que esa sección no le añade loading="lazy".
Sube la imagen del banner con un tamaño razonable, no la foto original de la cámara: el CDN de Shopify genera versiones más pequeñas si el tema usa el filtro image_url. Y evita que la primera sección sea una presentación de diapositivas o un vídeo.

Preguntas frecuentes

¿Qué elementos pueden ser el LCP?

Las imágenes (también las de fondo en CSS y las portadas de vídeo) y los bloques de texto, como un titular o un párrafo. Solo cuenta lo que se ve en la primera pantalla y se toma el más grande. En móvil suele ser la imagen de cabecera o el título, y puede ser distinto que en ordenador, porque cambia lo que cabe en pantalla.

¿Por qué PageSpeed y Search Console me dan un LCP distinto?

PageSpeed Insights hace una carga de laboratorio: un móvil simulado, con conexión lenta y sin caché. Search Console y la parte de datos reales de PageSpeed usan el informe CrUX, con visitas reales de usuarios de Chrome durante los últimos 28 días. Los datos de campo son los que cuentan para Google; el laboratorio sirve para encontrar la causa y probar la solución al momento.