AMP 'Up The AMP Framework

Por Konstantin Sokhan, Director de Diseño y David Tapp, Socio Cliente, MetaLab

TL; DR - Viajamos al mundo de AMP y aprendimos algunas cosas

Nos asociamos con Google para centrarnos en el Proyecto AMP y recibimos un resumen de los sueños: crea todo lo que tu corazón desee, siempre que ayude a superar los límites de lo que es posible en la base de códigos y la biblioteca de componentes de AMP. A medida que compartimos lo que construimos y aprendimos en el camino, también daremos nuestra opinión sobre la importancia de AMP, para quién es y hacia dónde va.

¿Qué es el AMP?

AMP es un marco de código abierto para crear páginas web eficientes y de alto rendimiento. Actualmente se usa principalmente para contenido editorial en dispositivos móviles, pero está creciendo más allá de esto para un uso más amplio en diferentes mercados (y tamaños de pantalla).

Viendo ambos lados

Antes de continuar con nuestra propia experiencia, nos gustaría reconocer que somos conscientes de las críticas y que no vamos a pretender que AMP no viene con ninguna; lo hace. Simplemente tomamos este proyecto como una oportunidad para trazar nuestro propio camino y hacer nuestras propias impresiones. Según nuestra experiencia, hay algunos conceptos erróneos que nos gustaría ayudar a aclarar.

AMP permite a los autores del sitio alojar una versión estática optimizada para dispositivos móviles de cualquiera de sus páginas del sitio que las plataformas de distribución como el caché de Google y sirven a los usuarios. Gran parte de las críticas de AMP están dirigidas al enfoque de Google para almacenar en caché las páginas de AMP en servicio del dominio google.com. Lo que vale la pena aclarar es que el caché de la página AMP y el marco de optimización móvil AMP HTML son productos separados. Una página creada con AMP HTML se puede alojar de forma privada en cualquier servidor, puede aprovechar todas las funciones del marco sin que Google aloje su contenido.

No dejes que el nombre te engañe

AMP significa "Páginas móviles aceleradas". En los términos más simples, bloquea la mayoría de los elementos que hacen que la web se cargue más lentamente en dispositivos móviles, como grandes cantidades de JavaScript, scripts de seguimiento de terceros y CSS hinchado. Permite que el contenido se cargue casi al instante. AMP fue diseñado para páginas en caché, pero ahora se está convirtiendo en un conjunto de herramientas más amplio para arreglar la web móvil (como la mayoría de los usuarios son móviles hoy en día, algunas cargas del sitio aún pueden tomar minutos). Aunque la M significa Mobile, AMP puede ayudar absolutamente a mejorar las velocidades de carga en cualquier dispositivo o tipo de navegador.

La breve

En julio, el equipo del Proyecto AMP vino a nosotros para ampliar los límites de lo que es posible en el marco, mostrar sus capacidades y ayudar a los creadores de contenido a darse cuenta de cómo podrían usarlo mejor para dar vida a la web. Básicamente, se nos otorgó un reinado libre para usar todas las herramientas proporcionadas por AMP para combinarlas e implementarlas como creíamos conveniente con el objetivo de crear una experiencia completamente nueva que aún no se había construido con el marco.

Lo que construimos y por qué

Si bien todavía teníamos que trabajar dentro de pautas estrictas para garantizar que el código fuera AMP válido, nuestro objetivo era encontrar los conceptos más locos posibles dentro de esos límites definidos.

Después de una lluvia de ideas, llegamos a la idea de que las galerías de arte y los museos en línea suelen ser divertidos, abstractos y no se rigen por las reglas cuando se trata de seguir diseños web convencionales en cuadrícula. Con esa idea en mente, creamos una galería de arte falso como base de pruebas para redefinir lo que era posible en AMP. Construimos un sitio que utilizó lo mejor de la iniciativa y se basó en sus cimientos. Nuestros equipos confiaron en el poder de AMP para garantizar que el sitio fuera increíblemente eficiente, al tiempo que introducían nuevas características y componentes en el marco, incluidas experiencias de paralaje personalizadas, estados flotantes y más. Incluso nos divertimos un poco con la posibilidad de una versión VR inmersiva hecha en AMP para su consideración. Pruebe nuestra prueba de concepto en su teléfono aquí.

Diseño para el sitio AMP de la galería de arte

Luego, pensamos en las experiencias más utilizadas en la web que podrían beneficiarse de las capacidades de AMP. Terminamos explorando lo que era posible en una aplicación de reserva de viajes, permitiendo a los usuarios buscar destinos, filtrar por actividades y encontrar cosas dinámicamente; todo mientras se mantiene la velocidad y el rendimiento por los que comúnmente se conoce a AMP. Estamos encantados con los detalles de este, deleitando el marco AMP tanto como pudimos con microanimaciones y éxitos de personalidad.

Diseño para el sitio AMP de reservas de viajes

¿Para quién es AMP?

Hoy en día, AMP está dirigido a personas en movimiento que tienen mucho contenido de estilo editorial (noticias y blogs en sus teléfonos) y comercio electrónico. Donde imaginamos que se llevará a cabo una fuerte adopción es con sitios que se esfuerzan por ser más allá del rendimiento o tener una amplia gama de audiencias internacionales. Actualmente, la página web móvil promedio en una conexión 3G tarda aproximadamente 19 segundos en cargarse y casi la mitad del mundo todavía se está ejecutando; obviamente, esto debe mejorarse y AMP puede ayudar. A medida que la web continúa siendo predominantemente móvil, crear eficiencias aquí es lógico y esencial. AMP puede proporcionar potencialmente un plan para mejorar el acceso a la información en los países en desarrollo.

¿Estamos viviendo en el futuro?

¡No del todo, pero progresando a diario! Los sitios de AMP que se encuentran en línea hoy en día siguen siendo principalmente medios, noticias y contenido editorial (por ahora). Los beneficios son obvios, ya que el hecho de estar basado en AMP proporciona un gran rendimiento y un impulso de descubrimiento. ¿Es AMP y sus aspiraciones el futuro de toda la web? Tal vez. Tal vez no. Una cosa es segura, los aprendizajes y las mejores prácticas que el marco está ayudando a establecer definitivamente están aquí para quedarse. AMP también se está construyendo en la cima de lo último y lo mejor de la web en tiempo real con el despliegue de sus características. Su comunidad de desarrollo se esfuerza constantemente por mantenerse al día con las nuevas tendencias; incorporando proactivamente la próxima funcionalidad de la web y ofreciéndola hoy.

Lecciones de desarrollo basadas en nuestros aprendizajes de AMP

En lo que respecta al desarrollo dentro de AMP, aprendimos algunas cosas en el camino que pensamos que sería valioso compartir. Perspectivas notables a continuación:

  1. AMP prohíbe JavaScript personalizado fuera de un iframe, lo que le obliga a confiar en su biblioteca de código optimizado. Esto se hace para garantizar que ningún código mal optimizado o nefasto tenga la oportunidad de obstaculizar la experiencia del usuario. Notamos que muchos sitios, por lo demás bien construidos, pueden volverse lentos por la inclusión de megabytes de scripts de publicidad y seguimiento. La importancia de la optimización y la verificación cuidadosa de cualquier código JavaScript incluido en su sitio es una conclusión muy importante de AMP.
  2. AMP prioriza el contenido que es visible para el usuario. Sabe qué contenido está debajo del pliegue y difiere su carga o representación hasta que sea necesario. Los visitantes de las páginas de AMP nunca tendrán que esperar ya que todas las imágenes y anuncios de carga bloquean su acceso a la página. Además, si un visitante nunca decide desplazarse hacia abajo, ninguno de sus datos móviles se desperdicia cargando contenido que nunca se vería.
  3. AMP ha resuelto el "jank de carga". En una página AMP, cada elemento debe tener una altura conocida determinista, ya sea un anuncio, una imagen o video, o un párrafo de texto. Nunca experimentará cambios de contenido en su pantalla a medida que se cargan los elementos anteriores.
  4. Rendimiento del anuncio: AMP establece el nuevo estándar para la integración de anuncios en los sitios. Los anuncios deben comportarse correctamente en la página y deben cumplir con una experiencia de usuario óptima. Adiós a las adquisiciones de pantalla completa y otro contenido desagradable que no desea en la página. AMP exige que los anuncios se comporten como buenos ciudadanos.

Para concluir

Esta oportunidad fue desafiante, divertida y proporcionó una nueva perspectiva. Se nos dio mucha flexibilidad, mientras que al mismo tiempo tuvimos que encontrar formas poco convencionales de cumplir con las condiciones establecidas dentro del marco de AMP. Aprendimos mucho más de lo que pensábamos que sabíamos sobre AMP y descubrimos algunos conceptos erróneos anteriores. Al trabajar dentro del marco, obtuvimos una comprensión aún más sólida de hacia dónde se dirige la web y cómo puede aprender de AMP. Si está interesado en construir su próximo sitio dentro de él, asegúrese de consultar nuestras plantillas, que son completamente de código abierto, de uso gratuito y descargables en ampstart.com.