Qué miden LCP, INP y CLS
Las Core Web Vitals son tres métricas de Google. LCP (Largest Contentful Paint) mide cuánto tarda en pintarse el elemento más grande visible al cargar, normalmente la imagen principal o el titular. INP (Interaction to Next Paint) mide cuánto tarda la página en responder visualmente cuando el usuario toca o hace clic; sustituyó a FID en 2024. CLS (Cumulative Layout Shift) mide cuánto se mueven los elementos mientras carga la página.
Google considera buenos un LCP de hasta 2,5 segundos, un INP de hasta 200 milisegundos y un CLS de hasta 0,1, evaluados sobre el percentil 75 de las visitas reales. Es decir, no basta con que vaya bien en tu ordenador: tiene que ir bien para la mayoría de tus clientes, que en una tienda suelen entrar desde el móvil.
Medir con datos reales, no solo con una prueba
Hay dos tipos de datos. Los de laboratorio, como la puntuación de Lighthouse, simulan una carga en condiciones fijas y sirven para depurar. Los de campo vienen de usuarios reales de Chrome y son los que Google usa. PageSpeed Insights muestra ambos: arriba los datos de campo, si tu tienda tiene tráfico suficiente, y abajo el diagnóstico de laboratorio.
Consulta también el informe de Core Web Vitals de Search Console, que agrupa las URLs por tipo, y el informe de rendimiento web del admin de Shopify. Obsesionarse con la puntuación de Lighthouse es un error habitual: puede bajar o subir entre pruebas sin que cambie la experiencia real.
- Mide por plantilla: inicio, colección, producto y carrito se comportan distinto.
- Prueba siempre en móvil y con la tienda en su estado real, con todas las apps activas.
- Anota los valores antes de cada cambio para saber qué ha funcionado.
JavaScript de apps: el origen más frecuente
Cada app que muestra algo en la tienda suele cargar su propio JavaScript y, a veces, sus propios estilos y fuentes. Una app de reseñas, otra de popups, otra de chat, otra de upsell y otra de traducción pueden sumar varios scripts que se ejecutan en cada página, incluso donde no hacen nada.
Ese código compite con la respuesta a los toques del usuario y es la causa más común de un INP malo. Revisa en las herramientas de desarrollo del navegador, pestaña de red, qué dominios cargan scripts y desactiva desde el editor de temas, en Incrustaciones de aplicaciones, lo que no uses. Las apps antiguas que se instalaban editando el tema pueden dejar código aunque las desinstales.
Imágenes y LCP
En la mayoría de tiendas el elemento LCP es una imagen: el banner de inicio o la primera foto del producto. Para que cargue rápido tiene que pedirse pronto y con el tamaño justo. Los filtros image_url e image_tag de Liquid permiten generar varios tamaños con srcset para que el navegador descargue solo el que necesita.
La imagen principal no debe llevar carga diferida, porque eso retrasa justo lo que quieres mostrar primero. Al resto de imágenes por debajo del primer pantallazo sí conviene aplicarles loading lazy. Evita también los sliders automáticos en la cabecera: suelen cargar varias imágenes grandes y JavaScript para algo que pocos clientes miran.
Fuentes y CLS
Las fuentes personalizadas afectan a LCP si el texto es el elemento principal y a CLS si al cargarse cambian el tamaño del texto y empujan el contenido. Limita las familias y los pesos a los que realmente uses y aprovecha las fuentes que Shopify sirve desde su propia infraestructura con el filtro font_face.
El resto del CLS suele venir de imágenes sin dimensiones definidas, banners de cookies o barras de aviso que se insertan arriba después de cargar, y widgets de apps que aparecen tarde. Reserva siempre el espacio: indica ancho y alto en las imágenes y da una altura fija a los bloques que se rellenan con JavaScript.
Secciones pesadas y temas sobrecargados
Los temas que intentan servir para todo traen decenas de secciones, animaciones y librerías que se cargan aunque solo uses unas pocas. Cada sección añadida en el editor suma HTML, imágenes y a veces scripts. Una página de inicio con quince secciones apiladas rara vez rinde bien en móvil.
Revisa las plantillas y quita lo que no aporta a la venta. Vídeos de fondo, carruseles de logos, contadores animados e Instagram incrustado son candidatos habituales. Si una sección es imprescindible pero pesada, valora cargarla solo cuando entra en pantalla.
Por dónde empezar
Prioriza según el dato de campo. Si falla LCP, mira la imagen principal y lo que bloquea su carga. Si falla INP, revisa scripts de apps y código propio que se ejecuta al interactuar. Si falla CLS, busca qué se mueve con una grabación de rendimiento del navegador.
Ten en cuenta que los datos de campo de Google se calculan sobre un periodo de varias semanas, así que las mejoras tardan en reflejarse. En Weblineo trabajamos la velocidad dentro del servicio de optimización, con cambios en el código del tema que quedan en tu tienda y son tuyos.
Preguntas frecuentes
¿Qué puntuación de PageSpeed debería tener mi tienda Shopify?
La puntuación de laboratorio es orientativa. Lo importante es que los datos de campo de LCP, INP y CLS estén en verde para la mayoría de tus visitas, sobre todo en móvil.
¿INP ha sustituido a FID?
Sí. Desde 2024 INP es la métrica de interactividad de las Core Web Vitals, en lugar de FID. Mide la respuesta a todas las interacciones, no solo a la primera.
¿Desinstalar una app quita su código de la tienda?
Las apps que funcionan con incrustaciones o bloques de aplicación se retiran limpiamente. Las que se instalaron editando archivos del tema pueden dejar fragmentos que hay que eliminar a mano.
¿Cambiar de tema mejora la velocidad?
Puede ayudar si el tema actual está sobrecargado, pero si mantienes las mismas apps y las mismas imágenes, los problemas suelen volver. Conviene medir antes qué es lo que pesa.