Móbil First con AMP, Accelerated Mobile Pages

Ya llegamos en la era “Mobile First“. Es reconocido, y vale para Latinoamérica, que se consultan más páginas desde el móvil que desde otro aparato.

Diseñadores web, UX, UI, hay que adaptar nuestra manera de trabajar y de pensar, porque las preocupaciones técnicas que fijaban limites a nuestras propuestas ahora son duplicadas por 2 o 3 o 4 al trabajar productos optimizados en prioridad para la tecnología móvil.

desarrollo para móbil first con AMP en jam graphic digital

Y concretamente que hacer?

Básicamente el contenido tiene que cargarse de manera super rápida, aún a la primerísima visita del usuario (el 4G tiene sus limitaciones,…).

Unas reglas que seguramente conoces es dar prioridad a texto y olvidar imágenes pesadas (todo el reto de retina), omitir publicidades o cualquier tipo de popups como una suscripción a newsletter, muy poco javascript, privilegiar herramientas nativas al sistema operativo, formularios pre informados,..

Ok pero eso lo hacía antes, ¿qué puedo hacer yo diseñador digital para aumentar la rapidez de carga de contenido?

Hay te va: a eso sirve el web progresivo AMP — Páginas móvil aceleradas (Progressive Web AMPs Accelerated Mobile Pages)
El concepto de esa metodología se resume en : la carga el DOM de la página antes de cargar su contenido. En práctica, el html detalla precisamente el contenido que va a recibir, lo que permite omitir un montón de cálculos y la carga inútil de javascript o css extra a lo que la página necesita, así cargar el primer fold de la página de manera instantánea.
Google explica su implementación de manera completa en su página amp project, aquí enumeró de manera sucia que nos toca hacer a nosotros diseñadores, integradores:

  • Cargar javascript de manera asincrónica
  • Escribir estilos inline. Los estilos tienen que ser menor a 50 kb.
  • Optimizar las fuentes
  • Minimizar el recálculo de los estilos y del layout al escribir directamente en el html el tamaño de los elementos imágenes, iframes and ads.
  • Avisar cuando ya un iframe dentro del layout con el use de
    async custom-element="amp-iframe"

    ¿Cuando tengo que usar AMP?

Como casi todas las metodologías en tecnología web, no hay reglas definitivas, eso porque cada producto tiene su especificidad.
Entonces la decisión de usar AMP o PWA (Progressive Web Apps), o los dos dependerá del producto y eso se hablará por supuesto con los desarrolladores.