Core Web Vitals Shopify: qué son y cómo mejorarlos

Qué mirar primero en una tienda Shopify

Antes de abrir reportes, mira la pantalla como comprador. En una tienda Shopify, el problema no suele verse como una “métrica mala”, sino como un síntoma claro: la foto principal tarda, el llamado a la compra responde con retraso o el contenido salta cuando ya ibas a tocar una talla. Esos fallos afectan tareas concretas. Si vendes, por ejemplo, cosmética con 25 productos, revisa tres plantillas desde el celular: inicio, una colección y un producto.

En cada una, comprueba si el encabezado aparece rápido, si puedes desplazarte sin tirones y si el botón Agregar al carrito queda estable al cargar banners, reseñas o apps de terceros.

La utilidad de Core Web Vitals está ahí: traduce esa fricción visible en señales que puedes revisar y corregir por página. Empieza por una prueba simple. Abre la tienda en una ventana privada desde tu computadora y luego desde tu celular con datos móviles, no solo con Wi-Fi. En producto, toca variaciones, abre la galería y pulsa el CTA de compra; si una acción tarda en reaccionar, anótala.

En colección, cambia filtros y orden. Si la página se mueve cuando cargan imágenes o badges de pago, también anótalo. Esa lista te servirá después para no confundir una carga pesada con un problema de respuesta o de estabilidad visual.

Los tres Core Web Vitals y sus umbrales oficiales

Tu tienda puede verse rápida y aun fallar. Para decidir si una página está bien, mira tres señales que Google usa para evaluar la experiencia real de carga, respuesta visual y estabilidad durante la visita. LCP revisa cuándo aparece el elemento principal visible, que suele ser el banner de inicio o la imagen destacada del producto. INP mide cuánto tarda la página en reaccionar cuando alguien toca un filtro, abre el carrito o elige una variante. CLS detecta movimientos inesperados del contenido, por ejemplo cuando un botón baja porque cargó tarde una imagen o una barra de anuncios.

Google considera buena una página cuando el LCP no supera 2,5 segundos, el INP se mantiene en 200 milisegundos o menos y el CLS en 0,1 o menos, medidos en el percentil 75 de las visitas, según web.dev. Ese detalle cambia cómo interpretas el dato. No basta con una prueba aislada en tu computadora, porque Google juzga a la mayoría de usuarios reales y no solo la visita más rápida.

Si vendes decoración y una ficha de producto carga bien en escritorio, pero en celular el CTA para comprar se mueve al aparecer una reseña, el problema es CLS. Si la imagen principal tarda, revisa LCP. Si los filtros de colección responden tarde, enfócate en INP.

Cómo revisar velocidad en Shopify sin mezclar métricas

Cuando revisas rendimiento en Shopify, separa dos lecturas. El módulo Velocidad de Shopify Audit, gratuito, analiza tres plantillas de tu tienda —inicio, una colección y un producto— y te muestra puntaje, tendencia, respuesta del servidor, peso total, scripts de terceros e imágenes, con una pista clara sobre qué corregir primero dentro de Shopify. Esa pantalla no reemplaza Core Web Vitals. Úsala para detectar causas probables y luego confirma el efecto en LCP, CLS e INP con tus datos de campo y pruebas del navegador.

1. 1

   Abre Velocidad y compara plantillas

   Mira las tres vistas por separado. Si producto pesa mucho más que inicio, revisa primero la galería, los bloques de recomendaciones y las apps que cargan solo en esa plantilla.

2. 2

   Ubica el cuello de botella visible

   Empieza por la señal más concreta del panel. Si ves demasiados scripts de terceros, pausa uno en una copia del tema; si el peso se dispara por imágenes, corrige formatos y tamaños antes de tocar código.

3. 3

   Valida después con Core Web Vitals

   Tras cada cambio, comprueba si el ajuste movió la métrica correcta. Un servidor más lento suele afectar LCP; un banner que empuja contenido apunta a CLS; un chat o pop-up pesado puede empeorar INP.

4. 4

   Documenta qué cambiaste

   Anota tema, app o sección editada y la fecha. En una tienda de cosmética con 80 productos, por ejemplo, quitar un carrusel automático solo de inicio facilita saber si mejoró la carga sin confundirlo con cambios del catálogo.

Cómo bajar el LCP en Shopify

Empieza por la página que más vende. En Shopify casi siempre será inicio, una colección principal o la ficha de producto con más sesiones, porque ahí suele cargarse el elemento más grande que ve el cliente: banner, foto destacada o bloque de texto con imagen. Si ese elemento tarda, el LCP sube. Google considera buena una página cuando el LCP queda dentro de 2,5 segundos, según web.dev.

Para detectar qué revisar primero, abre Velocidad en Shopify Audit, que es gratis, y compara esas tres plantillas; si una tiene mucho peso de imágenes o varios scripts de terceros, corrígela antes que el resto.

• Cambia sliders del primer pantallazo por una sola imagen. En muchas tiendas de hogar el carrusel inicial descarga varias fotos aunque el visitante solo vea la primera.
• Recorta la imagen principal al tamaño real de pantalla. Si en celular se muestra a 720 px de ancho, no subas un archivo de 3000 px.
• Convierte imágenes pesadas a WebP y vuelve a subirlas. En producto, prioriza la foto destacada; las secundarias pueden cargar después.
• Quita apps que inyectan widgets arriba del contenido principal. Si un pop-up, chat o app de reseñas entra antes de la imagen hero, desplaza su carga.
• En colección, reduce bloques antes de la grilla. Banners, videos y textos largos empujan el contenido principal y retrasan su renderizado.

Otro punto frecuente está en el tema. Una tienda de cosmética con 120 productos puede tener un banner correcto y aun así mostrar un LCP alto porque el tema pide demasiados archivos antes de pintar la foto o el título principal. Revisa si el encabezado incluye video, anuncios rotativos o secciones con varias apps.

Si al desactivar una sección visual el puntaje mejora y baja el peso total, déjala fuera de la parte superior. En producto, prueba primero con imagen destacada, precio y botón; después reincorpora recomendaciones, reseñas o bloques promocionales uno por uno. Así aislas la causa real y no corriges a ciegas.

Cómo mejorar INP y evitar un tema pesado

Notas el problema al tocar. El botón tarda, el filtro se queda pensando o la variante cambia varios segundos después, y esa sensación casi siempre apunta a trabajo de JavaScript, no a imágenes pesadas. Para orientarte con una referencia clara, Google considera buena una página cuando el LCP no pasa de 2,5 segundos, el INP de 200 milisegundos y el CLS de 0,1, medidos en el percentil 75 de las visitas, según web.dev. En Shopify, el síntoma aparece mucho en páginas de producto y colección con apps, selectores complejos y filtros cargados desde scripts externos.

• Prueba la tienda desde un celular real. Abre una colección, toca un filtro y cuenta si el cambio empieza casi al instante; si ves un retraso visible, revisa primero apps de filtros, reseñas o upsells.
• En la página de producto, cambia talla, color y cantidad varias veces. Si el precio, las fotos o el CTA de compra tardan en actualizarse, busca selectores de variantes duplicados o scripts del tema que escuchan demasiados eventos.
• Abre las herramientas del navegador en una computadora y revisa la consola. Errores repetidos, advertencias de scripts bloqueados o solicitudes que se disparan al hacer clic suelen señalar el archivo o la app responsable.
• Desactiva temporalmente bloques no esenciales del tema. En una tienda de cosmética con 80 productos, por ejemplo, quitar un carrusel de testimonios y un pop-up de intención de salida puede volver más ágil la respuesta del producto.
• Reduce lo que corre en cada vista. Si una app solo se usa en el carrito o en una landing, evita cargar su script en todas las colecciones y en todos los productos.

Hay una señal fácil de leer. Si el servidor responde rápido pero los toques siguen tardando, el cuello de botella suele estar en el navegador del cliente: demasiado JavaScript, listeners innecesarios o componentes del tema que recalculan todo al cambiar una opción. En una tienda de hogar con filtros por color, material y medida, conviene desactivar uno por uno hasta encontrar cuál bloquea la interacción. Si al quitar una app el problema desaparece, déjala fuera o busca una alternativa más ligera antes de tocar el tema completo.

Qué hacer esta semana

1. 1

   Anota solo tres plantillas

   Trabaja con la página de inicio, una colección y un producto. Si una tienda de hogar tiene 300 productos, esas tres vistas suelen concentrar banners, filtros, variantes y la mayor parte de los scripts.

2. 2

   Haz una lista de peso visible

   En una computadora, abre cada plantilla y apunta qué se ve antes de hacer scroll: video, carrusel, banner, reseñas, chat, pop-up o recomendador. Si arriba del pliegue hay varias piezas moviéndose, deja una principal y pospone el resto.

3. 3

   Recorta apps antes de tocar el tema

   Revisa qué apps agregan bloques, botones o scripts en esas tres páginas. Si una app no aporta ventas directas o atención al cliente, apágala en el tema de prueba o quita su bloque primero y vuelve a medir antes de cambiar código.

4. 4

   Corrige imágenes con un criterio fijo

   Toma las imágenes más visibles de cada plantilla y reemplaza solo las que salen demasiado grandes para su contenedor. Si el banner se muestra a ancho completo en celular, sube una versión ya recortada para celular y evita depender de que el tema la reduzca.

5. 5

   Cierra la semana con una segunda pasada

   Abre Velocidad en Shopify Audit, que es gratis, y compara el peso, la respuesta del servidor y los scripts de terceros entre el lunes y el cierre de la semana. Convierte en tarea únicamente lo que siga apareciendo en esas tres vistas para no abrir un frente nuevo.

El orden importa más que la cantidad de cambios. Primero limpia lo que el cliente ve apenas entra, después quita apps que cargan JavaScript y recién al final ajusta secciones del tema o pide ayuda técnica. Una tienda de cosmética con 40 productos, por ejemplo, puede pasar una semana completa solo revisando banner principal, módulo de reseñas y app de chat. Si al quitar un bloque mejora la interacción, déjalo fuera hasta confirmar que realmente hace falta. Si no cambia nada, vuelve a publicarlo y pasa al siguiente candidato.