# Optimización del ecommerce en móvil: Core Web Vitals, checkout y los arreglos concretos que mueven la conversión > Entre el 70 y el 85 % del tráfico del ecommerce es móvil. Las diez áreas concretas (Web Vitals, zonas táctiles, autocompletado de formularios, Apple Pay, zona del pulgar) que cierran la brecha de conversión entre móvil y escritorio, con herramientas y referencias reales. Ryan Badger - 1 de mayo de 2025 - 8 min de lectura ## Por qué el móvil lo es todo Entre el 70 y el 80 % del tráfico de tu ecommerce es móvil. En la mayoría de las categorías de consumo se acerca al 85 %. La conversión en escritorio suele ser de 2 a 3 veces la del móvil, lo que dice menos sobre que el escritorio sea mejor y más sobre que el móvil está roto en la mayoría de las tiendas. Una experiencia móvil bien optimizada puede cerrar la brecha, y a menudo le da la vuelta: algunas marcas DTC ya convierten en móvil igual o mejor que en escritorio. La diferencia es concreta, medible y tiene más que ver con la higiene que con la innovación. Este artículo cubre lo que de verdad mueve la conversión en móvil, con referencias, herramientas y cosas concretas que arreglar. No es "diseña primero para móvil". Son las comprobaciones específicas que producen la mejora acumulada. ## 1. Core Web Vitals y por qué Google los vigila Google usa los Core Web Vitals como señal de posicionamiento y como indicador de la calidad de la experiencia. Más allá del ángulo SEO, las métricas de fondo son buenos predictores de la conversión. ### LCP (Largest Contentful Paint) El tiempo hasta que se renderiza el elemento más grande visible sin hacer scroll (normalmente una imagen principal o el H1). Objetivo: menos de 2,5 segundos en 4G móvil. Las causas más habituales de un mal LCP: - Imagen principal sin comprimir o demasiado grande - La carga de fuentes web bloquea el renderizado - Inyección de scripts de terceros (widgets de chat, analítica, herramientas de tests A/B) en el `` ### INP (Interaction to Next Paint) El tiempo desde una interacción del usuario (un toque) hasta la siguiente actualización visual. Objetivo: menos de 200 ms. Las causas más habituales de un mal INP: - Páginas cargadas de JavaScript (tiendas en React/Vue sin división de código) - Scripts de analítica o de chat que se ejecutan de forma síncrona en la interacción - Retraso al tocar en navegadores móviles antiguos ### CLS (Cumulative Layout Shift) Elementos que saltan por la página mientras carga. Objetivo: menos de 0,1. Las causas más habituales: - Imágenes sin atributos de ancho/alto - Anuncios o embeds de terceros que cargan después del contenido - Fuentes que cargan y cambian el tamaño del texto ### Cómo comprobarlo Gratis: [PageSpeed Insights](https://pagespeed.web.dev/) ejecuta Lighthouse e informa de los tres. Prueba la página de producto que más ingresos te da, no tu página de inicio. Arregla lo que esté en rojo, acepta lo que esté en ámbar y sigue adelante. De pago / más a fondo: WebPageTest.org para el análisis en cascada, la pestaña Performance de Chrome DevTools para perfilar en local. ## 2. Velocidad móvil por debajo de 3 segundos (móvil real, no un escritorio ralentizado) El "emulador móvil" de un navegador de escritorio usa una conexión rápida y una CPU rápida. Los teléfonos reales usan conexiones y CPUs más lentas. La diferencia es considerable. Prueba en teléfonos reales con 4G. Si tu página tarda 2 segundos en el emulador móvil de Chrome, probablemente tarde 4-5 segundos en un Android de gama media con 4G. ### Las mayores mejoras de velocidad (por orden) 1. **Optimización de imágenes:** comprime al 80 % de calidad, redimensiona a las dimensiones que realmente se necesitan, sirve WebP o AVIF. Shoprocket lo hace automáticamente a través de Cloudflare 2. **Carga diferida del contenido bajo el pliegue.** Imágenes, iframes y scripts pesados no deberían cargar hasta que se hace scroll hasta ellos 3. **Aplaza el JavaScript no crítico.** Analítica, widgets de chat y herramientas de tests A/B no deberían bloquear el renderizado 4. **Cachea los recursos estáticos de forma agresiva.** Caché de 1 año en imágenes, fuentes, CSS y JS con URLs con huella 5. **Usa una CDN** (Cloudflare, Fastly o la integrada en tu plataforma). Sirve los recursos desde nodos geográficamente cercanos 6. **Reduce los scripts de terceros.** Cada píxel y etiqueta añade ~50-200 ms; audita qué es realmente necesario ## 3. Tamaño de las zonas táctiles Las Human Interface Guidelines de Apple especifican zonas táctiles mínimas de 44×44 píxeles. Material de Google especifica 48×48. La mayoría de las versiones "móviles" de las plantillas no cumplen ninguna de las dos. **Arreglos:** - Botones de al menos 44 px de alto con 8-12 px de relleno interior - Enlaces de la navegación de al menos 44 px de alto - Campos de formulario de al menos 44 px de alto (también ayuda a la accesibilidad) - Separación entre zonas táctiles contiguas de al menos 8 px Prueba: abre tu tienda en un teléfono. Intenta tocar la navegación de categorías con el pulgar. ¿Te equivocas al tocar? Eso es un problema de zonas táctiles. ## 4. Particularidades del checkout móvil El carrito y el checkout en móvil son donde se pierde la mayor parte de la conversión. Lista de tareas concreta: ### Formularios de una sola columna Los formularios de dos columnas funcionan en escritorio y fallan en móvil. Apila todos los campos en vertical. Sin excepciones. ### Tipos de campo adecuados - Campo de email: `type="email"` (muestra el teclado de email con el símbolo @) - Teléfono: `type="tel"` (teclado numérico) - Código postal: `type="text" inputmode="numeric"` para países con códigos postales numéricos - Número de tarjeta: `type="text" inputmode="numeric" autocomplete="cc-number"` (hace que funcione el autocompletado) La mayoría de las plataformas lo hacen bien de serie. Merece la pena revisar tu formulario en un teléfono; si aparece el teclado equivocado, arréglalo. ### Compatibilidad con el autocompletado Los navegadores pueden autocompletar nombre, dirección, email, teléfono y datos de la tarjeta si los atributos `autocomplete` del formulario son correctos. Un cliente que toca una sugerencia de autocompletado termina el checkout en 3 segundos. Sin autocompletado, escribe a mano más de 12 campos. Valores estándar de autocomplete: `name`, `email`, `tel`, `street-address`, `postal-code`, `country`, `cc-number`, `cc-exp`, `cc-csc`, `cc-name`. ### Botón Añadir al carrito fijo en las páginas de producto Baja 3 pantallas por una página de producto móvil y el botón de Añadir al carrito se queda fuera de la pantalla. Solución: añade una barra inferior fija con el precio y el botón de Añadir al carrito que aparezca cuando el botón original sale de la vista. ### Apple Pay + Google Pay + Link Son la mayor mejora individual del checkout móvil. Pago con un toque sin escribir nada; autenticación biométrica nativa. - **Apple Pay:** se activa automáticamente cuando verificas tu dominio con Stripe (Shoprocket lo gestiona) - **Google Pay:** similar - **Stripe Link:** rellena la tarjeta y la dirección con la identidad entre sitios de Link Cada checkout móvil sin esto está perdiendo clientes. Activa los tres. ## 5. Reducir los campos del formulario Cada campo de tu checkout móvil es un punto de fricción. Audita tus campos: **Normalmente necesarios:** - Email - Dirección de envío (nombre, calle, ciudad, código postal, país) - Datos de pago (o Apple/Google Pay) **A menudo se piden de más:** - Número de teléfono (solo si lo necesitas para la entrega / los transportistas; muchos no) - Fecha de nacimiento (casi nunca hace falta al comprar) - Nombre de la empresa (solo para B2B) - Suscripción a la newsletter (premarcada donde sea legal; casilla aparte en el resto) - "¿Cómo nos conociste?" (pásalo a una encuesta posterior a la compra) Menos campos = checkout más rápido = más finalizaciones. Cada campo que eliminas supone aproximadamente una mejora del 5-10 % en la finalización del checkout móvil, y se acumula. ## 6. Tipografía legible y longitud de línea en móvil - **Texto del cuerpo:** 16 px como mínimo (el valor por defecto de iOS y la guía de Material de Google) - **Longitud de línea:** 45-75 caracteres - **Interlineado:** 1,4-1,6 veces el tamaño de la fuente - **Contraste:** WCAG AA como mínimo (4,5:1 para el cuerpo, 3:1 para texto grande) Si los clientes hacen zoom con los dedos en la descripción de tu producto, tu letra es demasiado pequeña. Si tienen que girar el teléfono para leer, tu línea es demasiado ancha o la fuente demasiado apretada. ## 7. Consideraciones para el uso con una sola mano La mayoría de los usuarios móviles usan el teléfono con una mano, con el pulgar alcanzando desde abajo a la derecha (o abajo a la izquierda en el caso de los zurdos). Las interacciones importantes deberían estar en esa zona del pulgar. - CTA principal (Añadir al carrito, Pagar, Comprar ya) cerca de la parte inferior - Menú hamburguesa arriba a la izquierda o a la derecha, al alcance del pulgar - Botón de "Atrás" predecible (el botón atrás del navegador suele ser mejor que los botones de retroceso personalizados) No obligues a tocar dos veces zonas de difícil acceso. Cada momento de gimnasia con el pulgar pierde clientes. ## 8. Página de producto específica para móvil Las páginas de producto de escritorio suelen mostrarlo todo a la vez (galería a la izquierda, detalles a la derecha, descripción debajo). Ese diseño no se traslada al móvil; tienes que ordenar el contenido en secuencia. Secuencia eficaz de una página de producto móvil: 1. Imagen principal (galería deslizable) 2. Título + precio 3. Selector de variante (talla, color) 4. Añadir al carrito (CTA principal) 5. Señales de confianza (valoración, envío gratis, devoluciones) 6. Descripción (plegable, cortada tras 3 líneas) 7. Especificaciones / detalles (plegable) 8. Resumen de reseñas con ampliación de "ver todas" 9. Productos relacionados 10. Preguntas frecuentes (plegable) El contenido bajo el pliegue debería cargarse de forma diferida. Un cliente móvil suele tomar la decisión de compra en las 3 primeras secciones; cargarlo todo ralentiza esa decisión. ## 9. Probar en dispositivos reales No en DevTools. No en el emulador móvil del navegador. Teléfonos reales con conexiones móviles. Rotación mínima de pruebas: - iPhone SE (pantalla pequeña, dispositivo antiguo) - iPhone 15 Pro (iOS más reciente, Safari) - Samsung Galaxy de gama media (Android, Chrome) - Android antiguo con 4G (saca a la luz problemas de rendimiento) Extra: pide a 3 amigos con teléfonos distintos que intenten comprar algo en tu tienda. Obsérvalos. Con lo que se atasquen es tu lista de arreglos. ## 10. Evitar los patrones que matan el móvil Errores habituales que destrozan la conversión en móvil: ### Ventanas emergentes intersticiales El popup de "¡Suscríbete y llévate un 10 % de descuento!" que tapa la pantalla al aterrizar en móvil. Google las penaliza en los resultados de búsqueda móvil. Los clientes se las encuentran y se van. Usa suscripciones integradas en la página. ### Vídeo con reproducción automática y sonido Desperdicia ancho de banda, molesta a los usuarios y iOS suele bloquearlo de todos modos. La reproducción automática sin sonido es aceptable para un vídeo principal; con sonido es hostil para el usuario. ### Estados de hover en pantallas táctiles "Pasa el cursor para ver los detalles" no funciona en táctil. Si tu plantilla todavía tiene patrones de mostrar al pasar el cursor en móvil, en la práctica están rotos. ### Botones de "cerrar" diminutos en los modales Una X de 16 píxeles en la esquina es imposible de acertar con el pulgar. Haz los botones de cerrar de 44×44 o usa botones de "Cerrar" de ancho completo en la parte inferior de los modales. ### Scroll horizontal en las cuadrículas de productos En móvil, los carruseles de productos con scroll horizontal esconden el 80 % de los productos bajo el pliegue. Una cuadrícula vertical (2 columnas en móvil) convierte mejor. ## Qué gestiona Shoprocket para móvil La mayor parte de lo básico, de serie: - **Optimización automática de imágenes:** redimensiona + comprime + WebP + carga diferida en cada imagen de producto - **Carrito en cajón (no carrito a página completa)** por defecto en móvil - **Botón Añadir al carrito fijo en móvil** compatible con las tiendas con tema - **Checkout adaptado a móvil** con los tipos de campo correctos, autocompletado y apilado - **Apple Pay + Google Pay + Stripe Link**, pago con un toque a través de Stripe - **Widget de chat en vivo adaptado a móvil** - **Entrega por CDN** mediante Cloudflare para todos los recursos - **Core Web Vitals optimizados de serie** en la tienda alojada ```
``` Si usas el widget embebido: la velocidad y el diseño de la página que lo rodea los controlas tú. El widget de Shoprocket se carga de forma diferida y no bloqueará el renderizado de tu página, pero la velocidad global de la página la gestionas tú. > **Consejo:** una vez por trimestre, pasa PageSpeed Insights por tus 3 páginas de producto que más ingresos dan, en móvil. Apunta las tres puntuaciones de Core Web Vitals. El trimestre siguiente, compáralas. Una tendencia a la baja es un asesino silencioso de la conversión; detéctala cada trimestre en lugar de cuando ya se ha hecho el daño. ## Resumen - **El móvil es el 70-85 % del tráfico.** La mayoría de las tiendas lo tratan como algo secundario; tú no - **Los Core Web Vitals son los tres números a seguir:** LCP, INP, CLS. Por debajo de 2,5 s / 200 ms / 0,1 - **Prueba en dispositivos reales con 4G,** no en un emulador del navegador - **Particularidades del checkout:** formularios de una columna, tipos de campo correctos, autocompletado, Apple/Google Pay, CTAs fijos - **Menos campos de formulario** = más finalizaciones. Audita qué hace falta de verdad - **Zonas táctiles de 44×44 como mínimo.** Separación entre zonas de 8 px como mínimo - **La zona del pulgar importa.** CTAs principales cerca de la parte inferior; menús hamburguesa arriba a la izquierda/derecha - **Evita lo que mata el móvil:** intersticiales, audio con reproducción automática, estados de hover, botones de cierre diminutos [Empieza una prueba gratuita](https://app-v3.shoprocket.io/signup) y consigue optimización automática de imágenes + Apple Pay + checkout nativo para móvil desde el primer día. 14 días, sin tarjeta. --- - HTML version: https://v3.shoprocket.io/es/blog/optimizacion-ecommerce-movil-core-web-vitals-checkout-y-arreglos-que-mueven-la-conversion - Language: Español (es) - Also in: [العربية](https://v3.shoprocket.io/ar/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/mobile-ecommerce-optimierung-core-web-vitals-checkout.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [English](https://v3.shoprocket.io/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/optimisation-ecommerce-mobile-core-web-vitals-paiement.md), [עברית](https://v3.shoprocket.io/he/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/optimasi-ecommerce-mobile-core-web-vitals-checkout-dan-perbaikan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/ottimizzazione-ecommerce-mobile-core-web-vitals-checkout.md), [日本語](https://v3.shoprocket.io/ja/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/mobilioji-el-prekyba-core-web-vitals-atsiskaitymas-ir-konkretus-pataisymai-didinantys-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/mobiloptimalisering-nettbutikk-core-web-vitals-kasse.md), [Nederlands](https://v3.shoprocket.io/nl/blog/mobiele-webshop-optimalisatie-core-web-vitals-checkout-conversie.md), [Polski](https://v3.shoprocket.io/pl/blog/optymalizacja-ecommerce-na-mobile-core-web-vitals-kasa-i-poprawki-ktore-ruszaja-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/otimizacao-ecommerce-mobile-core-web-vitals-checkout-conversao.md), [Română](https://v3.shoprocket.io/ro/blog/optimizare-ecommerce-mobil-core-web-vitals-plata.md), [Русский](https://v3.shoprocket.io/ru/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/mobil-eticaret-optimizasyonu-core-web-vitals-odeme-ve-donusumu-artiran-duzeltmeler.md), [中文](https://v3.shoprocket.io/zh/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md)