Mejores prácticas para optimizar tu sitio web para móviles

Para optimizar tu sitio web para móviles, usa un diseño adaptable con la etiqueta de ventana gráfica, ofrece en móvil el mismo contenido que en escritorio, deja objetivos táctiles de unos 48 píxeles y cumple las Métricas web principales: LCP de 2,5 segundos o menos, INP de 200 milisegundos o menos y CLS de 0,1 o menos. Esta guía reúne las mejores prácticas de Google y web.dev en una lista que puedes aplicar hoy.

Por qué optimizar tu sitio web para móviles

Google indexa y posiciona la versión móvil de tus páginas. Por eso, lo que falla en el móvil afecta a toda tu presencia en el buscador, también a las búsquedas desde computadoras. Si quieres entender el concepto y sus beneficios antes de pasar a la práctica, lee qué es el SEO móvil y cómo beneficia a tu sitio web. Esta guía, en cambio, se centra en cómo hacerlo.

Las mejores prácticas para optimizar un sitio web para móviles

Estas prácticas siguen el orden lógico de trabajo. Primero va la base técnica, después el contenido y, al final, la velocidad.

1. Usa un diseño web adaptable

El diseño adaptable sirve el mismo HTML en la misma URL a todos los dispositivos y cambia la presentación según el tamaño de pantalla. Según las prácticas recomendadas de Google para la indexación centrada en los móviles, Google recomienda el diseño web adaptable, el patrón más sencillo de implementar y mantener. Las otras dos opciones, la publicación dinámica y las URL independientes, exigen más trabajo y generan más errores.

2. Configura la etiqueta de ventana gráfica

Sin esta etiqueta, el navegador móvil muestra la página como si fuera de escritorio y la reduce. Según la guía de conceptos básicos del diseño web responsivo de web.dev, el valor recomendado es width=device-width, initial-scale=1. Así, la página se ajusta al ancho de la pantalla del dispositivo. La mayoría de los temas modernos de WordPress ya la incluyen, pero conviene comprobarlo en el código fuente.

3. Ofrece el mismo contenido en móvil y en escritorio

Google indexa lo que ve en la versión móvil. Por lo tanto, la versión móvil debe tener el mismo contenido principal, los mismos metadatos y los mismos datos estructurados que en escritorio. Puedes usar acordeones o pestañas para ahorrar espacio, pero no elimines texto. Además, Google advierte que no carga el contenido que necesita un clic, un deslizamiento o una escritura del usuario para aparecer.

4. Diseña objetivos táctiles cómodos

En una pantalla táctil, los botones y enlaces pequeños provocan toques erróneos. Según la guía de objetivos táctiles accesibles de web.dev, el tamaño mínimo recomendado ronda los 48 píxeles, unos 9 mm, aproximadamente la yema del dedo. Si un icono mide 24 píxeles, puedes añadir relleno hasta llegar a 48 píxeles. También conviene separar bien los enlaces de un menú.

5. Evita los intersticiales y cuadros de diálogo invasivos

Las ventanas emergentes que tapan el contenido molestan más en una pantalla pequeña. Según la guía de Google sobre intersticiales y cuadros de diálogo invasivos, estos elementos frustran a los usuarios y dificultan que los buscadores entiendan el contenido. Si necesitas un aviso, usa un banner discreto que deje leer la página.

6. Cumple las Métricas web principales en móvil

Las Métricas web principales miden la experiencia real de carga, respuesta y estabilidad. Según web.dev, los objetivos son un LCP de 2,5 segundos o menos, un INP de 200 milisegundos o menos y un CLS de 0,1 o menos. Además, se evalúan en el percentil 75 de las visitas, por separado en móviles y computadoras. Es decir, el móvil tiene su propia nota.

Cómo mejorar la velocidad móvil paso a paso

La velocidad es donde más sitios fallan. Estas acciones, basadas en las guías de web.dev, atacan las causas más comunes.

• No cargues en diferido la imagen principal. Según la guía para optimizar el LCP, nunca debes usar la carga diferida en la imagen de LCP. En cambio, puedes darle prioridad alta con fetchpriority.
• Indica ancho y alto en imágenes y vídeos. Según la guía para optimizar el CLS, las imágenes sin dimensiones son una de las causas más comunes de un CLS deficiente.
• Comprime las imágenes. Sírvelas al tamaño en que se muestran, no al tamaño original de la cámara.
• Reduce el JavaScript de terceros. Los scripts pesados retrasan la respuesta a los toques y empeoran el INP.
• Activa la caché. Un complemento de caché en WordPress evita generar cada página en cada visita.

Tabla de comprobación para tu sitio móvil

Usa esta tabla para auditar tu sitio. Todas las herramientas son gratuitas.

Ten en cuenta un cambio de herramientas. Según su registro de novedades, Google anunció el 1 de diciembre de 2023 la retirada de la prueba de optimización para móviles y del informe «Usabilidad móvil». Por eso, hoy se usan Lighthouse, PageSpeed Insights y la inspección de URLs.

Errores frecuentes al adaptar una web a móviles

Algunos errores se repiten en casi todas las auditorías. Además, la mayoría son fáciles de corregir.

• Ocultar texto en móvil para «aligerar» la página. Lo que no está en móvil, Google no lo indexa.
• Bloquear en robots.txt recursos que solo usa el móvil. Google necesita rastrearlos para ver la página.
• Medir solo en computadora. El móvil tiene su propia evaluación de las Métricas web principales.
• Confiar en AMP como solución. Hoy Google trata AMP como cualquier otra página; lee qué es AMP y su estado actual.

Para entender cómo encaja todo esto con el índice de Google, lee qué es la indexación centrada en los móviles. Y si prefieres que un equipo lo revise contigo, conoce nuestro servicio de agencia de posicionamiento SEO en Perú.