¿Qué es AMP? La guía completa de páginas móviles aceleradas
Publicado: 2018-08-22SECCIÓN 1: ¿Qué son las páginas móviles aceleradas?
La mentalidad de los dispositivos móviles primero llegó para quedarse: la afirmación es cierta tanto desde el punto de vista empresarial como del consumidor.
Decir que los usuarios consultan sus móviles antes de realizar una compra sería una gran subestimación. El uso de Internet móvil ha superado el uso de dispositivos móviles de escritorio en todo el mundo. Incluso países como India, México e Indonesia tienen más de 4 veces más uso de teléfonos inteligentes que de computadoras de escritorio:
Hay 30 mil millones de momentos móviles (el momento en que un cliente consulta su teléfono y espera una respuesta inmediata) todos los días solo en los EE. UU. Esto significa que todos los días su marca tiene 30 mil millones de oportunidades móviles para ofrecer algo a los usuarios que desean.
Y aún así, la inversión en publicidad móvil está por detrás del consumo de medios móviles:
Hay una razón por la que los usuarios pasan más tiempo navegando en el móvil en lugar de comprar: los usuarios anhelan más la gratificación instantánea cuando están en sus dispositivos móviles.
Responda esta pregunta: ¿cuánto tiempo espera a que se cargue una página web móvil?
Según los datos recopilados por Google y SOASTA, el 40% de los consumidores abandonan una página que tarda más de tres segundos en cargarse.
Tres segundos.
Ese es todo el tiempo que tiene para mantener la atención de un usuario al que le gustó su anuncio y lo hizo clic. Y si su página web no se carga en el tiempo antes mencionado, creó el anuncio, independientemente de lo atractivo que fuera, en vano. La mala noticia es el hecho de que, según los datos, la mayoría de los sitios móviles minoristas tardan alrededor de 6,9 segundos en cargarse, más del doble del tiempo que espera el 40% de los usuarios antes de abandonar la página.
Cómo afecta la velocidad de la página web a la tasa de rebote
La velocidad es un factor importante a la hora de medir la tasa de rebote de páginas web móviles. Antes de profundizar más en esto, es importante explicar que la velocidad se considera principalmente en dos facetas para las tasas de rebote de sitios móviles, es decir, el tiempo de preparación de DOM y el tiempo de carga de la página completa:
1. Tiempo de preparación de DOM: el tiempo de preparación de DOM es la cantidad de tiempo que tarda el navegador en recibir y analizar el código HTML de la página; es el mayor predictor de la tasa de rebote. Aunque es posible que el usuario no sepa cuándo se recibe y analiza el código HTML, el código debe cargarse antes de que se pueda cargar cualquier elemento de la página, como imágenes. Si el código HTML tarda demasiado, el tiempo de carga del sitio web es lento. Para acelerar el tiempo de preparación del DOM de su página web móvil, es mejor evitar el uso de JavaScript que bloquea y evita que un navegador analice el código HTML. Los elementos de la página que usan JavaScript incluyen anuncios de terceros y widgets sociales que deben obtenerse de un servidor externo antes de que se pueda cargar la página.
2. Tiempo de carga de la página completa : el tiempo de carga de la página completa incluye el tiempo que tardan las imágenes, fuentes, códigos CSS, etc. en cargarse en una página web. Una carga de página completa más rápida conduce a una menor tasa de rebote:
Para asegurarse de que su página web tenga un tiempo de carga de página completa más rápido, debe optimizar las imágenes, las fuentes y evitar los archivos de terceros que tienen el potencial de ralentizar el tiempo de carga.
El tiempo de carga de la página es una de las razones más importantes del rebote de la página, lo que es peor es que los usuarios no solo abandonarán la página, sino que, según las investigaciones, el 79% de los usuarios no volverán una vez que hayan tenido una experiencia lenta en una página web.
Considere estas sorprendentes revelaciones sobre la velocidad de carga de la página:
- El sitio móvil promedio tarda 19 segundos en cargarse a través de una conexión 3G, y el 77% de los sitios móviles tardan más de 10 segundos en cargarse.
- Google descubrió que las conversiones disminuyen en un 20% por cada segundo adicional que tarda una página web en cargarse. En comparación, los sitios que se cargaron en 5 segundos obtuvieron 2 veces más ingresos por publicidad móvil que los sitios que se cargaron en 19 segundos.
- Es poco probable que el 61% de los usuarios regresen a un sitio móvil al que tuvieron problemas para acceder.
¿Qué significa esto?
Si la carga de la página móvil no es instantánea, no lo suficientemente rápida para el usuario, rebotarán y probablemente no volverán.
Para asegurarse de que esto no suceda en su página web móvil, es importante que AMPLifique sus sitios web móviles y páginas de destino posteriores al clic.
¿Qué es AMP?
Google lanzó el proyecto de código abierto Accelerated Mobile Pages para garantizar que las páginas web móviles funcionen a una velocidad óptima.
El proyecto AMP tiene como objetivo "construir juntos la web del futuro" permitiéndole crear páginas web y anuncios que sean consistentemente rápidos, atractivos y de alto rendimiento en todos los dispositivos y plataformas de distribución.
AMP se creó en colaboración con miles de desarrolladores, editores, sitios web, empresas de distribución y empresas de tecnología. Se han creado más de 1.500 millones de páginas AMP hasta la fecha, y más de 100 proveedores líderes de análisis, tecnología publicitaria y CMS admiten el formato AMP.
Cuando crea páginas para dispositivos móviles en el formato AMP, obtiene:
1. Mayor rendimiento y participación: las páginas creadas en el proyecto de código abierto AMP se cargan casi instantáneamente, brindando a los usuarios una experiencia fluida y más atractiva tanto en sus dispositivos móviles como en sus computadoras de escritorio.
2. Flexibilidad y resultados: las empresas tienen la oportunidad de decidir cómo presentar su contenido y qué proveedores de tecnología utilizar, mientras mantienen y mejoran los KPI.
Es probable que haya hecho clic en una página AMP antes, pero no se dio cuenta. Lo único que puede haber notado es cuán instantáneamente aparece la página después de hacer clic. Las páginas web creadas por AMP tienen un indicador de rayo en el resultado de la búsqueda.
A continuación, le indicamos cómo puede reconocer AMP en los resultados de búsqueda:
Así es como se ve una página AMP en comparación con una página web normal:
La razón por la que las páginas AMP se cargan instantáneamente es porque AMP restringe HTML / CSS y JavaScript, lo que permite una representación más rápida de las páginas web móviles. A diferencia de las páginas móviles normales, Google AMP Cache almacena automáticamente en caché las páginas AMP para agilizar los tiempos de carga en la búsqueda de Google.
Los usuarios tienen ciertas expectativas cuando están en sus dispositivos móviles, quieren experiencias significativas, relevantes y más rápidas para garantizar que se cumplan las expectativas de su público objetivo. AMP es su mejor opción.
Esta guía lo guiará a través de todo lo que necesita saber sobre el proyecto de código abierto AMP. Veremos el procedimiento exacto de cómo funcionan las AMP y qué hace que las páginas se carguen tan rápido.
La guía también incluirá estudios de casos sobre cómo el uso de AMP ayudó a aumentar las conversiones para empresas en diferentes industrias y los beneficios que obtendrá cuando AMPlifica sus páginas. La última sección discutirá qué son las páginas de destino post-clic de Accelerated Mobile y por qué debería crear las páginas para ofrecer a los visitantes una página de destino post-clic más rápida y relevante.
SECCIÓN 2: ¿Cómo funciona AMP?
Google lanzó el marco de código abierto Accelerated Mobile Pages (AMP) en febrero de 2016. El marco se creó porque existía la necesidad de crear experiencias de usuario optimizadas y estrechamente integradas, en lugar de las experiencias móviles torpes y lentas con las que los usuarios se enfrentan a diario. base.
Google inició el proyecto AMP para crear un marco que proporcionaría una ruta exacta para crear experiencias optimizadas de páginas web móviles. El proyecto de código abierto de AMP está bien documentado, es fácil de implementar, es validable y tiene opiniones acerca de poner al usuario primero en el diseño de la página web.
Desde su lanzamiento hace casi dos años, 25 millones de dominios han publicado más de 4 mil millones de páginas AMP:
Dado que su lanzamiento no solo ha aumentado la cantidad de páginas AMP, sino también su velocidad, el tiempo medio que tarda una página AMP en cargarse desde la búsqueda de Google es ahora de menos de medio segundo.
AMP genera un aumento del 10% en el tráfico del sitio web con un aumento del doble del tiempo dedicado a la página. Los sitios web de comercio electrónico que utilizan AMP experimentan un aumento del 20% en las ventas y las conversiones en comparación con las páginas que no son de AMP:
AMP ayuda a las empresas a crear versiones optimizadas, limpias y relevantes de sus páginas web, lo que brinda a los usuarios una experiencia web móvil más rápida.
Chartbeat analizó datos de 360 sitios web que usaron AMP desde junio de 2016 hasta mayo de 2017 para descubrir que un editor típico que usa páginas AMP vio un 16% de todo el tráfico móvil en su contenido AMP.
Las páginas AMP se cargan aproximadamente cuatro veces más rápido que las páginas web estándar; además, los usuarios interactúan un 35% más con las páginas AMP que con las páginas web estándar para dispositivos móviles:
Ahora que sabemos por qué debería usar páginas AMP, echemos un vistazo a cómo funciona AMP, cómo se compara con el diseño web receptivo, los artículos instantáneos de Facebook y las aplicaciones web progresivas.
Los 3 componentes principales de AMP
Las páginas AMP se crean con los siguientes tres componentes principales:
HTML de AMP
El HTML de AMP es esencialmente HTML solo con algunas restricciones para un rendimiento confiable. El archivo HTML de AMP más simple se ve así:
La mayoría de las etiquetas en HTML de AMP son etiquetas HTML normales; sin embargo, algunas etiquetas HTML se reemplazan por etiquetas específicas de AMP. Estas etiquetas personalizadas se denominan componentes HTML de AMP y hacen que los patrones de etiquetas comunes sean fáciles de implementar de manera eficaz. Las páginas AMP son descubiertas por los motores de búsqueda y otras plataformas mediante la etiqueta HTML.
Puede elegir tener una versión que no sea AMP y una versión AMP de su página, o simplemente una versión AMP.
JavaScript de AMP (JS)
La biblioteca AMP JS garantiza la rápida representación de las páginas HTML de AMP. La biblioteca JS implementa todas las mejores prácticas de rendimiento de AMP, como CSS en línea y activación de fuentes, esto administra la carga de recursos y le brinda las etiquetas HTML personalizadas para garantizar una representación rápida de la página.
AMP JS hace que todo, desde los recursos externos, sea asincrónico, de modo que nada en la página pueda bloquear la representación. El JS también utiliza otras técnicas de rendimiento, como el sandboxing de todos los iframes, el cálculo previo del diseño de cada elemento de la página antes de que se carguen los recursos y la desactivación de selectores CSS lentos.
Caché de AMP
La caché de AMP de Google se utiliza para publicar páginas HTML de AMP almacenadas en caché. AMP Cache es una red de entrega de contenido basada en proxy que se utiliza para entregar todos los documentos AMP válidos. La caché recupera las páginas HTML de AMP, las almacena en caché y mejora el rendimiento de la página automáticamente.
Para mantener la máxima eficiencia, AMP Cache carga el documento, los archivos JS y todas las imágenes del mismo origen que utiliza HTTP 2.0.
AMP Cache viene con un sistema de validación incorporado que confirma que se garantiza que una página funciona y que no depende de fuerzas externas que podrían ralentizar la página. El sistema de validación funciona con una serie de afirmaciones que confirman que el marcado de la página cumple con las especificaciones HTML de AMP.
Una versión adicional del sistema de validación está disponible junto con cada página de AMP. Esta versión puede registrar errores de validación directamente en la consola del navegador cuando se representa la página, lo que le permite ver los cambios complejos en su código que pueden tener un impacto en el rendimiento y la experiencia del usuario.
Los tres componentes centrales de AMP funcionan al unísono para hacer posible que las páginas se carguen rápidamente. La siguiente sección destacará las siete técnicas de optimización que se combinan para hacer que las páginas AMP sean tan rápidas.
Todo el JavaScript de AMP se ejecuta de forma asincrónica
JavaScript puede modificar todos los aspectos de la página, tiene el poder de bloquear la construcción del DOM y retrasar la presentación de la página; ambos factores conducen a una carga lenta de la página. Para garantizar que JavaScript no retrase el procesamiento de la página, AMP solo permite JavaScript asincrónico.
Las páginas AMP no incluyen JavaScript escrito por el autor, en su lugar, todas las funciones de la página interactiva se manejan mediante elementos AMP personalizados. Estos elementos AMP personalizados pueden incluir JavaScript, pero están cuidadosamente diseñados para garantizar que no inicien ninguna degradación del rendimiento.
AMP utiliza JavaScript de terceros en iframes, pero no puede bloquear la visualización de la página.
Todos los recursos tienen un tamaño estático
Todos los recursos externos, como imágenes, iframes y anuncios, deben indicar su tamaño HTML para que AMP pueda determinar el tamaño y la posición de cada elemento antes de que se descarguen los recursos de la página. AMP carga el diseño de la página sin esperar a que se descarguen los recursos.
AMP tiene la capacidad de separar el diseño del documento del diseño del tamaño, solo se requiere una única solicitud HTTP para diseñar todo el documento. Debido a que AMP está optimizado para evitar diseños de estilo costosos y nuevos cálculos en el navegador, no hay ningún cambio de diseño cuando se cargan los recursos de la página.
Los mecanismos de extensión no bloquean el renderizado
AMP no permite que los mecanismos de extensión bloqueen la representación de la página, admite extensiones para elementos como cajas de luz e incrustaciones de redes sociales, y aunque requieren solicitudes HTTP adicionales, no bloquean el diseño y la representación de la página.
Si una página usa una secuencia de comandos personalizada, tiene que decirle al sistema AMP que eventualmente tendrá una etiqueta personalizada, AMP luego crea la etiqueta requerida para que la página no se ralentice. Por ejemplo, si la etiqueta amp-iframe le dice a AMP que habrá una etiqueta amp-iframe, AMP crea el cuadro de iframe antes de saber qué incluirá.
Todo el JavaScript de terceros se mantiene fuera de la ruta crítica
JavaScript de terceros utiliza la carga JS síncrona, esto tiende a ralentizar el tiempo de carga. Las páginas AMP permiten JavaScript de terceros, pero solo en iframes de espacio aislado, al hacer esto, la carga de JavaScript no puede bloquear la ejecución de la página principal. Incluso si el JavaScript del iframe en la zona de pruebas activa varios recálculos de estilo, sus pequeños iframes tienen muy poco DOM.
Los recálculos de iframe se ejecutan muy rápido en comparación con el recálculo de estilos y diseño de la página.
CSS debe estar en línea y de tamaño limitado
CSS bloquea la representación, también bloquea toda la carga de la página y tiene la tendencia a causar hinchazón. AMP HTML solo permite estilos en línea, esto elimina 1 o la mayoría de las solicitudes HTTP de la ruta de procesamiento crítica a la mayoría de las páginas web.
La hoja de estilo en línea debe tener un tamaño máximo de 75 kb, aunque es lo suficientemente grande para páginas muy sofisticadas, aún requiere que el autor de la página practique una buena higiene de CSS.
La activación de fuentes es eficiente
La optimización de fuentes web es fundamental para una carga rápida, ya que las fuentes web suelen ser de gran tamaño. En una página típica que incluye algunos scripts de sincronización y un par de hojas de estilo externas, el navegador espera descargar las fuentes hasta que se cargan todos los scripts.
El marco AMP declara cero solicitudes HTTP hasta que todas las fuentes comiencen a descargarse. Esto solo es posible porque todo el JavaScript en AMP tiene el atributo async y solo se permiten hojas en línea, no hay solicitudes HTTP que impidan que el navegador descargue las fuentes.
Se minimizan los nuevos cálculos de estilo
En las páginas AMP, todas las lecturas DOM ocurren antes que todas las escrituras, esto asegura que solo haya un nuevo cálculo de estilos por fotograma, por lo que no hay un efecto negativo en el rendimiento de la representación de la página.
Ejecutar solo animaciones aceleradas por GPU
Para ejecutar optimizaciones rápidas, debe ejecutarlas en GPU. La GPU funciona en capas, sabe cómo realizar algunas cosas en estas capas: las capas se pueden mover y difuminar. Sin embargo, cuando la GPU no puede actualizar el diseño de la página, le asigna esta tarea al navegador y eso no es bueno para el tiempo de carga de la página.
Las reglas para CSS relacionado con la animación aseguran que la animación pueda acelerarse por GPU, esto significa que AMP solo permite la animación y la transición en transformación y opacidad para que el diseño de la página no sea necesario.
Se prioriza la carga de recursos
AMP controla toda la carga de recursos, prioriza la carga de recursos y carga solo lo que se necesita y pre-busca todos los recursos con carga diferida.
Cuando AMP descarga recursos, optimiza las descargas para que los recursos más importantes se descarguen primero. Todas las imágenes y anuncios solo se descargan si es probable que el usuario los vea, si están en la mitad superior de la página o si es probable que el visitante los desplace.
AMP también tiene la capacidad de precargar recursos con carga diferida, estos recursos se cargan lo más tarde posible, pero se precargan lo antes posible. De esta manera, las cosas se cargan muy rápido, pero la CPU solo se usa cuando se muestran los recursos a los usuarios.
Cargar páginas instantáneamente
La nueva API de preconexión de AMP se utiliza en gran medida para garantizar que las solicitudes HTTP sean lo más rápidas posible tan pronto como se realicen. Debido a esto, la página se representa antes de que el usuario indique explícitamente que le gustaría navegar hacia ella, la página puede estar disponible para el momento en que el usuario realmente la ve, lo que hace que la página se cargue instantáneamente.
AMP está optimizado para no utilizar mucho ancho de banda y CPU al pre-renderizar contenido web. Cuando los documentos de AMP se renderizan previamente para su carga instantánea, los recursos de la mitad superior de la página se descargan realmente y los recursos que pueden consumir una gran cantidad de CPU, como los iframes de terceros, no se descargan.
También puede usar el siguiente video para descubrir las '7 formas en que AMP acelera sus páginas':
Ahora que sabemos cómo funciona AMP, veamos cómo se compara AMP con los artículos instantáneos, el diseño web adaptable y las aplicaciones web progresivas de Facebook.
AMP frente a los artículos instantáneos de Facebook
Facebook lanzó Instant Articles en 2015 para ayudar a los editores a ofrecer una experiencia de lectura increíblemente rápida e inmersiva para las personas en Facebook. Los artículos instantáneos de Facebook son:
- 10 veces más rápido que los artículos web móviles estándar
- 20% más de artículos instantáneos se leen en promedio
- El 70% de los lectores tienen menos probabilidades de abandonar un artículo instantáneo.
Instant Articles ayuda a los editores a crear artículos rápidos e interactivos en Facebook. Te brindan las siguientes ventajas:
- Rápido y receptivo: los artículos instantáneos se cargan instantáneamente sin importar en qué conexión o dispositivo esté el usuario. Los artículos son fáciles de usar ya que se transforman para la experiencia de narración móvil.
- Interactivo y atractivo: la experiencia de inmersión de los artículos los hace más interactivos, por lo que los artículos instantáneos se comparten un 30% más a menudo que los artículos web móviles. La ayuda a ampliar el alcance de sus historias en News Feed.
- Monetización fácil y flexible: la monetización es una parte integral de Instant Articles. Para hacer crecer su negocio con los artículos, puede ampliar los anuncios de venta directa y completar el inventario de anuncios disponible con la red de audiencia de Facebook, e incluso crear contenido de marca nativa.
Las páginas AMP y los artículos instantáneos brindan a los usuarios un tiempo de carga rápido, lo que ayuda a reducir la tasa de rebote de la página y a aumentar la participación. De hecho, los artículos instantáneos de Facebook se cargan incluso más rápido que las páginas AMP:
Sin embargo, la tasa de adopción de las páginas AMP es mucho más alta que la de Instant Articles y eso se debe en gran parte a que Facebook prioriza cada vez más los videos sobre los artículos de texto en su News Feed. Esto ha llevado a que varios editores dejen de usar Instant Articles, incluidos New York Times y The Guardian.
Según Parsley, Google ha superado a Facebook como la principal fuente de tráfico externo para los editores. Con Google ahora representa el 42% del tráfico externo de los editores:
Cuando Facebook lanzó Instant Articles en superó a Google como la fuente dominante de tráfico a los sitios web de contenido y medios, sin embargo, con el lanzamiento y el éxito de AMP, Google vuelve a la cabeza.
El éxito del proyecto AMP radica en el hecho de que es una iniciativa de código abierto, no una asociación comercial. En lugar de mantener a los usuarios confinados a una aplicación en particular, como hizo Facebook con Instant Articles, el proyecto AMP tiene como objetivo cambiar la forma en que los editores crean páginas web móviles.
AMP frente al diseño web adaptable (RWD)
La creación de sitios web optimizados para dispositivos móviles ha sido una prioridad para los especialistas en marketing desde que Google lanzó Mobilegeddon a principios de 2015. El diseño web receptivo tenía como objetivo ayudar a crear páginas web que se centraran en la flexibilidad. Una página web receptiva funcionaba en cualquier dispositivo o pantalla, lo que brindaba una experiencia web móvil mejor y más comprometida.
En esencia, AMP y Responsive Web Design utilizan casi los mismos componentes básicos para crear una página móvil, es decir, HTML y JavaScript. Sin embargo, tienen un conjunto de diferencias que los distinguen, como por ejemplo:
1. RWD se centra en la flexibilidad: el diseño web adaptable añade flexibilidad a su sitio web. Puede crear una página que responda automáticamente al tamaño de la pantalla de un visitante, esto le permite a su página el alcance y la capacidad de brindar a los usuarios una buena experiencia móvil en una amplia gama de tamaños de pantalla. El diseño web receptivo no se centra exclusivamente en dispositivos móviles, sino que funciona para todos los dispositivos y todas las experiencias de usuario.
2. AMP se centra en la velocidad: el marco de código abierto de AMP se centra en la velocidad, específicamente la velocidad de la página móvil. AMP ha introducido la representación instantánea en el contenido web móvil. Mediante el uso de hojas de estilo en línea, carga diferida, obtención previa de recursos y otras técnicas de optimización, el marco puede cargar páginas móviles al instante.
3. AMP funciona con una página web, RWD reemplaza a una página web: aunque es posible usar AMP exclusivamente en sus páginas, AMP también se puede agregar a un sitio web que no responde o que responde, sin un rediseño del sitio web. Sin embargo, para que una página web sea receptiva, debe rediseñarla.
4. AMP proporciona una mejor experiencia de usuario: hay dos factores principales que determinan la experiencia del usuario móvil, es decir, que los elementos de la página sean compatibles con dispositivos móviles y la velocidad. Aunque Responsive Web Design funciona bien al escalar los elementos de la página para que coincidan con la pantalla del usuario, falla horriblemente a la velocidad en comparación con las páginas AMP.
5. AMP tiene restricciones de JavaScript: el diseño web adaptable favorece todos los scripts y bibliotecas multimedia de terceros, no se puede decir lo mismo de las páginas AMP. Para que las páginas se carguen rápidamente, el marco AMP tiene funcionalidades de JavaScript y CSS muy limitadas.
AMP funciona bien para páginas estáticas: páginas que no cuentan con mucho contenido dinámico, mientras que RWD se puede usar para cualquier tipo de página. Sin embargo, las páginas web receptivas tardan demasiado en cargarse, lo que hace que los visitantes reboten, probablemente para no volver nunca más. Si busca brindar a los usuarios una experiencia de respuesta móvil rápida, debe considerar el uso de páginas AMP.
AMP frente a aplicaciones web progresivas (PWA)
Progressive Web Apps es una aplicación web móvil entregada a través de la web, se comporta como una aplicación nativa, la principal diferencia entre PWA y las aplicaciones nativas es que PWA no necesita descargarse de Google o App Store.
Las aplicaciones web progresivas operan dentro del navegador web, esto hace que se cargue instantáneamente, incluso si su conexión a Internet no es muy fuerte. PWA utiliza el almacenamiento en caché previo para garantizar que la aplicación se mantenga actualizada, de modo que el usuario pueda ver solo la última versión.
La necesidad de Progressive Web Apps surgió del hecho de que los 1000 principales sitios web móviles llegan a 4 veces más personas que las 1000 principales aplicaciones nativas. Sin embargo, esos sitios web atraen a los usuarios durante 20 veces menos minutos, en promedio, que las aplicaciones móviles.
Lo que esencialmente significa que los sitios web móviles son aptos para atraer visitantes pero no para atraerlos.
Las PWA están diseñadas para verse, sentirse y funcionar como lo hacen las aplicaciones móviles nativas. Los usuarios los encuentran en un navegador como lo harían con cualquier sitio web móvil. Después de interactuar con ese sitio, se le solicita al usuario que instale la aplicación web en su dispositivo. Si eligen instalar, la aplicación se descarga en su dispositivo de la misma forma que lo haría una aplicación nativa.
PWA son:
- Fiables: se cargan instantáneamente incluso en condiciones de red débiles.
- Rápido: responda rápidamente a las interacciones del usuario con animaciones fluidas y sin desplazamientos inusuales.
- Atractivo: se sienten como una aplicación nativa en el dispositivo, proporcionando una experiencia de usuario inmersiva.
Cuando una aplicación web móvil cumple con los requisitos necesarios descritos por Google, la aplicación web móvil se puede ofrecer como descargable a los usuarios.
Estas son las diferencias clave entre AMP y PWA:
Puede optar por utilizar AMP únicamente para crear una experiencia rápida pero sencilla. Puede confiar en una aplicación web progresiva para crear una experiencia de usuario dinámica pero más lenta. O bien, puede comenzar rápido y mantenerse rápido incorporando ambos en su diseño web.
Hoy en día, los usos de AMP junto con las aplicaciones web progresivas son cada vez más frecuentes, y los desarrolladores aprovechan ambos de tres formas.
1. AMP como aplicación web progresiva
Si su contenido es principalmente estático y puede conformarse con la funcionalidad limitada de AMP, esta opción le permite crear experiencias ultrarrápidas como una aplicación web progresiva. AMP, por ejemplo, se construye así: una aplicación web progresiva completamente cargada con AMP. Tiene un trabajador de servicio, que permite el acceso sin conexión, así como un manifiesto, que muestra el banner "Agregar a la pantalla de inicio".
2. AMP a una aplicación web progresiva
Otra forma de usar AMP y una aplicación web progresiva en conjunto es pensar en su página AMP como un enlace a su sitio web. Atrapa al usuario con una carga instantánea y luego lo arrastra hacia su aplicación web progresiva. Esto le permite combinar las páginas AMP de carga rápida con una PWA más dinámica que la primera opción.
3. AMP en una aplicación web progresiva
Como fue el caso de AMP frente a PWA, no tiene por qué ser todo o nada. No es necesario que cree todas sus páginas con AMP; tampoco es necesario separar AMP y PWA como gancho y varilla. Ahora, en realidad, puede AMP solo una pequeña subsección de una sola página, lo que reduce su tamaño y su tiempo de carga sin la compensación completa de la funcionalidad dinámica.
Esto implica el uso de otra forma de AMP llamada "Shadow AMP", que permite que AMP se anide dentro de un área de una página web. El resultado es AMP dentro del caparazón de una aplicación web progresiva.
Washington Post muestra un ejemplo ideal de cómo PWA y AMP trabajan juntos para brindar un mejor compromiso y tiempos de carga más rápidos. Cuando Washington Post inicialmente hizo que su sitio web respondiera, su velocidad era de 3500 ms. Cuando adoptaron AMP, el tiempo de carga de la página se redujo a 1200 ms, luego se redujo aún más a 400 ms con la ayuda de la tecnología AMP CDN.
Después de adoptar PWA para reducir la carga del sitio web, los usuarios pudieron disfrutar de velocidades de carga de páginas ultrarrápidas sin interrupciones y una mejor experiencia de usuario.
El proyecto Accelerated Mobile Pages le permite crear páginas móviles que se cargan instantáneamente, lo que ayuda a los visitantes a interactuar mejor con la página en lugar de rebotar. Las técnicas de optimización involucradas en la creación de páginas AMP no solo aceleran el tiempo de carga de la página, sino que también brindan a los visitantes una buena experiencia de usuario.
La siguiente sección se centrará en los beneficios exactos que obtiene cuando utiliza el marco AMP en sus páginas.
SECCIÓN 3: Beneficios y restricciones de AMP
AMP garantiza que las páginas web se carguen más rápido, lo que ayuda con la experiencia del usuario y mantiene a los visitantes más tiempo en la página. AMP utiliza AMP HTML que ayuda a que las páginas móviles se carguen más rápido. De hecho, según Gary Illayes de Google, el tiempo medio de carga de las páginas AMP es de 1 segundo, que es 4 veces más rápido que la página HTML estándar promedio.
Ya hemos discutido el vínculo entre la tasa de rebote de la página y la velocidad de la página, y hemos visto una descripción detallada de cómo funciona AMP y cómo se compara con PWA, RWD y los artículos instantáneos de Facebook.
Esta sección de la guía se centrará en los beneficios y las restricciones de AMP, lo que lo ayudará a obtener una cuenta detallada de lo que está en la tienda cuando cree páginas de AMP.
Beneficios de AMP
Cuando su página web móvil se carga más rápido, automáticamente mejora la experiencia del usuario y sus KPI. Gracias a la carga instantánea de páginas AMP, puede ofrecer una experiencia web rápida y constante a sus usuarios en todos los dispositivos y plataformas, como Google, LinkedIn y Bing.
AMP ofrece los siguientes beneficios para sus páginas móviles.
Atrae al público
El tiempo medio de carga de las páginas AMP es inferior a un segundo, lo que significa que cuando un usuario llega a una página AMP, obtiene lo que buscaba al instante. Debido a que la página se carga instantáneamente, interactúan con la página por más tiempo y están más abiertos a conocer su oferta, lo que hace que sea más probable que realicen la acción que deseaba que realizaran.
Maximiza los ingresos
Cada segundo adicional que su página tarda en cargar sus conversiones cae en un 12%. Esto significa que si desea atraer al público y aumentar su ROI, debe asegurarse de que su página móvil cumpla con las expectativas de velocidad de sus visitantes.
El marco AMP le permite brindar a los usuarios una experiencia más rápida en cualquier lugar, incluidos anuncios, páginas de destino posteriores al clic y sitios web.
Mantenga la flexibilidad y el control
Cuando adopta el formato AMP, tiene la capacidad de conservar su propia marca mientras aprovecha los componentes web optimizados de AMP. Puede usar CSS para personalizar el estilo de su página web y usar contenido dinámico para obtener datos donde sea necesario.
También puede utilizar las pruebas A / B para probar y crear la mejor experiencia de usuario móvil posible para sus clientes.
Reduzca la complejidad en sus operaciones
El proceso de creación de páginas AMP es bastante simple y directo. Tiene la capacidad de convertir todo su archivo, especialmente si usa CMS, incluidos Drupal y WordPress.
No es necesario tener ningún conjunto de habilidades especiales para optimizar el código de cada página AMP, el formato AMP es totalmente portátil y las páginas AMP son consistentemente rápidas independientemente de cómo acceda el usuario a ellas.
Maximice su ROI
Una vez creadas, las páginas AMP se pueden distribuir en una amplia variedad de plataformas de distribución simultáneamente. Esto le permite publicar sus anuncios en páginas AMP y no AMP, lo que significa que puede crear sus anuncios una vez y ofrecer una experiencia de marca memorable en todas partes.
Crea un futuro sustentable
El proyecto AMP es una iniciativa de código abierto que protege el futuro de la web al ayudar a todos a ofrecer una experiencia de usuario móvil mejor y más rápida. Puede unirse al proyecto AMP y construir un futuro sostenible para su negocio en una web abierta y más rápida al unirse al proyecto AMP.
Brindar una mejor experiencia de usuario
Por supuesto, la ventaja más obvia de utilizar páginas de destino móviles posteriores al clic aceleradas es que proporcionarán una satisfacción del usuario mucho mayor. Cuando una de cada dos personas no puede molestarse en esperar tan solo 10 segundos para que se cargue un sitio web, acelerar el proceso entre un 15% y un 85% puede tener un gran impacto en la felicidad del visitante.
Obtenga un impulso de SEO
El algoritmo de Google tiene en cuenta la velocidad de la página y la capacidad de respuesta de los dispositivos móviles. Cuanto más rápido se cargue su página en el dispositivo móvil, mejor se clasificará en las páginas de resultados de los motores de búsqueda.
Todas las páginas habilitadas para AMP aparecerán en un formato de carrusel incluso encima de los anuncios pagados en los resultados de búsqueda con un rayo verde debajo del título.
Aunque el uso de páginas AMP le proporciona muchas ventajas, AMP también tiene algunas desventajas.
Sin JavaScript de terceros
Debido a que no tiene la capacidad de usar JavaScript de terceros, debe despedirse de las capacidades de análisis y seguimiento que le permiten ofrecer experiencias publicitarias altamente específicas.
No solo eso, sino que con la versión más ligera de JavaScript de Google, los elementos de la página que requieren la transferencia de datos no se pueden usar en las páginas AMP.
Sin seguimiento de Google Analytics
Google utiliza una versión en caché de las páginas AMP para los usuarios en lugar de acceder a sus servidores, esta es una de las razones por las que las páginas AMP se cargan tan rápido. Aunque la caché permite que sus páginas se carguen más rápido, Google Analytics no rastrea las visitas de los usuarios a menos que realice configuraciones en GA y aplique códigos de seguimiento separados a sus páginas AMP.
A continuación, le mostramos cómo puede realizar un seguimiento de las páginas AMP en Google Analytics con Google Tag Manager.
Las páginas AMP vienen con su conjunto de ventajas y desventajas, sin embargo, si está buscando brindarles a sus visitantes una experiencia móvil rápida y optimizada, los pros de AMP definitivamente superan las desventajas.
La siguiente sección destacará estudios de casos de empresas que utilizaron AMP para cumplir con los KPI y aumentar el ROI.
SECCIÓN 4: Historias de éxito de AMP
Cuando hablamos de páginas web móviles, la velocidad es igual a los ingresos. La investigación de SOASTA muestra que incluso un retraso de 100 ms en el tiempo de carga de la página puede conducir a conversiones más bajas:
Para resaltar el impacto que AMP puede tener en las páginas web móviles, Google encargó a Forrester Consulting que realizara un estudio Economic Impact ™ total en los editores y sitios web de comercio electrónico que utilizan AMP.
La investigación destaca 4 empresas web que han estado utilizando el formato AMP. Al observar los resultados de las 4 empresas, Forrester creó un modelo para pronosticar el rendimiento esperado de la implementación de AMP durante un período de tres años.
Utilizando este modelo, un sitio web con un recuento mensual de visitas al sitio de 4 millones y un margen de beneficio del 10% podría esperar recuperar los costos de implantar páginas AMP y comenzar a ver ganancias positivas en un período de menos de 6 meses:
Estos son los principales resultados obtenidos del estudio:
- Aumento del 20% en la tasa de conversión de ventas. Las pruebas A / B realizadas por los dos sitios web de comercio electrónico entrevistados para este estudio demostraron un aumento del 20% en la tasa de conversión en sus páginas AMP, lo que generaría más de $ 200,000 en ganancias anuales, según el modelo de Forrester.
- Aumento del 10% año tras año en el tráfico del sitio AMP. Un aumento en el tráfico del sitio da como resultado ventas y vistas de anuncios adicionales, lo que generaría más de $ 75,000 en ganancias anuales para un sitio en el primer año, según el modelo.
- Aumento del 60% de páginas por visita. Las páginas AMP tuvieron un desempeño positivo para los editores de comercio electrónico y noticias, quienes dijeron que hubo un aumento del 60% en las personas que ingresaron al sitio y que esas personas pasaron el doble de tiempo en el sitio con un pequeño aumento en los visitantes que regresan del 0.3%.
AMP es un formato relativamente nuevo y, obviamente, debe incurrir en algunos costos con su adopción. Sin embargo, la recompensa de implementar el formato AMP supera el costo inicial.
Gizmodo usa páginas AMP para ser 3 veces más rápido en dispositivos móviles
Gizmodo se enfoca en la experiencia del usuario, con la mitad de su tráfico proveniente de su sitio web móvil, garantizar que el sitio web fuera rápido y claro era esencial si querían que los lectores interactuaran con su contenido en el móvil.
The blog implemented a number of optimization techniques in order to increase their mobile engagement, such as improving page load times, removing unnecessary page scripts, lazy loading for below the fold page elements, and setting a fallback font for web fonts. Still Gizmodo team thought something more could be done to improve user experience for mobile users.
Head of Gizmodo's Data Analytics, Josh Laurito felt this was their main challenge:
We delivered the same (large) JavaScript & CSS payloads to users on mobile and desktop, making it difficult to improve one experience without degrading the other.
Gizmodo found the solution to their problem by implementing the AMP framework in May 2016, and is currently publishing all their posts on AMP pages, they are even creating AMP versions of their previous posts.
Gizmodo has now published over 24,000 AMP pages and is receiving 100k visits to these pages daily:
AMP has helped make Gizmodo mobile pages 3x faster than the regular mobile website, and over 80% of Gizmodo's traffic from AMP pages is new traffic compared to under 50% of all mobile sessions. Plus, the blog has a 50% increase in impressions per page view on AMP.
TransUnion increases conversions with AMP
TransUnion had a problem of slow loading mobile pages that were causing higher bounce rates and lower mobile conversion rates compared to desktop conversion rates. The credit reporting agency wanted to create a best-in-class mobile website on their CMS, HP TeamSite to improve user experience and get the high return on investment.
TransUnion started using AMP with the hope of increasing mobile conversions at an efficient cost per order. As their website was already mobile friendly, TransUnion didn't need to redesign the content – they went online with AMP pages in a week.
The AMP pages loaded in 1.6 seconds on a 3G connection compared the non-AMP pages that loaded in 7.1 seconds. TransUnion's AMP pages quickly starting bringing 3% more conversions, bounce rate was lowered by 26% and users spent 2.5x more amount of time on the website:
Implementing AMP pages provides users with a faster mobile experience which leads to a decrease in bounce rates and an increase in conversions.
When engaging mobile visitors, creating AMP pages gives you the highest probability of engagement and conversions.
The next section will highlight the importance of AMP post-click landing pages, and how connecting optimized AMP ad post-click landing pages leads to better post-click landing page.
SECTION 5: Why you should create AMP post-click landing pages
The stats have spoken – fast loading pages lead to a lower bounce rate and higher conversions. The best way to create lightning-fast pages is with the AMP framework.
Though the AMP framework was first developed for news stories and articles, it has since then evolved to include AMP Ad post-click landing pages as well.
To ensure that mobile users experience doesn't stay restricted to websites, the AMP framework has introduced AMP Ad post-click landing pages – pages created in AMP HTML that load incredibly fast, in less than one second.
The Accelerated post-click landing page or (ALP) loads fast because of the following optimization techniques:
- Pre-connect to post-click landing page: Typical ads don't know the URL of the actual post-click landing page. However, ads connected with ALPs always know the URL, this initiates a pre-connect request to the respective post-click landing page, and the page loads instantly.
- Pre-fetch post-click landing pages: The non-CPU intensive resources that are visible on the first viewport of the post-click landing page are downloaded before the user clicks the ad, so the page loads instantly.
- Using Google Cache URL: when you input a canonical destination URL for a creative, the ad server can switch it to the AMP version of the URL (with trafficker consent) using the AMP URL API. The ad server can also embed code required by the creative to pre-fetch and pre-connect to the post-click landing page. Ad servers like DoubleClick for Publishers (DFP) are integrating such features over the next couple of quarters to make trafficking of AMP post-click landing pages easy.
- No redirects: AMP eliminates redirects to the ad server, AMP only initiates redirect requests once the user has landed on the post-click landing page. The format supports the amp-pixel component for third-party tracking redirects which can be performed on the post-click landing page.
Las páginas de destino post-clic construidas por AMP están diseñadas con el marco para continuar la experiencia móvil optimizada que los usuarios inician cuando hacen clic en un anuncio AMP para móviles.
Here's how AMP Ad post-click landing pages compare to regular ad post-click landing pages:
This is how fast an ALP loads once the ad is clicked, not only that but the user can easily go back to the content they were reading before the clicked the ad:
Accelerated post-click landing pages give a better post-click landing page to visitors because:
- Users will be more willing to click on ads when they know their ad expectations will be met.
- Marketers will benefit from increased user engagement, lower bounce rate and higher conversions.
- Marketers will benefit from boosted revenue with better ads while allowing their readers a way back to their content.
Creating ALPs seems like a no-brainer when you consider the fact that Google looks at post-click landing page experience as one factor to determine ad rank, which ultimately contributes to your click-through rate.
And while publishers have embraced frameworks like AMP to speed up web content delivery on mobile devices, the marketing industry has not yet caught up. As more consumers and B2B buyers spend more time on mobile, marketers and advertisers are forced to adapt with mobile-optimized campaigns.
Businesses that are using AMP pages are already seeing massive ROI, so what's holding you back from creating Accelerated post-click landing pages?
How to create AMP pages with Instapage
In February 2018 we announced our partnership with Google to develop Accelerated Mobile Pages (AMP) functionality in the Instapage platform. They invited us to speak at their global AMP Conference where we discussed How to Balance AMP Limitations with Optimization Features.
Fast forward to May 2018 and Instapage now empowers marketers with the ability to create post-click landing pages using the AMP framework. The AMP framework allows for faster page load speeds on mobile devices, enabling you to provide a better user experience for mobile browsing.
With this new Instapage capability, digital marketers can create AMP post-click landing pages directly from our platform in a matter of minutes just by following these steps.
Step 1: Create a new page
Select AMP Page from the modal:
The next screen prompts you to name the page. This is different than the standard builder where it asks which template you wish to use (or build from scratch). AMP pages are built from scratch, so no template options are available.
Step 2: Add elements to the page
The second difference you will see is that Timer and HTML widgets are absent from the toolbar, but you still have the remaining widgets:
AMP does not support HTML/CSS or JavaScript so you won't find those settings in the Instapage AMP builder. You will, however, still see these options:
Note: Collaboration (“Comment”) and Instablocks™ are both functional within the AMP builder. Unfortunately, heatmaps and Global Blocks are not applicable.
AMP post-click landing pages have a 75KB limit, and each widget in the Instapage AMP builder is weighted. As you build a page, a validator operates in the background so that your page doesn't exceed the 75KB limit. If you reach 80% of the limit, this warning indicator appears near the bottom of the screen:
Step 3: Create a variation to A/B test
Click “Create an A/B Test” and add a new variation or import one of your own:
With the new variation, you can either duplicate, pause, rename, transfer, or delete it at any time:
Step 4: Validate the page
As you continue building and approach the 75KB limit, another indicator appears requesting you validate the page to confirm it is within acceptable limits:
Should the page pass validation, you will see this on-screen message:
Una vez que termine y haga clic en Publicar, se le notificará si supera el límite de 75 KB:
Una vez validada, su página está lista para publicarse.
Paso 5: publicar
WordPress y los dominios personalizados pueden publicar páginas de destino AMP post-clic en Instapage. Puede seleccionar cualquiera de los métodos después de hacer clic en el botón azul de publicación:
Para WordPress, instale e inicie sesión en el complemento Instapage en su sitio web y publique su nueva página de destino AMP post-clic en WordPress:
De lo contrario, ingrese su dominio y subdominio:
Tan pronto como la página esté activa, verá el logotipo de AMP junto a la página en el panel de control:
Si sus páginas móviles están experimentando altas tasas de rebote y baja participación de los visitantes debido a la velocidad de carga de la página lenta, entonces crear páginas AMP es una gran solución.
El marco AMP implementa técnicas de optimización que ayudan no solo con la velocidad de la página, sino que también brindan a los usuarios una experiencia móvil agradable. La creación de páginas de destino post-clic de anuncios AMP le ayuda a ofrecer páginas de destino post-clic optimizadas, rápidas y relevantes para sus visitantes.
Instapage es actualmente la única plataforma de página de destino post-clic que le permite crear páginas de destino post-clic optimizadas para dispositivos móviles utilizando el marco AMP de Google. Las páginas de destino posteriores al clic creadas con AMP tienen una carga casi instantánea y un desplazamiento suave.
Comience a crear páginas AMP con Instapage hoy mismo para crear una mejor experiencia de navegación móvil, mejorar sus puntajes de calidad y generar más conversiones.