Mejorar las Core Web Vitals de Shopify requiere optimizar el código de tu tema, auditar los scripts de apps de terceros y comprimir los archivos multimedia. Estas métricas, Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) e Interaction to Next Paint (INP), son una señal de ranking confirmada por Google y están ligadas directamente a la experiencia del usuario y a las tasas de conversión de tu tienda.
Al mundo de la optimización del rendimiento le encanta un acrónimo nuevo. Core Web Vitals (CWV) es el más reciente de Google, y ya acumuló el típico entusiasmo exagerado que afirma que es una disciplina completamente nueva que deja obsoleto todo el trabajo anterior. No es nada de eso. Las CWV son un conjunto de métricas que miden algo real: qué tan rápida y estable se siente una página para una persona. En Shopify, son un indicador directo de la fricción que experimenta un cliente antes de poder comprar algo.
El trabajo no es magia; es una serie de concesiones deliberadas. El problema de fondo casi siempre es el mismo: un tema sobrecargado de funciones, una dependencia excesiva de apps de terceros y archivos multimedia grandes y sin optimizar. Corregirlo exige ser metódico.
Las Core Web Vitals son un veredicto sobre tu experiencia de usuario
Las métricas de Google son solo etiquetas para las frustraciones de los usuarios. Vale la pena entenderlas porque te dan un lenguaje preciso para diagnosticar por qué una página se siente lenta o rota.
- Largest Contentful Paint (LCP): mide el rendimiento de carga. ¿Cuánto tarda en hacerse visible la imagen o el bloque de texto más grande? Cualquier cosa por encima de 2.5 segundos se siente lenta.
- Cumulative Layout Shift (CLS): mide la estabilidad visual. ¿El diseño de la página salta mientras carga? Esto pasa cuando las fuentes, las imágenes o los anuncios cargan tarde y empujan el contenido hacia abajo. Una buena puntuación es menor a 0.1.
- Interaction to Next Paint (INP): mide la capacidad de respuesta. Después de que la página carga, ¿qué tan rápido responde a un clic, un toque o una tecla? Una respuesta lenta, causada a menudo por JavaScript pesado, hace que un sitio se sienta torpe o roto. Una buena puntuación es menor a 200 milisegundos.
Para una tienda Shopify, estos números tienen un impacto directo en los ingresos. La carga lenta frustra a los usuarios y aumenta la tasa de rebote. Los diseños inestables hacen que la gente haga clic en lo que no era. Los botones que no responden hacen pensar que el sitio está roto. Google notó este patrón y lo incorporó a su algoritmo de ranking. Ahora, una mala puntuación de CWV es un problema de conversión y también un problema de tráfico.
Las correcciones del Largest Contentful Paint (LCP) empiezan con tu imagen principal
Tu puntuación de LCP casi siempre la determina el banner principal o la foto de producto en la parte superior de la página. Es el primer contenido y el más visible que ven tus clientes, y hacer que cargue rápido es la corrección de LCP con mayor impacto.
El modo de falla: imágenes sin optimizar y scripts que bloquean el renderizado
El error que debes evitar: confiar en que tu tema o el CDN de Shopify se encargarán automáticamente de optimizar las imágenes. La mayoría de las tiendas sube archivos JPEG o PNG enormes y de alta resolución directamente al personalizador del tema. Ese archivo tiene que descargarse, redimensionarse y renderizarse antes de que se complete el LCP. Al mismo tiempo, los scripts de una docena de apps distintas suelen cargarse en el `` de tu sitio, lo que impide que el navegador siquiera empiece a renderizar la página. La imagen es demasiado grande y la fila para renderizarla es demasiado larga.
Qué hacer al respecto
- Optimiza las imágenes antes de subirlas: esto no es negociable. Redimensiona las imágenes a las dimensiones exactas en las que se van a mostrar. Un banner que se muestra a 1600px de ancho no debería ser un archivo de 4000px. Usa una herramienta como Squoosh para comprimir las imágenes y convertirlas a formatos modernos como WebP, que ofrece mejor compresión que JPEG con la misma calidad.
- Usa los atributos de imagen responsiva de Shopify: asegúrate de que el código Liquid de tu tema use el atributo `srcset` en las etiquetas `
`. Esto le ofrece al navegador varios tamaños de una imagen para que descargue el más adecuado según el tamaño de la pantalla del usuario. Así evitas que se cargue una imagen del tamaño de escritorio en un teléfono pequeño.
- Difiere los scripts no críticos: no todos los scripts necesitan cargarse antes de que la página sea visible. Los scripts de reseñas, chatbots o analítica casi siempre pueden cargarse con los atributos `defer` o `async`. Esto permite que el navegador renderice primero el contenido de la página y cargue los elementos interactivos después. Una auditoría de apps es el primer paso: si no necesitas la app, elimínala por completo.
El Cumulative Layout Shift (CLS) es un mal de los pop-ups y los recursos que cargan tarde
Si alguna vez intentaste hacer clic en un botón y justo cargó un anuncio que lo empujó hacia abajo, haciendo que hicieras clic en el anuncio, ya viviste el CLS. Es profundamente frustrante, y es un problema común en las tiendas Shopify impulsado por apps de marketing y contenido dinámico.
El modo de falla: contenido que aparece sin espacio reservado
El patrón es tan constante que se le puede poner nombre. Un banner de cookies se inserta en la parte superior de la página. Un modal de suscripción por email aparece gradualmente. Una fuente web personalizada carga un segundo después de que aparece el texto y obliga a reacomodar toda la página. En cada caso, el problema es el mismo: se agregó un elemento a la página después del diseño inicial, lo que obliga al navegador a recalcular y mover todo lo que está alrededor.
Qué hacer al respecto
- Define dimensiones explícitas para los archivos multimedia: cada etiqueta de imagen, video e iframe de tu tema debe tener atributos `width` y `height`. Esto le indica al navegador que reserve una caja de ese tamaño en el diseño, incluso antes de que el archivo se haya descargado. El contenido no saltará cuando por fin aparezca la imagen; el espacio ya estaba ahí.
- Maneja los pop-ups con cuidado: en lugar de insertar banners en la parte superior de la página, usa superposiciones o modales que no alteren el contenido de la página. Si necesitas un banner en la parte superior, prográmalo para que el espacio quede reservado desde el principio y así evitar el desplazamiento cuando cargue.
- Precarga las fuentes clave: si tu marca usa una fuente personalizada, puede causar un desplazamiento importante del diseño. Puedes mitigarlo agregando una etiqueta `` para tus archivos de fuente principales en tu archivo `theme.liquid`. Esto le indica al navegador que priorice la carga de esa fuente, para que esté disponible mucho antes en el proceso de renderizado de la página.
El Interaction to Next Paint (INP) mide la torpeza después de la carga
El INP es la más nueva de las tres métricas y reemplaza a una métrica anterior llamada First Input Delay (FID). Mide la latencia de las interacciones. Cuando un usuario hace clic en tu selector de variantes o intenta abrir el carrito, ¿cuánto tarda en pasar algo? Los retrasos largos son casi exclusivamente culpa de JavaScript.
El modo de falla: un hilo principal saturado por los scripts de apps
En la práctica, un INP malo en Shopify se debe a demasiadas apps intentando hacer cosas al mismo tiempo. Un mega menú complejo, un sistema de filtros dinámico, un convertidor de moneda y varios píxeles de seguimiento ejecutan JavaScript en el "hilo principal" del navegador. Cuando el usuario hace clic en algo, su acción tiene que esperar en la fila detrás de todo ese otro trabajo. El botón visible está ahí; la base invisible está ocupada, así que el clic se siente roto.
Qué hacer al respecto
- Haz una auditoría de apps implacable: revisa las apps que tienes instaladas. Para cada una, pregúntate: ¿contribuye directamente a una cantidad significativa de ingresos? Si no, desinstálala. Cada app que eliminas es una posible fuente de ejecución de JavaScript que acabas de quitar. Sé despiadado.
- Identifica las tareas de larga duración: usa Google PageSpeed Insights o el panel Performance de Chrome DevTools para identificar qué scripts consumen más tiempo. Los informes te mostrarán las "tareas largas" que bloquean el hilo principal. Muchas veces, un solo script de una app mal programada es el principal culpable.
- Prioriza las interacciones esenciales: no todo el JavaScript es igual. El script que hace funcionar tu botón "Agregar al carrito" es más importante que el que carga tu feed de Instagram. Trabaja con un desarrollador para asegurarte de que los scripts críticos se carguen y ejecuten primero, mientras que las funciones menos importantes se difieren hasta que la página sea totalmente interactiva.
La concesión honesta: puedes tener funciones o puedes tener velocidad
Seamos realistas. Mejorar tus Core Web Vitals no es una tarea simple que tachas de una lista. Es una negociación constante entre agregar funciones y mantener el rendimiento. Cada pop-up de marketing, cada slider llamativo y cada integración de terceros agrega peso a tu página y tiene un costo de rendimiento.
La versión honesta es más lenta pero llena de funciones; la versión de alto rendimiento es más ligera, pero quizá le falte algún adorno que querías. El trabajo no consiste en lograr una puntuación perfecta de 100. Consiste en tomar decisiones conscientes. ¿Ese widget de "productos vistos recientemente" de una app de terceros *realmente* vale medio segundo de retraso en cada carga de página de producto? En nuestra experiencia, casi nunca. Un sitio rápido, simple y estable convierte mejor que uno lento y repleto de funciones.
El primer paso es obtener una línea base. Entra a PageSpeed Insights de Google y prueba tu página de inicio y una de tus páginas de producto clave. El informe te dará una puntuación y una lista de oportunidades específicas y accionables. Ese diagnóstico es donde realmente empieza el trabajo de mejorar el rendimiento de tu tienda.
Preguntas frecuentes sobre Core Web Vitals en Shopify: cómo mejorar el LCP, el CLS y el INP
¿Cuáles son buenas puntuaciones de Core Web Vitals para una tienda Shopify?
Se logra una puntuación "Buena" cuando el 75% de tus usuarios reales experimenta lo siguiente: LCP por debajo de 2.5 segundos, CLS por debajo de 0.1 e INP por debajo de 200 milisegundos. Puedes revisar estas puntuaciones en tu cuenta de Google Search Console, en el informe "Core Web Vitals".
¿Una app de Shopify puede corregir mis Core Web Vitals?
En general, no. Aunque algunas apps afirman mejorar la velocidad del sitio, a menudo lo hacen con trucos que no atacan la causa de fondo y a veces empeoran las cosas. De hecho, las apps de terceros son una de las causas más comunes de malas puntuaciones de CWV. La corrección más eficaz es eliminar las apps innecesarias, no agregar otra.
¿Cada cuánto debo revisar las Core Web Vitals de mi tienda Shopify?
Es buena práctica revisar tu informe de Core Web Vitals en Google Search Console cada mes. También deberías hacer una prueba en PageSpeed Insights justo después de instalar una app nueva, hacer cambios importantes en el tema o agregar un nuevo tipo de archivo multimedia (como un video grande) a tu página de inicio.
¿Cambiar mi tema de Shopify mejorará mis Core Web Vitals?
Puede hacerlo, y de forma significativa. Los temas modernos y bien programados, diseñados para el rendimiento, te dan una enorme ventaja inicial. Los temas antiguos o los que están llenos de funciones excesivas suelen estar mal optimizados. Si tu tema actual es el origen de tus cuellos de botella de rendimiento, migrar a uno más ligero como Dawn u otro tema de Online Store 2.0 puede ser la mejora más eficaz que hagas.