Saltar al contenido
Blog / Auditoría Web Completa
Parte de · Auditoría Web Completa

Mobile-first: cómo auditar la versión móvil de tu web

Google indexa la versión móvil de tu web primero. Esta guía te enseña a auditar el móvil paso a paso y arreglar los problemas que matan conversión.

IM
IMPERO Equipo IMPERO
·
8 min de lectura
#mobile-first #responsive #auditoría móvil #ux móvil #core web vitals móvil

Por qué la versión móvil es la única que importa para Google

Desde 2021, Google indexa el web con mobile-first indexing: significa que la versión que Google ve y rankea es la que enseñas a un móvil, no la de escritorio.

Esto cambia todo:

  • Si tu desktop carga rápido pero tu móvil va lento, Google te trata como una web lenta.
  • Si tu menú en desktop es claro pero en móvil es un caos, Google penaliza la experiencia.
  • Si tienes contenido visible solo en desktop pero oculto en móvil, Google considera que no existe.

Esta guía te enseña a auditar la versión móvil como Google la ve.

Paso 1: Mira tu web como Google la ve

Opción A: Mobile-Friendly Test (oficial Google)

Hasta diciembre 2023, Google tenía un test llamado “Mobile-Friendly Test”. Lo deprecaron porque el mobile-first ya está consolidado. Pero la información sigue accesible en Google Search Console:

  1. Entra a Search Console
  2. Sección “Páginas” → cada URL indexada
  3. Botón “Comprobar URL en directo”
  4. Mira la pestaña “Capturas” en la versión “Smartphone”

Eso es exactamente lo que ve Googlebot móvil.

Opción B: Chrome DevTools

  1. Abre tu web en Chrome
  2. Pulsa F12 (DevTools)
  3. Clica el icono móvil (arriba izquierda del panel)
  4. Selecciona dispositivo (iPhone 14, Pixel 7, etc.)
  5. Recarga la página

Útil pero no del todo fiel a Googlebot. Mejor combinar con la opción A.

Opción C: Un móvil real

La mejor auditoría es con un móvil físico (no emulador):

  • iPhone reciente (Safari)
  • Android medio (Chrome)
  • Cualquier 4G real, no Wi-Fi del despacho

Las diferencias entre emulador y móvil real suelen ser grandes en INP y experiencia táctil.

Paso 2: Audita la velocidad móvil específicamente

Los Core Web Vitals tienen umbrales idénticos en móvil y desktop, pero móvil es siempre más exigente porque:

  • Procesador del móvil más lento
  • Red 4G (no fibra)
  • RAM limitada
  • Pantalla menor

PageSpeed Insights y nuestro Test de Velocidad Web lanzan análisis móvil separado. Para móvil, los umbrales prácticos a perseguir:

  • LCP móvil: bajo 2,5 s (idealmente bajo 1,5 s)
  • INP móvil: bajo 200 ms
  • CLS móvil: bajo 0,1
  • TTFB móvil: bajo 600 ms

Si tu desktop saca 95 puntos pero tu móvil saca 40, el problema es móvil: imágenes pesadas, JS no optimizado para low-end devices, fuentes que bloquean.

Paso 3: Audita la legibilidad

En móvil, los problemas de legibilidad son devastadores:

  • Tamaño de fuente mínimo: 16 px en cuerpo, 18 px ideal. Menos de 14 px = ilegible.
  • Line-height: 1,5 a 1,7 veces el tamaño de fuente.
  • Contraste: ratio mínimo 4,5:1 (texto sobre fondo).
  • Ancho de línea: 60-75 caracteres por línea máximo. Más es difícil de leer.
  • Espacio entre párrafos: mínimo 1,5 veces el line-height.

Comprueba estos puntos en tu móvil real, no en emulador. Si te cuesta leer tu propia web en un iPhone 14 en pleno día, tus visitantes lo dejan.

Paso 4: Audita la usabilidad táctil

Los problemas más típicos:

Botones demasiado pequeños

Tamaño táctil mínimo: 44 x 44 px (recomendación de Apple Human Interface Guidelines y Material Design).

Si tu botón “Comprar” mide 30 x 20 px en móvil, el usuario falla el clic una de cada tres veces. Se frustra. Se va.

Espacio entre elementos clicables

Mínimo 8 px entre dos elementos clicables. Si tienes un menú con enlaces pegados, el usuario abre el equivocado al pulsar.

Inputs que abren teclado equivocado

  • Input email → type="email" (abre teclado con @ y .com)
  • Input teléfono → type="tel" (abre teclado numérico)
  • Input fecha → type="date" (abre date picker nativo)
  • Input cantidad → type="number" inputmode="numeric" (abre numérico)

Cada uno te ahorra clicks al usuario.

Formularios con scroll horizontal

Causa típica: campos input con ancho fijo en píxeles (width: 400px). Si la pantalla del usuario mide 360 px, scroll horizontal. Soluciónalo con width: 100% o max-width.

Paso 5: Audita los CTAs en móvil

El error número uno en móvil: CTAs que no convierten porque están mal en móvil.

Comprueba en tu web:

  • CTA principal arriba del primer pantallazo: visible sin scroll
  • Botones de llamada y WhatsApp con enlaces funcionales:
    • Teléfono: <a href="tel:+34661027785"> (al pulsar, llama)
    • WhatsApp: <a href="https://wa.me/34661027785"> (al pulsar, abre app)
  • Sticky CTA en móvil: botón flotante “Solicitar info” que aparece al scrollear (sin estorbar al contenido)
  • Confirmación táctil clara: al pulsar un botón, debe haber feedback visual (color, sombra) instantáneo

Paso 6: Audita los modales y popups

En desktop, un modal con cookies o lead capture es molestía. En móvil es catastrófico:

  • Modal que tapa el contenido sin botón de cerrar visible
  • Botón de cerrar diminuto (X de 12 px que no puedes pulsar)
  • Modal que aparece a los 5 segundos forzando atención cuando aún no entiendes la página
  • Cookie banner que ocupa el 40 % de la pantalla

Reglas para modales y popups en móvil:

  1. Botón cerrar mínimo 32 x 32 px, alto contraste
  2. No aparecer en menos de 15 segundos desde la carga
  3. No aparecer si vienen de Google Ads (penaliza Quality Score)
  4. Permitir cerrar tocando fuera del modal
  5. Que no aparezcan dos a la vez

Paso 7: Audita las imágenes en móvil

Las imágenes son la causa número uno de webs lentas en móvil. Pasos:

  1. Sirve dimensiones móviles: una imagen que se ve a 400x300 en móvil no debe servir 2000x1500 px.
  2. Usa <picture> con srcset para servir distintas dimensiones según viewport:
    <picture>
      <source srcset="hero-mobile.webp" media="(max-width: 768px)">
      <source srcset="hero-desktop.webp" media="(min-width: 769px)">
      <img src="hero-desktop.webp" alt="...">
    </picture>
  3. WebP o AVIF en lugar de JPG/PNG: la mitad de peso.
  4. Lazy loading en todas las imágenes bajo el pliegue.
  5. Atributos width y height para evitar CLS al cargar.

Paso 8: Audita la navegación

El menú de tu web en móvil suele ser una de tres formas:

Hamburger menu (lo más común): 3 líneas que abren menú lateral. Pros: ahorra espacio. Contras: visibilidad pobre, conversión menor.

Bottom tab bar: pestañas fijas abajo (estilo app). Pros: siempre accesible. Contras: ocupa espacio permanente, no estándar en web.

Menú scroll horizontal: enlaces principales en una fila scrollable. Pros: rápido. Contras: poco contenido por enlace.

Comprueba en tu web:

  • ¿El menú se ve sin esfuerzo?
  • ¿Los enlaces principales están accesibles en 1-2 clicks máximo?
  • ¿El logo lleva a la home al pulsar?
  • ¿Hay buscador interno accesible (si la web es grande)?

Paso 9: Comprueba la página de error 404 en móvil

Cuando alguien llega a una URL rota, ¿tu 404 funciona bien en móvil? Debe:

  • Cargar rápido (no ser una página pesada)
  • Tener mensaje claro (“Página no encontrada”)
  • Tener al menos 3 enlaces hacia páginas activas (home, servicios, contacto)
  • Mantener el header y footer estándar
  • No ser página blanca con código de error técnico

Paso 10: Test integral: rellena un formulario en móvil

La prueba final: usa tu propio formulario de contacto en móvil real:

  1. Abres la web en móvil
  2. Navegas hasta el formulario
  3. Tocas el primer campo (¿se abre teclado correcto?)
  4. Rellenas con datos reales
  5. Avanzas al siguiente campo (¿hay autocompletado donde toca?)
  6. Pulsas submit (¿feedback inmediato?)
  7. Recibes confirmación (¿claro qué pasa después?)

Si en cualquiera de estos 7 pasos hay fricción, lo arreglas. Cada fricción te cuesta clientes.

Errores típicos en pymes españolas

De cada 100 webs que auditamos:

  • 65 tienen LCP móvil > 4s
  • 40 tienen botones < 44 px de alto
  • 35 tienen modales que ocupan toda la pantalla sin botón claro de cerrar
  • 25 tienen tamaño de fuente bajo 14 px en cuerpo principal
  • 20 tienen menú hamburguesa difícil de pulsar (mal posicionado)
  • 15 tienen formulario que no funciona o validación rota en móvil
  • 10 tienen scroll horizontal por algún elemento

Si tu web es típica de pyme española, probablemente tienes 3-5 de estos.

Siguientes pasos

Aplicable a estos sectores

Esta guía aplica especialmente a estos sectores donde trabajamos:

Guía completa

¿Quieres profundizar? Lee la guía de Auditoría Web Completa

Guía definitiva en español sobre auditoría web: qué se mide, cómo interpretarlo, herramientas gratuitas y cuándo conviene una auditoría profesional.

Ver guía completa
Servicio relacionado

¿Te interesa nuestro servicio de Ingeniería Web?

Webs que cargan en menos de 1 segundo, optimizadas al máximo para móvil y Google. Mantenimiento, hosting y Google Business Profile incluidos. Cuatro tiers desde 90 € al mes.

Ver Ingeniería Web

¿QUIERES QUE
ANALICEMOS TU CASO?

Solicita una auditoría técnica gratuita y descubre oportunidades reales de mejora para tu negocio.

Solicitar Auditoría Gratuita
Da el primer paso

AUDITORÍA GRATUITA
SIN COMPROMISO.

Reserva una llamada de 15 minutos. Analizamos tu web, tu publicidad y tu posicionamiento digital. Te decimos exactamente qué mejorar y cuánto puedes ahorrar. Sin coste, sin compromiso.