New AMP Roadshows.
AMP Roadshows

Una iniciativa de código abierto que busca mejorar el ecosistema de contenido para todo el mundo.

AMP es una biblioteca de código abierto que ofrece una forma directa de crear páginas web atractivas, ligeras y que se cargan prácticamente al instante para los usuarios. Las páginas AMP son, sencillamente, páginas web a las que puedes enlazar y que puedes controlar.

AMP se basa en las habilidades y entornos que ya tienes para crear páginas web. AMP es compatible con muchas plataformas diferentes y diversos navegadores.

El ecosistema de AMP incluye 25 millones de dominios, más de 100 proveedores de tecnología y plataformas líderes de diferentes sectores, como la edición, la publicidad, el comercio electrónico, los negocios locales y pequeños, y mucho más.

Obtén más información con este vídeo de introducción

Las páginas AMP se crean con tres componentes básicos:

AMP HTML

AMP HTML es HTML con algunas limitaciones que le proporcionan un rendimiento fiable.

AMP HTML es, básicamente, código HTML extendido con propiedades AMP personalizadas. El archivo de AMP HTML más sencillo tiene este aspecto:

<!doctype html>
<html >
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

Aunque la mayoría de las etiquetas que se usan en páginas AMP HTML son etiquetas HTML normales, algunas sí que se son etiquetas específicas de AMP (echa un vistazo a las etiquetas HTML en la especificación de AMP). Estos elementos personalizados, denominados componentes AMP HTML, permiten implementar fácilmente patrones habituales de una manera eficaz.

Por ejemplo, la etiqueta amp-img es totalmente compatible con srcset, incluso en navegadores que todavía no la admiten. Consulta cómo crear tu primera página AMP HTML.

Los buscadores y otras plataformas descubren las páginas AMP gracias a la etiqueta HTML <link rel="">. Puedes tener una versión que no sea AMP y una versión AMP de una misma página, o solo una versión AMP. Puedes obtener más información en el artículo sobre cómo hacer que una página sea visible.

JavaScript de AMP

La biblioteca JavaScript de AMP se asegura de que las páginas AMP HTML se rendericen rápidamente.

La biblioteca JavaScript de AMP implementa todas las prácticas recomendadas de rendimiento de AMP, gestiona la carga de recursos y te proporciona las etiquetas personalizadas que hemos mencionado antes; todo para que las páginas se rendericen rápidamente.

Entre las mayores optimizaciones está el hecho de que hace que todo lo que procede de recursos externos sea asíncrono, por lo que ningún elemento de la página puede evitar que algo no se renderice.

Otras técnicas para mejorar el rendimiento incluyen la zona de pruebas de todos los iframes, el cálculo previo del diseño de cada elemento de la página antes de cargar los recursos y la inhabilitación de los selectores CSS lentos.

Para obtener más información, no solo sobre las optimizaciones, sino también de las limitaciones, consulta las especificaciones de AMP HTML.

Caché de AMP

La caché de AMP de Google se puede utilizar para mostrar páginas AMP HTML almacenadas en caché.

La caché de AMP de Google es una red de distribución de contenido basada en proxies con la que se entregan documentos AMP válidos. Su función consiste en obtener páginas AMP HTML, almacenarlas en caché y mejorar el rendimiento de las páginas automáticamente. Cuando se utiliza la caché de AMP de Google, se cargan el documento, todos los archivos JavaScript y todas las imágenes del mismo origen que esté utilizando HTTP 2.0 para maximizar la eficiencia.

La caché también incluye un sistema de validación integrado que confirma que la página funcionará y que no depende de recursos externos. El sistema de validación ejecuta diferentes comprobaciones que confirman que el código de la página cumple con las especificaciones de AMP HTML.

Todas las páginas AMP incluyen otra versión del sistema de validación que puede registrar errores de validación directamente en la consola del navegador cuando se renderice la página, lo que te permite ver cómo los cambios complejos en el código pueden afectar al rendimiento y la experiencia de usuario.

Obtén más información sobre cómo probar páginas AMP HTML.

Descubre los principios de diseño de AMP

Descubre los principios del diseño

Descubre lo que AMP puede hacer por ti