Introducción al AMP de Google para WordPress

Category: Tutorial 7 0

Google AMP (Accelerated Mobile Pages) es una nueva tecnología disruptiva diseñada para hacer la web más amigable para los móviles, significativamente más rápida y confiable. Esta serie de posts está dedicada a explorar el AMP de Google y cómo configurarlo en WordPress.

Aquí hay una lista de cosas que vamos a cubrir en esta serie de publicaciones:

  • Primero, haremos un rápido repaso de las tendencias actuales de la web móvil – justificando la necesidad de AMP
  • También tomaremos otra pequeña visión general sobre cómo la velocidad de la página impacta en nuestros negocios y ver cómo AMP puede ayudar
  • A continuación, aprenderemos qué es AMP, veremos algunos ejemplos de la vida real de lo que puede hacer.
  • Eso marcaría el final de este artículo. En el próximo artículo, aprenderemos a configurar el AMP para WordPress

Comencemos.

Google AMP

Antes de profundizar en la información sobre el AMP, puedes seguir la guía de vídeo del WPCrafter que se encuentra en nuestro post.

Según el Informe de Tendencias de Internet de 2015, publicado por la empresa consultora KPCB, el adulto medio pasó 5,6 horas diarias en Internet en 2015. De ese total, 2,8 horas se pasaron en un dispositivo móvil. Esto es un aumento significativo con respecto a 2010, cuando se dedicó un promedio de sólo 0,4 horas al día a Internet a través de un dispositivo móvil.

Fuente: Ezoico

El uso medio de Internet móvil creció un 600% entre 2010 y 2015

Fuente: Ezoico

Un estudio publicado en el Informe de Preferencias de Dispositivos de Consumo de los Estados Unidos encontró que más de dos tercios de los correos electrónicos fueron abiertos en un dispositivo móvil, con el 52% siendo abiertos en un smartphone y el 16% en una tableta.

Fuente: Ezoico

Un informe sobre aplicaciones móviles en EE.UU. para el año 2015, publicado por comScore, encontró un aumento del 90% en el tiempo total dedicado a los dispositivos móviles por parte de los adultos de EE.UU. entre 2015 y 2013. El mismo informe también indicó que las aplicaciones móviles representan el 54% del tiempo total dedicado a consumir medios digitales, y los navegadores móviles representan otro 8% del tiempo total.

En total, el 62% del tiempo de uso de los medios digitales se gasta en un dispositivo móvil.

Así que sí, una estrategia de móvil-primero es muy importante. Ahora hablemos un poco sobre la velocidad.

Los tiempos de carga importan… importan mucho. Es ese un factor crítico que puede influir en otros factores importantes como los ingresos, la tasa de rebote, el tiempo en el sitio, las clasificaciones de búsqueda y el rendimiento en casi todos los demás canales de comercialización digital.

Dado que los ingresos son el objetivo final de cualquier negocio o sitio web, aquí hay un hecho interesante de un estudio de investigación de 2014 “La velocidad del sitio está afectando los ingresos de todos”, realizado por la empresa de marketing digital Protent. El punto culminante del estudio fue que páginas más rápidas hacen mucho más dinero .

Fuente: Protent

El dólar por página vista (llamémoslo DPPV) aumenta un 20% al reducir el tiempo de carga de 8 a 5 segundos (reducción del 37,5%).

Pero la verdadera victoria viene cuando el tiempo de carga de la página es inferior a un segundo o menos. Pasar de un tiempo de carga de dos a un segundo resulta en 2 veces más en el dólar por páginas vistas.

No sólo los ingresos, la velocidad del sitio también afecta al rendimiento de la compartición social . Los chicos de Protent llevaron a cabo un experimento no tan exhaustivo donde enviaron 100 clics pagados (de anuncios de Facebook) a dos páginas.

La página A se cargó en 2 segundos y la B en 4 segundos. ¿Adivina qué? La Página A obtuvo 10 acciones mientras que la Página B sólo obtuvo dos acciones. Aunque el tamaño de la muestra era demasiado pequeño para validar la hipótesis, ¡pero cuenta una historia significativa!

Al ser testigos del crecimiento explosivo del mercado de la Internet móvil, la demanda de un acceso más rápido a la Internet y de mejores tecnologías de la web en términos de velocidad, accesibilidad y fiabilidad adquirió una importancia primordial. Pioneros como Google se dieron cuenta rápidamente de que se podía hacer mucho para alimentar esta creciente demanda, y así nació el Proyecto AMP.

¿Qué es el AMP?

Fuente:BusinessofApps.com

AMP o Páginas Móviles Aceleradas es un marco abierto para la construcción de una web móvil más rápida, estandarizada y con mayor capacidad de respuesta. La belleza de AMP es que funciona justo encima de las tecnologías web existentes y mejora drásticamente la experiencia del usuario móvil. Por eso Google prefiere las páginas web de AMP y las clasifica más arriba en las SERP.

¿Cómo mejora el AMP la velocidad?

El marco abierto de la AMP fue diseñado para aprovechar las tecnologías web existentes y construir sobre ellas. Por lo que funciona de inmediato en sistemas de gestión de contenidos como WordPress.

La AMP sigue un marco estandarizado para construir páginas web y asegura que todas las páginas web existentes puedan adaptarse a ese marco. En términos un poco más técnicos, permite sólo los scripts asíncronos, no permite mecanismos externos de bloqueo del renderizado, permite sólo el CSS en línea y mucho más.

En resumen, la AMP primero hace el diseño de la página web (casi instantáneamente) y carga el contenido de forma prioritaria. Elimina cualquier espera de recursos y minimiza severamente el número de solicitudes. Cuando todos estos factores funcionan en perfecta armonía entre sí, se obtiene un sitio web de gran velocidad que se carga casi instantáneamente.

Mira la siguiente prueba de velocidad compilada por PenguinWP, que muestra el “efecto AMP”. Usando el AMP, fueron capaces de:

  • Aumenta la puntuación de PageSpeed en 3 puntos
  • ¡Reducir el tiempo de carga de la página en un 72% de 5 a 1,4 segundos!
  • Reducir el tamaño de la página en un 80% y el número de solicitudes en un 82%

Aquí hay una tabla que comparte los números:

PageSpeed Score Tiempo de carga Tamaño total de la página Solicitudes Versión original 92 5 1024 118 Versión AMP 95 1.4 206 21 La diferencia del AMP 3 -3.6s -794KB -97 Porcentaje de mejora 3% -72% -80% -82%

Preservación del contenido

AMP fue diseñado para hacer la web más hermosa y más sensible para los dispositivos móviles. Lo hizo eliminando algunas características no esenciales de las tecnologías web existentes.

Eso no significa que todas las características geniales de la web moderna sean eliminadas. No. Simplemente migra todas esas características de contenido rico en un marco estandarizado con un mínimo de margen de maniobra.

AMP soporta completamente los carruseles de imágenes, mapas, plug-ins sociales, visualizaciones de datos y videos para hacer que las historias de los editores sean más interactivas y se destaquen.

Estudio de caso: The Washington Post

Fuente: Proyecto AMP

Veamos un caso de estudio del Washington Post con AMP. Después de implementar AMP, The Post vio un incremento en los usuarios que regresaban de la búsqueda móvil en un 23%. Esto necesita una pequeña explicación.

Casi el 55% del tráfico de The Post proviene de los dispositivos móviles – lo que está de nuevo en sintonía con las estadísticas compartidas al principio de este artículo. Si los datos no se cargan en 3 segundos, la gente empieza a salir.

Tradicionalmente, el 51% de los usuarios de búsqueda móvil regresan a The Washington Post en 7 días. Para los usuarios que leen las historias publicadas en AMP, este número salta al 63%. Así, con AMP, la retención del tráfico de búsqueda móvil aumentó en un 23%.

No sólo esto, los tiempos de carga de la página promedian los 400ms, lo cual es una mejora del 88% después de AMP. Hoy en día se envían más de 1000 artículos a través de AMP.

Genial. ¿Cómo puedo acceder al AMP?

Puedes acceder a la versión AMP de cualquier página web añadiendo “/amp” a la URL de cualquier página web. Si el sitio no es compatible con AMP o se encuentra con un error de interpretación, está diseñado para degradarse con gracia a la versión original de respuesta móvil del sitio web.

Distribución de contenidos

“También conocido como CDN libre para artículos de AMP”

Más conocido como Google AMP Cache, este servicio gratuito de Google permite a los editores alojar su contenido y al mismo tiempo permite una distribución eficiente a través de la red mundial de caché de alto rendimiento de Google. En otras palabras, es como un CDN gratuito para los sitios AMP.

Genial. ¿Cómo funciona?

Las páginas web compatibles con AMP reciben una atención especial por parte de Google. Cuando empiezas a indexar la versión AMP de las páginas de tu sitio web, Google las almacena en algo llamado caché AMP. Si todavía eres dueño del contenido, Google simplemente ayuda a servirlo a rincones distantes del mundo. En términos de actualización del contenido en caché, esto es lo que Google tiene que decir:

“Cada vez que un usuario accede al contenido del AMP desde la caché, el contenido se actualiza automáticamente, y la versión actualizada se sirve al siguiente usuario una vez que el contenido ha sido almacenado en la caché”.

¿Cómo accedemos a ella?

Bueno, veamos. Si tienes una URL de una página web, primero tienes que comprobar si el AMP está activado. Lo haces simplemente añadiendo “/amp” a la URL. Aquí hay una fórmula rápida para obtener la URL de la caché de AMP de Google de cualquier sitio web con AMP.

  1. Consigue la versión AMP de la página web añadiendo /amp a la URL. Si es válido, proceda al siguiente paso. Si no, detente.
  2. Si aparece una página 404, ese sitio web no ha implementado el AMP.
  3. Si ves que se carga el contenido, entonces se instala AMP.
  4. Para obtener el contenido del Caché AMP de Google, simplemente añada https://cdn.ampproject.org/c/ al principio del URL del AMP, excluyendo la parte “www”.
  5. Comienza con el nombre del dominio principal ( excluyendo www ) y copia el URL del AMP de la página web.
  6. Añade https://cdn.ampproject.org/c/s/ a la URL y eso debería darte la URL del Caché de Google AMP.

Tomemos un ejemplo de un artículo de Forbes y pongamos a prueba la fórmula anterior.

  • Esta es la URL del artículo original de Forbes:
http://www.forbes.com/sites/allbusiness/2015/10/24/10-great-paid-wordpress-themes-of-2015/
  • Para obtener la versión AMP, simplemente añadimos /amp a la URL original.
http://www.forbes.com/sites/allbusiness/2015/10/24/10-great-paid-wordpress-themes-of-2015/amp/
  • Ahora, para obtener la URL de la Caché de AMP de Google, primero copiamos la URL de AMP empezando por el nombre de dominio principal, es decir, excluyendo la parte “www”, hasta el final. Eso nos da:
forbes.com/sites/allbusiness/2015/10/24/10-great-paid-wordpress-themes-of-2015/amp/
  • A continuación añadimos https://cdn.ampproject.org/c/s/ a esa URL para obtener la URL del Caché AMP de Google de la misma página.
https://cdn.ampproject.org/c/s/forbes.com/sites/allbusiness/2015/10/24/10-great-paid-wordpress-themes-of-2015/amp

¡Mira, funcionará!

Anuncios inteligentes

La creación de un contenido de calidad requiere recursos importantes. Los anuncios ayudan a financiar servicios y contenidos gratuitos en la web. La AMP fue diseñada para incorporar esta idea y se ha asociado con más de 75 de las principales redes de anuncios.

AMP soporta una amplia gama de formatos de anuncios, redes de anuncios y tecnologías. Cualquier sitio que utilice AMP conservará su elección de redes publicitarias, así como cualquier formato que no perjudique la experiencia del usuario.

Analítica

Los editores también deben comprender el comportamiento de los usuarios cuando interactúan con su contenido. Por eso AMP también trabaja bien con más de 25 de los principales proveedores de soluciones analíticas como comScore, Google Analytics, Krux y más.

Proveedores de análisis apoyados por la AMP al 1 de noviembre de 2016; Fuente: Proyecto AMP

Conclusión

Las principales plataformas de generación, agregación y análisis de contenidos han comenzado a implementar AMP en sus sitios web. Twitter, Pinterest, WordPress.com, Chartbeat, Parse.ly, Adobe Analytics y LinkedIn están entre el primer grupo de socios tecnológicos que planean integrar las páginas HTML de AMP. Google también planea hacer de Google News la primera plataforma de AMP.

Es interesante ver cómo este ambicioso proyecto cambiaría el futuro de la web.

Personalmente me encanta el concepto de las páginas AMP. Es un placer leerlas, consumen muchos menos datos que las páginas web preparadas para el móvil, y muestran los anuncios de una manera completamente discreta.

Leer, consumir y compartir contenidos es mucho más simple y divertido con AMP. En el próximo artículo, aprenderemos a integrar AMP con WordPress.

¿Qué opina del AMP? ¿Va a mejorar?

Related Articles