Solo tienes dos segundos antes de que tus lectores empiecen a abandonar la página si no carga.

¿Parece poco realista? De acuerdo, dale tres segundos, pero ahora estás arriesgándote: aproximadamente el 40% de los usuarios se irán , y a partir de ahí todo irá cuesta abajo.

El abandono de página es un incidente terrible para los editores: aumenta la tasa de rebote, disminuye los ingresos publicitarios y, en general, echa por tierra 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, afirma : "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 intentas tú mismo? Solo abre Google en tu móvil y escribe cualquier cosa que sea noticia ahora mismo. Por ejemplo, escribamos "Cardi B", porque es genial y siempre está en las noticias.

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 AMP : no hay retrasos, no hay que esperar a que se carguen los elementos individuales, no hay movimientos bruscos en la página; todo el contenido se entrega de forma fluida y parece muy diferente de las páginas web normales en la web móvil.

La publicación de Copyblogger sobre AMP lo explica con cifras:

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 el código JavaScript innecesario (solo se permite JavaScript asíncrono) para acelerar la carga. Si bien se permite JavaScript personalizado en amp-script y JavaScript de terceros en iframes , este último 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 los elementos necesarios cuando los usuarios acceden a esa parte de la página. Es decir, utiliza la tecnología de carga diferida para descargar y cargar los recursos que se encuentran visibles o a punto de estarlo 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: Como su nombre indica, AMP está diseñado principalmente para reducir la velocidad de carga en dispositivos móviles y, efectivamente, lo consigue reduciendo el tiempo de carga a tan solo 2-3 segundos.

Baja tasa de rebote: La lentitud de la página es la principal razón por la que los usuarios la abandonan . Si se reduce drásticamente el tiempo de carga, los editores deberían experimentar una baja tasa de rebote.

Mejor posicionamiento SEO: Como ya se mencionó, el tiempo de carga es un factor de posicionamiento para la mayoría de los motores de búsqueda, y con una menor velocidad de carga de la página, deberías notar una mejora en tu posicionamiento. Además, las páginas AMP aumentan las posibilidades de aparecer en el carrusel de Google y otras funciones de los resultados de búsqueda.

Aumento del tráfico web: Con un mejor posicionamiento SEO, deberías esperar un mayor tráfico en tu sitio web. Dado que AMP puede mejorar tu SEO y una baja velocidad de carga te ayudará a reducir la tasa de rebote si tu contenido también es excepcional, puedes obtener un buen número de sesiones de usuarios que visitan el sitio.

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

Optimización del consumo de datos: Eliminar el código JavaScript y CSS innecesario también significa que las páginas consumirán menos recursos del navegador y del ordenador. Por ejemplo, AMP reduce el tamaño de las imágenes al tamaño justo para que el navegador las cargue rápidamente, lo que implica que el navegador descargará un archivo de menor tamaño, reduciendo así el consumo 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).

Para configurar una página AMP, necesitarás tener conocimientos de lenguaje de marcado. Si nunca has trabajado con HTML, te recomendamos que dediques un tiempo a revisar el tutorial oficial de AMP y las guías relacionadas. En ese caso, te conviene contratar a un desarrollador o pedirle ayuda a algún amigo o compañero de trabajo con conocimientos técnicos para que te explique 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.

Si publicas en WordPress, estás de suerte. Puedes usar un plugin de WordPress para AMP que convierte dinámicamente todas tus páginas a versiones compatibles con AMP. Esto es de gran ayuda, ya que te ahorra mucho trabajo. Solo tienes que activar el plugin una vez y todas tus publicaciones se adaptarán a AMP al instante.

Esta es una pregunta importante para los editores. Les alegrará saber que AMP sí admite publicidad ; al menos para Google, ese es precisamente el objetivo de todo esto.

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 permitieron a los editores crear controles de usuario y administrar las opciones a través de un nuevo componente AMP llamado <amp-consent>.

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 la publicidad en vídeo , AMP ofreció la solución para mostrar anuncios de vídeo en las páginas AMP.

AMP permite tanto anuncios de vídeo in-stream como out-stream . Los anuncios in-stream se pueden mostrar mediante la extensión <amp-ima-video>. Incluye todas las funciones básicas, como la reproducción automática, la fijación al desplazarse y el análisis de datos.

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í te mostramos cómo puedes sacar el máximo provecho de tu inventario de AMP :

Subasta de inventario de AMP vía Header Bidding

Sí, lo leíste bien: el inventario de AMP se puede vender mediante header bidding . De hecho, hay dos maneras 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í tienes la guía completa para añadir 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.