Los sitios web casi están vetados de Google si no están adaptados para móviles. Aprende cómo hacerlo.
Ahora hasta para estar ubicado dentro de los primeros lugares de una búsqueda en Google (o hacer SEO, como mejor quieras llamarlo) es necesario que tengas un sitio web adaptado para móviles. Hace algunos años entrar a una páginas web desde un navegador móvil era una experiencia frustrante. Ahora casi todo la web funciona alrededor de la experiencia móvil.
Google castiga a quienes no tengan su web adaptada para móviles casi desapareciéndolos de sus búsquedas. Dicho esto, en este post vamos a ver algunos principios fundamentales del diseño mobile-first (móvil primero), y cómo adaptar tu página para que tus usuarios puedan navegar en tu web, sin importar el dispositivo.
Esto parece una obviedad, pero no lo es tanto. Ten en cuenta:
Los elementos visuales como las fotos, las ilustraciones, los iconos y los vídeos son los que más ancho de banda consumen en las páginas web. Aunque no hay un tamaño de página web 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, lo que siempre es bueno para web móvil.
Esta es una opción que le dice al navegador que cargue (renderice) el contenido que sólo está dentro de la ventana gráfica del usuario. Por lo tanto, si hay fotos o vídeos de gran tamaño añadidos a una parte de la página, esos archivos sólo se mostrarán cuando la pantalla del navegador llegue a esa parte del sitio.
Y si te preocupan los posibles problemas de SEO, no te preocupes. Google ha confirmado que sí renderiza las páginas que utilizan carga lenta, y lo ve como una señal más de mejora del rendimiento. Hay muchos plugins disponibles en la web que funcionan para la carga lente de tu página en móviles.
La caché web se basa en el concepto de copiar una versión de una página, que puede ser presentada al usuario en cualquier momento. Las páginas se almacenan en la caché en la primera visita a una página 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 necesarios. Dependiendo de tu solución de almacenamiento en caché, puedes configurar intervalos personalizados.
Algunos de los nombres más populares en el almacenamiento en caché web son Varnish, Squid y Memcached. Pero ten por seguro que hay muchas otras soluciones en el mercado, especialmente si eres usuario de WordPress.
El proyecto AMP (páginas móviles aceleradas) de Google es la optimización para móviles con esteroides. Básicamente, AMP reduce las páginas a lo esencial para proporcionar una experiencia de carga súper rápida, pero también para dar prioridad a la legibilidad del contenido.
AMP es una página HTML desnuda con ciertas limitaciones para el tipo de contenido que se puede mostrar. Esto da como resultado tiempos de carga mucho más rápidos, y un mejor rendimiento general debido a la limitación para ejecutar scripts.
Hoy en día, no hay excusa para no tener un entorno de prueba separado para tu web. La mayoría de las plataformas SaaS en la nube ofrecen entornos de ensayo por defecto, así que comprueba con tu proveedor si tienes acceso a uno.
¿Qué es un entorno de ensayo? Bueno la forma más rápida de explicarlo es mirando tu sitio web actual 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, 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, por así decirlo. Y en este entorno de puesta en escena, eres capaz de hacer cambios o añadir nuevas características sin romper tu sitio en vivo.
Probar no es tan aterrador como parece. Pero seguro que sí lo es cuando borras accidentalmente toda tu base de datos en un servidor de producción.