(Acelerated Mobiles Pages)
⚡
INDICE
AMP es una manera de compilar páginas web para contenido estático de representación rápida. AMP en acción consta de tres partes diferentes:
AMP HTML que es HTML con algunas restricciones para lograr un rendimiento confiable, y con algunas extensiones para compilar contenido enriquecido más allá del formato HTML básico.
La biblioteca AMP JS garantiza la representación rápida de páginas AMP HTML.
El Google AMP Cache (opcional) proporciona las páginas AMP HTML.
AMP HTML es básicamente contenido HTML ampliado con propiedades AMP personalizadas
Si bien la mayoría de las etiquetas en una página AMP HTML son etiquetas HTML comunes, algunas etiquetas HTML se reemplazan por etiquetas específicas de AMP (consulta también la sección de etiquetas HTML en la especificación de AMP). Estos elementos personalizados, llamados componentes AMP HTML, crean patrones comunes que pueden implementarse con buen rendimiento en forma sencilla.
La biblioteca AMP JS implementa todas las prácticas recomendadas de rendimiento de AMP, administra la carga de recursos y te proporciona las etiquetas personalizadas que se mencionan arriba para garantizar la representación rápida de tu página.
Una de las optimizaciones más importantes es que transforma en asincrónico todo lo que proviene de recursos externos, de modo que ningún elemento de la página pueda bloquear la representación.
Entre otras técnicas de rendimiento se incluyen la disposición de todos los iframes en espacios seguros, el cálculo previo del diseño de cada elemento de la página antes de que se carguen los recursos y la desactivación de selectores de CSS lentos.
El Google AMP Cache es una red de distribución de contenido basada en proxy para la entrega de todos los documentos de AMP válidos. Captura las páginas AMP HTML, las almacena en caché y mejora el rendimiento de estas automáticamente. Al usar el Google AMP Cache, el documento, todos los archivos de JS y todas las imágenes se cargan desde el mismo origen que usa HTTP 2.0 para lograr la máxima eficiencia.
El caché también viene con un sistema de validación integrado que confirma que se garantiza el funcionamiento de la página, y que esta no depende de recursos externos. El sistema de validación ejecuta una serie de aserciones que confirman que el marcado de la página cumple con la especificación de AMP HTML.
Cada página AMP viene con otra versión del validador integrada. Esta versión puede registrar errores de validación directamente en la consola del navegador cuando se representa la página, lo que te permite ver cómo los cambios complejos en tu código podrían afectar el rendimiento y la experiencia del usuario.
Se permiten únicamente scripts asíncronos
Se ordenan estáticamente los recursos
No se permite que los mecanismos de extensión bloqueen la representación
Se mantiene el contenido JavaScript de terceros lejos de la ruta de acceso crítica
Los elementos de CSS deben ser inline y su tamaño debe estar limitado (50k)
La activación de fuentes debe ser eficaz
Se minimizan los recálculos de estilo
Se prioriza la carga de recursos
Las páginas se cargan al instante
Se agiliza el sistema de AMP
Los siguientes estilos no están permitidos en las páginas de AMP:
| Atributos de estilo insertados | Todos los estilos deben estar definidos en la sección <head> de la página, dentro de una etiqueta <style amp-custom>. |
| ! (calificador de important) | No está permitido su uso. Este es un requisito necesario para que AMP aplique sus normas relativas al tamaño de los elementos. |
| <link rel=”stylesheet”> | No está permitido, con la excepción de las fuentes personalizadas. |
| * (selector universal) | Tiene implicaciones de rendimiento negativas y podría utilizarse para eludir otras restricciones del selector. |
| :not() | Podría utilizarse para simular el selector universal. |
| Pseudoselectores, pseudoclases y pseudoelementos | Los pseudoselectores, pseudoclases y pseudoelementos solo están permitidos en los selectores que contengan nombres de etiquetas que no comiencen con amp-. Ejemplo correcto: a:hover, div:last-of-type Ejemplo incorrecto: amp-img:hover, amp-img:last-of-type |
| Clase - amp- y nombres de etiquetas i-amp- | Los nombres de las clases en las hojas de estilo de autor no pueden empezar con la cadena -amp-. Están reservados para uso interno en tiempo de ejecución de AMP. Por tanto, la hoja de estilo del usuario no puede hacer referencia a los selectores de CSS para las clases -amp- y las etiquetas i-amp. |
| behavior, -moz-binding | Estas propiedades no están permitidas por razones de seguridad. |
| filter | Se incluye en la lista negra por problemas de rendimiento. |
It is a validation error if the author stylesheet is larger than 50,000 bytes.
HTML tags can be used unchanged in AMP HTML. Certain tags have equivalent custom tags (such as <img> and <amp-img>) and other tags are outright prohibited:
| script | Prohibited unless the type is application/ld+json. (Other non-executable values may be added as needed.) Exception is the mandatory script tag to load the AMP runtime and the script tags to load extended components. |
| base | Prohibited |
| img | Replaced with `amp-img`. Please note: <img> is a Void Element according to HTML5, so it does not have an end tag. However,<amp-img> does have an end tag </amp-img>. |
| video | Replaced with `amp-video`. |
| audio | Replaced with `amp-audio`. |
| iframe | Replaced with `amp-iframe`. |
| frame | Prohibited. |
| frameset | Prohibited. |
| object | Prohibited. |
| param | Prohibited. |
| applet | Prohibited. |
| embed | Prohibited. |
| form | Allowed. Require including amp-form extension. |
| input elements | Mostly Allowed with exception of some input types, namely, <input[type=image]>,<input[type=button]>, <input[type=password]>, <input[type=file]> are invalid. Related tags are also allowed: <fieldset>, <label> |
| button | Allowed. |
| style | Required style tags for adjusting opacity. One additional style tag is allowed in head tag for the purpose of custom styling. This style tag must have the attribute amp-custom. 🔗 |
| link | rel values registered on microformats.org are allowed. If a rel value is missing from our whitelist,please submit an issue. stylesheet and other values like preconnect, prerender and prefetchthat have side effects in the browser are disallowed. There is a special case for fetching stylesheets from whitelisted font providers. |
| meta | The http-equiv attribute is banned. Otherwise allowed. |
| a | The href attribute value must not begin with javascript:. If set, the target attribute value must be _blank. Otherwise allowed. 🔗 |
| svg | Most SVG elements are allowed. |
| input elements | Mostly Allowed with exception of some input types, namely, <input[type=image]>,<input[type=button]>, <input[type=password]>, <input[type=file]> are invalid. Related tags are also allowed: <fieldset>, <label> |
| button | Allowed. |
| style | Required style tags for adjusting opacity. One additional style tag is allowed in head tag for the purpose of custom styling. This style tag must have the attribute amp-custom. 🔗 |
| link | rel values registered on microformats.org are allowed. If a rel value is missing from our whitelist,please submit an issue. stylesheet and other values like preconnect, prerender and prefetchthat have side effects in the browser are disallowed. There is a special case for fetching stylesheets from whitelisted font providers. |
| meta | The http-equiv attribute is banned. Otherwise allowed. |
| svg | Most SVG elements are allowed. |
| a | The href attribute value must not begin with javascript:. If set, the target attribute value must be _blank. Otherwise allowed. 🔗 |
| svg | Most SVG elements are allowed. |
Utilizan hasta 10 veces menos datos