Dos segundos es todo lo que obtienes antes de que sus lectores comiencen a rebotar si su página web no se carga.

¿Parece poco realista? Bien, dale tres segundos, pero ahora estás apostando...aproximadamente el 40% de los usuarios abandonarán, y luego todo va cuesta abajo a partir de ahí.

El abandono de página es un incidente terrible para los editores: Aumenta la tasa de rebote, disminuye los ingresos publicitarios y, en general, tira la toalla mojada a todo su arduo trabajo.

El gigante de la tecnología publicitaria, Google, decidió solucionar esta situación lanzando AMP.

¿Qué significa para ti? ¿Cómo puedes implementarlo en tu sitio web? Y lo que es más importante, ¿deberías hacerlo? Continúe leyendo para descubrirlo en nuestra guía sobre Google AMP.

AMP es un proyecto de código abierto basado en AMP HTML, un marco abierto creado a partir de tecnologías web existentes, que permite a los sitios web crear páginas web livianas.

El objetivo principal del proyecto es acelerar la entrega de contenido en todos los dispositivos móviles eliminando todo lo que no sea esencial.

Hoy, después de conversaciones con editores y empresas de tecnología de todo el mundo, anunciamos una nueva iniciativa de código abierto llamada Accelerated Mobile Pages, cuyo objetivo es mejorar drásticamente el rendimiento de la web móvil. Queremos que las páginas web con contenido rico como videos, animaciones y gráficos funcionen junto con anuncios inteligentes y se carguen instantáneamente. También queremos que el mismo código funcione en múltiples plataformas y dispositivos para que el contenido pueda aparecer en todas partes en un instante, sin importar qué tipo de teléfono, tableta o dispositivo móvil esté utilizando.

Blog oficial de Google

Ahora que el tráfico móvil supera al de las computadoras de escritorio, los editores, anunciantes y desarrolladores ya no pueden darse el lujo de mirar hacia otro lado mientras los usuarios saltan de una página a otra frustrados (y en lo que respecta a Google, la velocidad importa mucho más que las funciones).

Algunas publicaciones de noticias importantes como Time, The Atlantic, Vox, BBC y The Huffington Post y varias empresas de tecnología como WordPress, Twitter, Adobe Analytics, Chartbeat, LinkedIn y Pinterest ya se han unido a AMP.

Quizás el mayor punto de venta de Google AMP es que es de código abierto y, por lo tanto, cualquier editor puede registrarse y comenzar a usarlo, a diferencia de otros proyectos más controlados, como Instant Articles de Facebook y Apple News.

Sí.

Jon Parise de Pinterest dice, "Las páginas móviles aceleradas se cargan cuatro veces más rápido y utilizan ocho veces menos datos que las páginas tradicionales optimizadas para móviles".

Oye, ¿por qué no lo pruebas tú mismo? Simplemente abra Google en su dispositivo móvil y escriba cualquier cosa que sea noticia en este momento. A modo de ejemplo, escribamos "Cardi B", bueno, porque ella es genial y siempre es noticia.

Justo encima de los resultados de la búsqueda, verá una pila de tarjetas desplazables horizontalmente con la etiqueta "AMP". Al hacer clic en una tarjeta se cargará ese artículo.

Notarás la diferencia al instante al abrir un artículo de AMP—no hay retrasos, no hay que esperar a que se carguen elementos individuales, ni movimientos nerviosos en la página—todo el contenido de la página se entrega con un movimiento suave y parece muy diferente de las páginas web normales en la web móvil.

Publicación de Copyblogger en AMP explica esto en números:

La versión AMP alcanzó "domContentLoaded: un punto clave en la carga de una página web donde el HTML se descarga por completo y se completa cierto análisis importante" en 0.857 segundos.

Un abrir y cerrar de ojos dura alrededor de 0.33 segundos.

En otras palabras, parpadea dos veces y tú, nuestro viajero del metro, podrás empezar a leer la parte útil del contenido casi al instante, gracias a AMP.

Eso sí que es velocidad.

¿Cuándo fue la última vez que se cargó una página en tu móvil antes de siquiera parpadear dos veces?

Si bien JavaScript es la varita mágica que tienen la mayoría de los desarrolladores front-end para hacer cualquier cosa con sus páginas web, también puede ralentizar la representación de una página.

Con AMP, las páginas web bloquean los códigos JS innecesarios (solo se permite JS asíncrono) para acelerar la carga. Si bien se permite JS personalizado en script de amplificador, y se permite JS de terceros en iframes, no puede bloquear la renderización.

Todos los recursos tienen un tamaño estático.

AMP toma el tamaño de todos los recursos, como imágenes, anuncios e iframes, para posicionarlos antes de descargarlos. Comienza cargando el diseño sin esperar a que se descarguen los recursos.

No permite que las extensiones ralenticen la descarga

AMP admite extensiones como lightboxes, incrustaciones, tweets, etc. Estas requieren solicitudes HTTP adicionales, sin embargo, no bloquean la carga de la página. Las páginas que utilizan scripts personalizados deben indicarle al sistema AMP que habrá una etiqueta amp-iframe, por ejemplo:

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

CSS debe estar en línea y limitado por tamaño

CSS bloquea todo el renderizado y tiende a inflarse. En las páginas HTML AMP, solo se permiten estilos en línea. Esto elimina muchas solicitudes HTTP de la ruta de representación crítica en comparación con la mayoría de las páginas web.

Además, la hoja de estilos en línea tiene un tamaño máximo de 50 kilobytes. Si bien este tamaño es lo suficientemente grande para páginas muy sofisticadas, aún requiere que el autor de la página practique una buena higiene CSS.

Priorice la carga de imágenes en consecuencia

AMP se centra en cosas que se requieren cuando los usuarios aparecen en esa parte de la página. Es decir, utiliza tecnología de carga diferida para descargar y cargar recursos que están en la ventana gráfica o a punto de estar en la ventana gráfica mientras los usuarios se desplazan por la página.

La búsqueda de Google es el motor de búsqueda más grande y AMP está diseñado por Google, por lo que usarlos juntos definitivamente ayudará con la clasificación de las búsquedas, ¿verdad?

¡INCORRECTO!

AMP no es un factor de clasificación para que ningún motor de búsqueda, incluido Google, clasifique una página. Esta es la razón por la que es posible que veas muchas páginas que no son AMP aparecer encima de las páginas AMP en dispositivos móviles.

Si bien AMP en sí no es un factor de clasificación, la velocidad sí lo es para la Búsqueda de Google. La Búsqueda de Google aplica el mismo estándar a todas las páginas, independientemente de la tecnología utilizada para crear la página.

Aparte de eso, tener AMP habilitado puede permitir que su página web aparezca en la búsqueda móvil como parte de carruseles y resultados enriquecidos. Estos pueden ser:

Tiempo de carga reducido: El nombre habla por sí solo, AMP está diseñado principalmente para reducir la velocidad de carga de los dispositivos móviles y, con razón, hace lo mismo al reducir el tiempo de carga a tan solo 2-3 segundos.

Tasas de rebote bajas: La página lenta es la razón número uno para usuarios para rebotar. Dada una fuerte disminución en el tiempo de carga, los editores deberían experimentar una tasa de rebote baja.

Mejor SEO: Ya dije que el tiempo de carga es un factor de clasificación para la mayoría de los motores de búsqueda y con la velocidad de carga de la página reducida, debería ver una mejora en la clasificación de su página. No olvide que las páginas AMP también aumentan las posibilidades de aparecer en el carrusel de Google y otras funciones SERP.

Aumento del tráfico web: Con un mejor SEO, debería esperar un mejor tráfico en el sitio. Dado que AMP puede mejorar su SEO y una baja velocidad de carga lo ayudaría a reducir la tasa de rebote si su contenido también es excepcional, puede obtener buenos números de sesión de los usuarios que aparecen en el sitio.

Compatible con todos los navegadores: Dado que AMP elimina todos los JS y CSS innecesarios, los navegadores obtienen un código HTML limpio para interpretar y mostrar en la pantalla.

Consumo de datos optimizado: Eliminar JS y CSS innecesarios también significa que las páginas utilizarán menos recursos informáticos y de navegador. Por ejemplo, AMP reduce el tamaño de la imagen al tamaño justo para que el navegador se cargue rápidamente; esto también significa que el navegador descargará un tamaño de archivo reducido, una clara reducción en el uso de datos.

Estoy seguro de que hasta ahora todo esto suena demasiado bueno para ser verdad. Entonces, ¿cuál es la compensación? ¿Qué son todas estas cosas adicionales que se “eliminan” para que la página se cargue más rápido de todos modos?

Bueno, esto es lo que AMP elimina: complementos de redes sociales, ventanas emergentes, carruseles de imágenes, videos, software de análisis, scripts de seguimiento y muchas otras cosas que se solicitan en segundo plano cuando se carga una página.

Tampoco es compatible con Javascript de terceros. Ese es el secreto de su velocidad. Obviamente, implementarlo para su contenido significa perder la funcionalidad vinculada a las cosas mencionadas anteriormente.

Algunos dicen que AMP funciona bien sólo para los editores más grandes que ya tienen una audiencia preparada. Los editores más pequeños no podrán hacer cosas básicas como recopilar correos electrónicos porque es posible que AMP no admita formularios. Es muy posible que preocupaciones como estas resulten ser un factor decisivo para algunos editores.

Sin embargo, estas preocupaciones pueden solucionarse hasta cierto punto si trabaja con un desarrollador que tenga experiencia con AMP. Para la monetización de AMP, le recomendamos pensar en un socio que se especialice en la tecnología (como AdPushup).

Deberá estar familiarizado con el marcado para poder configurar una página AMP. Le recomendamos que se tome un tiempo y revise el tutorial oficial de AMP y guías relacionadas Una vez, si nunca antes has trabajado con HTML, aquí es donde contratas a un desarrollador O le pides a tu amigo o compañero de trabajo experto en tecnología que te ayude un poco a comprender cómo funciona.

Con un poco de esfuerzo podrás:

1. Cree una página AMP utilizando el código repetitivo.
2. Ponlo en escena.
3. Garantice el cumplimiento de AMP utilizando el validador de Google.
4. Publicar y distribuir.

En caso de que estés publicado en WordPress, estás de suerte. Puedes usar Complemento de WordPress para AMP que convierte dinámicamente todas sus páginas de publicaciones en versiones compatibles con AMP. Esto es inmensamente útil ya que le ahorra todo el trabajo preliminar. Todo lo que tienes que hacer es activar el complemento una vez y todas tus publicaciones serán AMP instantáneamente.

Esta es una gran pregunta para los editores. Estarías feliz de saber eso De hecho, AMP admite publicidad; Al menos para Google, ese es el objetivo de este ejercicio.

Los anuncios ayudan a financiar servicios y contenidos gratuitos en la web. Con Accelerated Mobile Pages, queremos admitir una amplia gama de formatos de anuncios, redes publicitarias y tecnologías. Cualquier sitio que utilice AMP HTML conservará su elección de redes publicitarias, así como cualquier formato que no afecte la experiencia del usuario. También es un objetivo central del proyecto admitir suscripciones y muros de pago. Trabajaremos con los editores y aquellos en la industria para ayudar a definir los parámetros de una experiencia publicitaria que aún proporcione la velocidad que buscamos con AMP.

Blog oficial de Google

De hecho, AdSense no solo es compatible con AMP, sino que también lo son las siguientes redes publicitarias: Criteo, OpenX, Smart Ad Server, TripleLift, Teads y más.

Los editores deberían ver una mejora en el rendimiento de los anuncios y, en consecuencia, en los ingresos publicitarios, porque ese 40% aproximadamente de los usuarios que antes abandonaban la página se quedarán ahora para ver los anuncios.

Así es como AMP evolucionó para ayudar a los editores web con sus objetivos de ingresos publicitarios:

Anuncios AMP HTML para todas las páginas

Los anuncios AMP HTML son más rápidos, ligeros y seguros que los anuncios estándar. Están creados con AMP-HTML y utilizan muchos de los componentes inteligentes que hacen que las páginas AMP sean rápidas.

Los anuncios AMP HTML están diseñados para funcionar en páginas web AMP y no AMP, en cualquier dispositivo, en una variedad de formatos estándar y creativos (como carrusel, paralaje, lightbox).

Elemento de consentimiento incorporado

En abril y principios de mayo de 2018, el Proyecto AMP lanzó dos actualizaciones que permite a los editores crear controles de usuario y administrar las opciones a través de un nuevo componente AMP llamado .

Esto permite a los editores capturar la decisión de consentimiento del usuario y hace que la configuración del usuario esté disponible para los elementos de la página AMP para modificar el comportamiento de la página.

Además, los proveedores pueden personalizar aún más los elementos para que tengan comportamientos más sofisticados que dependan de la configuración del usuario.

Compatibilidad con DFP/AdX y AdSense Los editores pueden optar por publicar anuncios no personalizados a los usuarios, o pueden optar por publicar anuncios de forma selectiva según el consentimiento.

Anuncios de vídeo en páginas AMP

Se sabe que los vídeos tardan un poco en cargarse en el navegador, gracias al gran tamaño del archivo. Al principio, utilizar anuncios de vídeo con AMP parecía imposible.

Sin embargo, con el auge de publicidad en video, AMP presentó la solución para publicar anuncios de video en páginas AMP.

AMP permite tanto in-stream como anuncios en vídeo outstream. Los anuncios de video in-stream se pueden renderizar usando extensión. Tiene todas las funciones básicas, incluida la reproducción automática, el acoplamiento en un desplazamiento y el análisis.

AMP es rápido. Es lo mejor que les ha pasado a los sitios móviles del editor. Sin embargo, si maneja su inventario AMP de la misma manera que maneja el resto de su inventario, los resultados pueden ser decepcionantes. 

Dada la alta puntuación de visibilidad de las páginas AMP, los eCPM están sujetos a aumentar. Pero esos beneficios se diluyen ante las deficiencias tecnológicas de los editores.

Por otro lado, si trata a AMP como un inventario premium, debe comprender que solo funciona para dispositivos móviles. Es decir, debe encontrar anunciantes que busquen específicamente inventario móvil AMP.

Aquí como puedes Aprovecha al máximo tu inventario AMP:

Subasta de inventario de AMP vía Header Bidding

Sí, has leído bien - El inventario de AMP se puede vender mediante ofertas de encabezado. De hecho, hay dos formas de hacerlo:

• Configuración en tiempo real (RTC): RTC es una característica nativa de AMP, hay menos posibilidades de errores y, por lo tanto, implica poca o ninguna depuración. También tiene algunas desventajas. El editor no puede tener más de cinco socios de demanda y, si bien el tiempo de espera se puede configurar para que sea inferior a 5 segundo, no puede excederlo. Además, carece de las personalizaciones que ofrecen las ofertas de encabezado tradicionales.
• Oferta de encabezado basada en contenedor: Al utilizar la configuración de ofertas de encabezado del lado del servidor, también puede vender inventario AMP. Las ofertas de encabezado basadas en contenedores evitan la limitación de cinco socios de demanda al enrutar las ofertas a través de un único espacio RTC. Esto significa que puede agregar tantos socios de demanda como desee. Los wrappers también proporcionarán a los editores informes y datos analíticos, algo para lo cual RTC no tiene soporte en este momento.

Habilite su línea de pedido de Google Ad Manager con anuncios AMP

Los editores de Google Ad Manager pueden simplemente activar la función de anuncios AMP HTML para que sus anuncios sean compatibles con AMP. Puede actualizar sus etiquetas publicitarias existentes o crear otras nuevas para indicar a los compradores (redes) que se trata de un inventario AMP.

Involucrar a un socio externo para la demanda de AMP

Cuando agrega diferentes canales para vender inventario AMP, necesitará más demanda para cada canal. Conseguir un socio externo para gestionar las asociaciones de demanda puede permitirle centrarse en otros aspectos importantes de su negocio editorial.

AMP incluye un elemento que permite medir las interacciones del usuario y tiene soporte integrado para Google Analytics.

Para usarlo con Google Analytics, puede copiar este código y reemplazarlo con el ID de propiedad que desea utilizar:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

AMP le solicita que revele cómo recopila datos para utilizar la función. Estos son los puntos de datos que puedes recopilar:

• Datos de la página: dominio, ruta, título de la página
• Datos de usuario: ID de cliente, zona horaria
• Datos de navegación: referente, ID de vista de página única
• Datos del navegador: altura de la pantalla, ancho de la pantalla, agente de usuario
• Datos de interacción: alto de página y ancho de página

Aquí está la guía completa para agregar análisis a las páginas AMP..

AMP es poderoso: hace que su sitio sea verdaderamente compatible con dispositivos móviles.

Con nuevos avances, como anuncios AMP, configuración en tiempo real y funciones para obtener el consentimiento del usuario, asegúrese de que tenga futuro en el negocio de la publicación digital. Asimismo, la tasa de adopción se está acelerando, especialmente en la comunidad de noticias.

¿Estás utilizando AMP para tu sitio? ¿Cómo se ven tus ingresos por publicidad? ¿No tan bueno? Permítanos ayudarle: reserve una consulta gratuita de 30 minutos.