¿Que es AMP? Páginas móviles aceleradas

La web móvil está en constante evolución y Google siempre está experimentando con nuevas formas de acelerar la entrega de contenido y el rendimiento en todos los dispositivos. El proyecto Accelerated Mobile Pages (AMP) de Google está tratando de hacer precisamente eso al permitir que los sitios web puedan crear páginas web de peso ligero utilizando su framework de código abierto, basado en HTML AMP.


¿Qué es el Proyecto de Páginas Móviles Aceleradas de Google?

La iniciativa de código abierto conocido como el Proyecto Accelerated Mobile Pages AMP se anunció originalmente el 7 de octubre 2015 mediante el equipo web de Google. Se inició oficialmente apareciendo en SERPs el 24 de febrero de 2016. La inspiración para el proyecto fue que el mismo código funcione en múltiples plataformas y dispositivos, sin importar el tipo de teléfono, tableta o dispositivo móvil que la gente está usando y que sobre todo cargue instantáneamente.

En el sitio web Think with Google dice lo siguiente;

“40% de la gente no esperará más de 3 segundos antes de abandonar un sitio web”

Accelerated Mobile Pages AMP está disponible para uso de todos y el código fuente HTML se puede encontrar en su página oficial http://ampproject.org/

Para decirlo simplemente, AMP es básicamente una página HTML simplificada que restringe ciertos HTML, CSS y Javascript.

Algunos requisitos interesantes para tomar en cuenta:
Permite sólo scripts asíncronos
Todos los CSS deben estar en línea
Los estilos se limitan a 50 KB
Los recursos externos como imágenes deben indicar su tamaño en HTML
Todo Javascript debe estar fuera del camino crítico
No se permite Javascript de usuario, sólo admite AMP
Las fuentes deben ser cargados con una etiqueta de enlace o un CSS @font-face rule
Google PageSpeed

La única razón por la que Google desarrolló PageSpeed Insights fue como una guía sobre las mejores prácticas de rendimiento web para proporcionar recomendaciones para optimizar su sitio. Y siguiendo las pautas esperanzadamente usted alcanzará un sitio web más rápido gracias a la implementación de sus directrices.

Como usuario estamos tomando básicamente todas las recomendaciones que nos han dicho durante los últimos años y las estamos aplicando con AMP. Lo que es una buena cosa, en su mayor parte.

¿Cómo funcionan las páginas móviles aceleradas?

Google ha publicado un gran tutorial sobre cómo crear su primera página AMP. Vamos a pasar por un rápido resumen de lo que se trata y lo que necesita saber. Es importante saber cómo funciona AMP en SERPs. En la mayoría de los casos, Google sólo servirá páginas AMP para dispositivos móviles. Sin embargo, Google no penaliza a los usuarios que tienen páginas AMP solamente (es decir, sin la versión de escritorio adicional HTML) como el ampproject.org

A continuación puede ver un pequeño icono de AMP que aparece justo alado izquierdo del sitio web o blog que está ejecutándose en modo AMP, lo que significa que se está publicando una página AMP HTML, por ejemplo este blog fue creado en Blogger.com y se lo está ejecutando en AMP.


A continuación un ejemplo de la estructura de una página en AMP puede ser similar a partir de una perspectiva HTML.

Ejemplo

<!doctype html>
<html amp lang="es">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hola, AMP</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <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>
  </head>
  <body>
    <h1>Bienvenido a la web móvil</h1>
  </body>
</html>

Según la documentación de Google, los documentos HTML de AMP deben seguir la siguiente sintaxis.

Ejemplo

- Comenzar con el tipo de documento <!doctype html>.

- Contener la etiqueta <html ⚡> en el nivel superior (también se acepta <html amp>).

- Contener las etiquetas <head> y <body> (opcionales en HTML).

- Contener la etiqueta <meta charset="utf-8"> como el primer hijo de su etiqueta <head>.

- Contener la etiqueta <script async src="https://cdn.ampproject.org/v0.js"></script> como el
segundo hijo de su etiqueta <head> (esto incluye y carga la biblioteca AMP JS).

- Contener una etiqueta <link rel="canonical" href="$SOME_URL" /> en la etiqueta <head> orientada a la versión de HTML común del documento de AMP HTML o a sí misma si no existiera dicha versión de HTML.

- Contener una etiqueta <meta name="viewport" content="width=device-width,minimum-scale=1"> en la etiqueta <head>. También se recomienda incluir initial-scale=1.

- Contener lo siguiente en su etiqueta <head>: <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>

Meta datos opcionales

Además de los requisitos básicos, en el ejemplo también se incluye una definición Schema.org en el <head>, que no es un requisito estricto para AMP, pero es un requisito para poder distribuir tu contenido en determinados sitios. Por ejemplo, en la demostración del carrusel de novedades sobre Búsqueda de Google (pruébalo en tu teléfono).

Para obtener más información acerca de todos los metadatos que necesitarás en muchos otros entornos (por ejemplo, Twitter), explora los ejemplos.



Share:

Related post

Comentarios

Disqus

Disqus comments:


Facebook

Facebook comments: