martes, marzo 19, 2024
InicioBlogQué es AMP y por qué Implementarlo

Qué es AMP y por qué Implementarlo

AMP son las siglas de Accelerated Mobile Pages. Se trata de una forma de construir páginas web que se renderizarán rápidamente para el contenido estático. No es una técnica totalmente diferente para la creación de páginas: en realidad consiste en HTML normal con algunas restricciones y etiquetas especializadas añadidas y no requiere mucho trabajo adicional.

Desde que AMP fue anunciado por primera vez el 7 de octubre de 2015 ha estado rodeado de controversia y confusión. Prometió páginas más rápidas y mejores rankings, pero a cambio exigió una optimización móvil radical. Y aunque había un gran número de primeros adoptantes, la mayoría de los desarrolladores se mantuvieron relativamente reticentes a implementarlo.

Qué es AMP

El proyecto AMP (Accelerated Mobile Pages) es un marco de código abierto desarrollado por Google con la misión de proporcionar un formato de user-first para el contenido web aplicado a un tipo de página especial para mejorar la velocidad de carga y mejorando así la experiencia de usuario en dispositivos móviles. La redacción oficial es un poco confusa, así que vamos a desglosarla.

Marco de código abierto

El proyecto es oficialmente de código abierto, pero está patrocinado en gran medida, construido y promovido por Google, por lo que llegan a llamarlo un proyecto Google.

Formato user-first

Google observó que para las versiones móviles, una versión responsive es una web lenta e hinchada, y se propuso definir un nuevo estándar para diseñar páginas móviles. En este contexto, un formato de user-first significa una web rápida, especialmente en la primera interacción del usuario.

Contenido web

El objetivo inicial del proyecto era entregar páginas móviles más ligeras, pero desde entonces se ha ampliado para incluir sitios web de escritorio, historias interactivas, correos electrónicos, anuncios y soluciones de comercio electrónico.

Hoy, los principales beneficiarios de este desarrollo con los media-group, grandes generadores de contenido que han logrado un buen equilibrio entre la visitas a su versión móvil responsive, y a la versión AMP desde sus canales que más tráfico les proporcionan: Google News, Google Discover y en menor medida los resultados orgánicos.

AMP card en un móvil

Cómo funciona AMP

El funcionamiento de AMP para crear páginas de carga rápida es una combinación de una serie de elementos utilizados para optimizar la página.

El JavaScript puede utilizarse para modificar casi cualquier parte de una página web, pero también puede utilizarse para bloquear la construcción del DOM y retrasar la renderización de las páginas.

Para evitar el retraso en la renderización de las páginas a causa de JavaScript, AMP sólo permite el uso de JavaScript asíncrono. Estas páginas AMP prohíben el uso de cualquier JavaScript que haya sido escrito por el webmaster, y en lugar de utilizar JavaScript normal, una página interactiva debe estar compuesta únicamente por elementos AMP personalizados. Estos elementos personalizados pueden estar formados por JavaScript en su núcleo, pero tienen que estar especialmente diseñados para asegurarse de que no causan ninguna inhibición en el rendimiento de la página web. Está permitido el uso de JavaScript de terceros dentro de los iframes, pero no puede bloquear la renderización.

Los recursos externos, como los iframes, los anuncios o las imágenes, tienen que indicar su tamaño dentro del HTML de la página para que AMP pueda determinar el tamaño de cada elemento, así como su posición, antes de que se descarguen todos los recursos.

AMP cargará el diseño de la página antes de que se descarguen los recursos. De esta manera desvincula la maquetación del documento de la de los recursos, y sólo se necesita una única petición HTTP para maquetar todo el documento. Dado que AMP está optimizado para evitar los costosos recálculos de los diseños dentro del navegador, cuando se carguen los recursos no habrá ningún reajuste.

AMP no permite que los mecanismos de extensión bloqueen la renderizado de la página. AMP favorece las extensiones para cosas como incrustaciones de Instagram, lightboxes, tweets y similares. Estas cosas requieren peticiones HTTP adicionales y esas peticiones no pueden bloquear el diseño y la representación de la página. Las páginas que utilizan secuencias de comandos personalizadas tienen que notificar al sistema AMP que necesitarán una etiqueta personalizada en algún momento.

El JavaScript de terceros prefiere utilizar la carga sincrónica del recurso. Digamos que hay 5 anuncios en una página, y que cada uno de ellos provoca 3 cargas sincrónicas, cada una de las cuales tiene un retraso de 1 segundo, entonces tendrás 18 segundos de nada más que tiempo de carga simplemente causado por la carga de JS. Las páginas AMP permiten el uso de JS de terceros, pero únicamente en iframes que están aislados. Cuando el JS de terceros está restringido a los iframes, no son capaces de ser bloqueados de la ejecución de la página principal. Incluso cuando han desencadenado muchos recálculos de estilos, los pequeños iframes representan solo una porción DOM. El tiempo que se tarda en recalcular el estilo y los diseños está restringido por el tamaño del DOM, y los recálculos de los iframes son bastante rápidos en AMP comparación con el recálculo de los estilos y los diseños de la página.

El CSS impide todo el renderizado, la carga de la página, y también puede hacer que el código sea un poco feo. Usando AMP HTML, los únicos estilos que se permiten mantener son los que permanecen en línea. Muchas veces, esto eliminará una o más peticiones HTTP de la ruta de renderización importante, en comparación con muchas páginas web. Por otra parte, la hoja de estilo inline tiene un umbral de 50 kilobytes. Este tamaño es lo suficientemente grande incluso para las páginas más sofisticadas, pero el webmaster aún debe tener cuidado de introducir el CSS de la manera adecuada.

Las fuentes en Internet son de gran tamaño y, por ello, la optimización de las fuentes web es importante para el rendimiento del sitio web. Por lo general, una página normal sólo tendrá unos pocos scripts de sincronización y un par de hojas de estilo externas, el navegador esperará una cantidad significativa de tiempo para comenzar la descarga de estos grandes archivos de fuentes. El sistema AMP no enviará ninguna petición HTTP hasta que las fuentes hayan comenzado a descargarse. Esto es posible porque todo el JavaScript en AMP tiene el atributo de ser asíncrono y sólo permite hojas de estilo en línea. Las peticiones HTTP no bloquean al navegador para que descargue las fuentes necesarias. La tipografía es una herramienta importante que ayuda a la marca, la legibilidad y el diseño, y la optimización de las fuentes web favorecerá su estrategia general de rendimiento. Puedes reducir el tamaño total de la página, contribuyendo así a mejorar los tiempos de carga generales.

Cada vez que se mida algo en una página, se producirá un recálculo del estilo. Esto es costoso porque el navegador web tiene que ajustar todo el diseño de la página. Dentro de las páginas AMP, todas las lecturas del DOM ocurren antes de que se escriba nada. Esto se hace para asegurar que el máximo de un solo recálculo de estilos por marco. Cuando se cambia una propiedad, como el diseño, se edita la geometría de la página web, como su altura y su ancho. Cuando se edita el diseño, el navegador tiene que comprobar todos los demás elementos y reorganizar el flujo de la página. Todas las áreas que están influenciadas por esto necesitarán ser recalculadas y entonces estos elementos necesitarán ser compuestos de nuevo.

Cómo implementar AMP

El proyecto AMP proporciona una amplia documentación y recursos para convertir tus páginas, y es un proceso bastante sencillo. Es aún más fácil para aquellos que usan WordPress — puedes hacer el trabajo instalando el plugin oficial AMP, si bien a día de hoy, todas las grandes plataformas CMS tienen recursos para implementar la versión AMP.

Recursos para implementar Google AMP

Official AMP site
Validador de AMP project
Validador de AMP Code de Google

Plugins  AMP de WordPress

https://wordpress.org/plugins/amp/
https://wordpress.org/plugins/accelerated-mobile-pages/
https://wordpress.org/plugins/glue-for-yoast-seo-amp/

Cómo habilitar AMP en Squarespace

https://support.squarespace.com/hc/en-us/articles/223766868

Apps AMP para Shopify

https://apps.shopify.com/amp
https://apps.shopify.com/rocketamp

Módulos AMP para Drupal

https://www.drupal.org/project/amp
https://www.drupal.org/project/simple_amp

Extensiones Joomla para AMP

https://extensions.joomla.org/extension/accelerated-mobile-pages/
https://extensions.joomla.org/extension/wbamp-community-edition/

Validar tu versión de AMP

Sea cual sea el camino por el que vayas, es probable que tengas que hacer algunos ajustes manuales para que todos los elementos funcionen correctamente. Pero, a juzgar por todas las cuentas de primera mano disponibles online, el proceso de convertir un sitio web completo a AMP nunca toma más de una semana, a veces tan sólo un par de días.

Tan pronto como hayas aplicado todos los cambios necesarios, y que tu página está lista para AMP, es recomendable que utilices el validador de AMP que Google pone a nuestro alcance para tal fin. El validador está disponible en línea, pero también a través de la consola del desarrollador y de la extensión de Chrome. Es la misma herramienta que utiliza Google para comprobar si tu página es compatible con AMP y, por lo tanto, es apta para la validación previa. El validador te proporcionará un informe completo de todos los problemas detectados, y puedes publicar tu página tan pronto como se solucionen.

Una vez que tu página se publica y es rastreada por los bots, entrará en la caché de Google y recibirá un icono de rayo que la diferenciará de las páginas que no son AMP en las SERPs.

Verisiones AMP VS no AMP

¿Por qué implementar AMP?

Según se mencionó en la última AMP Conference, que el tiempo de carga medio para una página AMP es de 0,7 segundos, mientras que, según Google, el tiempo de carga medio para una página móvil normal es de 15 segundos. Si me apuras, sólo en ese argumento, está la la respuesta, verdad?

Bueno, no exactamente, porque una página móvil normal no es necesariamente una página optimizada, por lo que es un poco como comparar manzanas con naranjas. Una página móvil ajustada a mano puede cargarse fácilmente en menos de 2 segundos, y si te esfuerzas mucho, puedes acelerarla a un segundo o incluso superar una página AMP.

La verdadera pregunta es si estás dispuesto y si eres lo suficientemente hábil como para construir una solución personalizada para el sitio web más rápido en la versión móvil. ¿O prefieres aplicar una solución estandarizada de AMP y obtener un sitio web bastante rápido? No va a ser el más rápido, o el estéticamente mejor logrado, pero estarás allí arriba con los líderes. Dos cuestiones perfectamente asumibles.

¿Afecta AMP a los rankings?

Según Google, AMP en sí mismo no es un factor de posicionamiento. Pero no es la versión completa, porque AMP viene con mejoras dramáticas en la velocidad de la página, que sí es un factor de posicionamiento web. Y, aunque hay otras formas de diseñar páginas muy rápidas, nunca tendrás la sensación casi instantánea de una página AMP pre-renderizada.

Otro punto a tener en cuenta es que las reglas son diferentes para aquellos que dirigen un sitio de noticias. Como ya mencionamos más arriba, los media-grups pueden ver incrementado notablemente su tráfico con la utilización de AMP en Google News y Google Discover.

Resultados orgánico de páginas AMP

Principales acontecimientos

Mientras que AMP ha estado expandiéndose constantemente en lo que permite en el diseño de su página AMP, los principales desarrollos provenían de nuevas aplicaciones de AMP, como anuncios, historias y correo electrónico.

  • Octubre 2015
    AMP es anunciado por Google
  • Febrero 2016
    Las primeras páginas AMP aparecen en un panel “Historias principales”
  • Septiembre 2016
    Las páginas AMP aparecen en los resultados de búsqueda
  • Agosto 2017
    Los beneficios de velocidad de AMP se extienden a los anuncios
  • Febrero 2018
    AMP Stories y AMP Email se introducen
  • Diciembre 2018
    Se lanza un plugin oficial de WordPress
  • Abril 2019
    JavaScript está permitido en AMP

Tasa de adopción

En 2017, el equipo del proyecto AMP anunció que AMP estaba utilizando en 900K dominios y más de 2 mil millones de páginas. En 2018, las cifras han crecido a 31 millones de dominios y más de 5 mil millones de páginas. Resulta extraño que el equipo AMP no ha dado tal actualización en 2019, lo que normalmente podría significar que los números han dejado de ser impresionantes.

Sin embargo, si nos fijamos en las estadísticas proporcionadas por W3Techs, se puede observar que la proporción de sitios web que utilizan AMP ha crecido en un 70% solo en el último año, de 0.037% a 0.064% de la web.

¿Cuál es la crítica de AMP?

Desde que AMP fue lanzado ha recibido muchas críticas, algunas de ellas tal vez justificadas, tanto en la implementación técnica como en las implicaciones del control por parte de Google. Si tienes ganas de ir por el “agujero del conejo”, entonces aquí está uno de los muchos artículos que critican a AMP, con enlaces a otros artículos de ideas afines que a su vez contienen un montón de enlaces adicionales. Si por el contrario, no te apetece zambullirte en semejante volumen de información, aquí tienes un breve resumen.

Limitaciones técnicas

Inicialmente, las páginas AMP no permitían ningún JS de terceros, tenían una conexión de análisis con errores, estilos limitados, sin comentarios, sin botones para compartir en redes sociales, sin navegación, sin barra lateral y la lista continúa.

Las páginas resultantes eran bastante simples en apariencia, recordando a las primeras entradas del blog. Como te puedes imaginar, los propietarios de sitios web no estaban muy contentos de despojar sus páginas de todas las características que los hacían especiales – parecía un precio demasiado alto a pagar por una mejora en la velocidad móvil.

Control de Google

Un problema mucho más grande, sin embargo, vino con la participación de Google. Dado que Google estaba alojando las páginas AMP y sirviéndolas bajo su propio dominio, parecía que el motor de búsqueda se estaba apropiando tanto el contenido como el tráfico de sitios web de AMP (sólo en apariencia). Y luego estaba el trato preferencial de las páginas AMP en los resultados de búsqueda de Google para las búsqueda en mobile, que tampoco se veía bien.

La respuesta de AMP

A día de hoy, la mayoría de los problemas mencionados anteriormente han sido abordados por el equipo de AMP. El catálogo de AMP ha añadido una gran cantidad de componentes administrativos y de diseño, incluyendo navegación, formularios y análisis. Las páginas AMP ya no se sirven a través del dominio de Google, y el equipo está trabajando para ampliar los beneficios de la caché de Google a otras páginas rápidas.

Lo único que queda es el trato preferente por parte de Google de las páginas AMP. Aparentemente no hay planes para abordar este problema. Por el contrario, es probable que se amplíe a medida que AMP gana impulso más allá de los resultados orgánicos para la versión móvil ¿Es justo? Tal vez no.

¿Cuál es el futuro de AMP

El proyecto AMP está lejos de ser unos de los proyectos de Google que más ha evolucionado en estos años, pero parece que está aquí para quedarse. Hay una salida constante de nuevas características, el equipo ha demostrado ser confiable en abordar las preocupaciones de los desarrolladores, y las estadísticas del proyecto se ven saludables. Entonces, ¿qué es lo siguiente para el proyecto AMP?

Sitios web solo para AMP

En lo alto de la lista de prioridades, y bien al alcance de la mano del equipo de desarrolladores, es el uso de AMP para construir sitios web completamente funcionales. Hace tres años AMP era increíblemente limitado, sólo utilizable las páginas más básicas. Pero la lista de componentes que se pueden utilizar en AMP siguió creciendo, y prácticamente no hay una característica que no se pueda replicar en AMP.

Para salvar la brecha restante, AMP finalmente ha permitido el uso de JavaScript, que anteriormente era un gran NO. Está limitado a 150KB, pero debería ser suficiente para implementar aquellas características que aún no están cubiertas por AMP.

Nuevos tipos de contenido

AMP Stories y AMP Email están en las primeras etapas y aún no han visto completamente la luz, pero el equipo AMP está trabajando en esas aplicaciones: AMP Stories es un formato de narración muy similar al utilizado por Snapchat, Instagram y Facebook. AMP Emailes un correo electrónico de próxima generación que es dinámico e interactivo, básicamente una página web servida a través de un cliente de correo electrónico.

AMP Bento

Esto sigue siendo un concepto, pero el objetivo es tener la capacidad de utilizar componentes AMP de una manera «no administrada», sin cargar el archivo JS principal de AMP (v0.js), y coexistiendo con otros componentes web y marcos en la misma página. La idea es reducir la barrera de entrada al permitir algunos de los beneficios de AMP sin un compromiso total con el marco AMP. Pero, independientemente de si se trata de una estrategia de incorporación o un intento genuino de crear una web más rápida, siempre es bienvenida una mayor flexibilidad.

Pre-renderizado no AMP

Parece justo que Google permitiera extender los beneficios de la pre-renderización a las páginas que son tan rápidos como las páginas AMP. Y la solución está en marcha, pero hay dos grandes obstáculos que superar.

En primer lugar, no hay una manera confiable de evaluar el rendimiento percibido de una página que no sea AMP. Con una página AMP, tiene restricciones de diseño que garantizan que se sentirá rápido. Y aunque hay una serie de pruebas de velocidad que se pueden utilizar en páginas que no son AMP, ninguna de ellas es un reflejo preciso de lo rápido que se siente la página. Todavía no hay solución, pero puede que el equipo de AMP está en ello y es probable que sea un cruce entre el informe Chrome UX, Lighthouse y el validador AMP.

En segundo lugar, la renderización previa supone un riesgo de seguridad, ya que envía una solicitud de captura de una página antes de que haya una intención expresa de visitarla, por lo que hay un intercambio de información sin el consentimiento del usuario.

Google se deshace de esto alojando páginas AMP en su servidor y utilizándolo como buffer de información. Afortunadamente, la nueva tecnología de intercambio firmado permitirá a Google almacenar en caché páginas que no sean AMP, pero este problema está aún sin resolverse.

Si, implementa AMP

Sé que esperas que diga que depende, pero sólo depende de si eres o no un sitio de noticias o blog. En caso afirmativo, entonces deberías haber adoptado AMP hace un par de años. De lo contrario, no veo un caso convincente para adoptar AMP en un futuro próximo.

La ventaja clave de AMP es la velocidad de la página que proviene de la optimización radical y se mejora aún más a través de la caché de Google. Pero se puede lograr una velocidad similar con la optimización móvil regular, mientras que la caché de Google pronto se extenderá a páginas que no sean AMP. Por lo tanto, si tu sitio web ya es rápido no hay ningún beneficio adicional de la conversión.

Dicho esto, ya no existe un argumento en contra de AMP. En su día, solía reducir sus páginas a sus versiones más básicas. Ahora, tiene suficiente flexibilidad para construir incluso las páginas más avanzadas. Por lo tanto, si su sitio web móvil es lento y estás buscando una manera de optimizarlo, entonces AMP es una opción perfectamente válida a considerar.

Añade este blog a tu feed de Google News    Google News

Nicolás Ockier
Nicolás Ockierhttps://ockier.es/quien-soy/
Mi nombre es Nicolás Ockier, Senior SEO en Barcelona. Con más de 15 años de experiencia como SEO manager, me he convertido en un solucionador de problemas de marketing digital que determina el contenido que necesita una web en función de las consultas de los motores de búsqueda. Durante años llevo obteniendo excelentes resultados en mercados altamente competitivos. Mastodon - LinkedIn - Facebook - Twitter - Google Developer
Artículos Relacionado

DEJA UNA RESPUESTA

Por favor ingrese su comentario!
Por favor ingrese su nombre aquí

Tiempo excedido. Por favor, completa el captcha nuevamente.

Cómo funciona algoritmo de Google
¿Cómo funciona el algoritmo de Google?
LO ÚLTIMO
LO MÁS POPULAR