Cómo reducir el LCP (Largest Contentful Paint) por debajo de 2 segundos

Para reducir el LCP por debajo de 2 segundos, las acciones más importantes son conseguir una respuesta rápida del servidor, identificar correctamente el elemento visible más grande de la página, comprimir y priorizar la imagen hero, reducir el peso innecesario de CSS y JavaScript, usar caché y CDN, optimizar las fuentes y medir los cambios con datos de usuarios reales. Largest Contentful Paint mide cuánto tarda en cargarse el bloque de texto, imagen, póster de vídeo o imagen de fondo más grande que aparece en la pantalla del usuario. Para Google, un buen valor de LCP está por debajo de 2,5 segundos; sin embargo, si buscas SEO competitivo, mayor conversión y una experiencia de navegación más fluida, bajar de 2 segundos es un objetivo práctico, realista y muy recomendable.

En esta guía abordaremos el problema del LCP no como una simple mejora de puntuación técnica, sino como un proyecto de rendimiento que afecta directamente a la experiencia real del usuario. Nos centraremos especialmente en los pasos que suelen dar mejores resultados en proyectos reales: infraestructura de hosting, TTFB, optimización de imágenes, recursos que bloquean el renderizado, plugins de WordPress, CDN y capas de caché. Si tu sitio tarda en abrir, PageSpeed Insights muestra advertencias de LCP o estás perdiendo posiciones y conversiones en tráfico móvil, puedes aplicar la siguiente lista de control paso a paso para conseguir mejoras medibles.

Qué es el LCP y por qué conviene apuntar a menos de 2 segundos

El LCP es una de las métricas de Core Web Vitals y mide la rapidez con la que el contenido principal de una página se muestra al usuario. FCP, es decir First Contentful Paint, registra el momento en que aparece el primer contenido; INP mide la demora de interacción; y CLS analiza la estabilidad visual. LCP, en cambio, se centra en el momento en que se carga el contenido grande que el usuario realmente estaba esperando. En una página de producto suele ser la imagen del producto; en un artículo de blog, la imagen destacada o el bloque del título; y en una página de inicio, normalmente el gran banner o hero superior.

Google define como bueno un LCP inferior a 2,5 segundos. Pero ese umbral solo indica que la experiencia no es problemática. En los estándares SEO de 2026, teniendo en cuenta la indexación mobile-first, los resultados de búsqueda apoyados por inteligencia artificial, la fuerte competencia en las SERP y la poca paciencia del usuario, estar por debajo de 2 segundos ofrece un margen de seguridad mucho mayor. En e-commerce, SaaS, webs corporativas y sitios de contenido, incluso 1 segundo adicional de espera puede aumentar la tasa de rebote y reducir acciones como completar formularios, añadir productos al carrito o solicitar presupuesto.

Mejorar el LCP no es importante solo para los motores de búsqueda, sino también para la percepción de marca. Si al abrir una página el usuario ve una pantalla en blanco, una imagen que aparece tarde o un diseño que salta, puede interpretar que el sitio no es fiable. Por eso, elegir un hosting rápido Hostragons Alojamiento Web, ofrecer una conexión moderna y segura con SSL certificados SSL y construir confianza de marca con un dominio adecuado Consulta de dominio forman parte de una estrategia de rendimiento bien planteada.

Mide correctamente tu LCP: datos de laboratorio y datos de usuarios reales

Antes de empezar a optimizar, es imprescindible medir bien la situación actual. PageSpeed Insights, Lighthouse, Chrome DevTools, WebPageTest y el informe de Core Web Vitals de Google Search Console son algunas de las herramientas más utilizadas. Sin embargo, no todas sus métricas deben interpretarse de la misma manera. Lighthouse genera datos de laboratorio: prueba la página bajo unas condiciones simuladas de dispositivo, red y rendimiento. CrUX y Search Console, en cambio, muestran datos de usuarios reales. Para reducir el LCP por debajo de 2 segundos, conviene utilizar ambos tipos de datos de forma conjunta.

Valores clave que debes seguir durante la medición

• Elemento LCP: ¿Qué imagen, texto o bloque de la página está siendo marcado como LCP?
• TTFB: ¿Cuánto tarda el servidor en enviar el primer byte? Para la mayoría de páginas, un objetivo ideal suele estar entre 200 y 500 ms.
• Render delay: Si el recurso ya llegó, ¿por qué el navegador tarda en pintarlo?
• Resource load delay: ¿Cuánto se retrasa el inicio de la solicitud del elemento LCP?
• Resource load duration: ¿El tamaño del archivo o la latencia de red dificultan la descarga del recurso LCP?

Por ejemplo, si en un artículo de WordPress el elemento LCP es una imagen destacada WebP de 320 KB, el problema suele ser manejable. Pero si esa misma imagen pesa 2,8 MB en JPEG y además no se muestra hasta que se cargan varios archivos CSS, el LCP puede subir fácilmente a 4 o 5 segundos. En otro caso, aunque el archivo pese poco, si el TTFB es de 1,4 segundos, el problema no estará tanto en la imagen como en el hosting, las consultas a la base de datos o la falta de caché.

Causas más comunes de los problemas de LCP

Un mal LCP rara vez se debe a una sola causa. Normalmente es el resultado de una cadena de retrasos: el servidor responde tarde, el HTML llega tarde, el CSS crítico bloquea el renderizado, la imagen LCP se descubre demasiado tarde, JavaScript ocupa el hilo principal y el cambio de fuentes retrasa la visualización del contenido. Por eso, instalar un plugin o comprimir una imagen no siempre es suficiente.

Piensa en esta tabla como un mapa de prioridades. El primer objetivo es encontrar qué punto de la cadena del LCP está generando la mayor demora. Si el TTFB es alto, conviene solucionar el servidor y la caché antes de dedicar tiempo a la optimización visual. Si el TTFB es bueno pero la imagen LCP se carga tarde, entonces hay que trabajar el formato, el tamaño y la prioridad de esa imagen.

1. Reduce el tiempo de respuesta del servidor

La base de una buena optimización de LCP es una respuesta rápida del servidor. Si el documento HTML llega tarde, el navegador también descubrirá tarde los archivos CSS, JavaScript y las imágenes. Por eso, en sitios con un TTFB elevado, el primer paso para mejorar el LCP es revisar la infraestructura de hosting. Si los recursos del hosting compartido se quedan cortos, los límites de CPU se alcanzan con frecuencia o las respuestas de la base de datos se alargan, las optimizaciones de página tendrán un efecto limitado.

Controles prácticos en la parte de hosting

• Actualiza PHP a una versión moderna y estable. Las versiones antiguas de PHP pueden provocar lentitud notable en WordPress y en CMS actuales.
• Comprueba características de rendimiento como discos NVMe, arquitectura basada en LiteSpeed o NGINX, y soporte para HTTP/2 o HTTP/3.
• Elige una ubicación de servidor cercana a tu público principal. Para una web enfocada en España, por ejemplo, un centro de datos en España o Europa occidental puede reducir la latencia.
• Limpia las tablas de la base de datos, elimina revisiones innecesarias y borra datos temporales que ya no se utilizan.
• En sitios con mucho tráfico, valora un VPS, servidor cloud o plan de hosting escalable VPS Server.

Como objetivo práctico, intenta llevar el TTFB a 200-400 ms en escritorio y, en móvil, mantenerlo siempre que sea posible por debajo de 500 ms. Naturalmente, este objetivo puede variar en páginas dinámicas, personalizadas o con un uso intensivo de base de datos. Pero en blogs, páginas corporativas y categorías, estos valores son alcanzables con una caché bien configurada.

2. Identifica y prioriza el elemento LCP

Optimizar sin saber cuál es el elemento LCP es trabajar a ciegas. Puedes ver el elemento LCP en el panel Performance de Chrome DevTools o en el informe de PageSpeed Insights. A menudo se trata de la imagen destacada en la parte superior, un slider, un bloque grande de título o el póster de un vídeo. Una vez identificado, debes decirle al navegador que ese recurso es importante.

Enfoque recomendado para la imagen hero

• Excluye la imagen LCP del lazy load. La imagen principal situada above the fold no debería cargarse de forma perezosa.
• Define la imagen lo antes posible dentro del HTML. Las imágenes hero declaradas como fondo CSS a veces se descubren más tarde.
• Usa preload y alta prioridad de fetch cuando tenga sentido.
• Sirve tamaños diferentes para móvil y escritorio. No envíes una imagen de 1920 px a una pantalla móvil de 390 px de ancho.
• Indica las dimensiones con width y height. Esto también ayuda a reducir el riesgo de CLS.

Por ejemplo, si el elemento LCP de tu página de inicio es un banner de 1600x900 píxeles, ofrecer en móvil una versión WebP de 720 px de ancho puede marcar una gran diferencia. Tras la compresión, la imagen puede pasar de 1,5 MB a un rango de 180-250 KB. Ese único cambio puede mejorar el LCP móvil en más de 1 segundo.

3. Optimiza las imágenes con WebP o AVIF

Las imágenes son una de las causas más frecuentes de problemas de LCP. En muchos sitios WordPress, las imágenes se suben con una resolución original muy grande y, aunque el tema las muestre en pantalla a un tamaño menor, el navegador termina descargando el archivo pesado. Por eso no basta con comprimir: hay que servir la imagen en el tamaño correcto.

Lista de control para optimización de imágenes

• Convierte los archivos JPEG y PNG a WebP o AVIF siempre que sea posible.
• Comprime las imágenes destacadas con una pérdida de calidad aceptable. Normalmente, un rango de calidad del 70 al 85 % ofrece buenos resultados.
• Usa una estructura de imágenes responsive. Con srcset, el navegador puede elegir distintos tamaños según la pantalla.
• Elimina información EXIF y metadatos innecesarios.
• Para iconos, utiliza SVG cuando sea adecuado; pero simplifica también los SVG excesivamente complejos.

En un escenario típico de un sitio de contenidos, las imágenes destacadas de blog pueden pesar de media 1,2 MB. Después de convertirlas a WebP y redimensionarlas correctamente, pueden bajar a unos 180 KB. Si la imagen LCP es precisamente esa imagen destacada, la mejora será especialmente notable en conexiones móviles 4G. Este beneficio no solo mejora la puntuación de PageSpeed, sino también la primera impresión del usuario.

4. Reduce los archivos CSS que bloquean el renderizado

Cuando el navegador recibe el HTML, necesita las reglas CSS para pintar la página. Los archivos CSS grandes, no segmentados y llenos de código que no se usa pueden retrasar la aparición del elemento LCP. Esto ocurre con frecuencia en temas prefabricados y constructores visuales, que cargan en una sola página estilos de muchos componentes que ni siquiera se utilizan.

Acciones recomendadas en CSS

• Genera CSS crítico y carga pronto los estilos necesarios para la parte visible inicial de la página.
• Elimina el CSS no utilizado o cárgalo solo en las páginas donde sea necesario.
• Minifica los archivos CSS, pero no te quedes solo en el minify; la mayor ganancia suele venir de reducir código innecesario.
• Evita que los archivos CSS de plugins de terceros se carguen en todas las páginas si no hacen falta.
• Utiliza solo los componentes necesarios del tema; revisa sliders pesados, animaciones y paquetes de iconos sobredimensionados.

La clave al crear CSS crítico es no romper la coherencia visual de la página. Una configuración incorrecta puede provocar que el diseño se vea desordenado durante el primer instante o que aumente el CLS. Por eso, después de cada cambio conviene probar por separado en móvil y escritorio.

5. Mantén bajo control la carga de JavaScript

JavaScript puede afectar al LCP de dos formas. Primero, algunos archivos JS pueden bloquear el proceso de renderizado. Segundo, pueden mantener ocupado el hilo principal durante demasiado tiempo y retrasar el momento en que el navegador pinta el elemento LCP. Los códigos de seguimiento, herramientas de chat, scripts publicitarios, plataformas de test A/B y widgets sociales suelen tener un impacto visible en el rendimiento.

Tácticas prácticas para JavaScript

• Retrasa los scripts no críticos con defer o async.
• Pospón los scripts de terceros que no son necesarios en la primera pantalla hasta después de una interacción del usuario.
• Desactiva por página los archivos JS innecesarios de los constructores visuales.
• Usa división de código y carga por módulos para reducir tareas largas.
• Prueba uno a uno analytics, píxeles y scripts de chat para medir su impacto real.

Por ejemplo, si en la home de una web corporativa se cargan a la vez un slider, una librería de animaciones, un mapa incrustado, chat en vivo y tres códigos de seguimiento distintos, alcanzar el objetivo de LCP será mucho más difícil. Algunas de esas herramientas pueden ser necesarias para la conversión, pero no todas tienen que ejecutarse durante la primera carga. Optimizar el rendimiento consiste en priorizar sin romper los objetivos de negocio.

6. Acelera las fuentes y protege la visibilidad del texto

En muchas páginas, el elemento LCP no es una imagen, sino un título grande o un bloque de texto. En ese caso, la carga tardía de fuentes web puede afectar directamente al LCP. Llamar a muchas variantes de peso y estilo desde proveedores externos genera retrasos, especialmente en móvil.

Recomendaciones de optimización de fuentes

• Carga solo los pesos de fuente que realmente utilizas. Revisa si de verdad necesitas 300, 400, 500, 600, 700 y sus variantes en cursiva.
• Usa font-display swap para evitar que el texto permanezca invisible.
• Preload de las fuentes críticas, pero evita abusar de preload en recursos que no son esenciales.
• Si es posible, sirve las fuentes desde tu propio servidor.
• En algunos proyectos, optar por fuentes del sistema es la solución más rápida, limpia y eficiente.

Reducir archivos de fuente puede parecer una mejora menor, pero si el LCP es un elemento textual, su efecto puede ser importante. Además, las fuentes también influyen en el CLS. Cuando se carga una fuente distinta, puede cambiar el ancho del texto y desplazar el diseño. Por eso, rendimiento y diseño visual deben evaluarse juntos.

7. Configura correctamente las capas de caché y CDN

La caché mejora de forma notable el LCP en visitas recurrentes y en contenidos estáticos. La caché de página, la caché de objetos, la caché del navegador y la caché CDN son capas diferentes. Todas tienen el mismo objetivo: servir el mismo contenido más rápido, sin generarlo una y otra vez ni transportarlo siempre desde un servidor lejano.

En sitios WordPress, combinar LiteSpeed Cache, Redis object cache, caché del navegador e integración CDN acelera tanto la generación del HTML como la entrega de archivos estáticos. En proyectos corporativos o desarrollos a medida, conviene planificar caché a nivel de aplicación, optimización de consultas de base de datos y estrategia de edge cache. Si tu tráfico llega desde distintas ciudades o países, usar CDN se vuelve todavía más importante Guía de CDN y Velocidad del Sitio.

Puntos a vigilar al configurar la caché

• Define tiempos de caché largos para archivos estáticos y usa versionado de archivos.
• Configura con cuidado las reglas de caché HTML en áreas dinámicas como membresías, carritos o paneles personales.
• Evalúa optimización de imágenes, compresión Brotli y soporte HTTP/3 en la CDN.
• Planifica el proceso de purga de caché según tu flujo de publicación.
• Si necesitas cachés distintas para móvil y escritorio, prueba que no se entregue contenido incorrecto.

8. Plan específico para mejorar el LCP en sitios WordPress

WordPress puede ser rápido cuando está bien configurado; pero el uso descontrolado de temas y plugins suele elevar el LCP. El error más común en sitios WordPress es intentar resolver el rendimiento únicamente con un plugin de caché. En realidad, la elección del tema, la cantidad de plugins, la disciplina con las imágenes y la calidad del hosting deben trabajarse en conjunto Alojamiento en WordPress.

Lista de control paso a paso para WordPress

• Usa un tema ligero y actualizado. En lugar de temas con funciones infinitas, elige uno ajustado a tus necesidades reales.
• Elimina plugins innecesarios. Incluso los plugins inactivos pueden generar riesgos de seguridad y gestión.
• Si usas un constructor visual, reduce widgets globales, animaciones y recursos cargados por defecto.
• Redimensiona las imágenes destacadas antes de subirlas.
• Configura con cuidado la caché de página, optimización CSS/JS e imágenes en LiteSpeed o plugins similares.
• Limpia periódicamente revisiones de la base de datos, comentarios spam, transients y borradores.

En una página de blog, por ejemplo, la primera medición puede mostrar un LCP de 4,1 segundos. Si el TTFB es de 900 ms, la imagen destacada pesa 1,8 MB y el CSS del tema ocupa 450 KB, el orden de actuación está claro: primero reducir TTFB con hosting y caché, después convertir la imagen destacada a WebP y hacerla responsive, y finalmente disminuir el CSS no utilizado. Tras este trabajo, bajar el LCP al rango de 1,7-2,1 segundos es un objetivo realista.

9. Optimiza el LCP móvil por separado

Los usuarios móviles suelen tener menor capacidad de procesamiento y conexiones más variables. Por eso, un LCP aceptable en escritorio puede ser malo en móvil. Como Google da mucho peso a la experiencia móvil, debes probar siempre tus páginas en escenarios móviles.

En móvil, las imágenes grandes y el JavaScript pesado generan aún más problemas. Si en la primera pantalla usas vídeo automático, sliders grandes, animaciones intensas o contenido externo incrustado, alcanzar el objetivo de LCP se complica. En móvil suele funcionar mejor una zona hero sencilla, un título claro, una imagen optimizada y una respuesta rápida del servidor.

Mejoras rápidas para móvil

• Usa una sola imagen hero optimizada en lugar de un slider.
• En vez de reproducir vídeo en la primera pantalla, muestra un póster comprimido.
• No ocultes componentes de escritorio innecesarios solo con CSS: evita cargarlos directamente en móvil.
• Define srcset adaptado a los puntos de ruptura móviles.
• Inicia los scripts de terceros después de la primera carga.

10. Prueba y supervisa los cambios uno por uno

Uno de los mayores errores al optimizar LCP es hacer demasiados cambios a la vez y luego no saber cuál funcionó. Para avanzar de forma medible, registra datos antes y después de cada modificación. PageSpeed Insights, la vista filmstrip de WebPageTest y las grabaciones de rendimiento de Chrome DevTools son muy útiles en este proceso.

Un flujo de prueba recomendado sería el siguiente: primero elige entre 3 y 5 URL críticas, como la página de inicio, el artículo de blog con más tráfico, una página de categoría y una página de conversión. Para cada URL, anota el LCP actual, TTFB, elemento LCP, peso total de la página y número de solicitudes. Después aplica mejoras en este orden: servidor/caché, imágenes, CSS/JS y, por último, fuentes. Tras cada fase, vuelve a probar las mismas URL. Finalmente, espera a que se actualice el informe de Core Web Vitals de Google Search Console; los datos de usuarios reales se vuelven más significativos con el paso de varias semanas.

Lista de control para conseguir un LCP por debajo de 2 segundos

• Reduce el TTFB por debajo de 500 ms siempre que sea posible.
• Identifica con precisión el elemento LCP y asegúrate de que se cargue pronto en la página.
• Sirve la imagen hero en WebP o AVIF y con el tamaño correcto.
• Excluye del lazy load las imágenes visibles en la primera pantalla.
• Usa CSS crítico y reduce archivos CSS y JS no utilizados.
• Retrasa scripts de terceros innecesarios.
• Disminuye la cantidad de fuentes y pesos, y utiliza font-display swap.
• Configura caché de página, caché del navegador, caché de objetos y CDN.
• Haz pruebas móviles por separado y sigue los datos de usuarios reales.
• Mide cada cambio de forma independiente para crear un estándar de rendimiento sostenible.

Conclusión

Reducir el LCP por debajo de 2 segundos no es un ajuste puntual de un plugin; es un trabajo integral que combina hosting, prioridad de recursos, disciplina con imágenes, gestión de CSS/JS, caché y medición continua. Los resultados más rápidos suelen llegar al reducir el TTFB, optimizar la imagen LCP y disminuir los recursos que bloquean el renderizado. Para lograr un éxito duradero, el rendimiento debe formar parte de tu proceso habitual de publicación y mantenimiento.

Si la infraestructura de tu sitio limita tus objetivos de rendimiento, puedes empezar por un hosting más rápido, una ubicación de servidor adecuada y una configuración SSL segura. En Hostragons puedes revisar opciones de alojamiento adaptadas a tu web y construir una base más sólida para mejorar el LCP y la experiencia general del usuario Paquetes de Hosting Hostragons.

Preguntas frecuentes

¿Cuál debe ser un buen valor de LCP?

Google considera bueno un LCP inferior a 2,5 segundos. Sin embargo, para un SEO competitivo y una mejor experiencia de usuario, estar por debajo de 2 segundos es un objetivo mucho más sólido. En tráfico móvil, este objetivo puede influir positivamente en las tasas de conversión.

¿Qué afecta más al tiempo de LCP?

Los factores más habituales son una respuesta lenta del servidor, una imagen hero demasiado grande, CSS que bloquea el renderizado, JavaScript pesado, fuentes que cargan tarde y falta de caché. Para saber cuál domina en tu caso, revisa el elemento LCP con PageSpeed Insights y DevTools.

¿Usar CDN reduce el LCP?

Sí, especialmente cuando los usuarios están lejos de la ubicación del servidor. Una CDN puede servir archivos estáticos desde puntos más cercanos y reducir el tiempo de carga. Aun así, si el TTFB, el tamaño de las imágenes o los recursos que bloquean el renderizado están mal optimizados, una CDN por sí sola no será suficiente.

¿Cuál es el primer paso para optimizar LCP en WordPress?

El primer paso es identificar el elemento LCP y medir el TTFB. Después hay que revisar la configuración de hosting y caché, optimizar la imagen destacada o hero, y reducir cargas innecesarias del tema y los plugins.

¿El lazy load es bueno para el LCP?

El lazy load es útil para imágenes que quedan por debajo de la primera pantalla. Pero aplicarlo a la imagen inicial que actúa como elemento LCP suele ser perjudicial, porque el navegador carga tarde ese recurso importante. La imagen LCP debe cargarse con prioridad.