Introducción a AMP

(Acelerated Mobiles Pages)

⚡

  1. Qué es AMP⚡
  2. Cómo trabaja AMP⚡
  3. Por qué AMP⚡ es rapido
  4. Principios de diseño en AMP⚡
  5. Restricciones HTML. JS y CSS
  6. Ventajas y desventajas
  7. Prueba de concepto en AMP⚡
  8. Enlaces de interés

INDICE

1. Que es AMP⚡

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.

1.1 AMP THML

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.

1.2 AMP JS

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.

1.3 Google AMP Cache

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.

2. Cómo funciona AMP

  • 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

3. Por qué AMP es rapido

 

  • Solo permite scripts asíncronos: esto favorece a la velocidad de la página, ya que los scripts no asíncronos retrasan la carga de la página y bloquean la construcción DOM. AMP solo admite scripts especialmente diseñados para ofrecer un rendimiento óptimo. De hecho no permite el uso de todo JavaScript.
  • No permite la carga en bloque de nada: los elementos externos se incluyen en iframes. AMP creará la caja del iframe sin importar lo que contenga, ya que la principal función de AMP es que nada frene la carga.
  • Los recursos externos tendrán las dimensiones definidas: las imágenes y los iframes tienen que tener el tamaño debidamente definido para que AMP conozca sus dimensiones antes de descargarlos.
  • Prioridades en la carga de recursos: AMP optimiza y establece unas prioridades para que se descarguen primero los recursos más importantes. En el caso de las imágenes solo se descargaran si el usuario las va a visualizar.

3. Por qué AMP es rapido

 

  • El CSS está incluido y con tamaños especificados: para que CSS no bloquee la carga de la pagina, ahora AMP obliga a usar CSS inline con un máximo de 50kb para asegurar su eficiencia.
  • La carga de fuentes será de una manera eficaz: muchas veces las fuentes son muy pesadas y perjudican al rendimiento. Normalmente los navegadores impiden la descarga de fuentes hasta que no estén descargados los estilos y los scripts, pero AMP al usar CSS inline y scripts asíncronos no tiene que esperar para descargar las fuentes.
  • Las páginas se cargan en un instante: usa la API PreConnect con la que hace de una forma muy eficaz la precarga, carga y descarga de los recursos que usara el usuario, favoreciendo a la carga de la página.

4. Principios de diseño

  1. Experiencia del usuario > Experiencia del desarrollador > Facilidad de implementación.
  2. No diseñes para un futuro hipotético navegador más rápido
  3. No rompas la red
  4. Resuelve los problemas en la capa correcta.
  5. Sólo haz las cosas si se puede hacer rápido.
  6. Prioriza las cosas que mejoren la experiencia del usuario, pero comprometa cuando sea necesario.
  7. No hay listas blancas.

5. Rectricciones (1/7)

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
   

 

5. Rectricciones (2/7)

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.
   

 

  • AMP solo permite transiciones y animaciones de propiedades que puedan ser aceleradas por GPU en los navegadores comunes.
  • El proyecto de AMP incluye acualmente en la lista blanca opacity, transform y -vendorPrefix-transform.
  • La propiedad overflow (y overflow-y, overflow-x) no puede tener como estilo “auto” ni “scroll”.
  • Ningún elemento definido por el usuario en un documento de AMP puede tener una barra de desplazamiento.
  • Las páginas de AMP no pueden incluir hojas de estilo externas, con la excepción de fuentes personalizadas ​ mediante etiquetas de enlace que apuntan a los proveedores de fuentes de la lista blanca y la inclusión de @font-face.

  • It is a validation error if the author stylesheet is larger than 50,000 bytes.

 

5. Rectricciones (3/7)

 

HTML Tags

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`.
   

5. Rectricciones (4/7)

 

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.

 

 

 

 

5. Rectricciones (5/7)

 

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.

 

 

 

 

5. Rectricciones (6/7)

 

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.

 

  • Conditional HTML comments are not allowed.
  • Attribute names starting with on (such as onclick or onmouseover) are disallowed in AMP HTML.
  • The attribute with the literal name on (no suffix) is allowed

 

 

5. Rectricciones (7/7)

6. Ventajas y desventajas

  • Las páginas AMP cargan hasta cuatro veces más rápido que las páginas normales

  • Utilizan hasta 10 veces menos datos

  • Mejora en el posicionamiento SEO
  • Incrementa la calidad de la experiencia de usuario
  • Nace AMP Lite y RAISR.

Ventajas

Deventajas

  • Google Amp solo mejora la velocidad de carga de webs en móvil
  • Está principalmente orientado a páginas que ofrecen contenido de tipo noticias o artículos
  • No permite hojas de estilo externas y de Javascript externo
  • solo mejora la velocidad de carga de webs en móvil

7. Enlaces de interés (1/3)

Documentos

7. Enlaces de interés (2/3)

 

Documentos

7. Enlaces de interés (1/2)

  • https://www.ampproject.org/es/docs/reference/validation_errors
  • https://www.ampproject.org/es/learn/case-studies/

Web Pages

Acelerated Mobile Pages

By Serenity FrontStack

Made with Slides.com

Acelerated Mobile Pages

  • 763

More from Serenity FrontStack