LCP: qué es y cómo mejorar esta métrica de Core Web Vitals

Infografía sobre el LCP de Core Web Vitals: cómo medir y mejorar el Largest Contentful Paint en WordPress y Shopify

El LCP (Largest Contentful Paint) es el tiempo que tarda en cargarse el elemento más grande de tu página. Puede ser una imagen, un vídeo o un bloque de texto. Google quiere que ese tiempo sea menor de 2.5 segundos.

Si tu web supera ese límite, tienes un problema. Y no es menor. Porque el LCP es uno de los tres Core Web Vitals que Google usa para evaluar la experiencia de usuario. Si fallas, tu posicionamiento lo paga.

Aquí tienes lo que funciona para mejorar esta métrica, tanto en WordPress como en cualquier otra plataforma.

LCP en WordPress: soluciones prácticas

Si usas WordPress, tu LCP suele depender de tres cosas: el hosting, las imágenes y los plugins. Ataca por ahí.

  • Cambia a un hosting de calidad. El TTFB (tiempo hasta el primer byte) debe ser inferior a 200ms. Hostings como Kinsta, WP Engine o SiteGround marcan la diferencia.

  • Optimiza la imagen más grande de la página. Esa es tu LCP. Convierte a WebP, comprime sin perder calidad y reduce dimensiones si puedes.

  • Usa lazy loading. Las imágenes que no son LCP deben cargarse después. Es una orden que no deberías saltarte.

  • Minimiza el CSS y el JavaScript que bloquea la carga. Plugins como WP Rocket o Asset CleanUp te ayudan a mover el CSS crítico al <head> y a diferir el JS que no es necesario para el primer renderizado.

Las mejoras no son inmediatas. Pero en semanas verás cómo el LCP baja y la web respira mejor.

LCP en Shopify: lo que puedes hacer (y lo que no)

En Shopify, tu control es limitado. Pero no estás atado de pies y manos.

  • Elige un tema ligero. Temas como Dawn o Sense están mejor optimizados de serie.

  • Revisa el tamaño de la primera imagen de producto o del banner. Esa suele ser tu LCP. Súbela en WebP con dimensiones justas.

  • Limita las apps en el frontend. Cada app añade JS y CSS. Carga solo las que realmente necesitas.

  • Comprime imágenes y usa lazy loading. Shopify ya tiene lazy loading nativo, pero comprobar que está activado no cuesta nada.

  • No satures la home. Cuantos menos bloques y secciones tenga la página, más rápido cargará el LCP.

Si el problema persiste, plantéate cambiar de tema o reducir el número de apps activas. A veces es mejor simplificar que sobrecargar.

Cómo auditar tu LCP paso a paso

Cómo auditar el LCP paso a paso con herramientas como PageSpeed Insights, Google Search Console, Chrome DevTools y WebPageTest

No adivines. Mide y actúa con datos.

1. Usa PageSpeed Insights. Te da el LCP de cada URL y te dice qué está fallando. Es el punto de partida.

2. Abre el informe de Core Web Vitals en Google Search Console. Identifica qué páginas tienen problemas. Prioriza las que más tráfico reciben.

3. Con Chrome DevTools: en la pestaña “Rendimiento”, recarga la página con “Recargar y registrar cobertura” y busca la línea de tiempo. El LCP aparecerá marcado.

4. Prueba WebPageTest. Configura el test desde ubicaciones reales. Es más detallado que PageSpeed Insights y te da un desglose visual del LCP.

El flujo es sencillo: mides, identificas el elemento, optimizas y vuelves a medir. Si no mides, no mejoras.

HerramientaQué mide
PageSpeed InsightsLCP de cada URL con datos de laboratorio y de campo (CrUX)
Google Search ConsoleURLs con problemas de LCP según datos reales de Chrome
Chrome DevToolsLCP marcado en la línea de tiempo de rendimiento
WebPageTestDesglose visual del LCP desde ubicaciones reales

Herramientas para medir LCP (gratuitas y con datos reales)

  • Google PageSpeed Insights (gratis): Datos de laboratorio y de campo (CrUX). Bueno para un primer diagnóstico.

  • Google Search Console (gratis): Te dice qué URLs tienen problemas de LCP según datos reales de Chrome.

  • WebPageTest (gratis): Tests avanzados desde múltiples ubicaciones. Ideal para ver el impacto de la CDN.

  • Lighthouse en Chrome DevTools (gratis): Mide la página en local y te da recomendaciones.

  • DebugBear (freemium): Monitorización de Core Web Vitals con datos históricos.

  • Calibre (freemium): Similar a DebugBear, con integraciones para equipos.

  • GTmetrix (freemium): Ofrece métricas de LCP y recomendaciones.

Usa más de una herramienta. Lo que ves en PageSpeed no siempre coincide con lo que experimentan tus usuarios. Cruza datos.

El LCP no es un número, es un síntoma

Optimizar el LCP no es un capricho. Es una señal de que tu web está bien construida, que el servidor responde, que las imágenes pesan lo justo y que el código no se arrastra.

Si mejoras el LCP, también mejora la experiencia de usuario, la tasa de conversión y el posicionamiento. No es magia. Es hacer las cosas bien.

Empieza por lo que más duele: el hosting y la imagen LCP. Luego ve limpiando lo que sobra. Paso a paso.