Implementar la compatibilidad móvil en su sitio web es fundamental para su diseño web. Usar el framework Accelerated Mobile Pages (AMP) no solo ayudará a su empresa a mantenerse al día con las tendencias, sino que también aumentará el tráfico de su sitio web y le permitirá mantenerse a la vanguardia de la competencia.

Introducción

Los dispositivos móviles han superado paulatinamente el uso de ordenadores en todas las actividades relacionadas con la web. El cambio ha sido gradual, pero contundente. De hecho, en 2018, los dispositivos móviles representaban más del 50 % del uso global, superando finalmente a los ordenadores en un 45 %.
Esta tendencia fue consistente y lo suficientemente fuerte como para motivar a Google a crear el Proyecto Páginas Móviles Aceleradas (AMP), un esfuerzo de código abierto para ayudar a optimizar los sitios web para la navegación móvil.

Las AMP son, en esencia, páginas que utilizan un framework muy específico basado en HTML existente para agilizar el intercambio de información con los navegadores, creando una experiencia de usuario fluida, más rápida y eficiente. En otras palabras, permiten que la velocidad de carga de las páginas sea prácticamente instantánea.

Desarrollado por una gran comunidad de profesionales y respaldado por Google, el framework AMP funciona perfectamente con todos los navegadores y se integra perfectamente con los sistemas de gestión de contenido (CMS) más utilizados, como WordPress y Drupal, lo que lo convierte en una alternativa viable para las empresas que buscan adaptar sus sitios web a estos tiempos mobile-friendly.

Dada la gran cantidad de usuarios de teléfonos inteligentes, adoptar AMP para su sitio web mejorará drásticamente los resultados en términos de tráfico y retención de visitantes.

Las páginas móviles aceleradas se centran en la velocidad. Todo el proyecto se basó en la idea de que los usuarios móviles esperan resultados más rápidos, por lo que las páginas optimizadas para smartphones deberían cargar a velocidades óptimas. Por supuesto, esto implica que parte de la programación backend más compleja tuvo que simplificarse pragmáticamente para promover la eficiencia.

1. Entonces, ¿cómo hacen las AMP que las páginas se carguen más rápido?

En primer lugar, el contenido nunca deja de renderizarse. Verás, las páginas normales siguen un orden de carga especificado por el código subyacente que el navegador sigue al pie de la letra, renderizando cada parte por turno. Esto significa que, hasta que se cumplan ciertos criterios de carga, el siguiente contenido de la página no se cargará. Un script de terceros (como un anuncio) podría, por ejemplo, tardar más en cargarse, bloqueando todo el proceso de renderizado. Como puedes imaginar, esto ralentiza el proceso.

El framework AMP resuelve este problema cargando todos sus componentes simultáneamente, sin permitir scripts que puedan interferir con la regla de oro del renderizado paralelo. En esencia, todas las funciones interactivas de la página serán gestionadas por elementos AMP personalizados, diseñados para no interferir con el rendimiento.

Esto no significa que tus páginas no puedan usar Javascript, por supuesto. Hay maneras de crear contenido dinámico e interactivo en AMP, siempre y cuando se gestione con precaución.

Diseño independiente de los recursos. Normalmente, los navegadores necesitan cargar todos los elementos de la página para saber realmente cómo se verá. Esto se debe a que el diseño incluye diversas imágenes, elementos multimedia y scripts que deben cargarse antes de que se pueda conocer su tamaño e incluso su efecto en la página. En AMP, todo esto se gestiona mediante HTML, por lo que incluso antes de que se cargue ninguno de estos elementos, el navegador sabe cómo será el diseño, ya que el tamaño ya está configurado y predeterminado en el código subyacente. Esto se denomina "diseño estático" y permite que las páginas se carguen todas a la vez, sin esperar otros recursos.

CSS en línea, limitado por tamaño. Las AMP solo permiten una hoja de estilo. Al limitar el número de CSS, reducen las solicitudes HTTP a una sola. Además, el tamaño del CSS está limitado a 50 kilobytes, lo cual es suficiente para cierto nivel de diseño, a la vez que obliga al desarrollador a usar una codificación limpia y eficiente.

Optimización de fuentes. Los sitios web tradicionales esperan a que todo esté cargado antes de descargar las fuentes de gran tamaño que suelen usarse en las páginas. Dado que AMP limita el uso de CSS y scripts externos, el sistema no requiere solicitudes HTTP hasta que se haya descargado la fuente.

Recálculos mínimos de estilo y diseño. Esto se debe a que los scripts dinámicos en sitios web normales pueden afectar el diseño de la página, cambiándolo según las interacciones del usuario, lo que obliga al navegador a recalcular la apariencia del contenido. Las limitaciones impuestas por el framework AMP reducen la necesidad de dichos cálculos.

Aceleración de imágenes por CPU vs. GPU. Cuando una CPU renderiza una página, utiliza capas para las imágenes y luego envía el contenido multimedia a la GPU (tarjeta gráfica) para su posterior procesamiento. AMP simplemente permite que la GPU procese las imágenes directamente, lo que resulta en tiempos de carga mucho más rápidos.

Priorización de la carga de recursos. El framework AMP prioriza los recursos que probablemente verá el usuario. Esto incluye todo lo que se encuentra en la parte superior de la página, pero también los recursos que se prevé que sean importantes, y que pueden precargarse antes de la carga gracias al diseño estático. En esencia, la información está disponible y lista para usar, pero solo se muestra cuando el usuario realmente la necesita.

Como ya se mencionó, las AMP se centran en la velocidad. Esto significa que otros aspectos de la página quedan relegados al rendimiento. Es posible que deba ajustar su diseño web ideal, sacrificando algunos detalles para aprovechar al máximo las mejoras de velocidad que ofrece AMP. Si no desea cambiar este diseño, evalúe cuidadosamente sus opciones y decida si sus visitantes móviles prefieren una página con todas las funciones que ha imaginado o una que cargue casi al instante. Recuerde que, en la era móvil, una gratificación más rápida puede ser un activo más valioso en términos de experiencia de usuario.

2. Menor tasa de rebote

Una investigación reciente de Google descubrió que los usuarios de dispositivos móviles no solo esperan tiempos de carga rápidos, sino que sus expectativas también juegan un papel vital en su decisión de quedarse.
Su estudio reveló que los tiempos de carga de hasta tres segundos tienen una tasa de rebote superior al 30 %. A los cinco segundos, la tasa de rebote aumenta al 90 %. A los seis segundos, la tasa supera el 100 %.

Esto significa que, para las páginas móviles, la optimización es crucial para sobrevivir y mantenerse a la vanguardia de la competencia. Según esta lógica, y dada la cuota de mercado de la navegación móvil, contar con sitios web optimizados para móviles determinará el éxito o el fracaso de un negocio. Al lograr tiempos de carga casi instantáneos, las páginas móviles aceleradas pueden ser el factor diferenciador de una empresa.

3. Mayor rendimiento y flexibilidad

AMP no es el único framework disponible diseñado para mejorar el rendimiento de sitios web móviles. Sin embargo, es el más flexible a la hora de proporcionar acceso a una hoja de estilo simplificada, y el que ofrece los mejores resultados de velocidad precisamente porque se basa en la idea de que los usuarios móviles quieren su contenido de inmediato.

Si bien esto de ninguna manera significa que se deban descartar otras alternativas, como el diseño web responsivo o las aplicaciones web progresivas, vale la pena afirmar la importancia de prestar la debida atención a esta opción tan viable.

4. Optimización de motores de búsqueda móviles (AMP SEO)

El rendimiento y la velocidad son factores muy importantes en términos de retención y conversión de visitantes, sin duda, pero para atraer tráfico a su sitio web necesita posicionarse en los motores de búsqueda.

Como se mencionó, el proyecto AMP cuenta con el respaldo de Google debido a la creciente tendencia de la navegación móvil, lo que significa que le otorgan gran importancia. De hecho, en 2018, el gigante de los motores de búsqueda lanzó la indexación móvil, que asigna posiciones según la compatibilidad de las páginas con dispositivos móviles.
Esto significa que las mejores prácticas habituales para un SEO eficaz como parte de tu estrategia de marketing digital ya no son suficientes. Adaptar tu sitio web a dispositivos móviles y optimizarlo con la plataforma de Google aumenta las posibilidades de que tu negocio aparezca en los primeros resultados de búsqueda.

Las páginas AMP con datos estructurados pueden aparecer en el carrusel de Noticias Destacadas, el carrusel de resultados enriquecidos, las historias visuales y los resultados enriquecidos de la búsqueda móvil. Estos resultados pueden incluir imágenes, logotipos de la página y otras características interesantes.

AMP: Sí o No

Las AMP tienen sus inconvenientes, por supuesto. Como ya se mencionó, probablemente no podrás replicar completamente tu diseño web habitual si es demasiado complejo y está repleto de elementos dinámicos. Esto se puede solucionar con una programación inteligente, pero requerirá creatividad y paciencia.

El marco tampoco permite de forma nativa el seguimiento de Google Analytics debido a la gran dependencia de la información almacenada en caché, pero esto también se puede solucionar con soluciones bastante simples y fácilmente disponibles.

Si bien estos pueden ser puntos de discordia contra el uso de AMP, la verdad simple es que los usuarios ahora están más inclinados a favorecer la velocidad por sobre todo lo demás, por lo que en el acto de equilibrar las cosas, su empresa puede muy bien elegir el pragmatismo por sobre la estética.