Por qué las puntuaciones de dispositivos móviles y de escritorio son diferentes
Si alguna vez administraste tu tienda Shopify a través de PageSpeed Insights, has visto la brecha: tu puntaje en tu computadora de escritorio puede estar en los 80 o 90, mientras que el puntaje en tu dispositivo móvil languidece en los 30 o 40. Esto no es un error, es una cuestión de diseño.
Google prueba dispositivos móviles y de escritorio en condiciones completamente diferentes. La prueba móvil simula un teléfono inteligente de gama media con potencia de procesamiento limitada y una conexión de red lenta. La prueba de escritorio utiliza la velocidad máxima de la CPU y su conexión real.
📱 Condiciones de prueba móvil
- ● CPU: Desaceleración 4x (simula un teléfono de gama media)
- ● Red: 4G acelerado (~1,6 Mbps, 150 ms RTT)
- ● Ventana gráfica: 412 x 823px (móvil típico)
- ● Dispositivo: Potencia Moto G simulada
🖥️ Condiciones de prueba de escritorio
- ● CPU: Sin aceleración (velocidad máxima)
- ● Red: Sin aceleración (velocidad real)
- ● Ventana gráfica: 1350 x 940px (escritorio típico)
- ● Dispositivo: Escritorio/portátil moderno
¿El resultado? Exactamente la misma página, el mismo código, los mismos recursos : probado en condiciones tremendamente diferentes. Un archivo JavaScript que se analiza en 200 ms en el escritorio tarda 800 ms en la CPU móvil acelerada. Una imagen que se descarga en 100 ms a través de su banda ancha tarda 500 ms en 4G simulado.
Esta es la razón por la que existe una brecha de 30 a 50 puntos entre dispositivos móviles y computadoras de escritorio. completamente normal para tiendas Shopify. Esto no significa que su tienda no funcione en dispositivos móviles; significa que la prueba móvil de Google es deliberadamente dura. ¿Quieres comprobar tu brecha? Realiza una prueba de velocidad gratuita en tu tienda.
La solución fácil: aumenta ambas puntuaciones al instante
Antes de profundizar en las optimizaciones móviles manuales, existe una forma más rápida. Thunder Page Speed Optimizer mejora drásticamente las puntuaciones móviles al abordar los factores exactos que la prueba móvil de Google penaliza más.
Por qué Thunder golpea más fuerte en dispositivos móviles:
El aplazamiento de secuencias de comandos reduce la carga de la CPU
Se aplaza el JS no crítico: impacto masivo en las CPU móviles limitadas
CSS crítico para una primera pintura rápida
CSS en la mitad superior de la página se carga en línea: sin solicitudes de bloqueo de renderizado en redes lentas
Optimización de fuentes
Precarga y optimiza la entrega de fuentes para reducir el LCP móvil
Priorización de recursos móviles primero
Prioriza los recursos más importantes para el renderizado móvil
Mejora media en dispositivos móviles: +27 puntos PageSpeed
Debido a que los dispositivos móviles son más sensibles a JavaScript y a los recursos que bloquean el procesamiento, las optimizaciones de Thunder tienen un impacto enorme en las puntuaciones de los dispositivos móviles.
Plan gratuito disponible · No se requiere tarjeta de crédito · Configuración de 30 segundos · Funciona con todos los temas
Cómo prueba Google los dispositivos móviles frente a los de escritorio (en detalle)
Usos de PageSpeed Insights Lighthouse debajo del capó. Esto es exactamente lo que sucede de manera diferente entre las pruebas móviles y de escritorio:
| Factor | Prueba Móvil | Prueba de escritorio | Impacto |
|---|---|---|---|
| Limitación de CPU | desaceleración 4x | Ninguno | La ejecución de JS tarda 4 veces más en la prueba móvil |
| Velocidad de la red | ~1,6 Mbps (4G) | Sin aceleración | Los recursos tardan más en descargarse en el móvil |
| Latencia de red | RTT de 150 ms | ~40 ms RTT | Cada solicitud tiene más gastos generales en dispositivos móviles |
| Ancho de la ventana gráfica | 412px | 1350px | Diferentes diseños responsivos y tamaños de imagen |
| Agente de usuario | Chrome móvil | Escritorio Chrome | Puede desencadenar diferentes respuestas del servidor |
| Puntuación de pesos | OTC: 30%, LCP: 25% | Mismos pesos | Misma fórmula, pero la limitación amplifica los problemas |
El La aceleración de la CPU es el factor más importante. El tiempo total de bloqueo (TBT), que mide cuánto tiempo JavaScript bloquea el hilo principal, representa el 30% de la puntuación de PageSpeed. Con una desaceleración de la CPU 4x, cada milisegundo de ejecución de JS se convierte en cuatro. Un script que bloquea durante 150 ms en el escritorio bloquea durante 600 ms en la prueba móvil.
💡 Información clave: Esto significa que la optimización de JavaScript tiene 4 veces más impacto en tu puntuación móvil que en tu puntuación de escritorio. Cada kilobyte de JS que posponga o elimine le reportará más beneficios en dispositivos móviles que en computadoras de escritorio. Esta es exactamente la razón por la que el aplazamiento del guión de Thunder tiene un efecto tan dramático en las partituras móviles.
Por qué la velocidad móvil es más importante para el SEO
Desde 2019, Google ha utilizado indexación móvil primero para todos los sitios web nuevos y, desde 2021, se aplica a toda la web. Esto significa:
- Google rastrea e indexa principalmente versión móvil de su sitio
- Mobile Core Web Vitals son la señal principal para mejorar la clasificación
- Si el contenido existe solo en el escritorio (no en la vista móvil), es posible que Google no lo indexe.
Más allá del SEO, sus datos de tráfico probablemente confirmen por qué los dispositivos móviles son importantes: over 70% of Shopify store traffic typically comes from mobile devices. Su experiencia móvil es la experiencia predeterminada para la mayoría de sus clientes.
70%+
del tráfico de Shopify es móvil
53%
of mobile users leave if load > 3s
100%
de los sitios utilizan la indexación basada en dispositivos móviles
La conclusión: si tienes que elegir entre optimizar para dispositivos móviles o de escritorio, elige siempre el móvil. Las mejoras en dispositivos móviles casi siempre mejoran también las de escritorio (pero no al revés). Para obtener una perspectiva SEO más amplia sobre la velocidad, consulte nuestro Guía de elementos básicos de Web Vitals.
El problema de JavaScript en dispositivos móviles
JavaScript es la razón número uno por la que las puntuaciones en dispositivos móviles son más bajas que en computadoras de escritorio. He aquí por qué afecta mucho más a los dispositivos móviles:
Tiempo de análisis
Antes de que se pueda ejecutar JavaScript, el navegador debe analizarlo. Con una aceleración de CPU 4x, un paquete JS de 500 KB que se analiza en 100 ms en una computadora de escritorio tarda 400 ms en la prueba móvil. Los temas de Shopify suelen incluir entre 200 y 600 KB de JavaScript.
Tiempo de ejecución
Cada controlador de eventos, rutina de inicialización y script de terceros tarda 4 veces más en ejecutarse. Los scripts de aplicaciones que parecen instantáneos en el escritorio se convierten en retrasos notables en el móvil.
Competencia del hilo principal
En dispositivos móviles, el hilo principal maneja la ejecución, el diseño, la pintura y la entrada del usuario de JS. Con una CPU acelerada, estas tareas compiten de manera más agresiva, lo que genera un tiempo de bloqueo total más prolongado y un INP peor.
Qué puedes hacer
- Aplazar JavaScript no crítico: Cargue análisis, widgets de chat y revise scripts después del renderizado inicial. Esta es la optimización principal de Thunder.
- Eliminar aplicaciones no utilizadas: Cada aplicación front-end agrega JavaScript. Audita las aplicaciones que no estás usando y desinstálalas.
- Utilice JavaScript moderno: Módulos ES con
tipo="módulo"los navegadores modernos analizan de manera más eficiente. - División de código: No cargue JavaScript de la página del producto en las páginas de la colección y viceversa.
Para conocer técnicas detalladas de optimización de JavaScript, consulte nuestra guía para arreglando recursos que bloquean el renderizado y gestión de scripts de terceros.
Imágenes adaptables: la mayor victoria móvil
Después de JavaScript, las imágenes son el segundo factor que más contribuye a la brecha de velocidad entre dispositivos móviles y escritorios. Sin imágenes responsivas, su teléfono móvil descarga la misma imagen principal masiva que su escritorio muestra en todo su ancho: un gran desperdicio en una ventana gráfica de 412 píxeles de ancho.
Usa las imágenes responsivas integradas de Shopify
El CDN de Shopify muestra automáticamente imágenes en formatos modernos (WebP/AVIF) y puede cambiar su tamaño sobre la marcha. Utilice el imagen_url filtro con etiqueta_imagen
El filtro para generar atributos srcset responsivos:
{{ product.featured_image | image_url: width: 1200 | image_tag:
widths: '200,400,600,800,1000,1200',
sizes: '(max-width: 768px) 100vw, 50vw',
loading: 'lazy'
}}Esto le dice al navegador: "En dispositivos móviles (menos de 768 px), esta imagen ocupa todo el ancho de la ventana gráfica, así que descargue una versión de ~400 px. En una computadora de escritorio, ocupa la mitad de la ventana gráfica, así que descargue una versión de ~600–700 px". La diferencia puede ser enorme: una imagen de 1200 px puede tener 150 KB, mientras que una versión de 400 px tiene solo 25 KB.
Optimización de imagen destacada
Su imagen principal suele ser su elemento LCP: el elemento de contenido más grande que determina su puntuación de pintura con contenido más grande. En dispositivos móviles, esta imagen necesita especial atención:
- Utilice diferentes recortes de imágenes para dispositivos móviles: Un banner ancho para escritorio recortado para dispositivos móviles pierde impacto. Consideremos un héroe móvil independiente y más alto.
- Precargue la imagen LCP móvil: Agregue una sugerencia de precarga para el tamaño de la imagen móvil para acelerar LCP.
- No cargues al héroe de forma diferida: La imagen principal debería cargarse rápidamente (
cargando="ansioso") ya que está en la mitad superior de la página. - Utilice fetchpriority="high": Dígale al navegador que dé prioridad a la descarga de la imagen principal sobre otros recursos.
Para obtener un manual completo de optimización de imágenes, consulte nuestro Guía de optimización de imágenes de Shopify.
Optimizaciones específicas para dispositivos móviles para Shopify
Más allá de JavaScript y las imágenes, aquí hay optimizaciones que apuntan específicamente al rendimiento móvil:
Reducir el tamaño de DOM en dispositivos móviles
Muchos temas de Shopify muestran elementos duplicados: un menú de escritorio Y un menú móvil, ambos siempre en el DOM. En dispositivos móviles, oculte los elementos del escritorio con pantalla: ninguna — pero aún mejor, envuélvalos en estado líquido o úselos visibilidad del contenido: automático para que el navegador pueda omitir por completo sus cálculos de diseño.
Minimizar el contenido de la mitad superior de la página en dispositivos móviles
Las ventanas gráficas móviles muestran menos contenido en la mitad superior de la página (823 px frente a 940 px de altura, y la mayor parte está ocupada por el encabezado y el héroe). Simplifica la mitad superior de tu móvil: una imagen destacada, un título, una llamada a la acción. Menos contenido = menos para renderizar = LCP más rápido.
Reducir el número de archivos de fuentes
Cada archivo de fuente es una solicitud de red adicional, lo que perjudica más en 4G limitado. No utilice más de 2 familias de fuentes con 2 o 3 pesos cada una. Considere usar fuentes del sistema para el cuerpo del texto y cargar solo una fuente personalizada para los títulos. Esto ahorra entre 100 y 300 KB y elimina los cambios de diseño de intercambio de fuentes.
Preconexión a orígenes críticos
Con un RTT de 150 ms en la prueba móvil, cada nueva conexión al servidor agrega una latencia significativa. Agregue sugerencias de preconexión para sus dominios externos más importantes:
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>Utilice consultas de medios CSS para estilos solo para dispositivos móviles
No envíe CSS solo de escritorio a navegadores móviles. uso medios de comunicación atributos en etiquetas de enlaces para que los navegadores móviles puedan priorizar CSS móvil y diferir los estilos de escritorio.
Manejo de eventos táctiles e INP en dispositivos móviles
Los dispositivos móviles utilizan eventos táctiles en lugar de clics del mouse, y esto presenta características únicas. Desafíos del INP:
El retraso de pulsación de 300 ms (problema heredado)
Los navegadores más antiguos agregaron un retraso de 300 ms después de un toque para detectar toques dobles. Los navegadores modernos eliminan esto si su página incluye con ancho=ancho del dispositivo : que incluyen todos los temas de Shopify. Pero algunas secuencias de comandos de aplicaciones más antiguas pueden agregar detectores de eventos táctiles que reintroducen retrasos.
Oyentes táctiles pasivos
Toque eventos que no llaman prevenirDefault() debe marcarse como pasiva: verdadera. Esto permite que el navegador comience a desplazarse inmediatamente en lugar de esperar a ver si el controlador cancela el desplazamiento. Muchas aplicaciones antiguas de Shopify no hacen esto.
Toque Tamaño del objetivo
Google recomienda que los objetivos táctiles tengan al menos 48x48 píxeles con un espacio de 8 píxeles. Los objetivos que son demasiado pequeños provocan errores y frustración; no es un problema directo de velocidad, pero afecta la capacidad de respuesta percibida de su tienda.
PageSpeed Insights señala oyentes táctiles no pasivos y objetivos de toque de tamaño insuficiente. Solucionarlos mejora tanto su puntuación como la experiencia móvil real. Para obtener más información sobre la optimización específica para dispositivos móviles, consulte nuestro guía de optimización de la velocidad móvil.
Objetivos de puntuación móvil realistas para Shopify
No busques un 100 perfecto en dispositivos móviles: es prácticamente imposible para una tienda Shopify real con aplicaciones, análisis y contenido rico de productos. Aquí hay objetivos realistas:
| Tipo de tienda | Objetivo móvil realista | Destino de escritorio | Notas |
|---|---|---|---|
| Tienda mínima (1 o 2 aplicaciones) | 60–80 | 90–98 | Tema amanecer, personalización mínima |
| Tienda promedio (3 a 5 aplicaciones) | 45–65 | 80–92 | Tema premium, reseñas + análisis |
| Tienda con muchas funciones (más de 6 aplicaciones) | 35–55 | 70–88 | Tema personalizado, muchas aplicaciones de interfaz de usuario |
| Tienda empresarial (más de 10 aplicaciones) | 25–45 | 60–80 | Personalización compleja, integraciones de ERP |
Recuerda: The PageSpeed score is a synthetic benchmark. What actually matters for SEO and conversions are the Core Web Vitals (LCP, CLS, INP) from real user data. A store scoring 40 on mobile but passing all Core Web Vitals in the field is in a better position than a store scoring 60 but failing INP.
Para obtener más contexto sobre lo que significa su puntuación, consulte nuestras guías en Puntos de referencia de velocidad de Shopify y comprender PageSpeed Insights. ¿Listo para optimizar? Comience con nuestra guía de optimización completa.
Preguntas frecuentes
¿Por qué mi puntaje de velocidad móvil de Shopify es mucho más bajo que el de mi computadora de escritorio?
Google PageSpeed Insights prueba dispositivos móviles con aceleración agresiva: desaceleración de CPU 4x para simular un teléfono de rango medio y red acelerada para simular condiciones 4G. Las pruebas de escritorio utilizan la velocidad de conexión real y la potencia total de la CPU. Esto significa que JavaScript que se ejecuta en 200 ms en una computadora de escritorio puede tardar más de 800 ms en el dispositivo móvil simulado. La misma página con el mismo código siempre obtendrá una puntuación más baja en dispositivos móviles (normalmente entre 20 y 40 puntos menos).
¿Google utiliza puntuaciones de dispositivos móviles o de escritorio para la clasificación SEO?
Google uses mobile-first indexing, meaning the mobile version of your site is what Google primarily crawls and uses for ranking. Core Web Vitals from mobile field data (real Chrome users on mobile devices) are the ranking signal. This makes mobile performance more important for SEO than desktop. However, Google evaluates Core Web Vitals (LCP, CLS, INP) separately for mobile and desktop — your desktop pages are ranked using desktop metrics and vice versa.
¿Qué dispositivo móvil simula Google PageSpeed Insights?
PageSpeed Insights utiliza Lighthouse, que simula un Moto G Power de gama media (o equivalente) con aceleración de CPU 4x en una conexión 4G acelerada (descarga de ~1,6 Mbps, RTT de 150 ms). Esto es intencionalmente duro: representa la experiencia de los usuarios con dispositivos promedio, no de alta gama. El rendimiento móvil en el mundo real para sus clientes depende de sus dispositivos y conexiones reales, razón por la cual los datos de campo (CrUX) son más importantes que las puntuaciones de laboratorio.
¿Debo optimizar primero la velocidad para dispositivos móviles o de escritorio?
Optimize for mobile first. Since Google uses mobile-first indexing, your mobile Core Web Vitals directly impact rankings. Additionally, over 70% of Shopify traffic is typically from mobile devices. If your mobile speed is good, your desktop speed will almost always be good too — the reverse isn't true. Focus on reducing JavaScript execution time, optimizing images for mobile viewports, and ensuring fast LCP on smaller screens.
¿Puedo tener diferentes puntuaciones de PageSpeed para dispositivos móviles y computadoras de escritorio?
Sí, y es casi seguro que lo harás. Es extremadamente común que una tienda Shopify obtenga una puntuación de 35 en dispositivos móviles y 85 en computadoras de escritorio. La brecha de 30 a 50 puntos es normal y se debe a las diferentes condiciones de prueba (estrangulación de la CPU, simulación de red, tamaño de la ventana gráfica). No entre en pánico por una puntuación móvil baja si su puntuación de escritorio es buena: la brecha indica una sobrecarga normal de JavaScript, no un sitio roto.
¿Cómo afectan las imágenes responsivas a la velocidad de los dispositivos móviles frente a los de las computadoras de escritorio?
Las imágenes responsivas (usando los atributos srcset y tamaños) permiten que el navegador descargue imágenes del tamaño adecuado para cada dispositivo. Sin ellos, un teléfono móvil descarga la misma imagen principal de 2000 píxeles de ancho que un monitor de escritorio, desperdiciando ancho de banda y aumentando el LCP en segundos. El filtro image_url Liquid de Shopify admite tamaños adaptables y la mayoría de los temas modernos implementan srcset automáticamente. Esta es una de las mayores victorias para cerrar la brecha de velocidad entre dispositivos móviles y de escritorio.