Páginas móviles aceleradas (AMP)

Google puso en marcha el proyecto Accelerated Mobile Pages (AMP) para que la web móvil sea más rápida y agradable de usar. Este framework de código abierto permite crear versiones de sitios web optimizadas para una carga rápida en dispositivos móviles.

Para lograrlo, implementa un tipo especial de HTML conocido como AMP HTML, que restringe ciertas etiquetas y scripts para reducir el tamaño y la complejidad de la página. Además, Google almacena las páginas AMP en sus servidores para acelerar aún más la velocidad de carga, lo que mejora los tiempos de carga.

Con AMP, se esfuerzan por mejorar la experiencia de navegación web móvil. Trabajamos para reducir los tiempos de carga de las páginas, aumentar la participación de los usuarios y mejorar el posicionamiento en los motores de búsqueda.

¿Qué es AMP?

Accelerated Mobile Pages (AMP) es un proyecto iniciado por Google para mejorar la velocidad y el rendimiento de las páginas web para móviles. Es un marco de código abierto que permite a los desarrolladores web crear versiones simplificadas de páginas web optimizadas para cargarse rápidamente en dispositivos móviles.

Las AMP (Accelerated Mobile Pages) son una excelente forma de que los desarrolladores web creen versiones simplificadas de las páginas web para que se carguen rápidamente en los dispositivos móviles. AMP utiliza un tipo específico de HTML, llamado AMP HTML, que restringe el uso de ciertas etiquetas y scripts para minimizar el tamaño y la complejidad de la página. Por ejemplo, AMP HTML no permite el uso de determinadas bibliotecas JavaScript y fuentes personalizadas, lo que puede ralentizar la carga de la página. Además, las páginas AMP deben utilizar un diseño simplificado, lo que mejora aún más los tiempos de carga.

Google almacena en caché las páginas AMP en sus servidores, lo que mejora aún más los tiempos de carga. Cuando un usuario solicita una página AMP, la versión almacenada en caché se sirve directamente desde los servidores de Google en lugar del servidor del editor, lo que permite tiempos de carga más rápidos.

Además, Google ha puesto en marcha un proceso de validación de las páginas AMP para garantizar que cumplen las especificaciones técnicas requeridas, lo que ayuda a que la página se cargue más rápido en los navegadores web compatibles con AMP.

El objetivo de AMP es crear una web móvil más rápida y fácil de usar reduciendo los tiempos de carga de las páginas, mejorando la participación de los usuarios e impulsando la clasificación en los motores de búsqueda. Las páginas AMP también están diseñadas para funcionar sin problemas en diferentes plataformas, lo que permite una experiencia de usuario coherente y positiva independientemente del dispositivo utilizado.

Visión general técnica del marco AMP HTML.

El marco AMP HTML es un subconjunto de HTML utilizado para crear páginas AMP. Es similar al HTML normal, pero con algunas restricciones y etiquetas adicionales diseñadas para mejorar el rendimiento y la velocidad de la página.

Estas son algunas de las principales características del marco AMP HTML:

• Uso limitado de JavaScript: las páginas HTML de AMP no pueden incluir JavaScript personalizado, lo que puede ralentizar la carga de la página. En su lugar, los desarrolladores pueden utilizar un conjunto de bibliotecas JavaScript preaprobadas que proporciona AMP.
• Diseño simplificado: Las páginas AMP HTML deben utilizar un diseño simplificado, lo que puede ayudar a mejorar los tiempos de carga. Esto incluye el uso de etiquetas específicas para determinados elementos de la página, como la etiqueta “amp-img” para imágenes, que añade automáticamente a la imagen los atributos de tamaño y diseño adecuados.
• Restricciones en algunas de las etiquetas HTML habituales: Algunas de las etiquetas HTML habituales, como formulario o entrada, no son compatibles. En cambio, las versiones específicas de AMP, como ‘amp-form’ y ‘amp-input’, están diseñadas para un mejor rendimiento.
• Uso de etiquetas específicas de AMP: AMP HTML incluye varias etiquetas adicionales específicas del marco AMP. Por ejemplo, la etiqueta ‘amp-accordion’ permite crear secciones ampliables, y la etiqueta ‘amp-video’ puede incrustar vídeos con los atributos adecuados para que se carguen más rápido.
• Uso de atributos obligatorios y opcionales: AMP HTML requiere ciertos atributos para etiquetas específicas con el fin de mejorar el rendimiento y garantizar el cumplimiento de las especificaciones de AMP. Por ejemplo, la etiqueta “img” debe incluir los atributos “width” y “height” para que el navegador pueda pre-renderizar la página.

Todos estos elementos trabajan juntos para cargar las páginas AMP más rápido, manteniendo la información relevante y esencial, proporcionando una experiencia de usuario mejorada en los dispositivos móviles. Es importante señalar que el HTML AMP no sustituye al HTML normal, sino que ofrece una alternativa para crear páginas de carga rápida, especialmente para la web móvil.

Principales características de AMP

Accelerated Mobile Pages (AMP) está diseñado para mejorar la velocidad y el rendimiento de las páginas web para móviles. Estas son algunas de las características clave que contribuyen a su capacidad para cargar páginas rápidamente en dispositivos móviles:

1. Reducción del tamaño de la página: Las páginas HTML AMP están diseñadas para ser más pequeñas y sencillas que las páginas HTML normales, lo que ayuda a reducir la cantidad de datos que necesita descargar y procesar el navegador. Esto puede acelerar considerablemente los tiempos de carga, sobre todo en redes móviles lentas.
2. Almacenamiento en caché: Google almacena en caché las páginas AMP en sus servidores, lo que permite servirlas directamente desde los servidores de Google en lugar de desde el servidor del editor. Esto puede mejorar aún más los tiempos de carga.
3. Priorización de la carga de recursos: AMP HTML incorpora un mecanismo para priorizar la carga de recursos, como imágenes y scripts. Esto garantiza que el contenido más crítico se cargue primero, mientras que los recursos menos esenciales se cargan en segundo plano, lo que permite al usuario ver el contenido más rápidamente.
4. Restricción de Javascript: Las páginas AMP HTML no pueden incluir ningún JavaScript personalizado, lo que puede ralentizar los tiempos de carga de la página. En su lugar, los desarrolladores pueden utilizar un conjunto de bibliotecas JavaScript preaprobadas que proporciona AMP.
5. Diseño adaptable: Las páginas AMP están diseñadas para funcionar sin problemas en diferentes plataformas, lo que permite una experiencia de usuario coherente y positiva independientemente del dispositivo utilizado. Las páginas AMP se ajustan automáticamente al tamaño y orientación de la pantalla del dispositivo y funcionan en varias plataformas y dispositivos.

Todas estas características trabajan juntas para hacer que las páginas AMP se carguen significativamente más rápido, lo que resulta en una experiencia de usuario mejorada y aumenta el compromiso del usuario. Google también muestra las páginas AMP con un icono en forma de rayo junto a ellas en sus resultados de búsqueda, lo que hace más probable que los usuarios hagan clic en ellas, lo que puede ayudar a aumentar el tráfico y la visibilidad de los editores que utilizan AMP.

Ventajas de la AMP

El uso de Accelerated Mobile Pages (AMP) tiene varias ventajas, tanto para los editores como para los usuarios.

Para editores:

• Mejora de la clasificación en los motores de búsqueda: Google ha declarado que las páginas AMP tienen más probabilidades de aparecer en las primeras posiciones de los resultados de búsqueda. Esto puede aumentar la visibilidad y dirigir más tráfico al sitio de un editor.
• Mayor compromiso del usuario: Los tiempos de carga de página más rápidos pueden aumentar la participación del usuario, como el tiempo de permanencia en el sitio, el número de páginas vistas por visita y el porcentaje de clics.
• Mejor experiencia móvil:AMP proporciona una mejor experiencia móvil a los usuarios, lo que puede ayudar a aumentar la fidelidad a la marca y el retorno de los visitantes.
• Ahorro de costes: La creación de páginas AMP requiere menos recursos técnicos y, por tanto, puede ahorrar costes de desarrollo a los editores.

Para los usuarios:

• Tiempos de carga de página más rápidos: Las páginas AMP están diseñadas para cargarse rápidamente en dispositivos móviles, lo que supone una experiencia de usuario mucho más positiva. Es más probable que los usuarios se queden si las páginas se cargan rápidamente y no tardan demasiado en descargarse.
• Experiencia coherente en todos los dispositivos: Las páginas AMP están diseñadas para funcionar sin problemas en diferentes plataformas, lo que permite una experiencia de usuario consistente y positiva sin importar el dispositivo utilizado. Esto aumenta las posibilidades de compromiso de los usuarios.
• Mejor experiencia web móvil: Con el aumento del uso de la web móvil, tener páginas de carga rápida en dispositivos móviles es crucial, y AMP proporciona eso.

En general, AMP está diseñado para mejorar la experiencia web móvil de los usuarios y aumentar la visibilidad y el compromiso de los editores. Al proporcionar una web móvil más rápida y fácil de usar, AMP puede ayudar a impulsar la clasificación en los motores de búsqueda, mejorar la participación de los usuarios y ahorrar costes a los editores.

Estadísticas sobre las mejoras

En cuanto a los tiempos de carga de las páginas, las páginas AMP pueden cargarse hasta cuatro veces más rápido y utilizar diez veces menos datos que las páginas no AMP. Esto puede dar lugar a una experiencia de usuario más positiva, lo que hace que sea más probable que los usuarios se queden y se comprometan con el contenido.

En cuanto a la participación de los usuarios, las páginas AMP pueden aumentar el tiempo de permanencia en el sitio, el número de páginas vistas por visita y el porcentaje de clics. Esto puede traducirse en un aumento de los ingresos de los editores a través de los clics en los anuncios o el incremento de las ventas.

En cuanto a las clasificaciones en los motores de búsqueda, Google ha declarado que las páginas AMP tienen más probabilidades de aparecer más arriba en los resultados de búsqueda. Esto puede aumentar la visibilidad y dirigir más tráfico al sitio de un editor. Además, muchos editores han notado un aumento de su tráfico orgánico debido a que las páginas AMP aparecen más arriba en los resultados de búsqueda.

Algunos estudios de casos han demostrado una mejora significativa utilizando AMP, por ejemplo:

• The Washington Post informó de que las páginas AMP recibieron un 25% más de clics, un 20% más de visitas de retorno y un 35% menos de probabilidades de que el usuario rebotara del sitio.
• Las páginas AMP de Pinterest consiguieron un tiempo de carga de página 2 veces más rápido, una tasa de clics un 20% mayor y una tasa de conversión un 23% mayor.
• The New York Times also reported that AMP pages on its site get 20% more clicks than their non-AMP counterparts.

Estos son sólo algunos ejemplos de las muchas ventajas que ofrece el uso de AMP. Es importante tener en cuenta que los resultados reales pueden variar en función de la aplicación, el tipo de contenido y la audiencia.

Implantación de AMP

La creación de versiones AMP de páginas web implica los siguientes pasos:

1. Convierte tu HTML a AMP HTML: Se trata de modificar el código HTML existente para adaptarlo a las especificaciones de AMP HTML. Esto incluye el uso de las etiquetas HTML AMP adecuadas, como “amp-img” y “amp-video”, y la eliminación de las etiquetas y scripts no permitidos. Puedes utilizar herramientas en línea como el validador de AMP o la plantilla basada en web del Proyecto AMP para comprobar si hay errores en tu código.
2. Añade la biblioteca AMP JS: Para activar las optimizaciones de rendimiento integradas en AMP, tendrás que incluir la biblioteca AMP JS en el encabezado de tu documento AMP HTML. Esta biblioteca se encarga de muchas de las optimizaciones de rendimiento de AMP, como la precarga de recursos y la gestión del diseño.
3. Crear una versión de Google AMP Cache: Crea una versión AMP de tu página web que viva en la caché de Google AMP. Esto es opcional, pero permitirá que tus páginas se sirvan directamente desde los servidores de Google, lo que puede mejorar aún más los tiempos de carga. Para crear una versión en caché, deberá añadir una etiqueta específica en el encabezado de la página, indicando la URL de la versión AMP de la página.
4. Añadir análisis: AMP proporciona un mecanismo de análisis integrado que realiza un seguimiento de la participación y la interacción del usuario en las páginas AMP. Es esencial configurar los análisis para realizar un seguimiento del comportamiento de los usuarios, el rendimiento y los ingresos de las páginas AMP.
5. Valida tus páginas AMP: Antes de publicar tus páginas AMP, utiliza el validador de AMP para comprobar que cumplen las especificaciones técnicas requeridas y las mejores prácticas.

Estas son algunas de las mejores prácticas para implementar AMP:

• Empieza creando una versión AMP de tus páginas más importantes, como la página de inicio, los artículos con más tráfico y las páginas de destino, y ve ampliando poco a poco.
• Utiliza el conjunto preaprobado de bibliotecas JavaScript que proporciona AMP.
• Utiliza las funciones de rendimiento integradas de AMP y optimiza tus imágenes para que se carguen más rápido.
• Pruebe sus páginas AMP en diferentes dispositivos y navegadores para asegurarse de que funcionan y se muestran correctamente.

También hay varias herramientas y recursos disponibles para ayudar en el proceso de aplicación:

• El sitio web del proyecto AMP ofrece abundante información, como tutoriales, ejemplos de código y buenas prácticas.
• El plugin AMP para WordPress le permite crear versiones AMP de las páginas de su sitio web.
• Google Search Console te permite probar y supervisar el rendimiento de tus páginas AMP y corregir cualquier error.
• También existen otros frameworks y librerías que ayudan a implementar AMP para diferentes tecnologías web, como React, Angular o Vue, etc.

Es importante tener en cuenta que la creación de páginas AMP requiere un buen conocimiento de HTML, CSS y JavaScript y puede requerir cierto trabajo de desarrollo. Aun así, el aumento del rendimiento y de la visibilidad en los motores de búsqueda puede merecer la pena.

Retos y limitaciones

Accelerated Mobile Pages (AMP) es una potente herramienta para crear páginas web móviles más rápidas y fáciles de usar, pero conlleva algunos retos y limitaciones.

Uno de los principales retos de AMP son las limitaciones del marco AMP HTML. AMP HTML es una versión simplificada que elimina algunas etiquetas y scripts más complejos, lo que puede resultar limitante para los desarrolladores acostumbrados a trabajar con HTML estándar. Además, AMP HTML no admite funciones más avanzadas, como formularios y scripts de terceros, lo que puede dificultar la creación de algunos tipos de páginas o funcionalidades.

Otro reto es que AMP requiere versiones separadas de las páginas. Para crear una versión AMP de una página, el desarrollador debe crear una versión independiente utilizando el marco AMP HTML; esto puede suponer un trabajo extra para los desarrolladores, el SEO y el equipo de marketing. Esto también puede dar lugar a problemas para mantener la coherencia entre las versiones AMP y no AMP de una página y para garantizar que todos los elementos de la página estén presentes y funcionen correctamente en ambas versiones.

Hay formas de afrontar estos retos:

• Para hacer frente a las limitaciones del marco AMP HTML, es esencial centrarse en la creación de contenidos y funcionalidades compatibles con el marco. Esto puede implicar simplificar tus páginas y utilizar los componentes integrados de AMP y las funciones de rendimiento.
• Para hacer frente a la necesidad de versiones separadas de las páginas, es esencial planificar y presupuestar el tiempo de desarrollo y los recursos adicionales necesarios para crear las páginas AMP. Además, es esencial establecer un flujo de trabajo para mantener la coherencia entre las versiones AMP y no AMP de una página y utilizar herramientas para automatizar el proceso.
• Para superar algunas de las limitaciones del AMP, se puede añadir javascript personalizado mediante el uso de “amp-script”, que permite utilizar JS personalizado. Aun así, puede conllevar consideraciones adicionales para mantener el rendimiento.
• Para solucionar la limitación de no poder utilizar formularios, AMP proporciona algunos componentes alternativos, como “amp-form”, que pueden utilizarse para crear formularios con funcionalidad limitada; lo mismo ocurre con otros componentes como “amp-iframe” para incrustar otras páginas.

Es importante tener en cuenta que AMP no es la solución perfecta para todos los sitios web y que puede no ser adecuada para todos los tipos de páginas o funcionalidades; la clave es entender las compensaciones y tomar decisiones informadas sobre qué páginas convertir a AMP y cuáles dejar como HTML estándar.

Conclusión

Accelerated Mobile Pages (AMP) es un proyecto iniciado por Google para mejorar la velocidad y el rendimiento de las páginas web para móviles. El marco AMP utiliza una versión especializada de HTML denominada AMP HTML, que limita el uso de etiquetas y scripts específicos para reducir el tamaño y la complejidad de la página, lo que se traduce en tiempos de carga más rápidos. Además, Google almacena en caché las páginas AMP en sus servidores, lo que mejora los tiempos de carga. El objetivo de AMP es mejorar la experiencia de navegación web móvil reduciendo los tiempos de carga de las páginas, mejorando la participación de los usuarios e impulsando la clasificación en los motores de búsqueda.

Las ventajas de AMP para editores y usuarios incluyen mejores tiempos de carga de las páginas, mayor participación de los usuarios y mejor posicionamiento en los motores de búsqueda. Los editores también pueden ahorrar en costes de desarrollo. Sin embargo, AMP tiene algunos retos y limitaciones, como las limitaciones del marco AMP HTML y la necesidad de versiones separadas de las páginas.

El futuro de AMP parece prometedor, ya que cada vez más empresas empiezan a adoptarlo y Google sigue invirtiendo en esta tecnología. A medida que la web móvil siga creciendo, es probable que AMP desempeñe un papel cada vez más importante a la hora de ofrecer una experiencia web móvil más rápida y fácil de usar. Además, con el auge de las Aplicaciones Web Progresivas (PWA), y Google trabajando en hacer AMP más flexible y fácil de desarrollar integrándolo en PWA y convirtiéndolo en un estándar web, esto permitirá que AMP se utilice en una mayor variedad de escenarios.