¿Cómo optimizar su sitio web para usuarios móviles?

¿Se ha asegurado de que su sitio web es apto para móviles?

¿Sabía que Google ha introducido una nueva política denominada Mobile-First?

Cada vez son más los usuarios de la web que se alejan de los ordenadores de sobremesa y, en su lugar, navegan y compran utilizando sus dispositivos móviles.

El diseño web responsivo ha hecho posible la creación de sitios que funcionan en todas las plataformas a un mismo nivel. Pero, aun así, el diseño receptivo es sólo una fracción de las estrategias de optimización de la UX para móviles.

Si desea una verdadera optimización del rendimiento, tendrá que considerar también otras alternativas.

Esta es la razón por la que se hace tanto hincapié en construir su sitio como una experiencia mobile-first. En términos sencillos, mobile-first significa que su diseño y contenido están optimizados para los usuarios móviles en primer lugar.

Dicho esto, este post no trata sobre el diseño de un sitio completamente nuevo. En su lugar, vamos a examinar algunos principios fundamentales del diseño mobile-first. Y dedicaremos algo de tiempo a centrarnos en los aspectos técnicos para optimizar la experiencia de usuario para sus usuarios móviles.

Diseñar pensando en los móviles

La web está construida en gran medida sobre el principio de servir a los usuarios de escritorio. La verdadera web, los verdaderos avances tecnológicos, se muestran mejor en una bonita pantalla completa. Pero los teléfonos inteligentes y otros dispositivos móviles son una cosa, y es hora de empezar a adaptarse al concepto de diseño mobile-first.

Aparte del diseño receptivo de sentido común, ¿qué otros elementos de diseño debe implementar en sus diseños web mobile-first?

• Priorización. Las pantallas móviles están limitadas al espacio de visualización disponible. Además, las pantallas de los móviles presentan el contenido de forma vertical, frente a la estructura mucho más amplia -horizontal- de los ordenadores de sobremesa. Esto significa que debe diseñar utilizando la priorización. ¿Qué elementos son los más importantes para que los vean los usuarios? Si hay botones CTA, ¿es fácil verlos para el usuario móvil?
• Primero el contenido. El color en segundo lugar. Se pueden hacer cosas interesantes con el diseño para móviles, pero desde luego no en el ámbito del diseño para ordenadores de sobremesa. Por lo tanto, dé paso al contenido primero. Haga que su texto y otras partes del contenido sean fácilmente legibles y accesibles. Una pantalla móvil es mucho menos indulgente con los elementos visuales que distraen.
• Facilite la navegación. En un dispositivo móvil, no puede hacer clic en cualquier sitio y volver a la página de inicio. A menos, por supuesto, que planifique este tipo de navegación con antelación. Y debería hacerlo. Experimente con widgets de desplazamiento hacia arriba, pero también con cabeceras adhesivas sin fisuras siempre que sea posible.

La mejor forma de comprobar si lo está haciendo bien es utilizar su teléfono(¡yo lo hago todo el tiempo!) y visitar su sitio. Examine a fondo cómo se sienten y fluyen las cosas entre sí.

Si está sentado en una cafetería o esperando un vuelo en un aeropuerto, toque a alguien en un hombro y pídale amablemente que revise su sitio por usted. Después, siéntese y escuche sus comentarios. La mayoría de las veces se sorprenderá de la forma en que la gente percibe la experiencia de usuario de su sitio web.

Optimización de recursos

¿Con qué frecuencia se encuentra utilizando elementos visuales por preferencia personal y no por UX? Sucede, y si se va a poner creativo, merece la pena entender cómo funciona la optimización de recursos.

Los elementos visuales como fotos, ilustraciones, iconos y vídeos son los que más ancho de banda consumen en las páginas web.

Aunque no existe un tamaño de página web establecido que todos deban cumplir, es de sentido común que un tamaño de página web menor equivale a tiempos de carga más rápidos.

Entonces, ¿cómo puede recortar algunos KB o incluso MB adicionales de su contenido visual?

• Cambie el tamaño de sus imágenes. Suena sencillo, ¿verdad? Bueno, no puedo llevar la cuenta de cuántas veces he navegado por un sitio móvil sólo para que se cargaran imágenes de 1980 x 1200 en segundo plano. En su lugar, las fotos a tamaño completo deben proporcionarse como enlaces alternativos cuando sea apropiado. El redimensionamiento puede recortar hasta un 80% del tamaño total de la imagen, en función de las dimensiones requeridas. Para los dispositivos móviles, sin embargo, nunca hay razón para superar los 600-700px como máximo.
• Reduzca el tamaño del archivo con la compresión. La compresión/optimización de imágenes es el proceso de utilizar software de terceros para reducir el número de colores presentes en una imagen. Esto puede hacerse hasta tal punto que sus fotos no pierdan su calidad innata, pero sí que se reduzca drásticamente su tamaño de archivo. Si necesita ayuda para comprimir imágenes, no busque más allá de nuestro completo resumen de herramientas de compresión de imágenes.
• Explore formatos de archivo alternativos. Todo el mundo ha oído hablar de los formatos de archivo PNG y JPEG. Después de todo, son los estándares de imagen de facto en la web. Pero no por mucho tiempo. La última y mejor tecnología en el suministro de imágenes digitales gira en torno a los formatos de archivo WebP y SVG. Los SVG, por ejemplo, pueden escalarse automáticamente al tamaño de la pantalla, reduciendo el número de recursos necesarios para cargar componentes visuales específicos.

La optimización de la experiencia del usuario para mobile-first no es más que algo mental. Diseñar por impulso significa que no tiene en cuenta los efectos a largo plazo de sus decisiones. Mientras que un enfoque mindful le ayuda a construir pensando en los usuarios móviles desde el principio.

Perspicaz: Siguiendo con el concepto de diseño intuitivo para móviles, no tiene por qué reutilizar los mismos componentes visuales en sus diseños para móviles. Eliminar algunas imágenes de fondo y sustituirlas por fondos de color –en móvil– no perjudicará la experiencia del usuario. Busque siempre formas de ahorrar hasta la más mínima cantidad de ancho de banda.

Carga previa y carga perezosa

¿Es necesario cargar todos los recursos multimedia en las páginas que requieren mucho tiempo de lectura? Y, ¿puede ayudar renderizar páginas externas antes de que los usuarios las visiten?

Veamos primero los precargadores, también conocidos como sugerencias del navegador.

Los precargadores son formas de que una página informe al navegador sobre posibles oportunidades de navegación. Por ejemplo, un usuario podría visitar la página B desde la página A.

Con la precarga, el usuario puede visualizar la Página B antes de hacer clic en el enlace de navegación de la Página A.

Tenga en cuenta que la precarga no siempre funciona y que es el navegador el que debe tomar la decisión final. Factores como el tipo de dispositivo y el ancho de banda se sopesan individualmente.

¿Cuáles son los tipos de precarga más comunes?

• Prefetch. Este tipo sugiere que es muy probable que una URL específica sea la siguiente opción de navegación. Y, si el navegador accede a la petición, entonces almacenará automáticamente en caché los recursos importantes de la página, lo que a su vez hace que la siguiente página se cargue mucho más rápido.
• Prerender. Mientras que el tipo anterior sólo obtiene determinados recursos, prerender almacenará en caché toda la página. Todo el contenido renderizado se almacena en la memoria del dispositivo del usuario.
• DNS-Prefetch. DNS prefetch resolverá el DNS especificado y nada más. Como resultado, si un usuario hace un “giro” específico en su sitio, esencialmente le estará recortando el tiempo que tarda en navegar.
• Preconectar. Igual que el anterior, pero también establece conexiones y apretones de manos con conexiones TCP y TLS.

¿Cuáles son algunos ejemplos de código para los precargadores?

<link rel="dns-prefetch" href="customURL.com">
<link rel="preconnect" href="customURL.com">
<link rel="prefetch" href="folder/script.js" as="script">
<link rel="prerender" href="customURL.com/preview.html"&gt

Dado que los precargadores utilizan etiquetas HTML dinámicas, puede precargar contenidos como Google Fonts o crear un script personalizado para precargar activos JavaScript en WordPress.

BTW, si usted está usando WordPress, entonces WP Rocket puede ayudarle con eso para sobrecargar su sitio.

Ahora que sabe más sobre los precargadores, hablemos del otro tema candente: la carga perezosa.

¿Qué es la carga perezosa?

Cada vez que usted visita una nueva página web, ya sea una entrada de blog o un sitio estático — el navegador obtiene todo el contenido de la página y luego sirve ese contenido como una experiencia de navegación nativa. En la mayoría de los casos, se ve obligado a descargar toda la página sin llegar a ver más allá del pliegue superior.

Mientras que con la carga perezosa, se le dice al navegador que cargue (renderice) el contenido que sólo está dentro de la ventana gráfica del usuario. Así, si hay fotos o vídeos de tamaño sensible añadidos a una determinada página, esos archivos sólo se mostrarán cuando la pantalla de su navegador llegue a esa parte del sitio.

Y si le preocupan los posibles problemas de SEO, no lo esté. Yoast ha confirmado que Google sí renderiza las páginas que utilizan la carga perezosa y lo ve como una señal más de mejora del rendimiento.

Mi recomendación para una biblioteca a utilizar es Layzr.js — ¡carga perezosa simple y eficaz para sus imágenes! Además, el script está activado en la página principal del proyecto, por lo que puede ver su rendimiento en tiempo real. Los usuarios de WordPress pueden encontrar docenas de plugins de carga perezosa en el repositorio público de plugins.

Caché web

La caché web se basa en el concepto de copiar una versión de una página, que luego puede presentarse al usuario en cualquier momento. Las páginas se almacenan en caché en la primera visita a la página de un sitio web. Cuando un nuevo usuario intenta entonces acceder a esa página, en lugar de servir la versión en vivo, el servidor web mostrará la versión almacenada en caché.

El objetivo de cualquier tipo de almacenamiento en caché es mejorar el rendimiento del sitio web y disminuir los recursos de back-end necesarios. Dependiendo de su solución de almacenamiento en caché, puede configurar intervalos personalizados y otros eventos basados en disparadores.

Algunos de los nombres más populares en el almacenamiento en caché web son Varnish, Squid y Memcached. Pero tenga por seguro que hay muchas otras soluciones en el mercado, especialmente si es usuario de WordPress.

También puede plantearse contratar una CDN.

¿Qué es una CDN (red de entrega de contenidos)?

Una red de entrega de contenidos utiliza un grupo global de servidores distribuidos para proporcionar una entrega de contenidos increíblemente rápida. Una CDN puede transferir rápidamente todos los tipos de contenido populares en la web: vídeo, foto, JavaScript, etc. Hoy en día, la mayor parte del tráfico de la web pasa a través de algún tipo de CDN.

Lo único que hay que recordar sobre las redes de distribución de contenidos es que funcionan mejor cuando se utilizan en un sitio web de alta demanda. Por lo tanto, si sólo atiende a unos pocos miles de visitantes al mes, ver mejoras notables puede resultar difícil. No obstante, una CDN es una gran solución para mejorar los tiempos de carga de su sitio web, reducir el coste del ancho de banda, aumentar la disponibilidad de los contenidos y reforzar la seguridad general.

Si no tiene experiencia previa con las CDN, le recomendamos que pruebe Cloudflare: ofrecen un plan gratuito para siempre y es una gran plataforma con la que empezar a aprender. Y si Cloudflare no está a la altura de sus expectativas, consulte nuestro post sobre los mejores proveedores de CDN gratuitas del mercado.

AMP (Páginas móviles aceleradas)

El proyecto AMPde Google es la optimización móvil con esteroides Esencialmente, AMP reduce sus páginas a lo esencial para proporcionar una experiencia de carga superrápida, pero también para dar prioridad a la legibilidad del contenido. Teniendo en cuenta lo importante que es la velocidad de las páginas, ¿se atreverá a decir no a los tiempos de carga casi instantáneos?

Vale, todas esas palabras de moda suenan muy bien, pero ¿cómo funciona AMP?

AMP es una página HTML desnuda con ciertas limitaciones en cuanto al tipo de contenido que se puede mostrar. Esto conlleva tiempos de carga y rendimiento general mucho más rápidos debido a las limitaciones para ejecutar scripts y demás.

JavaScript, por ejemplo, no funciona con AMP. A menos, por supuesto, que utilice la biblioteca AMP JS disponible en GitHub. El uso de la biblioteca JS le permite lograr ciertos resultados, como evitar los bloqueadores de anuncios, pero si desea un verdadero rendimiento, entonces AMP en bruto es el camino a seguir.

Casos prácticos interesantes para AMP:

• Terra aumenta la audiencia móvil con AMP
• Times of India obtiene 1,5 veces más ingresos
• Fastcommerce impulsa las conversiones de sus clientes construyendo primero con AMP

Pruebe antes de comprometerse

En los tiempos que corren, no hay excusa para no disponer de un entorno de ensayo independiente para su proyecto. La mayoría de las plataformas de alojamiento en la nube ofrecen entornos de ensayo por defecto, así que compruebe con su proveedor si tiene acceso a uno.

¿Qué es un entorno de ensayo?

Bueno, la forma más rápida de explicarlo es mirando a su actual sitio web en vivo.

Este sitio es lo que se llama un sitio de producción — una versión en tiempo real de todo el código, scripts y contenido en el que se basa su sitio. Un entorno de puesta en escena en este contexto es una copia de su sitio de producción. Un sitio ficticio, por así decirlo. Y en este entorno de ensayo, usted es capaz de hacer cambios o añadir nuevas características sin romper su sitio en vivo.

Siempre pienso en el post de Ashley Harpp, No pierda el tiempo – Pruebe los cambios antes de comprometerse.

Su opinión sobre cómo nos “engañamos” a nosotros mismos para evitar ciertas cosas es un buen ejemplo de cómo no queremos asumir la responsabilidad cuando cometemos un error. No obstante, el post de Ashley también incluye enlaces a herramientas útiles para configurar un entorno de ensayo local.

Probar no da tanto miedo como parece. Pero sí que da miedo borrar accidentalmente toda la base de datos de un servidor de producción

Despliegue el marcado de datos estructurados

El marcado de datos estructurados se conoce comúnmente como marcado de esquema. Es un tipo de metadatos que ofrece más antecedentes y detalles sobre el contenido de su sitio web. Por lo tanto, añadir este marcado de datos estructurados ayudará a que su sitio web para móviles obtenga más asignación de los motores de búsqueda. Así, los motores de búsqueda comprenderán el significado de su contenido con mayor precisión.

Además, el marcado de datos estructurados anota ciertos componentes del sitio web utilizando un formato estandarizado, como JSON-LD, Microdata o RDFa.

Contiene información sobre los productos, reseñas, valoraciones, precios, fechas, ubicaciones de los eventos y mucho más. En última instancia, los motores de búsqueda extraerán estos datos al escanear su página y los utilizarán para resaltar los fragmentos enriquecidos en las SERP.

Para aplicar el marcado de datos estructurados, puede utilizar diversas herramientas generadoras de marcado de esquemas. Utilizando la herramienta, puede aplicar fácilmente el marcado de datos estructurados a su sitio web. Puede elegir el mejor tipo de esquema para su contenido y crear los fragmentos de código necesarios.

Después de añadir el marcado de datos estructurados al HTML de su sitio web, utilice la herramienta de prueba de datos estructurados de Google para asegurarse de su corrección.

Implemente la opción de búsqueda por voz

Los sitios web con opción de búsqueda por voz han ganado mucha popularidad debido a la creciente popularidad de los asistentes virtuales como Siri, Google Assistant, Alexa, etc. Para minimizar el tiempo de navegación y aumentar la flexibilidad, la gente utiliza ahora las opciones de búsqueda por voz. Les ayuda a recuperar rápidamente la información deseada y a completar actividades sin necesidad de teclear.

Estas son las tácticas que puede seguir para implementar la búsqueda por voz y optimizar su sitio web:

Aplique palabras clave de cola larga

La búsqueda por voz adopta sobre todo la forma de preguntas o consultas en lenguaje natural. Cuando utilizan asistentes de voz, los usuarios suelen hablar en tonos más informales. En consecuencia, optimice su contenido utilizando palabras clave de cola larga y respondiendo a las preguntas más frecuentes sobre su categoría o especialidad. Además, tenga en cuenta las preguntas precisas que podría hacer un visitante y, a continuación, respóndalas en su contenido de forma clara y concisa.

Ofrezca respuestas claras y concisas

Los asistentes de voz suelen emplear información basada en gráficos de conocimiento o fragmentos resaltados para ofrecer respuestas concisas y claras a las peticiones de los usuarios. Por lo tanto, si puede estructurar su contenido de forma que responda directamente a las consultas frecuentes, la posibilidad de que su sitio web sea elegido como resultado de la búsqueda por voz aumenta enormemente.

Mejore la navegación y la estructura del sitio web

Garantice una navegación sencilla en su sitio web que sea fácil de rastrear y reconocer para los asistentes de voz. Simplemente optimice sus menús de navegación, cabeceras y gustos internos para permitir una experiencia de usuario fluida. Esto mejora la indexación y recuperación de su material a través de los asistentes de voz.

Apunte al fragmento destacado

Los fragmentos destacados son la mejor forma de hacerse notar a través de los resultados de búsqueda por voz, ya que aparecen resaltados en la parte superior de los resultados de búsqueda. Por lo tanto, estructure su material de forma que sea captado y mostrado en un fragmento destacado. Por ejemplo: respondiendo a las preguntas de forma breve pero eficaz, utilizando viñetas y organizando los datos en tablas o listas.

Conclusión

Optimizar su sitio web para una experiencia móvil fluida no es tan difícil. Lo único que necesita es un poco de determinación y aplicar de buen grado los métodos descritos en este post. Lo más probable es que ya esté familiarizado con cosas como el almacenamiento en caché de contenidos y el lazy-loading, pero ¿qué hay de los entornos de ensayo o los precargadores?

Esperemos que este post haya arrojado algo de luz sobre el estado actual de la optimización de sitios web para móviles.