Guía de Shopify Core Web Vitals: Reparar LCP, CLS e INP (2026)

1. ¿Qué son los Core Web Vitals?

Core Web Vitals (CWV) son un conjunto de tres métricas específicas que Google utiliza para medir la experiencia del usuario en el mundo real de una página web. Introducido por Google en 2020 y realizado señal de clasificación en 2021, se centran en tres pilares: rendimiento de carga, interactividad y estabilidad visual.

These metrics are measured using real user data (called "field data") collected from Chrome users who visit your site. This is different from lab tests — Google cares about what actual visitors experience, not just what a testing tool reports.

2. Por qué los Core Web Vitals son importantes para las tiendas Shopify

Impacto SEO

Google ha utilizado Core Web Vitals como señal de clasificación desde el Actualización de la experiencia de la página en 2021. Si bien la relevancia del contenido y los vínculos de retroceso siguen dominando las clasificaciones, el CWV actúa como desempate. Si dos páginas de productos son igualmente relevantes para una consulta, la más rápida y con mejores puntuaciones CWV tendrá más probabilidades de obtener una clasificación más alta.

Para nichos competitivos de Shopify (moda, belleza, suplementos), este desempate puede marcar la diferencia entre la página uno y la página dos. comprensión cómo funciona tu puntuación de velocidad de Shopify te ayuda a priorizar qué métricas abordar primero.

Impacto de la conversión

Las mejoras de CWV se correlacionan directamente con mejores tasas de conversión. Los estudios muestran consistentemente:

• Una disminución de 100 ms en el LCP puede aumentar las conversiones hasta en un 1,3% (Estudio de caso de Vodafone)
• Reducir CLS en 0,2 puntos puede disminuir la tasa de rebote en un 15%
• Las páginas con buenos puntajes INP obtienen tasas de agregar al carrito significativamente más altas

Para una tienda Shopify que gana $50K al mes, incluso una mejora de conversión del 1% se traduce en $6000+ en ingresos anuales adicionales. Para comprender el panorama completo, lea nuestro análisis profundo en cómo la velocidad de Shopify afecta las conversiones.

Impacto empresarial en el mundo real de Core Web Vitals

Estos no son números hipotéticos. Las principales empresas han publicado los resultados comerciales de sus mejoras en Core Web Vitals:

3. Cómo verificar los principales datos web de tu tienda Shopify

4. Problemas básicos comunes de Web Vitals en Shopify

🎨 LCP alto (carga lenta)

El problema de CWV más común en Shopify. Causas típicas:

• Imágenes de héroes grandes: Imágenes PNG/JPEG sin comprimir de más de 500 KB servidas sin formatos modernos (WebP/AVIF)
• Scripts de bloqueo de renderizado: Scripts de aplicaciones de terceros que se ejecutan antes de que se reproduzca el contenido principal. La tienda Shopify promedio carga entre 15 y 25 scripts de aplicaciones, muchos de ellos bloqueando
• Respuesta lenta del servidor (TTFB): El alojamiento compartido de Shopify puede tener tiempos de respuesta variables, especialmente durante picos de tráfico
• Sin precarga: Recursos críticos como imágenes principales y fuentes no precargadas, lo que hace que el navegador los descubra tarde
• CSS excesivo: Archivos CSS grandes y no optimizados que retrasan el primer procesamiento

👆 INP deficiente (interactividad lenta)

Los problemas de INP casi siempre se deben a que JavaScript bloquea el hilo principal:

• Ejecución pesada de JavaScript: Scripts de aplicaciones que ejecutan operaciones costosas en cada carga de página
• Aplicaciones de terceros que bloquean el hilo principal: Los widgets de chat, las aplicaciones de revisión y las herramientas de análisis a menudo registran detectores de eventos que ralentizan el procesamiento de la interacción.
• Tareas largas: Any JavaScript task over 50ms blocks the browser from responding to user input
• Demasiados oyentes de eventos: Varias aplicaciones que conectan oyentes a los mismos elementos (por ejemplo, botones para agregar al carrito)

📐 Problemas con CLS (cambios de diseño)

Inestabilidad visual que frustra a los usuarios:

• Imágenes sin dimensiones: Cuando ancho y altura faltan atributos, el navegador no puede reservar espacio antes de que se cargue la imagen
• Inyección de contenido dinámico: Banners, ventanas emergentes y barras de notificación que empujan el contenido hacia abajo después del renderizado inicial
• Carga de fuentes (FOUT/FOIT): Fuentes personalizadas que hacen que el texto se redistribuya cuando termina de cargarse
• Contenido cargado de forma diferida en la mitad superior de la página: Contenido que debería cargarse inmediatamente pero se difiere
• Elementos inyectados por la aplicación: Revisar widgets, insignias de confianza y carruseles de ventas adicionales que se cargan de forma asincrónica y cambian el contenido

5. Cómo arreglar LCP en Shopify

LCP es la métrica de mayor impacto para mejorar en Shopify. Para obtener un tutorial dedicado, consulte nuestro Guía de optimización de Shopify LCP. A continuación se muestra un enfoque paso a paso:

Paso 1: Identifique su elemento LCP

Abra PageSpeed Insights y observe el diagnóstico "Elemento de pintura con contenido más grande". En la mayoría de las tiendas Shopify, el elemento LCP es la imagen principal en la página de inicio o la imagen principal del producto en las páginas de productos.

Paso 2: Optimice la imagen LCP

• Usa la CDN de imágenes de Shopify: Shopify publica imágenes automáticamente a través de su CDN. anexar _800x.webp o utilice el imagen_url filtrar en Liquid para solicitar tamaños específicos y formatos modernos
• Imágenes de tamaño adecuado: No muestre una imagen de 3000 px de ancho para un contenedor de 800 px. Utilice líquidos | image_url: ancho: 800 filtro
• Precargue la imagen LCP: Añade una pista de precarga en el menú de tu tema. tema.liquido:
  <link rel="preload" as="image" href="{{ section.settings.hero_image | image_url: width: 800 }}" fetchpriority="high">
• Agregar fetchpriority="alta": En la imagen de tu héroe Etiqueta , agregue este atributo para indicarle al navegador que le dé prioridad
• No cargues de forma diferida la imagen LCP: Quitar cargando="perezoso" de tu imagen de héroe/producto. Más información sobre implementación adecuada de carga diferida

Paso 3: Reducir los recursos que bloquean el renderizado

• Aplazar JavaScript no crítico: Agregar aplazar o asíncrono para escribir etiquetas que no son necesarias para el renderizado inicial
• Auditar scripts de aplicaciones: Utilice la pestaña Red de Chrome DevTools filtrada a JS: identifique qué scripts de aplicaciones se cargan sincrónicamente y retrasan la renderización. Considere eliminar aplicaciones no utilizadas o buscar alternativas más ligeras
• CSS crítico en línea: Extraiga el CSS necesario para el contenido de la mitad superior de la página e inclúyalo en el <head>

Paso 4: Mejorar el tiempo de respuesta del servidor

• Reducir la complejidad del líquido: Los bucles profundamente anidados y la compleja lógica de Liquid aumentan el tiempo de renderizado del lado del servidor
• Minimizar redirecciones: Cada uno Redirección 301 agrega 100-300 ms. Evite redirecciones de URL innecesarias
• Utilice la CDN de Shopify de forma eficaz: Ensure static assets are served from Shopify's CDN, not third-party servers
• Elige un tema base rápido: Tu tema es la base: consulta nuestra lista de temas de Shopify más rápidos Guía para 2026

¿No estás seguro de si abordar LCP tú mismo o contratar ayuda? Lea nuestra comparación de Optimización de velocidad por parte de expertos versus bricolaje para decidir qué es lo mejor para tu tienda.

6. Cómo arreglar INP en Shopify

INP mide la peor capacidad de respuesta de la interacción durante la visita de un usuario. He aquí cómo mejorarlo:

Paso 1: Identificar tareas largas

Abra Chrome DevTools → pestaña Rendimiento → registre la carga de una página e interactúe con la página. Busque tareas largas (marcadas con esquinas rojas) que superen los 50 ms. Estas tareas bloquean el hilo principal y retrasan las respuestas de interacción.

Paso 2: Aplazar los scripts de aplicaciones de terceros

• Auditar aplicaciones instaladas: Cada aplicación de Shopify puede inyectar JS que se ejecuta en cada carga de página. Revisa tus aplicaciones en Configuración → Aplicaciones y canales de venta y elimina los que no estés usando activamente
• Retrasar guiones no esenciales: No es necesario cargar inmediatamente los widgets de chat, las ventanas emergentes de reseñas y los programas de fidelización. Diferirlos hasta después de la interacción del usuario o unos segundos de tiempo de inactividad
• Uso solicitar devolución de llamada inactiva: Si tiene JavaScript personalizado, incluya el trabajo no crítico en solicitarIdleCallback() para ceder al hilo principal

Paso 3: Divida las tareas largas

• Ceder al hilo principal: Uso programador.rendimiento() (donde sea compatible) o establecerTiempo de espera(fn, 0) para dividir tareas largas en partes más pequeñas
• Controladores de eventos antirrebote: Si tiene controladores de eventos de desplazamiento o cambio de tamaño, antirrebote para reducir el trabajo del hilo principal

Paso 4: Reducir la carga útil de JavaScript

• Eliminar JavaScript no utilizado: Utilice la pestaña Cobertura de Chrome DevTools (Ctrl+Shift+P → "Cobertura") para encontrar JS que se carga pero nunca se ejecuta
• División de código cuando sea posible: Cargue JavaScript para funciones específicas (como un modal de guía de tallas) solo cuando el usuario las active
• Prefiero CSS a JS: Las animaciones, los efectos de desplazamiento y las interacciones simples a menudo se pueden manejar con CSS en lugar de JavaScript.
• Audita tus aplicaciones: Consulta nuestra informes de impacto en la velocidad de la aplicación para ver cuánto JavaScript agrega cada aplicación común de Shopify

Para obtener una lista de verificación integral de mejora de la velocidad que cubre el INP y todas las demás métricas, consulte nuestra Lista de verificación de optimización de la tienda Shopify.

7. Cómo arreglar CLS en Shopify

CLS suele ser la métrica más fácil de corregir, pero muchas tiendas Shopify la ignoran. He aquí cómo:

Paso 1: Establecer dimensiones explícitas en todos los medios

• Agregar ancho y alto a las imágenes: Cada La etiqueta debe tener ancho y altura atributos. En líquido:
  <img src="{{ image | image_url: width: 400 }}" width="400" height="400" alt="{{ image.alt }}" style="aspect-ratio: 1/1;">
• Uso relación de aspecto Propiedad CSS: Para imágenes responsivas, configure relación de aspecto: 16/9 (o cualquier proporción que se aplique) en CSS para reservar espacio
• Establecer dimensiones en iframes y vídeos: Las incrustaciones de YouTube y los reproductores de vídeo también necesitan un tamaño explícito

Paso 2: Reserve espacio para contenido dinámico

• Barras de anuncios: Si utiliza un banner superior, establezca un banner fijo altura mínima para que el contenido debajo no cambie cuando se carga
• Widgets de revisión: Reservar un altura mínima para la sección de revisión según la altura típica del contenido
• Elementos inyectados por la aplicación: Usar CSS contiene: diseño to prevent injected elements from shifting surrounding content

Paso 3: Optimizar la carga de fuentes

• Uso visualización de fuente: intercambiar: Esto muestra una fuente alternativa inmediatamente y se intercambia cuando se carga la fuente personalizada, evitando el texto invisible (FOIT)
• Precargar fuentes críticas: Agregar <link rel="preload" as="font" href="..." crossorigin> para sus archivos de fuentes principales
• Utilice pilas de fuentes del sistema como alternativa: Haga coincidir las métricas de su fuente alternativa con su fuente personalizada usando ajuste de tamaño, anulación de ascenso, y anulación de descenso Las propiedades para minimizar el reflujo

Paso 4: Evite cargar contenido en la mitad superior de la página tarde

• No cargues imágenes de la mitad superior de la página de forma diferida: Sólo aplica cargando="perezoso" a imágenes en la parte inferior de la página. Vea nuestro guía de carga diferida para detalles de implementación
• Evitar documento.escribir(): Scripts que utilizan documento.escribir() inyectar contenido tarde y provocar cambios
• Cargar anuncios/banners con espacio reservado: Si utiliza banners promocionales, establezca siempre dimensiones fijas

8. Desafíos CWV específicos de Shopify

La plataforma de Shopify crea algunos desafíos únicos que no se aplican a los sitios personalizados:

Renderizado líquido

Shopify utiliza el motor de plantillas Liquid para el renderizado del lado del servidor. Las plantillas complejas de Liquid con bucles anidados (por ejemplo, iterando a través de variantes de productos dentro de bucles de recopilación) aumentan el tiempo hasta el primer byte (TTFB), lo que afecta directamente a LCP. Simplifique sus plantillas de Liquid y evite cálculos innecesarios en las plantillas.

Inflación de secuencias de comandos de aplicaciones

Este es el desafío CWV número uno en Shopify. A diferencia de las plataformas personalizadas en las que controlas cada script, las aplicaciones de Shopify inyectan su propio JavaScript en tu tienda. No puede modificar u optimizar fácilmente estos scripts. Cada aplicación aumenta la carga útil total de JavaScript, aumenta el tiempo de bloqueo del hilo principal y puede provocar cambios en el diseño.

La solución: audita sin piedad tus aplicaciones instaladas. Elimina todo lo que no estés usando. Para aplicaciones esenciales, pruebe su impacto CWV individualmente deshabilitándolas temporalmente. Algunas aplicaciones ofrecen modos "ligeros" o "carga diferida": utilícelos. Para obtener una visión completa de cómo las aplicaciones afectan el rendimiento, consulte nuestra guía sobre impacto del script de terceros en Shopify. También puedes consultar nuestro las mejores aplicaciones de optimización de velocidad en 2026 para encontrar herramientas que le ayuden en lugar de perjudicar sus puntuaciones de CWV.

Control limitado del lado del servidor

No puedes configurar el almacenamiento en caché del servidor, la inserción HTTP/2 ni los trabajadores perimetrales en Shopify. Las opciones de optimización del lado del servidor se limitan a la eficiencia de Liquid y al CDN integrado de Shopify. Ésta es una compensación del modelo de plataforma alojada.

Velocidad de pago

Shopify controla la experiencia de pago y usted tiene una capacidad limitada para optimizarla (especialmente en planes que no son Plus). La buena noticia: las páginas de pago normalmente no están indexadas por Google, por lo que no afectan sus puntuaciones CWV en Search Console. Concentre sus esfuerzos de optimización en las páginas indexadas: página de inicio, colecciones, productos y publicaciones de blog.

9. Herramientas para monitorear Core Web Vitals

Arreglar CWV es solo la mitad de la batalla. Necesita un seguimiento continuo porque las instalaciones de nuevas aplicaciones, los cambios de tema o las actualizaciones de contenido pueden hacer retroceder sus puntuaciones en cualquier momento. Comparamos el las mejores herramientas de prueba de velocidad de Shopify para ayudarte a elegir el correcto.

10. Preguntas frecuentes