English English French French Spanish Spanish German German
Geekflare cuenta con el apoyo de nuestra audiencia. Podemos ganar comisiones de afiliados comprando enlaces en este sitio.
Comparte en:

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

Escáner de seguridad de aplicaciones web Invicti – la única solución que ofrece verificación automática de vulnerabilidades con Proof-Based Scanning™.

¿Se ha asegurado de que su sitio sea compatible con dispositivos móviles?

¿Sabía que Google introdujo una nueva política llamada Mobile-First?

Cada vez más usuarios de la web se están alejando de las computadoras de escritorio y, en cambio, navegan y compran con sus dispositivos móviles.

El diseño web receptivo ha hecho posible crear sitios que funcionan en todas las plataformas en un nivel uniforme. Pero, incluso entonces, el diseño receptivo es solo una fracción de Optimización de UX estrategias para móviles.

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

Es por eso que hay un énfasis tan fuerte en la construcción de su sitio como un experiencia móvil primero. En términos simples, los dispositivos móviles primero significan que su diseño y contenido están optimizados para los usuarios de dispositivos móviles primero.

Dicho esto, esta publicación no trata sobre el diseño de un sitio completamente nuevo. En su lugar, analizaremos algunos principios de diseño fundamentales para dispositivos móviles. Y dedique un tiempo a centrarse en los aspectos técnicos para optimizar la experiencia del usuario para sus usuarios móviles.

#1: Designing with mobile in mind

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 muestra 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.

Aparte del diseño receptivo de sentido común, ¿qué otros elementos de diseño debe implementar en sus diseños web móviles primero?

  • Priorización. Las pantallas móviles están limitadas al espacio de visualización disponible. Además, las pantallas móviles presentan el contenido de una manera vertical en contraposición a una estructura mucho más amplia (horizontal) para los escritorios. Esto significa que debe diseñar utilizando la priorización. ¿Qué elementos son de suma importancia para que los vean los usuarios? Si hay botones de CTA, ¿qué tan fácil es verlos para el usuario móvil?
  • Contenido primero. Segundo color. Tu puedes hacer algo cosas interesantes con el diseño móvil, pero ciertamente no en el ámbito del diseño de escritorio. Entonces, primero ceda el paso al contenido. 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 que, por supuesto, planee este tipo de navegación con anticipación. Y deberías. Experimente con widgets de desplazamiento hacia la parte superior, pero también con encabezados adhesivos sin fisuras 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 visite su sitio. Haga un examen completo de cómo se sienten y fluyen las cosas juntas.

Si estás sentado en un café o esperando un vuelo en un aeropuerto, toca a alguien en el hombro y pídele cortésmente que revise tu sitio por ti. Luego, siéntese y escuche sus comentarios. La mayoría de las veces se sorprenderá con la forma en que las personas perciben la experiencia del usuario de su sitio web.

#2: Resource optimization; images, icons, etc.

¿Con qué frecuencia te encuentras usando imágenes por preferencia personal y no por UX? Sucede, y si va a ser creativo, vale la pena comprender cómo funciona la optimización de medios.

Elementos visuales como fotos, ilustraciones, iconosy los videos son los mayores consumidores de ancho de banda en las páginas web.

Tiempos de carga de página promedio para 2018 ¿Cómo se compara el suyo? Blog de velocidad de MachMetrics
El tamaño promedio de una página web en 2018. Listado por industrias y diferentes países.

Si bien 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 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 por un sitio móvil solo para tener 1980 x 1200 las imágenes se cargan en segundo plano. En su lugar, se deben proporcionar fotos de tamaño completo como enlaces alternativos cuando sea apropiado. 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 compresión. La compresión / optimización de imágenes es el proceso de utilizar software de terceros para reducir la cantidad de colores presentes en una imagen. Esto se puede hacer en la medida en que sus fotos no pierdan su calidad innata, pero su tamaño de archivo puede reducirse drásticamente. 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 la entrega de imágenes digitales gira en torno a WebP y formatos de archivo SVG. SVG, por ejemplo, puede automáticamente escalar al tamaño de la pantalla, reduciendo 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 considera los efectos a largo plazo de sus decisiones. Mientras que un enfoque consciente lo ayuda a construir pensando en los usuarios de dispositivos móviles 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 incluso la más mínima cantidad de ancho de banda.

#3: Pre-loading and Lazy-loading

¿Es necesario cargar todos los recursos multimedia en 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 le informe al navegador sobre posibles oportunidades de navegación. Por ejemplo, un usuario puede visitar Página B de Página A.

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

directiva de precarga

Tenga en cuenta que la precarga no siempre funciona, y depende del navegador tomar la decisión final. Los factores como el tipo de dispositivo y el ancho de banda se pesan individualmente.

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

  • captación previa Este tipo sugiere que es más probable 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 siguiente página se cargue mucho más rápido.
  • preprocesar Mientras que el tipo anterior solo obtiene ciertos recursos, preprocesar 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, esencialmente está reduciendo el tiempo que lleva 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 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">

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

Por cierto, si estás usando WordPress entonces WP Rocket puede ayudarte con eso para potenciar tu sitio.

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

¿Qué es la carga diferida?

Siempre que visita una nueva página web, ya sea una publicación de blog o un sitio estático, el navegador recupera 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 mitad superior de la página.

Mientras que con la carga diferida, se le dice al navegador que cargue (renderice) contenido que solo está dentro de la ventana gráfica del usuario. Por lo tanto, si se agregan fotos o videos sensibles al tamaño a una determinada página, esos archivos solo 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 renderiza páginas que utilizan la carga diferiday lo ve como una señal más de mejora del rendimiento.

layzrjs

Mi recomendación para usar una biblioteca 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: Web caching

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 intenta acceder a esa página, en lugar de ofrecer 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 disparadores.

almacenamiento en caché web

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 eres un usuario de WordPress.

También puede considerar registrarse en un CDN.

¿Qué es una CDN (Content Delivery Network)?

Una red de entrega de contenido utiliza un clúster global de servidores distribuidos para proporcionar una entrega de contenido increíblemente rápida. UNA 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 de la web pasa a través de alguna forma de CDN.

Lo único que debe recordar acerca de las redes de distribución de contenido es que funcionan mejor cuando se utilizan en un sitio web de alta demanda. Por lo tanto, si solo atiende a unos pocos miles de visitantes al mes, ver mejoras notables podría resultar difícil. Sin embargo, una CDN es una gran 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 Cloudflare 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 los mejores proveedores de CDN gratuitos del mercado.

#5: AMP (Accelerated Mobile Pages)

De Google Proyecto AMP es optimización móvil con esteroides! Esencialmente, AMP reduce tus páginas a lo esencial para proporcionar 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?

Video de Youtube

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 que, por supuesto, use el Biblioteca AMP JS disponible en GitHub. El uso de la biblioteca JS le permite lograr ciertos resultados, como evitar bloqueadores de anuncios, pero si desea un verdadero rendimiento, entonces el AMP sin procesar es el camino a seguir.

Estudios de casos interesantes para AMP:

#6: Test before committing

En esta época, no hay excusa para no tener un entorno de ensayo separado para su proyecto. Más 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.

prueba antes de comprometerse

¿Qué es un entorno de puesta en escena?

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

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. UNA puesta en escena entorno en este contexto es una copia de su sitio de producción. UNA maniquí sitio si lo desea. Y en este entorno de prueba, puede realizar cambios o agregar nuevas funciones sin romper su sitio en vivo.

Siempre recuerdo la publicación 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 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.

La prueba no da tanto miedo como parece. ¡Pero seguro que da miedo cuando borras accidentalmente toda tu base de datos en un servidor de producción!

Frase de cierre

Optimización de su sitio web para una experiencia móvil 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 prueba 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.

Gracias a nuestros patrocinadores
Más lecturas excelentes sobre SEO
Impulse su negocio
Algunas de las herramientas y servicios para ayudar a que su negocio crezca.
  • Invicti utiliza Proof-Based Scanning™ para verificar automáticamente las vulnerabilidades identificadas y generar resultados procesables en cuestión de horas.
    Prueba Invicti
  • Web scraping, proxy residencial, administrador de proxy, desbloqueador web, rastreador de motores de búsqueda y todo lo que necesita para recopilar datos web.
    Prueba Brightdata
  • Semrush es una solución de marketing digital todo en uno con más de 50 herramientas en SEO, redes sociales y marketing de contenido.
    Prueba Semrush
  • Intruder es un escáner de vulnerabilidades en línea que encuentra debilidades de ciberseguridad en su infraestructura, para evitar costosas filtraciones de datos.
    Trata Intruder