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

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

| www.GustavoGuardadoRoa.com |

sitios en la web facebook costa ricatwitter costa ricapinterest costa ricalinkedin costa ricaemail costa rica
youtube costa ricamix sitios en la web costa ricatumblr sitios en la web costa ricainstagram sitios en la web costa ricagoogle my business sitios en la web costa rica

Costa Rica (506) 8322-2771 - seoanddesign@gmail.com

marketing digital

 

¿Te has asegurado de que tu 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 están alejando de las computadoras de escritorio, y en su lugar, navegan y compran utilizando sus dispositivos móviles.

El diseño web responsivo ha hecho posible crear sitios que funcionan en todas las plataformas en un nivel uniforme. Pero, incluso entonces, el diseño responsivo 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 tenés que considerar otras alternativas.

Esta es la razón por la que hay un énfasis tan fuerte en la construcción de tu sitio como una primera experiencia móvil. En términos simples, móvil primero significa que tu 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 para dispositivos móviles. Y, dedicá un tiempo a centrarte en los aspectos técnicos para optimizar la experiencia del usuario para sus usuarios móviles.

# 1: Diseñar con el móvil en mente

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. Sin embargo, los teléfonos inteligentes y otros dispositivos móviles son una cosa, y es hora de comenzar a adaptarse al concepto de diseño para dispositivos móviles.

Aparte del diseño sensible al sentido común, ¿qué otros elementos de diseño debería implementar en sus diseños web para dispositivos móviles?

  • 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 manera vertical en oposición a una estructura mucho más amplia (horizontal) para equipos de escritorio. Esto significa que debe diseñar utilizando la priorización. ¿Qué elementos son de mayor importancia para que los usuarios los vean? Si hay botones de CTA, ¿qué tan fácil es verlos para el usuario móvil?
    Primero contenido, segundo el color. Podés hacer algunas cosas interesantes con el diseño móvil, pero ciertamente no en el ámbito del diseño de escritorio. Por lo tanto, dar paso al contenido primero. Haga que su contenido y otras partes de contenido sean fácilmente legibles y accesibles. Una pantalla móvil es mucho menos indulgente en 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, planifique este tipo de navegación antes de tiempo. Y deberías. Experimente con widgets Scroll-to-Top, pero también con encabezados pegajosos siempre que sea posible.


La mejor manera de comprobar si estás haciendo esto correctamente es usar tu propio teléfono (¡lo hago todo el tiempo!) Y visitar tu sitio. Hacé un examen completo de cómo las cosas se sienten y fluyen juntas.

Si estás sentado en una cafetería o esperando un vuelo en un aeropuerto, toque a alguien en un hombro y pídale cortésmente que compruebe tu sitio por vos. Luego, sentate y escuchá sus comentarios. La mayoría de las veces te sorprenderás con la forma en que las personas perciben la experiencia de usuario de tu sitio web.

# 2: Optimización de recursos; Imágenes, iconos, etc.

¿Con qué frecuencia te encontrás usando imágenes por preferencia personal y no UX? Ocurre, 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 mayores consumidores de ancho de banda en las páginas web.

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 extra o incluso MB de su contenido visual?

  • Cambiar el tamaño de tus imágenes. Suena simple, ¿verdad? Bueno, no puedo seguir contando la cantidad de veces que navegué por un sitio móvil solo para que se carguen las imágenes de 1980 x 1200 en segundo plano. En su lugar, se deben proporcionar fotos de tamaño completo como enlaces alternativos cuando sea apropiado. El tamaño puede reducir hasta el 80% del tamaño total de la imagen, dependiendo de las dimensiones requeridas. Para los dispositivos móviles, sin embargo, nunca hay una razón para ir más allá del rango de 600-700px.
  • Reducir el tamaño del archivo con compresión. La compresión/optimización de la imagen es el proceso de utilizar 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 pueden reducir drásticamente el tamaño de sus archivos. Si necesita ayuda para comprimir imágenes, no busque más, nuestro completo conjunto de herramientas de compresión de imágenes.
  • Explorar 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 los formatos de archivos WebP y SVG. Los SVG, por ejemplo, pueden escalar automáticamente 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 solo una cosa consciente.
Diseñar por impulso significa que no considera los efectos a largo plazo de sus decisiones. Mientras que un enfoque atento lo ayuda a construir con los usuarios móviles en mente desde cero.

Insightful-Perpicaz: 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 el móvil, no perjudicará la experiencia del usuario. Siempre busque formas de ahorrar incluso la menor cantidad de ancho de banda.

# 3: Precarga y carga perezosa

¿Es necesario cargar todos los recursos multimedia en páginas que requieren una cantidad de tiempo considerable para leer? Y, ¿puede ayudar a representar 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 acerca de las posibles oportunidades de navegación.

Ej. Un usuario puede visitar la página B de la 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.

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

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

  • Prefetch Este tipo sugiere que es más probable que una URL específica sea la próxima opción de navegación. Y, si el navegador concede la solicitud, automáticamente almacenará en memoria caché los recursos importantes de la página, lo que a su vez hará que la página siguiente se cargue mucho más rápido.
  • Prerender Mientras que el tipo anterior solo obtiene ciertos recursos, Prerender almacenará en caché toda la página. Todo el contenido renderizado se almacena dentro de la memoria del dispositivo de los usuarios.
  • 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 está reduciendo el tiempo que le lleva navegar.
    Preconect. Igual que el anterior, pero también establece conexiones y handshakes 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">

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

Por cierto, si está utilizando WordPress, WP Rocket puede ayudarte a mejorar tu sitio.

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

¿Qué es la carga perezosa?

Cada vez 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 realmente más allá del pliegue.

Mientras que con la carga diferida, se le dice al navegador que cargue (renderice) contenido que esté solo dentro de la ventana gráfica del usuario. Por lo tanto, si hay fotos o videos sensibles al tamaño agregados 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 te preocupan los posibles problemas de SEO, no lo hagas. Yoast ha confirmado que Google hace páginas que usan carga lenta, y lo ve como otra señal de mejora del rendimiento.

Mi recomendación para que use una biblioteca es Layzr.js: ¡carga perezosa simple y efectiva para sus imágenes! El script también se activa en la página de inicio del proyecto, para que pueda verlo en tiempo real. Los usuarios de WordPress pueden encontrar docenas de complementos de carga lenta en el repositorio de complementos públicos.

# 4: caché web

El almacenamiento en caché web se basa en el concepto de copiar una versión de una página, que 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 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 requeridos. 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 la seguridad de que hay muchas otras soluciones en el mercado, especialmente si usted es un usuario de WordPress.

También podés considerar registrarte para un CDN.

¿Qué es un CDN (Content Delivery Network)?
- Red de entrega de contenido -

Una red de entrega de contenido usa un grupo 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 algún tipo de CDN.

Lo único que hay que recordar acerca de las redes de entrega de contenido es que funcionan mejor cuando se usan en un sitio web de alta demanda. Entonces, si solo atiende a unos pocos miles de visitantes al mes, ver mejoras notables podría resultar difícil. Sin embargo, un CDN es una gran solución para mejorar los tiempos de carga de su sitio web, reducir el costo de ancho de banda, aumentar la disponibilidad de contenido y fortalecer la seguridad general.

Si no tiene experiencia previa con CDN, le recomendamos probar Cloudflare, ya que ofrecen un plan gratuito para siempre, y es una excelente plataforma para comenzar a aprender.

# 5: AMP (Páginas Móviles Aceleradas)

El proyecto AMP de Google es la optimización móvil con esteroides. Esencialmente, AMP hace que sus páginas queden a la perfección para brindar una experiencia de carga súper rápida, pero también para 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 realmente AMP?

AMP es una página HTML simple con ciertas limitaciones para el tipo de contenido que se puede mostrar. Esto conduce a tiempos de carga mucho más rápidos y al 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 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 rendimiento real, AMP en bruto es el camino a seguir.

AMP por ejemplo

Si sos un usuario de WordPress, en la mayoría de los casos, agregar AMP a su blog se hará con la ayuda de un complemento. Pero, si está trabajando con un sitio personalizado, agregar AMP por primera vez puede ser un poco desafiante.

Aquí es donde AMP por ejemplo es útil. Un proyecto paralelo a la plataforma real, este sitio detalla cada rincón y gancho posible para lograr con AMP. Cada componente y efecto viene con una demostración proporcionada para que puedas ver cómo se vería.

# 6: Prueba antes de cometer

En esta época, no hay excusa para no tener un entorno de preparación separado para su proyecto. La mayoría de las plataformas de alojamiento en la nube ofrecen entornos de prueba por defecto, 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 explicarlo 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 todos los códigos, scripts y contenido en los que se basa su sitio. Un entorno de prueba en este contexto es una copia de su sitio de producción. Un sitio ficticio si quieres. Y en este entorno de prueba, puedes realizar cambios o agregar nuevas funciones sin romper tu sitio activo.

Optimizar tu sitio web para una experiencia móvil sin problemas 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 lenta, 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. No dude en dejar un comentario o recomendar soluciones adicionales.

Gustavo Guardado Google +

Te ofrecezco desarrollar tu proyecto web de forma profesional.
Tengo a tu disposición diversas opciones atractivas.
http://www.sitios-enlaweb.com/images/blank-space.png

Permitínos mejorar tus
resultados de marketing en línea.
Hemos aumentado el tráfico,
los clientes potenciales y
las ventas de compañías en
turismo, bienes raíces, medicina.
Además, para cientos de pequeñas
empresas locales como dentistas,
veterinarios, fontaneros, dermatólogos, etc. Presios SEO

costa rica properties

Inscríbete a nuestro Boletín Electrónico
Recibí consejos GRATIS sobre las
últimas noticias de Marketing Digital.


costa rica properties

4 maneras para conocer la marca
4 maneras de utilizar la
escucha social para conocer la marca


costa rica properties

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

Compartí este
artículo por Whatsapp

costa rica properties

seo costo

Bueno, te preguntarás ¿Quién es la persona que te brinda estos consejos técnicos?, pues es quien te ha estado enviando contenidos de SEO, SEM, SMO, Web and Graphic Design. Sí, esta es mi foto y mi nombre es Gustavo Guardado Roa y soy tu anfitrión en el recorrido de este sitio en la web, mi idea es asistirte en el proceso de hacer tu página web y del como tener un ingreso con el buen uso del marketing en la internet y las mejores aplicaciones de la SEO y SEM.

gustavo guardado roa
Gustavo Guardado Roa
Consultor Marketing Digital y SEO
Leer mas

 

costa rica properties

SEO Costa Rica MAPA


costa rica properties

Ideas que aumentan tu compromiso con las redes sociales
Ideas que aumentan tu
compromiso con las redes sociales


costa rica properties

¿Cómo construir backlinks?
¿Cómo construir backlinks?


costa rica properties

18 razones por las que NECESITA marketing en redes sociales
18 razones por las que
NECESITA marketing en redes sociales


costa rica properties

Diseño Web - SEO friendly -
Diseño Web
- SEO friendly -


costa rica properties

Los 7 pilares de un SEO sostenible
Los 7 pilares de
un SEO sostenible


costa rica properties

¿Cómo mejorar tu SEO con Google Ads?
¿Cómo mejorar tu SEO
con Google Ads?


costa rica properties

6 mitos SEO más populares

6 mitos SEO más populares


costa rica properties

5 factores poco conocidos pero muy importantes en el SEO
5 factores poco conocidos
pero muy importantes en el SEO


costa rica properties

HTML 5 y el SEO
HTML 5 y el SEO


costa rica properties

Cómo indexan los motores de búsqueda, Introducción al SEO
¿Cómo indexan los
motores de búsqueda?


costa rica properties

¿Cómo hacer SEO y no morir en el intento?
¿Cómo hacer SEO y
no morir en el intento?


costa rica properties

Optimización On Page - Parte 1: Keywords
Optimización On Page
Parte 1: Keywords


costa rica properties

Optimización On Page - Parte 2: Desarrollo del sitio web
Optimización On Page
Parte 2: Desarrollo del sitio web


costa rica properties

6 pasos útiles para conquistar Google Panda
6 pasos útiles para
conquistar Google Panda


costa rica properties

Incluyendo el Sitio a la Web
Incluyendo el Sitio a la Web


costa rica properties

Los 4 pasos básicos del SEO
Los 4 pasos básicos del SEO


costa rica properties

Glosario de términos SEO
Glosario de términos SEO


costa rica properties


 

 

 

 

Información

Contáctenos

Sitios en la Web es una Agencia de Marketing Digital que brinda Soluciones de SEO Costa Rica, Posicionamiento Web, Paginas Web Costa Rica, Redes Sociales Costa Rica. Tels. (506) 8322-2771

newsletter

Recibe consejos gratis sobre las últimas noticias del Marketing en Internet .

admin @ sitios-enlaweb.com
seoanddesign @ gmail.com
sitemap