¿Se ha asegurado de que su sitio sea compatible con dispositivos móviles?
¿Sabías que Google introdujo una nueva política llamada Mobile-First?
Cada vez más usuarios de la web se alejan de las computadoras de escritorio y, en cambio, navegan y compran con sus dispositivos móviles.
El diseño web receptivo ha hecho posible la creación de sitios que funcionan en todas las plataformas en un nivel uniforme. Pero, incluso entonces, el diseño receptivo es solo una fracción de las estrategias de optimización de UX para dispositivos móviles.
Si desea una verdadera optimización del rendimiento, también deberá considerar otras alternativas.
Esta es la razón por la cual hay un énfasis tan fuerte en la construcción de su sitio como un primera experiencia móvil. En términos simples, móvil primero significa que su diseño y contenido están optimizados para usuarios móviles primero.
Dicho esto, esta publicación no se trata de diseñar un sitio completamente nuevo. En su lugar, vamos a ver algunos principios fundamentales de diseño móvil primero. Y dedique algún tiempo a centrarse en los aspectos técnicos para optimizar la experiencia del usuario para sus usuarios móviles.
Tabla de contenido
#1: Diseñar pensando en los dispositivos móviles
La web se basa en gran medida en el principio de servir a los usuarios de escritorio. La web real, los avances reales en tecnologías, se muestran mejor en una hermosa pantalla completa. Pero, los teléfonos inteligentes y otros dispositivos móviles son una cosa, y es hora de comenzar a adaptarse al concepto de diseño móvil primero.
Además del diseño receptivo de sentido común, ¿qué otros elementos de diseño debería implementar en sus diseños web para dispositivos móviles primero?
- Priorización. Las pantallas móviles están limitadas al espacio de visualización disponible. Además, las pantallas de los dispositivos móviles presentan el contenido de manera vertical en oposición a la estructura mucho más amplia (horizontal) de los escritorios. Esto significa que debe diseñar utilizando la priorización. ¿Qué elementos son de suma importancia que los usuarios vean? Si hay botones de CTA, ¿qué tan fácil es verlos para el usuario móvil?
- Primero el contenido. Segundo color. Puede hacer algunas cosas interesantes con el diseño móvil, pero ciertamente no en el ámbito del diseño de escritorio. Entonces, dé paso al contenido primero. Haga que su copia 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.
- Fácil navegación. En un dispositivo móvil, no puede simplemente hacer clic en cualquier lugar y volver a la página de inicio. A menos, por supuesto, que planifique este tipo de navegación con anticipación. Y deberías Experimente con los widgets Scroll-to-Top, pero también con los encabezados pegajosos siempre que sea posible.
La mejor manera de verificar si lo está haciendo bien es usar su teléfono (¡lo hago todo el tiempo!) y visitar su sitio. Haga un examen completo de cómo se sienten las cosas y cómo fluyen juntas.
Si está sentado en un café o esperando un vuelo en un aeropuerto, toque a alguien en el hombro y pídale cortésmente que revise su sitio por usted. Luego, siéntese y escuche sus comentarios. La mayoría de las veces te sorprenderás con la forma en que las personas perciben la experiencia del usuario de tu sitio web.
#2: Optimización de recursos; imágenes, iconos, etc.
¿Con qué frecuencia te encuentras usando imágenes por preferencia personal y no por UX? Sucede, y si vas a ser creativo, vale la pena entender cómo funciona la optimización de medios.
Los elementos visuales como fotos, ilustraciones, íconos y videos son los que más consumen ancho de banda en las páginas web.
El tamaño promedio de la página web en 2018. Listado por industrias y diferentes países.
Si bien no hay 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 más pequeño equivale a tiempos de carga más rápidos.
Entonces, ¿cómo puede recortar algunos KB adicionales o incluso MB de su contenido visual?
- Cambia el tamaño de tus imágenes. Suena simple, ¿verdad? Bueno, no puedo contar cuántas veces he navegado en un sitio móvil solo para que se carguen imágenes de 1980 x 1200 en segundo plano. En su lugar, se deben proporcionar fotos de tamaño completo como enlaces alternativos cuando corresponda. El cambio de tamaño puede reducir hasta un 80 % del tamaño total de la imagen, según las dimensiones requeridas. Sin embargo, para los dispositivos móviles, nunca hay una razón para superar el rango de 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 usar software de terceros para reducir la cantidad de colores presentes en una imagen. Esto se puede hacer hasta el punto de que sus fotos no pierdan su calidad innata, pero se puede reducir drásticamente el tamaño del 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. La última y mejor tecnología en entrega de imágenes digitales gira en torno a WebP y formatos de archivo SVG. Los SVG, por ejemplo, pueden automáticamente escalar al tamaño de la pantallareduciendo la cantidad de recursos necesarios para cargar componentes visuales específicos.
La optimización de la experiencia del usuario para dispositivos móviles primero es algo consciente. Diseñar por impulso significa que no consideras los efectos a largo plazo de tus decisiones. Mientras que un enfoque consciente lo ayuda a construir con los usuarios móviles en mente desde cero.
Perspicaz: Manteniéndose en línea con el concepto de diseño móvil intuitivo, no tiene que reutilizar los mismos componentes visuales en sus diseños móviles. Eliminar algunas imágenes de fondo y reemplazarlas con fondos de color, en dispositivos móviles, no dañará la experiencia del usuario. Siempre busque formas de ahorrar hasta la más mínima cantidad de ancho de banda.
#3: Precarga y Lazy-loading
¿Es necesario cargar todos los recursos multimedia en páginas que tardan mucho en leerse? Y, ¿puede ayudar a mostrar 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 en que una página le dice al navegador sobre posibles oportunidades de navegación. Por ejemplo, un usuario puede visitar la página B desde la página A.
Con la precarga, el usuario puede mostrar la página B antes de hacer clic en el vínculo de navegación de la página A.
Tenga en cuenta que la precarga no siempre funciona y depende del navegador 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 precargadores más comunes?
- captación previa Este tipo sugiere que lo más probable es que una URL específica sea la siguiente opción de navegación. Y, si el navegador acepta la solicitud, automáticamente almacenará en caché los recursos importantes de la página, lo que a su vez hace que la página siguiente se cargue mucho más rápido.
- preprocesar Mientras que el tipo anterior solo obtiene ciertos recursos, la representación previa almacenará en caché toda la página. Todo el contenido renderizado se almacena dentro de la memoria del dispositivo de los usuarios.
- Precarga de DNS. La captación previa de DNS resolverá el DNS especificado y nada más. Como resultado, si un usuario hace un «giro» específico en su sitio, básicamente está reduciendo el tiempo que le lleva navegar.
- Preconectar. Igual que el anterior, pero también establece conexiones y protocolos de enlace con conexiones TCP y TLS.
¿Cuáles son algunos ejemplos de código para precargadores?
<link rel="dns-prefetch" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="preconnect" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="prefetch" href="folder/script.js" as="script"> <link rel="prerender" href="customURL.com/preview.html">
Dado que los precargadores utilizan etiquetas HTML dinámicas, puede precarga contenido como Google Fonts o cree un script personalizado para precargar activos de JavaScript en WordPress.
Por cierto, si estás usando WordPress, entonces Cohete WP puede ayudarlo con eso para potenciar su sitio.
Ahora que sabe más sobre los precargadores, hablemos del otro tema candente: la carga diferida.
¿Qué es la carga diferida?
Cada vez que visita una nueva página web, ya sea una publicación 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 la página completa sin ver más allá de la parte superior del pliegue.
Mientras que con la carga diferida, se le dice al navegador que cargue (procese) contenido que solo está dentro de la ventana gráfica del usuario. Por lo tanto, si se agregan fotos o videos de tamaño sensible a una página determinada, esos archivos solo se mostrarán cada vez que la pantalla de su navegador llegue a esa parte del sitio.
Y si está preocupado por posibles problemas de SEO, no lo esté. Yoast ha confirmado que Google renderiza páginas que usan carga diferiday lo ve simplemente como otra señal de mejora del rendimiento.
Mi recomendación para una biblioteca para usar es Layzr.js – ¡Carga diferida simple y efectiva para sus imágenes! El script también se activa en la página de inicio del proyecto, por lo que puede verlo funcionar en tiempo real. Los usuarios de WordPress pueden encontrar docenas de complementos de carga diferida en el repositorio público de complementos.
#4: almacenamiento en caché web
El almacenamiento en caché web se basa en el concepto de copiar una versión de una página, que luego se puede presentar 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 intente acceder a esa página, en lugar de servir la versión en vivo, el servidor web mostrará la versión 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 activadores.
Algunos de los nombres más populares en el almacenamiento en caché web son Varnish, Squid y Memcached. Pero tenga la seguridad de que hay muchas otras soluciones en el mercado, especialmente si es un usuario de WordPress.
También puede considerar suscribirse a un CDN.
¿Qué es una CDN (red de entrega de contenido)?
Una red de entrega de contenido utiliza un grupo global de servidores distribuidos para proporcionar una entrega de contenido increíblemente rápida. A CDN puede transferir rápidamente todos los tipos de contenido populares en la web: video, foto, JavaScript, etc. En estos días, la mayor parte del tráfico web pasa a través de algún tipo de CDN.
Lo único que debe recordar acerca de las redes de entrega de contenido es que funcionan mejor cuando se usan en un sitio web de alta demanda. Por lo tanto, si solo atiende a unos pocos miles de visitantes al mes, ver mejoras notables puede resultar difícil. Sin embargo, una CDN es una excelente solución para mejorar los tiempos de carga de su sitio web, reducir el costo del ancho de banda, aumentar la disponibilidad del contenido y fortalecer la seguridad general.
Si no tiene experiencia previa con CDN, le recomendamos que pruebe Llamarada de nube — proporcionan un plan gratuito para siempre, y es una gran plataforma para comenzar a aprender. Y si Cloudflare no está a la altura de sus expectativas, consulte nuestra publicación para conocer los mejores proveedores de CDN gratuitos del mercado.
#5: AMP (Páginas móviles aceleradas)
de Google proyecto AMP es optimización móvil con esteroides! Esencialmente, AMP reduce sus páginas a lo esencial para brindar una experiencia de carga súper rápida, pero también para hacer que la legibilidad del contenido sea una prioridad. Dada la importancia de la velocidad de la página, ¿puede reunir el coraje para decir no a los tiempos de carga casi instantáneos?
De acuerdo, todas esas palabras de moda suenan muy bien, pero ¿cómo funciona AMP?
AMP es una página HTML básica con ciertas limitaciones sobre el tipo de contenido que se puede mostrar. Esto conduce a tiempos de carga mucho más rápidos y un rendimiento general debido a la limitación para ejecutar scripts y demás.
JavaScript, por ejemplo, no funciona con AMP. A menos, por supuesto, que utilice el 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 rendimiento real, entonces el AMP sin procesar es el camino a seguir.
Casos de estudio interesantes para AMP:
#6: Prueba antes de comprometerte
Hoy en día, no hay excusa para no tener un entorno de escenario separado para su proyecto. La mayoría de las plataformas de alojamiento en la nube ofrecen entornos de ensayo de forma predeterminada, así que consulte con su proveedor para ver si tiene acceso a uno.
¿Qué es un entorno de ensayo?
Bueno, la forma más rápida de explicar esto es mirando su sitio web actual en vivo.
Este sitio es lo que usted llama un sitio de producción: una versión en tiempo real de todo el código, los scripts y el contenido en el que se basa su sitio. Un entorno de ensayo en este contexto es una copia de su sitio de producción. Un sitio ficticio si se quiere. Y en este entorno de prueba, puede realizar cambios o agregar nuevas funciones sin romper su sitio en vivo.
Siempre pienso en la publicación de Ashley Harpp, No pierda el tiempo: pruebe los cambios antes de confirmarlos.
Su opinión sobre cómo nos «engañamos» a nosotros mismos para evitar ciertas cosas es un excelente ejemplo de cómo no queremos asumir la responsabilidad cuando cometemos un error. Sin embargo, la publicación de Ashley también incluye enlaces a herramientas útiles para configurar un entorno de ensayo local.
Las pruebas no son tan aterradoras como parece. ¡Pero seguro que da miedo cuando borras accidentalmente toda tu base de datos en un servidor de producción!
Frase de cierre
Optimizar su sitio web para una experiencia móvil fluida no es tan difícil. Todo lo que necesita es un poco de determinación y aplicar voluntariamente los métodos descritos en esta publicación. Lo más probable es que ya esté familiarizado con cosas como el almacenamiento en caché de contenido y la carga diferida, pero ¿qué pasa con los entornos de ensayo o los precargadores?
Con suerte, esta publicación ha arrojado algo de luz sobre el estado actual de la optimización de sitios web móviles.