Cómo optimizar un sitio para dispositivos móviles

Por qué la optimización para móviles es crítica

Más del 60 % del tráfico web global procede de dispositivos móviles y, en algunos sectores, ese porcentaje supera el 80 %. Google cambió a la indexación mobile-first para todos los sitios nuevos en 2019 y, desde marzo de 2021, utiliza exclusivamente la versión móvil de un sitio para la indexación y el posicionamiento. Esto significa que, si tu sitio no funciona bien en móvil, tampoco funciona bien en la búsqueda de Google, por muy perfecta que sea la versión de escritorio.

Los usuarios móviles tienen expectativas distintas a las de los usuarios de escritorio. Esperan una carga rápida (el 53 % de los usuarios abandona un sitio que tarda más de 3 segundos en cargar en móvil), navegación con una sola mano, texto legible sin necesidad de hacer zoom, botones y formularios aptos para el tacto, y una entrada de datos mínima. Un sitio que no cumple estas expectativas pierde visitantes, conversiones y posiciones en las búsquedas.

Indexación mobile-first

Qué significa esto en la práctica

La indexación mobile-first significa que el bot de Google rastrea e indexa principalmente la versión móvil de tu sitio. Si tienes contenido visible solo en la versión de escritorio pero no en la móvil, Google no lo indexará. Esto es crítico para los sitios que usan diseño responsive con contenido oculto en móvil (display:none) o sitios con una versión móvil separada m.dominio.com que tiene menos contenido que la de escritorio.

Cómo comprobar la versión móvil

Usa Google Search Console para hacer seguimiento de la indexación mobile-first. En el informe de Cobertura puedes ver si Google está rastreando la versión móvil o la de escritorio de tu sitio. La herramienta de inspección de URL muestra cómo ve Google una página concreta. El informe de Usabilidad móvil muestra problemas como texto demasiado pequeño, elementos superpuestos o enlaces colocados demasiado juntos. La prueba de optimización para móviles de Google (search.google.com/test/mobile-friendly) comprueba rápidamente si una página concreta está optimizada para móviles.

Diseño web responsive

Fundamentos del responsive

El diseño web responsive es un enfoque en el que el diseño del sitio se adapta automáticamente al tamaño de pantalla del usuario. En lugar de versiones separadas para escritorio y móvil, tienes un único sitio que reorganiza los elementos de forma fluida. Los elementos clave del diseño responsive son la etiqueta meta viewport, que indica al navegador que adapte el ancho del contenido al ancho del dispositivo, las media queries de CSS, que aplican distintos estilos para distintos tamaños de pantalla, las imágenes flexibles, que se escalan con su contenedor, y una rejilla fluida que usa porcentajes en lugar de píxeles fijos para los anchos de los elementos.

Enfoque de codificación mobile-first

La buena práctica es codificar de móvil a escritorio (mobile-first). Los estilos CSS base son para móvil, y las media queries añaden estilos para pantallas más grandes. Esto tiene dos ventajas: los dispositivos móviles no tienen que descargar ni procesar CSS que luego se sobrescribe (mejor rendimiento) y te obliga a priorizar el contenido y la funcionalidad para la pantalla más pequeña. Los frameworks de CSS como Tailwind CSS y Bootstrap 5 usan un enfoque mobile-first con breakpoints para pantallas sm, md, lg y xl.

Errores comunes en el diseño responsive

Los errores más comunes incluyen anchos de elementos fijos en píxeles (usa max-width y porcentajes), scroll horizontal en móvil (verifica que ningún elemento supere el ancho de la pantalla), botones y enlaces demasiado pequeños (el tamaño mínimo del área táctil es de 48x48 píxeles según las directrices de Google), imágenes no optimizadas (una imagen grande de escritorio también se carga en móvil), ventanas emergentes que cubren toda la pantalla del móvil (Google penaliza los intersticiales intrusivos) y formularios con demasiados campos (minimiza la entrada en móvil, usa autocompletado).

Optimización de la velocidad en móvil

Por qué la velocidad es más importante en móvil

Los dispositivos móviles suelen tener conexiones a internet más lentas (4G/LTE frente a fibra), menos potencia de procesamiento para el renderizado de páginas y menos RAM para procesar JavaScript. Google Page Speed Insights (o nuestra herramienta gratuita de prueba de velocidad) muestra puntuaciones separadas para móvil y escritorio: la puntuación de móvil es casi siempre más baja y es la que más afecta al posicionamiento.

Optimización de imágenes para móvil

Las imágenes son la razón más común de una carga lenta en móvil. Usa imágenes responsive con el atributo srcset, que sirve distintos tamaños de imagen para distintas pantallas: el móvil recibe una imagen de 400px en lugar de una imagen de escritorio de 1600px. El formato de la imagen también importa: los formatos WebP y AVIF son entre un 30 % y un 50 % más pequeños que JPEG con la misma calidad. La carga diferida (el atributo loading="lazy") aplaza la carga de las imágenes que no están visibles en pantalla. WordPress añade automáticamente la carga diferida a todas las imágenes desde la versión 5.5.

Optimización de JavaScript

JavaScript suele ser el principal culpable de los sitios móviles lentos. Minimiza la cantidad de JavaScript: cada kilobyte de JS requiere descarga, análisis y ejecución y, en un procesador móvil, eso lleva mucho más tiempo que en escritorio. Usa la división de código (code splitting) para cargar solo el JS necesario para la página actual. Aplaza la carga del JavaScript no crítico con los atributos async o defer. Evita los grandes frameworks de JS para sitios sencillos: si solo necesitas un carrusel y un menú hamburguesa, no necesitas React ni Angular.

CSS crítico

La técnica del CSS crítico extrae el CSS necesario para renderizar el contenido above-the-fold y lo incrusta en el HTML, mientras que el resto del CSS se carga de forma asíncrona. En móvil, el contenido above-the-fold es más pequeño (menor altura del viewport), por lo que el CSS crítico también es más pequeño. Herramientas como Critical, Penthouse y CriticalCSS.com generan automáticamente CSS crítico. Plugins de WordPress como WP Rocket y Autoptimize incorporan soporte para esta optimización. Para más información sobre velocidad, lee nuestra guía para acelerar un sitio.

AMP (Accelerated Mobile Pages)

Qué es AMP

AMP es el framework de Google para crear páginas móviles ultrarrápidas. Las páginas AMP usan un subconjunto restringido de HTML, CSS en línea de hasta 75KB y JavaScript mínimo (solo la biblioteca AMP). Google almacena en caché las páginas AMP en su red CDN, lo que da lugar a una carga casi instantánea. AMP fue especialmente popular en sitios de noticias y blogs donde la velocidad de lectura es crítica.

Si necesitas AMP

AMP ya no es necesario para el carrusel Top Stories de Google (desde junio de 2021) y no es un factor de posicionamiento directo. Si tu sitio ya tiene buenas puntuaciones de Core Web Vitals, probablemente no necesites AMP. Sin embargo, AMP puede ser útil para sitios con una alta tasa de rebote en móvil (AMP reduce drásticamente el tiempo de carga), sitios de noticias y blogs con muchos artículos, sitios con infraestructura débil donde el almacenamiento en caché de la CDN de Google ayuda significativamente, y el email marketing (AMP for Email permite correos interactivos). Para WordPress, el plugin AMP de Google y XWP genera automáticamente versiones AMP de tus páginas.

Core Web Vitals en móvil

LCP (Largest Contentful Paint)

LCP mide el tiempo de carga del elemento visible más grande de la página, normalmente la imagen hero o el encabezado principal. En móvil, el objetivo es un LCP inferior a 2,5 segundos. Los problemas más comunes son imágenes grandes no optimizadas, un tiempo de respuesta del servidor lento (TTFB) y recursos que bloquean el renderizado. Precarga la imagen LCP con link rel="preload", usa un formato optimizado (WebP) y un tamaño adecuado, y minimiza el CSS y el JS que bloquean el renderizado.

INP (Interaction to Next Paint)

INP sustituyó a FID como métrica de Core Web Vitals y mide la capacidad de respuesta del sitio a las interacciones del usuario. En móvil, un INP inferior a 200 milisegundos es una buena puntuación. Los problemas comunes son tareas de JavaScript de larga duración que bloquean el hilo principal, manipulaciones complejas del DOM y demasiados event listeners. Las soluciones incluyen dividir las tareas largas en otras más pequeñas (yield to main thread), aplicar debounce a los manejadores de eventos y usar web workers para operaciones computacionalmente intensivas.

CLS (Cumulative Layout Shift)

CLS mide la estabilidad visual de la página: cuánto se mueven los elementos durante la carga. En móvil, un CLS inferior a 0,1 es una buena puntuación. Las causas más comunes de un mal CLS son las imágenes sin los atributos width y height (el navegador no sabe cuánto espacio reservar), los anuncios inyectados dinámicamente que empujan el contenido, las fuentes web que cambian el tamaño del texto al cargarse (FOUT) y el contenido inyectado por encima del contenido existente. Define siempre las dimensiones de imágenes y vídeos, usa font-display: swap para las fuentes web y reserva espacio para los anuncios.

Probar la optimización para móviles

• Google PageSpeed Insights: informe detallado de rendimiento con recomendaciones específicas para móvil y escritorio.
• Modo de dispositivo de Chrome DevTools: simula distintos dispositivos móviles en el navegador para probar el diseño y la funcionalidad.
• BrowserStack y LambdaTest: pruebas en dispositivos móviles reales en la nube: distintos modelos, versiones de SO y navegadores.
• Google Search Console: el informe de Usabilidad móvil identifica las páginas con problemas en móvil.
• WebPageTest: una herramienta avanzada de prueba de velocidad con opciones para dispositivos móviles y conexiones lentas.
• Lighthouse: la herramienta de Google para un análisis exhaustivo del rendimiento, la accesibilidad, el SEO y las buenas prácticas.

Conclusión

La optimización para móviles no es opcional: es un requisito para todo sitio que quiera ser visible en la búsqueda de Google y ofrecer una buena experiencia de usuario. El diseño responsive con un enfoque mobile-first, las imágenes optimizadas, un JavaScript mínimo y unas buenas métricas de Core Web Vitals son la base de una optimización móvil exitosa. En BeoHosting, todos los planes de hosting están optimizados para una entrega rápida de contenido en dispositivos móviles con el servidor web LiteSpeed, el almacenamiento en caché del lado del servidor y una CDN gratuita que acelera la carga para los usuarios de todo el mundo.