¿Qué es la AMP? ¿Cómo hacer una página Web AMP Accelerated Mobile Page?

Google a dado conocer Accelerated Mobile Pages (AMP). Una nueva iniciativa de código abierto llamada Accelerated Mobile Pages(AMP), que tiene como objetivo mejorar significativamente el rendimiento de las páginas web móviles de todos los medios de comunicación. ¿Qué es la AMP? ¿Cómo hacer una página Web AMP Accelerated Mobile Page?

¿Qué es la AMP? Google da a conocer Anuncios y análisis – mientras crítico para editores – son una gran parte del problema de rendimiento (AMP)

Accelerated Mobile Pages o las sigleas AMP es una serie de tecnologías, todo en uno (framework). El primero y más importante es lo que podríamos llamar el código de subconjuntos. Incluye nuevo marcado en HTML de las páginas web y JavaScript para hacer que las cosas carguen más rápidamente y otros que cargan lentamente. AMP tiene como objetivo acabar con las partes lentas, sobre todo JavaScript de publicidad, semillas de seguimiento de terceros como Twitter, Pintrest y unificarlo en un sito.

Las especificaciones de #AMP añade restricciones para cargar más rápido las páginas web en móviles restringen el #Javascript y prohíben algunas etiquetas HTML incluyendo los ‘iframes’; se introdujeron nuevos elementos específicos para el #framework AMP. Pro ejemplo los iframes de youtube tiene forma de meterlos. Esta todavía un poco verde pero no dudéis que dentro de unos meses todos nos tendremos que adaptar.

Algunos tag HTML tags han sdo prohibidos iframe, embed, object, los script y JSON (AMP script se carga en primer lugar). Algunos tag de HTML5 como img, video y audio son remplazados por amp-img, amp-video y amp-audio. Pro fin algo para solucionar el tiemo de carga de las imágenes en diseños receptivos o responsives.

Sin fisuras.AMP HTML abraza la web abierta, por lo que puede estar seguro de que su contenido aparece correctamente en todos los navegadores modernos y aplicaciones. Las páginas se publican normalmente a su sitio, el uso de herramientas estándar, y se aceleran a través de las memorias caché creadas por Google y otras empresas.

https://www.ampproject.org/

El rendimiento Web no es un territorio inexplorado para la tecnológica. Llevamos mucho tiempo haciendo WPO para cargar las páginas mas rápidos. Pensamos AMP HTML es prometedor, pero sabemos que no está completa y quedan meses de evolución

¿Cómo hacer una página Web AMP Accelerated Mobile Page?

AMP HTML viene con fuertes limitaciones en JS. ¿Qué pasa con CSS? AMP HTML ama CSS. Los recursos deben declarar su dimensionamiento por adelantado y mejora la multimedia en Responsive Design.

Los Anuncios y análisis (pixeles como analytics)son crítico para editores pero son una gran parte del problema de rendimiento. AMP viene a solucionar esto con las tecnologías de Accelerated Mobile Page.

AMP HTML es un subconjunto de HTML para páginas de contenido de edición tales como los artículos de noticias de una manera que garantice ciertas características de rendimiento de línea de base.

Al ser un subconjunto de HTML, pone algunas restricciones en el conjunto de etiquetas y funcionalidades disponibles a través de HTML, pero no requiere el desarrollo de nuevos motores de renderizado: agentes de usuario existentes pueden rendir AMP HTML al igual que todos los demás HTML.

También documentos AMP HTML se pueden subir a un servidor web y se sirve como cualquier otro documento HTML sin configuración especial en el Apache. Sin embargo, también están diseñados para ser servidor por CDN y sistemas que sirven AMP como proxy.

• Cambia las referencias de imagen con imágenes al tamaño de la ventana gráfica del navegador amp-img.
• Las imágenes en línea que son visibles.
• Variables Inline CSS.
• Precarga componentes extendidos.
• Minify HTML y CSS.
• Mejora el multimedia de vídeos y audios

AMP HTML utiliza un conjunto de elementos personalizados contribuido pero administrados centralmente y alojados para implementar funciones avanzadas tales como galerías de imágenes que se pueden encontrar en un documento HTML AMP. Mientras que permite estilizar el documento usando CSS , no se permite JavaScriptr más allá de lo que se proporciona a través de los elementos personalizados para alcanzar sus metas de rendimiento.

Mediante el uso de este formato AMP, los productores de contenidos están haciendo que el contenido en archivos AMP disponibles que se almacena en caché, y exhibido por terceros muy rápidamente. El rendimiento es el objetivo clave del diseño de AMP HTML. Principalmente esta destinada a reducir el tiempo hasta que el contenido de una página puede ser consumida por el usuario.

HTTP solicita lo necesario. El documento debe ser minimizado.
Recursos tales como imágenes o anuncios sólo deben ser descargados si son propensos a ser visto por el usuario. El Lazy Load ya no sería necesario y los pesos de la publicidad tampoco impactarían.
Los navegadores deben ser capaces de calcular el espacio necesario para cada recurso en la página sin ir a buscar ese recurso. Es decir siempre hay que dar la dimensión..

Os dejamos un ejemplo de una página AMP.

Ejemplo Página AMP Accelerated Mobile Page

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>Sample document</title>
  <link rel="canonical" href="./regular-html-version.html">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
  <style amp-custom>
    h1 {color: red}
  </style>
  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "headline": "Article headline",
    "image": [
      "thumbnail1.jpg"
    ],
    "datePublished": "2015-02-05T08:00:00+08:00"
  }
  </script>
  <script custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" async></script>
  <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
  <script src="https://cdn.ampproject.org/v0.js" async></script>
</head>
<body>
<h1>Sample document</h1>
<p>
  Some text
  <amp-img src=sample.jpg width=300 height=300></amp-img>
</p>
<amp-ad width=300 height=250
    type="a9"
    data-aax_size="300x250"
    data-aax_pubname="test123"
    data-aax_src="302">
</amp-ad>
</body>
</html>

. Leer artículo completo en Frikipandi ¿Qué es la AMP? ¿Cómo hacer una página Web AMP Accelerated Mobile Page?.