Optimizar tu página web para móviles: guía y lista de control

Para optimizar una página web para móviles necesitas tres cosas: un diseño adaptable con la metaetiqueta viewport, una carga rápida que cumpla las Core Web Vitals y el mismo contenido que en escritorio. Esto último importa porque Google rastrea e indexa la versión móvil de cada sitio desde que completó la indexación móvil el 31 de octubre de 2023.

¿Qué es una página optimizada para móviles?

Una página optimizada para móviles se lee sin hacer zoom, carga rápido con datos móviles y se maneja bien con el dedo. Además, muestra el mismo contenido útil que la versión de escritorio. No basta con que «se vea» en el teléfono: también tiene que responder rápido y no mover los elementos mientras cargas.

Google recomienda el diseño adaptable, o responsive, como la forma más sencilla de lograrlo. Según su guía de indexación centrada en móviles, este modelo sirve el mismo HTML en la misma URL a todos los dispositivos. Después, el CSS adapta la presentación a cada pantalla.

Por qué importa: la indexación centrada en móviles

Google usa la versión móvil de tu web para indexarla y clasificarla. Su equipo anunció el 31 de octubre de 2023, en el blog de Google Search Central, que el paso a la indexación móvil había terminado. Por lo tanto, si algo falta en tu versión móvil, para Google no existe.

Esto tiene consecuencias prácticas. Por ejemplo, el título, la metadescripción, los datos estructurados y el texto alternativo de las imágenes deben ser equivalentes en ambas versiones. Lo mismo ocurre con las etiquetas robots: un noindex solo en móvil puede sacar la página del índice.

Si quieres profundizar en el lado del posicionamiento, lee qué es el SEO móvil y por qué es esencial.

Core Web Vitals: los umbrales que debe cumplir tu web móvil

Las Core Web Vitals son tres métricas de experiencia de usuario definidas por Google en web.dev. Miden la carga, la respuesta y la estabilidad. Para aprobar, el 75 % de las visitas reales debe alcanzar el umbral bueno, y se mide por separado en móvil y en escritorio.

Un cambio reciente: INP sustituyó a FID como métrica de respuesta el 12 de marzo de 2024, según el anuncio de web.dev. Así que, si una guía todavía habla de FID, está desactualizada. Tenemos una explicación más amplia en Core Web Vitals: ¿son importantes para el SEO?

Cómo optimizar una página web para móviles en 10 pasos

1. Añade la metaetiqueta viewport y usa un diseño adaptable

Sin la metaetiqueta viewport, el móvil muestra la página muy alejada y el texto resulta ilegible, como explica web.dev. Por eso es lo primero que debes revisar. Después, usa consultas de medios en el CSS para reorganizar columnas y menús.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<style>
  .rejilla { display: grid; gap: 16px; grid-template-columns: 1fr; }
  @media (min-width: 768px) {
    .rejilla { grid-template-columns: repeat(3, 1fr); }
  }
</style>

2. Optimiza las imágenes

Las imágenes suelen ser el mayor peso de una página móvil. Sírvelas en formatos modernos como WebP o AVIF y ofrece varios tamaños con srcset. Además, indica siempre el ancho y el alto para reservar el espacio. Usa la carga diferida solo en las imágenes que quedan fuera de la primera pantalla.

<!-- Imagen principal (LCP): sin carga diferida y con prioridad alta -->
<img src="portada-800.webp"
     srcset="portada-480.webp 480w, portada-800.webp 800w, portada-1200.webp 1200w"
     sizes="(max-width: 600px) 100vw, 800px"
     width="800" height="450" fetchpriority="high"
     alt="Equipo revisando una web en el móvil">

<!-- Imágenes de más abajo: carga diferida -->
<img src="grafico.webp" width="600" height="400" loading="lazy"
     alt="Gráfico de Core Web Vitals en móvil">

3. Acelera el elemento principal (LCP)

El LCP suele ser la imagen de cabecera o el titular. Para acelerarlo, el navegador debe descubrir ese recurso en el HTML inicial, según la guía de optimización del LCP de web.dev. Por ejemplo, no lo cargues con JavaScript ni con carga diferida, y dale prioridad alta con fetchpriority=high.

4. Reduce el JavaScript para mejorar el INP

Un móvil de gama media procesa JavaScript mucho más despacio que un portátil. Por eso, elimina los scripts que no uses y retrasa los de terceros, como chats o mapas, hasta que el usuario interactúe. También conviene dividir las tareas largas para que la página responda al toque.

5. Evita los saltos de contenido (CLS)

Los saltos aparecen cuando una imagen, un anuncio o una fuente cargan tarde y empujan el texto. Para evitarlo, reserva el espacio de cada elemento con width y height. Asimismo, carga las fuentes web con font-display: swap y no insertes banners encima del contenido ya visible.

6. Haz que el texto se lea sin zoom

Usa un tamaño base cómodo; 16 píxeles es el valor por defecto de los navegadores. Además, deja un interlineado generoso y un buen contraste entre texto y fondo. Las líneas muy largas cansan, así que limita el ancho del texto en tabletas.

7. Diseña para el dedo, no para el ratón

web.dev recomienda que cada objetivo táctil mida unos 48 píxeles independientes del dispositivo, con unos 8 píxeles de separación, en su guía de objetivos táctiles accesibles. Por su parte, la norma de accesibilidad WCAG 2.2 fija un mínimo de 24 por 24 píxeles CSS. Tampoco escondas información tras efectos que solo funcionan al pasar el ratón.

8. Mantén el mismo contenido que en escritorio

Puedes reorganizar el contenido con pestañas o acordeones, pero no lo recortes. Google pide que la versión móvil tenga el mismo contenido principal, los mismos datos estructurados y metadatos equivalentes. Además, evita las ventanas emergentes que tapan la página al entrar, porque empeoran la experiencia.

9. Simplifica los formularios

Pide solo los datos imprescindibles. Usa el tipo de campo correcto, como type=email o type=tel, para que el móvil muestre el teclado adecuado. Y añade el atributo autocomplete para que el navegador rellene nombre, correo o dirección.

10. Mide con datos reales y repite

Empieza por PageSpeed Insights, que combina datos de campo de usuarios reales con una prueba de laboratorio. Luego revisa el informe de Core Web Vitals de Google Search Console, que agrupa las URL con problemas. Por último, prueba la web en un móvil real con conexión lenta, no solo en el simulador.

Prueba de optimización para móviles: qué usar ahora

La antigua prueba de optimización para móviles de Google ya no existe. Google anunció en abril de 2023, en su blog para desarrolladores, que la retiraría el 1 de diciembre de 2023 junto con el informe de usabilidad móvil de Search Console. Sin embargo, la usabilidad móvil sigue importando. Hoy tienes estas alternativas gratuitas:

Lista de comprobación para optimizar tu web para móviles

Usa esta lista antes de publicar o después de un rediseño. Marca cada punto y vuelve a medir a los 28 días, que es el periodo que usan los datos de campo de Chrome.

Errores frecuentes al optimizar para móviles

• Medir solo en escritorio. Tu web puede sacar 100 en un portátil y suspender en un móvil de gama media.
• Esconder contenido en móvil. Si lo quitas para ahorrar espacio, Google tampoco lo verá.
• Cargar la imagen principal en diferido. Es una de las causas más comunes de un LCP lento.
• Acumular plugins. En WordPress, cada plugin puede añadir CSS y JavaScript en todas las páginas.
• Fiarse de la puntuación de laboratorio. Lo que cuenta para Google son los datos de campo de usuarios reales.

¿Y AMP? ¿Sigue haciendo falta?

No. Desde junio de 2021, Google no exige AMP para aparecer en Noticias destacadas, y AMP no da ventaja de posicionamiento propia. Hoy puedes lograr la misma velocidad con un diseño adaptable bien optimizado. Lo explicamos en qué es AMP y cuándo conviene usarlo.

Por último, recuerda que la optimización móvil es la base de cualquier campaña dirigida al teléfono. Si te interesa ese lado, revisa nuestra guía de marketing móvil. Y si quieres una auditoría completa, consulta nuestro servicio de posicionamiento web en buscadores.