El defensor de búsqueda de Google, John Mueller, destaca un nuevo estudio de caso que explica por qué ciertas mejoras más importantes de Contentful Paint a menudo no producen resultados. En un diseño que varía según la tienda, el navegador puede centrarse en el elemento incorrecto, lo que provoca que todas las optimizaciones posteriores se dirijan a algo que nunca fue el LCP en primer lugar.
El estudio de caso se publicó en web.dev el 24 de junio y detalla un año de trabajo de Core Web Vitals en la plataforma de comercio electrónico Nuvemshop. Inicialmente, el equipo sospechó que el peso de la imagen o la latencia del servidor eran los principales problemas. Sin embargo, su análisis les indicó cómo el navegador seleccionó el elemento LCP. Después de optimizar la selección de elementos, la prioridad de las imágenes, la carga diferida y el almacenamiento en caché perimetral, Nuvemshop informa que la proporción de sus tiendas con buenas puntuaciones de LCP aumentó del 57 % al 96 %.
Cómo se elige el elemento equivocado
En Nuvemshop, los comerciantes pueden organizar las secciones de su página de inicio en el orden que prefieran, lo que da como resultado carruseles, pancartas y cuadrículas de productos que aparecen en varias posiciones en diferentes temas. Según el estudio de caso, los carruseles estaban presentes en el 85% de los escaparates, y aquí es donde la medición encontró un problema.
El problema surgió de las transiciones CSS en carruseles y pancartas. Estas transiciones se retrasaron cuando los elementos se volvieron visibles para la detección LCP del navegador. Si bien los compradores vieron cargar el carrusel primero, el navegador ocasionalmente identificó un banner más abajo como el elemento LCP porque su visibilidad no se retrasó por una transición. En consecuencia, según Nuvemshop, los esfuerzos de optimización anteriores se centraron en elementos que nunca fueron el LCP.
La investigación identificó tres causas principales. Las transiciones empujaban la detección al fotograma equivocado, la carga diferida retrasaba las imágenes de la mitad superior de la página que debían cargarse inmediatamente y las imágenes críticas carecían de señales de prioridad. Además, las mediciones se originaban tanto en páginas de categorías como de productos, no solo en páginas de inicio, por lo que la solución tenía que ser efectiva en diferentes tipos de páginas.
Las tres soluciones de LCP
El caso de estudio incluye un cuarto cambio, el almacenamiento en caché perimetral para reducir la latencia. Sin embargo, los ajustes principales de detección de elementos implicaron tres modificaciones en cómo se representa y carga la parte superior de la página. Nuvemshop implementó los tres cambios en sus temas y tipos de páginas principales. Estos ajustes son sencillos y siguen las mejores prácticas comunes de rendimiento web.
El equipo eliminó las transiciones CSS de las secciones superiores para que se muestren instantáneamente, lo que permite que el navegador las reconozca como candidatos a LCP sin demora.
ellos también sacaron loading="lazy" fuera de la primera imagen en esas secciones superiores. La propia guía de web.dev es directa al respecto y advierte contra la carga diferida de la imagen LCP porque siempre agrega retraso en la carga.
La última pieza fue fetchpriority="high" en la probable imagen LCP, lo que le indica al escáner de precarga del navegador que la capture antes. Nuvemshop dice que envolvió eso en la lógica de validación para que la señal se active solo donde el elemento realmente podría ser el candidato a LCP. El consejo de Google es reservar el atributo para una o dos imágenes clave, ya que si todo es de alta prioridad, nada lo es.
¿Qué más informa Nuvemshop?
Nuvemshop informa que su tasa general de aprobación de Core Web Vitals mejoró del 48% al 72% durante todo el año, no solo la cifra de LCP.
La compañía revisó las mismas tiendas brasileñas activas en enero de 2025 y 2026. Para los visitantes móviles que llegan a través de la búsqueda orgánica de Google, informa un aumento del 8,9 % en la tasa de conversión y un aumento del 8,4 % en la participación en el carrito.
Tenga en cuenta que estas son cifras autoinformadas y que las cifras de compras son una comparación año tras año de esa cohorte, no una prueba controlada. Nuvemshop vincula la dirección a su trabajo de velocidad apoyándose en una investigación de Deloitte encargada por Google, que encontró que reducir el tiempo de carga en 0,1 segundos puede aumentar la conversión minorista en un 8,4%.
Por qué esto importa
Antes de comprimir otra imagen principal, verifique que esté optimizando el elemento que el navegador realmente trata como LCP. Esto es especialmente importante en diseños basados en plantillas o con muchos carruseles, donde es posible que no funcione.
Nuestra propia cobertura reciente llega al mismo lugar. En un vistazo a Core Web Vitals en las plataformas CMS, los datos de HTTP Archive mostraron que el LCP del mundo real tiende a fallar cuando una plataforma tarda en permitir que el navegador descubra la imagen principal, o cuando obliga a esa imagen a competir con muchos otros recursos de alta prioridad, no solo cuando una página es pesada. Barry Pollard también explicó cómo rastrear un problema de LCP en PageSpeed Insights antes de tocar cualquier código.
El enlace de conversión refleja la interpretación de los datos por parte de Nuvemshop. Los Core Web Vitals son solo un factor de clasificación menor, y Google ha enfatizado que la relevancia es más importante, por lo que es mejor leer una tienda más rápida como una ganancia en la experiencia de compra que como una palanca de clasificación.
Mirando hacia el futuro
Esta es solo la experiencia reportada por una empresa, por lo que es mejor leer las ganancias en compras como direccionales. La técnica en sí tampoco es nueva, ya que web.dev ha estado abogando por este tipo de trabajo de descubrimiento y prioridad durante años. Lo que agrega el estudio de caso es un ejemplo práctico de cómo identificar el verdadero elemento LCP en diseños que varían de una tienda a otra, lo cual es la parte difícil en cualquier plataforma personalizable.
Imagen destacada: victoriatudos/Shutterstock
