¬ŅQu√© son las p√°ginas AMP y por qu√© mejoran la experiencia de los ‘mobile users’?

que es p√°ginas AMP

¬ŅQu√© son las p√°ginas AMP y por qu√© mejoran la experiencia de los ‘mobile users’?

Lo bueno, si r√°pido, dos veces bueno. Esta adaptaci√≥n del refranero armoniza con las √ļltimas pol√≠ticas de desarrollo de Google, en ‘guerra’ abierta contra la lentitud de carga en p√°ginas web. Y es que el famoso buscador de Alphabet emplea, desde 2010, la velocidad de carga como factor de posicionamiento web, ¬ęno s√≥lo para mejorar su clasificaci√≥n en los motores de b√ļsqueda, sino tambi√©n para mejorar la experiencia de todos en internet¬Ľ, como explic√≥ Amit Singhal en el blog de Google.

Advertencias, cambios algorítmicos y herramientas gratuitas como PageSpeed Insights han concentrado los esfuerzos de Google por solucionar este problema. Pero en 2016 la multinacional presidida por Sundar Pichai dio un paso adelante con el lanzamiento de páginas AMP, una iniciativa open source que pretendía frenar el avance del servicio Instant Articles de Facebook y otros competidores.

En los √ļltimos a√Īos, sin embargo, las p√°ginas m√≥viles aceleradas (AMP) se han impuesto como una soluci√≥n eficaz a lentitud de carga, especialmente en aquellas webs con elevados vol√ļmenes de contenido audiovisual. De ah√≠ que BBC News, The New York Times, The Guardian, The Washington Post, Mashable, Gizmodo y otros medios de comunicaci√≥n muestren una p√°gina AMP a sus mobile users. No obstante, eBay, Airbnb y otras plataformas ajenas al sector de la prensa utilizan versiones AMP.

Dise√Īo AMP, una versi√≥n ‘mobile-friendly’ para los dispositivos inteligentes

El dise√Īo AMP en p√°ginas web se define como una versi√≥n compatible con la navegaci√≥n mobile. Utilizan c√≥digos open source pertenecientes a bibliotecas p√ļblicas (AMP Project de OpenJS Foundation, AMP de Google Developers, etc.), con el objetivo de mejorar la experiencia de navegaci√≥n y acelerar la carga en p√°ginas web ‚ÄĒde ah√≠ su denominaci√≥n, AMP, por las siglas en ingl√©s de ¬ęP√°ginas Aceleradas para M√≥viles¬Ľ.

Desde una perspectiva t√©cnica, las p√°ginas AMP operan como duplicados simples de hojas HTML y JavaScript, que contienen lo esencial para visualizar la p√°gina web en el menor tiempo posible. Para reducir el n√ļmero de solicitudes HTTP y aprovechar la memoria en cach√©, utilizan la red de distribuci√≥n de contenido de Google Cloud: Cloud CDN.

Esta CDN logra que p√°ginas AMP funcionen r√°pida, eficientemente. Cuando los ‘robots’ rastreadores de Google detectan la versi√≥n AMP de un sitio web, procede a validarla y almacenarla en cach√© en sus servidores cloud. Desde entonces mostrar√° a los internautas esta ‘instant√°nea’ de la p√°gina web, en lugar de procesar nuevamente todos sus recursos y c√≥digos HTML, CSS, JS, etc.

que es p√°ginas AMP comparativa

La codificaci√≥n AMP restringe las etiquetas disponibles y tiende a homogeneizar el dise√Īo web, ofreciendo una mejora en la velocidad y la navegabilidad a cambio.

Aunque fuera de dudas, la efectividad del dise√Īo AMP queda patente en una estad√≠stica aportada por Rudy Galfi, gerente del Proyecto AMP de Google: el promedio de carga del contenido en webs con versi√≥n AMP es de 0,7 segundos, mientras que el tiempo requerido para cargar estas mismas p√°ginas sin dicha codificaci√≥n alcanza los 22 segundos.

A trav√©s de Google Developers y otras plataformas asociadas a su buscador, Alphabet Inc. ha fomentado la propagaci√≥n de versiones AMP, con la doble finalidad de optimizar la navegaci√≥n desde m√≥viles y de aumentar, a su vez, el rendimiento de sus anuncios display en estos dispositivos. Como explic√≥ David Besbris en un conocido art√≠culo del blog de Google, se pretende que ¬ęel contenido enriquecido como videos, animaciones y gr√°ficos funcionen junto con los anuncios inteligentes y se carguen instant√°neamente¬Ľ. Es importante, asimismo, que ¬ęel mismo c√≥digo funcione en m√ļltiples plataformas y dispositivos, para que el contenido pueda mostrarse en todas partes en un instante, sin importar el tipo de m√≥vil, tableta o dispositivo utilizado¬Ľ.

Un vistazo a los m√ļltiples beneficios de las p√°ginas AMP

Tiempos de carga rel√°mpago

Incrementar la velocidad de carga es su objetivo, su raz√≥n de ser. El dise√Īo AMP utiliza el almacenamiento en cach√© de Google Cloud y las hojas HTML reducidas para cargar instant√°neamente una versi√≥n simplificada. De este modo los internautas permanecen un tiempo m√≠nimo en la ‘sala de espera’ de una p√°gina web, lo que aumenta sus interacciones dentro del sitio y disminuye m√©tricas tan perjudiciales como la tasa de rebote.

Menores tasas de rebote

La lentitud de carga exaspera incluso a los internautas más pacientes, motivo por el que incrementa, por lo general, KPIs como la tasa de abandono y la tasa de rebote y minimiza el tiempo de permanencia en el sitio web. La implementación de páginas AMP revierte estas métricas negativas, al acelerar los tiempos de carga durante el acceso a la home y durante la navegación interna. Y dado que los usuarios perciben positivamente la inmediatez, también repercute en las conversiones. Nada más beneficioso, pues, para la UX de tus clientes que crear páginas AMP.

Fácil implementación y personalización

Pese a suponer una peque√Īa revoluci√≥n para los mobile users, la codificaci√≥n de p√°ginas AMP no interfiere en las hojas HTML, JS y CSS existentes, siendo innecesario redise√Īar ab ovo el sitio web. (No obstante, cada vez m√°s desarrolladores recomiendan crear las versiones de escritorio, m√≥vil y AMP de manera simult√°nea, para as√≠ facilitar su integraci√≥n).

La implementaci√≥n manual requiere un proceso sencillo, accesible a los conocimientos del desarrollador promedio. Al uso de plantillas espec√≠ficas (AMP HTML y AMP JS) se suma la estructuraci√≥n de c√≥digos CSS y JavaScript; los primeros se insertan dentro de la etiqueta ” en el ”, mientras que en los segundos se recurre a equivalencias AMP disponibles en las bibliotecas de WebComponents y Custom Elements de Google Developers. Adem√°s, las p√°ginas AMP emplean, para la integraci√≥n de contenidos audiovisuales, tags espec√≠ficas como ‘amp-img’ o ‘amp-video’.

Pero las p√°ginas AMP en WordPress, Joomla o Drupal pueden implementarse y personalizarse con el uso de aplicaciones, pensadas para simplificar esta tarea. Adem√°s del plugin oficial ofrecido por AMP Project Contributors, los desarrolladores de WordPress disponen de ‘All in One SEO Pack’ y ‘PWA for WP & AMP’. CMS como Joomla cuentan con extensiones como ‘wbAMP’, ‘JAMP’ o ‘Accelerated Mobile Pages’, mientras que Drupal ofrece su m√≥dulo ‘Accelerated Mobile Pages’.

que es p√°ginas AMP usuarios

La velocidad de carga repercute en KPIs clave como las interacciones internas, las tasas de rebote o el tiempo de permanencia en el sitio.

Incremento del ‘engagement’

Las interacciones dentro del sitio web aumentan con el uso de páginas de AMP. Un estudio de DoubleClick realizado a 150 webs reveló que el 90% de los encuestados experimentó incrementos de las métricas de engagement gracias a la codificación AMP.

Esta mejora en las interacciones ‚ÄĒmedibles a trav√©s del tiempo de permanencia, las p√°ginas vistas y otras KPIs‚ÄĒ conduce a un aumento paralelo de las conversiones y la retenci√≥n de clientes. Esta correlaci√≥n es perfectamente l√≥gica: si un usuario puede navegar c√≥modamente por un sitio web y disfrutar de sus servicio con la rapidez deseada, preferir√° adquirir productos/servicios ah√≠ en lugar de acudir a este competidor que demora 2-3 segundos en cargar.

Mayor visibilidad web

Con la actualizaci√≥n algor√≠tima Speed Update en 2018, Google aup√≥ en sus SERPs a las webs con versiones mobile de carga r√°pida, en perjuicio de las p√°ginas con peor rendimiento en estos dispositivos. En muchos casos las ‘v√≠ctimas’ de esta novedad coincid√≠an con p√°ginas sin AMP. De ah√≠ que el uso de esta codificaci√≥n sea una forma excelente de lograr una mayor visibilidad online para los usuarios m√≥viles.

Desde una perspectiva SEO, crear p√°ginas AMP es beneficioso para las webs listadas en el Mobile First Index. Este subranking de Google, dedicado a las versiones mobile de p√°ginas web, ha cobrado una gran relevancia en los √ļltimos a√Īos gracias al fen√≥meno del comercio m√≥vil o el auge del comercio social.

Un plus para el rendimiento de la publicidad ‘display’

La codificaci√≥n de una p√°gina AMP es beneficiosa para el rendimiento de los formatos publicitarios de Google Ads. Y es que la lentitud de carga tambi√©n lastra el desempe√Īo de los anuncios display, limitando el potencial monetario de portales de noticias y medios de comunicaci√≥n para los mobile users. A prop√≥sito de este punto, quiz√° te interese conocer estos trucos de Google Ads para mejorar tus campa√Īas de marketing.

¬°Cuidado! Una p√°gina AMP presenta desventajas a considerar

¬ŅSon indispensables las p√°ginas AMP? Diversos estudios avalan la necesidad de implementarlas. Y es que el 53% de los usuarios abandonar√≠a una p√°gina web si tarda 3 segundos en cargar, seg√ļn una encuesta de Double Click. La plataforma Kissmetrics, por su parte, reduce este porcentaje al 47% cuando la demora se reduce a 2 segundos.

Una p√°gina AMP presenta, sin embargo, desventajas nada halag√ľe√Īas para los desarrolladores web. Sacrifican una parte de su control sobre el contenido original y la personalizaci√≥n, por ejemplo. Aunque esta tecnolog√≠a open source permite adaptar los par√°metros b√°sicos de la plantilla, suponen renunciar a una gran n√ļmero de etiquetas y c√≥digos diferenciadores. En una palabra, las p√°ginas AMP tienden a homogeneizar el dise√Īo web.

Por otra parte, el proyecto AMP opera al margen de los est√°ndares de W3C (World Wide Web Consortium), un conjunto de protocolos y lenguajes de uso referencial para la comunidad desarrolladora.

Con sus virtudes y defectos, la codificaci√≥n AMP aparece como una soluci√≥n eficaz a la lentitud de carga en tablets y smartphones. A fin de cuentas, ¬ęlo bueno, si r√°pido, dos veces bueno¬Ľ, ¬Ņverdad?