INP, LCP y CLS son hoy la línea entre “carga lenta” y “tienda que vende”. Aquí tienes un checklist accionable con snippets para Shopify: aplica 2–3 ajustes y mide el impacto esta semana.
TL;DR
- INP <= 200 ms, LCP <= 2.5 s, CLS <= 0.1.
- No hagas lazy load al hero (LCP). Usa
loading="eager"yfetchpriority="high". - Imágenes responsive con
image_url/image_tagywidth/heightpara evitar CLS. - Recorta JS y terceros (píxeles) que disparan el INP.
- Mide con PageSpeed Insights y Search Console. Repite.
Auditoría express (5 minutos)
- Abre PageSpeed Insights y prueba Home, PDP más vendido y Checkout (siempre en móvil).
- Anota 3 números: LCP, INP y CLS. Repite tras cada cambio.
- En Search Console > Web Vitals, revisa tendencias de las URLs móviles.
10 arreglos rápidos (con código para Shopify)
1) No hagas lazy load del hero (tu LCP)
En tu sección del hero, carga la imagen eager y marca prioridad alta. Ejemplo genérico:
<img
src="{{ 'hero.jpg' | asset_url }}"
alt="Tu mejor promesa de valor"
loading="eager"
fetchpriority="high"
width="1600" height="900"
class="cartia-hero-img"
/>Si trabajas con objetos de imagen en Liquid:
{{ section.settings.hero | image_url: width: 1800 | image_tag:
widths: '800,1200,1600,1800',
sizes: '(max-width: 768px) 100vw, 1200px',
loading: 'eager',
alt: section.settings.hero_alt,
class: 'cartia-hero-img',
width: section.settings.hero.width,
height: section.settings.hero.height }}2) Imágenes responsive y formatos modernos automáticos
image_url y image_tag generan variantes y sirven WebP/AVIF cuando el navegador lo soporta.
{{ product.featured_image | image_url: width: 1200 | image_tag:
widths: '360,540,720,960,1200',
sizes: '(max-width: 768px) 92vw, 1200px',
alt: product.title,
loading: 'lazy',
class: 'cartia-img' }}3) Evita CLS: define dimensiones
Siempre especifica width y height (o relación de aspecto) en imágenes, banners y tarjetas dinámicas. Para contenedores variables, usa una altura mínima:
<style>
.cartia-hero { min-height: clamp(320px, 60vh, 720px); }
.cartia-card--img { aspect-ratio: 4 / 5; }
</style>4) Reduce el INP: menos JS en el hilo principal
Pospón terceros no críticos (ads/píxeles) hasta la inactividad del usuario:
<script>
(function(){
function loadLater(){
var s=document.createElement('script');
s.src='https://example.com/tercero.js'; s.defer=true; s.async=true;
document.head.appendChild(s);
}
if('requestIdleCallback' in window){ requestIdleCallback(loadLater); }
else { setTimeout(loadLater, 2000); }
})();
</script>5) Menos DOM, más velocidad
En listas (productos/blog), limita ítems iniciales (ej. 8–12) y usa “Cargar más” nativo. Evita mega-menus con cientos de nodos.
6) Lazy load solo below the fold
En secciones inferiores, aplica loading="lazy" a imágenes y decoding="async".
7) Prioriza fuentes correctamente
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="{{ 'theme.css' | asset_url }}">
<style> @font-face { font-display: swap; } </style>8) Minimiza apps y scripts duplicados
Desinstala apps que inyectan JS no usado (reviews/upsells duplicados). Revisa <head> con DevTools > Network.
9) Hero con vídeo: póster estático
Si usas video en home, define poster ligero y bloquea auto-reproducción en móvil.
10) Mide, itera y documenta
Tras cada cambio, repite PSI en móvil y registra resultados (fecha, métrica, URL). Prioriza lo que más impacto tenga en LCP/INP.
Preguntas frecuentes
¿Qué INP, LCP y CLS debo alcanzar?
Objetivo: INP ≤ 200 ms, LCP ≤ 2.5 s, CLS ≤ 0.1 en el 75.º percentil móvil.
¿Puedo hacerlo sin apps?
Sí. La mayoría de mejoras de imágenes, carga diferida y limpieza de JS son a nivel de tema.
¿Cada cuánto debo medir?
Después de cada cambio significativo y semanalmente en móvil.
0 comentários