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

Ver el vídeo. Ignore la copia.

Ese es mi consejo para ti una vez que ingreses al sitio de Google dedicado al nuevo Proyecto de páginas móviles aceleradas (AMP):

"El Proyecto de páginas móviles aceleradas (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 es un desarrollador y lee la copia, la jerga se lo 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 a continuación).

O simplemente puede leer esta guía porque será lo más divertido que haya tenido leyendo sobre AMP y cómo afecta su marketing de contenido.

Lo prometo.

¿Qué es el proyecto AMP de Google?

Desde el nacimiento de la filosofía Zero Moment of Truth de Google en 2011, no ha sido ningún secreto que quieren "mejorar drásticamente el rendimiento de la Web móvil".

Y probablemente no necesito decirte que hay 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 haya 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 su bandeja de entrada de correo electrónico ... ansioso por consumir el contenido.

Pero nunca llega.

Bueno, viene, pero en un mosaico convulso de imágenes, videos y anuncios temblorosos y espasmódicos mientras se carga la página. Miras con horror, los ojos dilatados, rebotando en tu asiento del metro como quien tiene que ir al baño.

"¿Cuanto va a durar esto?" no le gritas a nadie en particular.

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

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

¿Qué tan rápido AMP hará sus páginas?

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

Pero en serio, ¿qué tan rápido?

Jon Parise, ingeniero de software de Pinterest, dijo: "Las páginas móviles aceleradas se cargan cuatro veces más rápido y usan ocho veces menos datos que las páginas optimizadas para dispositivos móviles tradicionales".

¡Cuatro veces más rápido es bueno! Pero, ¿qué significa eso para usted, nuestro amigable 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ó completamente en dispositivos móviles 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 tomó 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 arreglado.

¿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 marco de tiempo que nuestro viajero del metro está dispuesto a esperar. Él, como el 40 por ciento de la población, rescató a los 3 segundos. ¡2,99 segundos lo están cortando! Eso no es una gran mejora.

Es cierto, pero la diferencia es que en el primer escenario que no es de 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 la versión 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 tarda alrededor de 0,33 segundos.

En otras palabras, parpadea dos veces y tú, nuestro viajero del metro, puedes comenzar 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 o programador (y ni siquiera estoy seguro de si esas 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, hay varias docenas de paquetes de información que son "llamados", 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 anfitriones del Times, la mayoría a una ráfaga 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á entrando, por lo que 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 para complementos sociales, carruseles de imágenes, SlideShares y videos. Y luego probablemente haya software de análisis, anuncios y scripts de seguimiento que se ejecutan en segundo plano.

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

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

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

Imagínese si fue al banco, se acercó al cajero y pidió $ 100, 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 operara 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 una "llamada".

Sin embargo, si el banco se optimizó 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 solo 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 puede llamar es el javascript de AMP", dijo Mike. “Todo está envuelto en un paquete. Te entrego todo a la vez ".

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

“Comparemos esto con un auto de carreras. Si quieres que un coche de carreras sea más rápido, le das un motor más rápido y le quitas todo el peso. En esta reducción de peso, también elimina elementos como asientos traseros, aire acondicionado, etc. AMP no es diferente de eso. Es la versión reducida de una web normal, porque Google se preocupa más por la velocidad que por las funciones ingeniosas ".

¿Sientes esa picadura de amargura en la última línea? No es tu imaginación. Llegaremos a eso en un momento. Primero, veamos una experiencia AMP para ayudarlo a ver lo que quiero decir.

¿Qué aspecto tiene el contenido para móviles optimizado para AMP?

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

1. Saca tu teléfono inteligente.
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 de AMP obtiene la máxima facturación. Está en el carrusel que se encuentra sobre el pliegue. Las entradas estándar se encuentran debajo.

Puede desplazarse por ese carrusel y, cuando encuentre un artículo de AMP que le guste, haga clic en él. Así es como se verá:

Divertida lectura, ¡eh!

¿Por qué Google está haciendo esto y 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 de la web móvil durante los últimos cinco años, por lo que hemos estado escribiendo sobre la importancia de una velocidad de sitio web muy rápida (hay seis herramientas para probar la velocidad de su sitio en ese artículo, por cierto) durante 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 pueda distribuir contenido rápido, más contenido podrá consumirse.

Sin embargo, hay algo más en este movimiento: Google está tratando de 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 en el equipo XD de Adobe, escribió en Smashing Magazine: "Son esencialmente agregadores de noticias elegantes con renderizadores personalizados creados sobre formatos de distribución patentados".

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

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

Hasta ahora, han participado algunos editores de noticias de renombre:

• Time Inc.
• El Atlántico
• Vox
• BBC
• El Huffington Post

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 vienen en al menos dos variedades:

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

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

Tenga en cuenta que no solo se ven afectadas las apariencias; de fábrica, AMP no admite formularios, lo que significa que las páginas de 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 grandes editores utilizan AMP, pero ¿eso significa que AMP quiere perjudicar 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 a través de optimizaciones de rendimiento intensivas, los editores a menudo descuidan esto debido a las 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?

Depende.

• ¿Eres un gran editor de noticias? Entonces, entre en pánico, a menos que ya tenga una estrategia sólida para la experiencia del usuario móvil. Que ya debería haber tenido hace meses, pero bueno.
• ¿Obtiene una fuente significativa de tráfico desde el móvil? Nuevamente, debe asegurarse de que su estrategia para la experiencia móvil sea sólida como una roca. Probablemente desee ver y ver cómo se desarrolla AMP, pero podría valer la pena algunos experimentos.
• ¿Estás en un nuevo mercado sin mucha competencia? Asegúrese de optimizar su contenido móvil en los próximos 30 días, pero no se asuste.
• ¿No encajas en ninguna de las categorías anteriores? Luego, siéntese sobre sus manos y controle lo que sucede.

"Definitivamente algo para mantener en el radar de un editor", me dijo nuestro director de producto y fundador de StudioPress, Brian Gardner. "Pero supongo que será un trato 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 Jake Goldman, presidente y fundador de 10up, una agencia de consultoría de gestión de contenido de WordPress, también sugirió:

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

Pero digamos que sí quieres jugar con AMP.

Cómo crear su primera página AMP

Aquí es donde puede levantarse los pantalones de desarrollador de niño / niña grande, porque se necesita un marcado básico para comenzar con AMP.

Te recomiendo que sigas este tutorial básico. Le enseñará cómo:

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

En su marcado, verá 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 <video> se convierte en <amp-video>.

Y así.

¿Qué deberían hacer los usuarios de WordPress?

Si quieres probar AMP, estás de suerte.

El 24 de febrero de 2016, Automattic lanzó un complemento oficial de AMP. Por lo tanto, los usuarios de WordPress están a solo 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 activa el complemento, bam, ¡todas sus publicaciones se amplifican automáticamente!

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

Puede ver la versión AMP de sus publicaciones web colocando "/ 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 Rainmaker Platform: tenemos AMP en nuestras pantallas de radar. No vamos a apresurarnos a hacer nada, dado el historial de cambios dramáticos de 180 grados de Google. 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. Dijo que "convertir páginas al formato AMP satisfará la señal de clasificación optimizada para dispositivos móviles, pero no hay una señal de clasificación que esté asociada únicamente con AMP".

El escritor del personal de Search Engine Journal, Matt Southern, 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 boleto de ida a la parte superior de la primera página? En su mayor parte, el contenido de AMP ya está por encima de los resultados orgánicos, que es uno de los mayores aumentos de clasificación que se pueden 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 agita en su cara en este video de Whiteboard Friday.

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

Tom Anthony, director de I + D de Distilled, dice:

"Y luego todo esto está diseñado para almacenarse en caché en gran medida, de modo que Google pueda alojar estas páginas, alojar su contenido real allí mismo, y para que ya ni siquiera tengan que buscarlo".

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

“Entonces, como parte de este esfuerzo, hemos diseñado un nuevo enfoque para el almacenamiento en caché que permite al editor continuar alojando su contenido al tiempo que permite 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 cualquiera 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. Todos los sitios que utilicen AMP HTML conservarán su elección de redes publicitarias, así como cualquier formato que no perjudique 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
• Adform
• AdReactor
• AdSense
• AdTech
• Dot y Media
• Haga doble clic
• Flite
• plista
• Servidor de anuncios inteligente
• Yieldmo
• Revcontent

Por cierto, creo que AMP también está destinado a 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 que terminemos con esto.

A ti …

Guau. Cubrimos mucho terreno aquí.

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

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

De cualquier manera, espero tener noticias tuyas.