Reportajes e investigación sobre Shopify y el comercio electrónico
Largest Contentful Paint es la Core Web Vital que las tiendas Shopify suspenden de forma más visible, y nuestra propia auditoría muestra por qué: en 15 demos de temas oficiales, el primer pintado llegó en unos 2 a 5 segundos y después los compradores esperaron hasta 13.9 segundos más por el contenido multimedia del hero. Aquí está el mecanismo y la lista de soluciones, con números.
Largest Contentful Paint mide un solo momento: cuando el elemento visible más grande de la primera pantalla termina de renderizarse. En una tienda Shopify ese elemento es casi siempre la imagen del hero, la primera foto de producto o el fotograma de portada de un video con reproducción automática, y eso es exactamente por qué las puntuaciones de LCP en Shopify suspenden. Los servidores de la plataforma responden rápido y el esqueleto del tema se pinta pronto; después el comprador se queda mirando un armazón mientras megabytes de contenido multimedia del hero se arrastran por una conexión móvil.
Nuestros propios datos hacen visible el mecanismo. El 14 de julio de 2026 ejecutamos 45 auditorías de Lighthouse en 15 demos de temas oficiales, y el número interesante no es el LCP en sí, sino la distancia entre First Contentful Paint y LCP. El FCP es la llegada del esqueleto; la brecha entre FCP y LCP es el contenido multimedia del hero haciendo esperar a todo el mundo.
| Demo de tema | FCP | LCP | Brecha (espera por el hero) |
|---|---|---|---|
| Ultra | 1.91s | 1.91s | 0.0s |
| Boutique | 2.20s | 3.67s | 1.5s |
| Symmetry | 1.53s | 6.33s | 4.8s |
| Impression | 5.22s | 12.19s | 7.0s |
| Horizon | 3.57s | 12.32s | 8.8s |
| Motion | 1.88s | 15.78s | 13.9s |
Lee otra vez la fila de Motion: primer pintado en 1.88 segundos, más rápido que casi todo lo que probamos, y después una espera de 13.9 segundos por el hero. El código del tema no es el cuello de botella; lo es la estrategia de contenido multimedia. Horizon cuenta la misma historia desde otro ángulo: su tiempo total de bloqueo fue de 29ms, entre los mejores comportamientos de JavaScript de la auditoría, junto a un LCP de 12.32 segundos. Gran ingeniería, escaparate pesado.
Y el contraejemplo demuestra que el techo es real: en la demo de Ultra el elemento más grande se renderizó junto con el primer pintado, 1.91 segundos para ambos, la única demo de 15 por debajo del umbral de 2.5 segundos de Google. Así se ve en los datos una primera pantalla disciplinada.
1. Pesa tu hero. Abre tu página de inicio en PageSpeed Insights, expande el diagnóstico de LCP y mira cuál es realmente el elemento del LCP. Si es una imagen de 2 a 4MB o un video, nada más de esta lista importa hasta que eso cambie. Exporta el hero al tamaño renderizado, sírvelo en WebP o AVIF mediante los parámetros de ancho de image_url de Shopify y limita el archivo a unos 200KB. Si el hero es un video con reproducción automática, dale un fotograma de portada liviano y deja que el video cargue después del primer pintado, o muévelo por debajo del pliegue.
2. Deja de aplicar carga diferida a la imagen del LCP. Una mala configuración habitual en Shopify: el tema o una app aplica loading="lazy" a todo, incluida la primera imagen del hero, lo que retrasa la única descarga que define tu puntuación. La imagen del LCP debería cargarse de forma inmediata y con alta prioridad de descarga; todo lo que está por debajo del pliegue debería seguir con carga diferida.
3. Audita el conjunto de apps. Cada app instalada puede inyectar scripts que se ejecutan antes de que tu hero empiece a descargarse. Desinstala lo que no uses activamente y después revisa el código del tema en busca de etiquetas de script huérfanas que las apps hayan dejado atrás. La propia documentación de rendimiento de Shopify señala el peso de las apps como un factor principal en la velocidad de los temas.
4. Recorta la primera pantalla. Carruseles con cinco diapositivas de 2MB, barras de anuncios animadas, widgets de chat que arrancan de inmediato: todos ellos compiten con el elemento del LCP. La primera pantalla necesita un mensaje y una imagen.
5. Entonces, y solo entonces, considera el tema. La elección del tema fija tu techo. Medimos una diferencia de 8x entre las demos más rápida y más lenta en la misma tienda, bajo condiciones idénticas, y la diferencia era sobre todo disciplina: cuánto carga la primera pantalla predeterminada del tema. Si ya estás buscando un reemplazo, nuestro ranking completo de 15 demos medidas es el lugar por donde empezar, y el proveedor cuya demo lo encabezó, UTD, lista todos sus temas aquí. Pero cambiar de tema mientras tu hero pesa 3MB solo traslada el mismo problema a una tipografía más bonita.
Mide antes y después, siempre de la misma manera. Lighthouse en Chrome DevTools o PageSpeed Insights, perfil móvil, tres ejecuciones, toma la mediana, porque las ejecuciones individuales fluctúan. Vigila dos números: el LCP en sí y la brecha entre FCP y LCP del gráfico de arriba. Si tus arreglos funcionan, la brecha se desploma primero, y esa es tu señal de que el hero por fin llega con la página en lugar de después. Los datos de usuarios reales en el informe de Core Web Vitals de Search Console llegarán en unas semanas, ya que Google evalúa el LCP con datos de campo, no con ejecuciones de laboratorio.
Casi siempre porque el elemento más grande visible sin hacer scroll es una imagen de hero pesada o un video con reproducción automática que empieza a descargarse tarde. Los datos de nuestra auditoría muestran el patrón con claridad: demos con un primer pintado rápido igual registraron LCP de 8 a 14 segundos cuando el contenido multimedia del hero era pesado. Las apps que inyectan scripts que bloquean el renderizado retrasan aún más el inicio de esa descarga.
Los umbrales de Google son: por debajo de 2.5 segundos es bueno, por encima de 4 segundos es deficiente, medido con usuarios reales en móvil. Como referencia, solo 1 de las 15 demos de temas oficiales que auditamos bajo limitación móvil simulada quedó por debajo de 2.5 segundos.
Puede hacerlo, y es la única decisión de velocidad que tomas una sola vez. Medimos una diferencia de 8x en el LCP móvil medio entre la demo de tema más rápida (1.91s) y la más lenta (15.78s). Pero arregla primero el contenido multimedia del hero y tu conjunto de apps: un tema rápido con un hero de 4MB seguirá suspendiendo.
Sí. Cada app que inyecta un script en tu tema compite con la imagen del LCP por ancho de banda y tiempo del hilo principal antes del primer pintado. Audita las apps instaladas, elimina lo que no uses y comprueba si quedan etiquetas de script residuales en el código del tema después de desinstalarlas.