AMP de Google: la guía divertida y fácil de usar para páginas móviles aceleradas

Ver el vídeo. Ignora la copia.

Ese es mi consejo para usted una vez que llegue al sitio de Google dedicado al nuevo proyecto Accelerated Mobile Pages (AMP):

“El proyecto Accelerated Mobile Pages (AMP) es una iniciativa de código abierto que encarna la visión de que los editores pueden crear contenido optimizado para dispositivos móviles una vez y cargarlo instantáneamente en todas partes”.

Si no eres desarrollador y lees la copia, la jerga te tragará vivo.

Sin embargo, mire el video y comprenderá casi de inmediato de qué se trata AMP (sin mencionar una referencia divertida de Spinal Tap, ver más abajo).

O simplemente puedes leer esta guía porque será lo más divertido que hayas leído sobre AMP y cómo afecta su marketing de contenidos .

Promete.

¿Qué es el Proyecto AMP de Google?

Desde el nacimiento de la filosofía del Momento Cero de la Verdad de Google allá por 2011, no ha sido ningún secreto que quieran “mejorar restringido el rendimiento de la web móvil”.

Y probablemente no sea necesario decirles que existe un pequeño problema con el rendimiento del contenido en la web móvil.

Lo más probable es que tengas un dispositivo móvil. Y lo más probable es que hayas hecho clic en un enlace en ese dispositivo desde una página de resultados de búsqueda, un sitio de redes sociales o dentro de tu bandeja de entrada de correo electrónico… ansioso por consumir el contenido.

Pero nunca llega.

Bueno, viene, pero en un convulsionado mosaico de imágenes, videos y anuncios que se tambalean y entrecortan a medida que se carga la página. Lo miras horrorizado, con los ojos dilatados, rebotando en tu asiento del metro como alguien que tiene que ir al baño.

“¿Cuánto va a durar esto?” No gritas a nadie en particular.

Quién sabe, pero nunca lo sabrás porque, como el 40 por ciento de la población , abandonarás la página de carga en 3 segundos. Entonces dirás, como mi gato negro Apollo Monkeystrap, “Le suspiro”.

Son momentos móviles insoportables como estos los que Google quiere eliminar con AMP.

¿Qué tan rápido creará AMP tus páginas?

En una escala del 1 al 10, donde uno es "no se carga en absoluto" y diez es "se carga en un segundo", el contenido AMP se cargará a una velocidad de página de 11. (Esa es la referencia de Spinal Tap sobre la que les advertí ) .

Pero en serio, ¿a qué velocidad?

Jon Parise, ingeniero de software de Pinterest, dijo : "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".

¡Cuatro veces más rápido es bueno! Pero, ¿qué significa eso para usted, nuestro simpático viajero del metro que intenta descargar una página web en su teléfono móvil?

Según NiemanLab , un artículo del New York Times optimizado para AMP se descargó por completo en el móvil en 2,99 segundos. A modo de comparación, en una prueba en Chrome en un iMac rápido, la versión de escritorio de esa página tardó 3,82 segundos (la versión móvil fue más rápida).

Si no lo sabía, NYTimes.com era conocido por ser uno de los sitios web de noticias móviles de carga más lenta de este lado de Saturno.

Desde entonces lo han solucionado .

¿Estás seguro de que es lo suficientemente rápido?

Pero espera, dices, 2,99 segundos todavía está en el límite superior del período de tiempo que nuestro viajero del metro está dispuesto a esperar. Él, como el 40 por ciento de la población, abandonó el país en 3 segundos. ¡2,99 segundos es suficiente! Eso no es una gran mejora.

Es cierto, pero la diferencia es que en el primer escenario, sin AMP, en un escritorio, la página todavía se cargaba después de 3 segundos. En la versión AMP del escenario, se descargó por completo en 2.99.

Más importante aún, 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.

¿Qué hace que las páginas móviles tradicionales se carguen tan lentamente?

Creo que lo sé, pero como no soy desarrollador, diseñador ni programador (y ni siquiera estoy seguro de si son disciplinas diferentes), llamé a uno de nuestros desarrolladores aquí en Rainmaker Digital, Mike Hale, para que me ayudara a traducir .

Mike dijo que cuando un sitio de escritorio se introduce en un navegador móvil, se "llaman" varias docenas de paquetes de información, a menudo desde diferentes hosts, al navegador móvil.

En el viejo y lento ejemplo anterior del New York Times, un artículo podría tener "192 solicitudes, algunas a los servidores del Times, la mayoría a una serie de otros servidores que alojan decenas de scripts".

La parte más útil se descargará en 5 segundos después de hacer clic, pero el resto aún está llegando, razón por la cual la pantalla rebota cuando el navegador se configura y luego se reinicia.

Todavía perdido, presioné a Mike: “¡¿Pero qué tipo de cosas se solicitan?! ¡¿Cómo se llama?!

Mike me dijo que tu móvil podría estar llamando a los scripts de complementos sociales, carruseles de imágenes, SlideShares y vídeos. Y luego probablemente haya software de análisis, anuncios y scripts de seguimiento ejecutándose en segundo plano.

Cosas sensatas, cotidianas, pero que suman. Y rápido.

El problema es que su dispositivo móvil simplemente no tiene la capacidad de procesamiento para realizar esto rápidamente.

Esta ilustración explica el problema con el contenido móvil.

Imagínese si fuera al banco, se acercara al cajero y pidiera 100 dólares, pero en un orden peculiar: quince billetes de un dólar, tres billetes de cinco dólares, cinco billetes de diez dólares y un billete de veinte dólares.

Si el banco funcionara como lo hace ahora la web móvil, entonces el cajero haría varios viajes para entregarle cada factura por separado.

Cada uno de esos viajes es un “llamado”.

Sin embargo, si el banco estuviera optimizado con AMP, el cajero le entregaría todas sus facturas a la vez. Además, probablemente ignoraría su solicitud específica de ciertos billetes y simplemente le entregaría un billete de cien dólares.

AMP tiene como objetivo simplificar las solicitudes que debe realizar un navegador.

"El único script al que puedes llamar es AMP javascript", dijo Mike. “Todo está envuelto en un solo paquete. Te lo entrego todo de una vez”.

Y así es como Yoast describió el contenido móvil de AMP :

“Comparemos esto con un auto de carreras. Si quieres hacer un auto de carreras más rápido, le das un motor más rápido y le quitas todo el peso. En esta eliminación de peso, también se eliminan cosas como asientos traseros, aire acondicionado, etc. AMP no es diferente a eso. Es la versión recortada de una web normal, porque a Google le importa más la velocidad que las funciones ingeniosas”.

¿Sientes esa punzada de amargura en la última línea? No es tu imaginación. Llegaremos a eso en un momento. Primero, veamos una experiencia AMP para ayudarle a entender a qué me refiero.

¿Cómo se ve el contenido móvil optimizado para AMP?

Afortunadamente, puedes probar una demostración de contenido de noticias AMP.

  1. Saca ese teléfono inteligente tuyo.
  2. Abra un navegador (cualquier navegador).
  3. Escribe g.co/ampdemo.
  4. Escriba frases de palabras clave populares como "Cumpleaños de Justin Bieber", "Jennifer Lawrence" o "Yoko Ono" en el cuadro de búsqueda de Google.
  5. Presiona "Enviar".

Este es un ejemplo de cómo se verán los resultados:

Como puede ver, el contenido AMP obtiene la mayor facturación. Está en el carrusel que se encuentra en la mitad superior de la página. Las entradas estándar se encuentran debajo.

Puedes desplazarte por ese carrusel y cuando encuentres un artículo basado en AMP que te guste, haz clic en él. Así se verá:

Lectura divertida, ¡eh!

¿Por qué Google hace esto? ¿Debería importarle? (Algo así como)

Aquí es donde se vuelve extraño.

Como mencioné anteriormente, Google ha estado obsesionado con la optimización del rendimiento web móvil durante los últimos cinco años, razón por la cual hemos estado escribiendo sobre la importancia de una velocidad de sitio web realmente rápida (hay seis herramientas para probar la velocidad de su sitio en ese artículo, por cierto) por el mismo tiempo.

Es por eso que le advertimos el año pasado sobre la actualización móvil de Google , "Mobilegeddon".

Entonces, en este punto, AMP es una especie de culminación del enfoque de Google en la optimización web móvil, pero ¿cómo ayuda a los editores?

Suena simplista, pero Google piensa: a los usuarios les encanta el contenido. Les encanta el contenido rápido. Cuanto más rápido puedas distribuir contenido rápido, más contenido podrás consumir.

Pero hay algo más en esta medida: Google está intentando ganar la guerra del consumo de noticias.

¿En qué se diferencia AMP de Instant Articles y Apple News?

El año pasado, tanto Apple como Facebook lanzaron aplicaciones que permiten a los usuarios consumir artículos de noticias: Apple News y Instant Articles.

Ambas aplicaciones son productos independientes.

Christian Cantrell, ingeniero senior de desarrollo de experiencias del equipo XD de Adobe, escribió en Smashing Magazine : "Son esencialmente agregadores de noticias sofisticados con renderizadores personalizados creados sobre formatos de distribución propietarios".

En otras palabras, Instant Articles y Apple News renacen como RSS.

Google, por otro lado, busca ir directamente a los editores y lograr que optimicen el contenido móvil para su consumo en la web abierta, lo que permite una entrada sin esfuerzo y una fácil distribución, algo que no se puede conseguir en una aplicación.

Hasta ahora han participado algunos editores de noticias de renombre :

  • tiempo inc.
  • El Atlántico
  • voz
  • bbc
  • El Correo Huffington

También se unieron varias empresas de tecnología como WordPress, Twitter, Adobe Analytics, Chartbeat, LinkedIn y Pinterest.

Dos quejas comunes sobre AMP

Las quejas se presentan al menos en dos variedades:

  1. Los detractores odian las restricciones sobre lo que puede hacer el contenido móvil.
  2. Los detractores lamentan que la pequeña editorial sea castigada.

Yoast cae en la primera categoría. Joost de Valk escribió : “AMP restringe lo que puedes hacer en páginas HTML. El diseño sofisticado se elimina en favor de la velocidad. AMP es más un proyecto de función que de formulario”.

Tenga en cuenta que no solo la apariencia se ve afectada: AMP no admite formularios, lo que significa que las páginas AMP no lo ayudarán a hacer crecer su lista de correo electrónico. Hay soluciones tecnológicas disponibles, pero la situación aún es demasiado nueva para ver cómo evolucionarán.

Notarás que la mayoría de los editores grandes utilizan AMP, pero ¿eso significa que AMP perjudica a los editores más pequeños?

Paul Shapiro de Search Engine Land dijo lo siguiente :

“Aunque los desarrolladores experimentados a menudo pueden lograr resultados similares mediante optimizaciones intensivas del rendimiento, los editores a menudo descuidan esto debido a limitaciones de recursos. AMP permite que estas optimizaciones se logren fácilmente sin alterar la experiencia web móvil principal”.

AMP puede resultar una herramienta sólida para optimizar la experiencia móvil. Entonces, ¿deberías AMP?

¿Quién debería preocuparse por AMP?

Eso depende.

  • ¿Es usted un editor gigante de noticias? Luego entre en pánico, a menos que ya tenga una estrategia sólida para la experiencia del usuario móvil. Cosa que ya deberías haber tenido puesta hace meses, pero bueno.
  • ¿Obtiene una fuente importante de tráfico desde el móvil? Nuevamente, debe asegurarse de que su estrategia para la experiencia móvil sea sólida. Probablemente quieras observar cómo se desarrolla AMP, pero puede que valga la pena realizar algunos experimentos.
  • ¿Estás en un mercado nuevo sin mucha competencia? Propóngase optimizar su contenido móvil en los próximos 30 días, pero no entre en pánico.
  • ¿No encajas en ninguna de las categorías anteriores? Luego siéntate sobre tus manos y observa lo que sucede.

"Definitivamente es algo que un editor debe mantener en el radar", me dijo nuestro director de productos y fundador de StudioPress, Brian Gardner. "Pero supongo que será un acuerdo fluido durante algún tiempo".

¿Quién sabe? Podría haber una manera más fácil de hacer todo esto en el futuro, algo que también sugirió Jake Goldman, presidente y fundador de 10up, una agencia de consultoría de gestión de contenido de WordPress :

“Con el tiempo, sospechamos que AMP eventualmente se volverá tan complejo como HTML 'sin restricciones' o se volverá irrelevante debido a los avances en el hardware móvil, las velocidades de banda ancha y las características de privacidad estandarizadas: una solución para un problema que ya no tenemos.

Pero digamos que quieres jugar con AMP.

Cómo crear tu primera página AMP

Aquí es donde puedes subirte los pantalones de desarrollador de niño o niña grande, porque se necesitan algunas marcas básicas para comenzar con AMP.

Le recomiendo que avance a través de este tutorial básico . Le enseñará cómo:

  • Crea tu primera página AMP usando código repetitivo.
  • Ponlo en escena.
  • Valide que sea compatible con AMP ( este es un paso muy importante ) utilizando el validador de Google.
  • Prepárese para su publicación y distribución.

En tu marcado, verás que algunos elementos tienen una etiqueta AMP. Por lo tanto, la etiqueta img se convierte en amp-img. La etiqueta anim se convierte en amp-anim. La etiqueta de video se convierte en amp-video.

Etcétera.

¿Qué deben hacer los usuarios de WordPress?

Si quieres probar AMP, estás de suerte.

El 24 de febrero de 2016, Automattic lanzó un complemento AMP oficial . Por lo tanto, los usuarios de WordPress están a sólo un complemento descargable del contenido optimizado para AMP.

Sin embargo, tenga esto en cuenta: según la página oficial del complemento AMP , el complemento no admite páginas ni archivos. Solo publicaciones.

Pero una vez que activas el complemento, bam, ¡todas tus publicaciones se amplifican automáticamente!

Con el complemento activo, todas las publicaciones en su sitio tendrán versiones compatibles con AMP generadas dinámicamente.

Puedes ver la versión AMP de tus publicaciones web poniendo "/amp" al final de la URL. Por ejemplo, la versión AMP de yourwebsite.com/amp-wicked-fast se convierte en yourwebsite.com/amp-wicked-fast/amp.

Y si es cliente de la plataforma Rainmaker : tenemos AMP en nuestras pantallas de radar. No vamos a precipitarnos en nada, dada la historia de Google de cambios dramáticos de 180 grados . Pero si AMP demuestra ser importante en el futuro, ofreceremos una solución AMP sencilla a nuestros usuarios.

¿AMP es un factor de clasificación de búsqueda?

No.

John Mueller de Google afirmó que AMP no es un factor de clasificación . Sí dijo que "la conversión de páginas al formato AMP satisfará la señal de clasificación compatible con dispositivos móviles, pero no hay una señal de clasificación que esté asociada únicamente con AMP".

Matt Southern, redactor del Search Engine Journal, señala:

“Mi pregunta es: ¿qué importa si AMP es una señal de clasificación o no si el contenido de AMP ya tiene un billete de ida al principio de la primera página? En su mayor parte, el contenido AMP ya se ubica por encima de los resultados orgánicos, lo cual es uno de los mayores aumentos de clasificación que uno puede pedir”.

Por lo tanto, hay una ventaja en salir y estar por delante de sus competidores en el juego de contenido móvil: una zanahoria en un palo que la gente de Distilled le saluda en la cara en este video de Whiteboard Friday .

Otra razón por la que te recomiendo que veas el vídeo de Whiteboard Friday es que la gente de Distilled analizó otra distinción importante que ofrece AMP: entrega súper rápida a través de un servidor de caché.

Tom Anthony, jefe de RD de Distilled, dice:

"Y luego todo esto está diseñado para almacenarse en caché de manera que Google pueda alojar estas páginas, alojar su contenido real allí mismo, y así ya ni siquiera necesitan buscárselo".

Solo para sonreír, esto es lo que el blog de Google dijo sobre su nuevo enfoque de almacenamiento en caché :

“Por eso, como parte de este esfuerzo, hemos diseñado un nuevo enfoque de almacenamiento en caché que permite al editor continuar alojando su contenido y al mismo tiempo permitir una distribución eficiente a través del caché global de alto rendimiento de Google. Tenemos la intención de abrir nuestros servidores de caché para que cualquier persona pueda utilizarlos de forma gratuita”.

Me gusta gratis.

¿AMP afectará su publicidad?

No debería.

Según Google , “Queremos admitir una amplia gama de formatos publicitarios, 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".

Y en caso de que se lo pregunte, aquí hay una lista de redes publicitarias compatibles del sitio oficial del Proyecto AMP de Google:

  • A9
  • Adformar
  • anuncioreactor
  • AdSense
  • Tecnología publicitaria
  • Punto y medios
  • Haga doble clic
  • Flite
  • plista
  • Servidor de anuncios inteligente
  • rendimiento
  • Revcontento

Por cierto, creo que AMP también pretende calmar los temores de los editores sobre la creciente adopción de bloqueadores de anuncios . Pero esa es otra historia para otro momento. Probablemente sea hora de terminar con esto.

A ti …

Guau. Cubrimos mucho terreno aquí.

Gracias por quedarte conmigo. Espero que esto le haya resultado útil y haya respondido todas sus preguntas sobre el Proyecto Google AMP.

Si no, no dudes en escribirme en los comentarios a continuación. Además, deja un comentario si tienes algo que agregar a lo que escribí o si me perdí algo.

De cualquier manera, espero tener noticias suyas.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir
Suscribete a Nuestro Boletin
Ingresa tu correo y suscribete  Learn more!
icon