Guía para principiantes de páginas móviles aceleradas (AMP)

Páginas móviles aceleradas es la iniciativa de Google que pretende resolver el mayor problema de la velocidad de la web móvil. Las asombrosas experiencias de usuario que diseñamos con gran cuidado son extremadamente lentas para los dispositivos móviles.

La lentitud no es solo un problema de UX, sino que también reduce las tasas de conversiónperjudica la accesibilidad al excluir a los usuarios con conexiones a Internet más lentas. 

AMP es un esfuerzo de equipo que se lanzó con el objetivo de permitir a los editores  crear contenido optimizado para  dispositivos móviles una vez y  hacer que se cargue instantáneamente en todas partes.

Desde el lanzamiento, muchos editores como BBC, The Economist, Guardian News y Financial Times han implementado la iniciativa, por lo que ahora podemos suponer con seguridad que AMP es una innovación que vale la pena considerar para todos los que quieran seguir siendo competitivos en el dispositivo móvil. web.


AMP en acción


Antes de profundizar en los detalles, aquí está la demostración de AMP , para que pueda verla en acción .
Para ver a AMP en acción, debe hacer dos cosas:

  1. Vea la demostración, ya sea en un dispositivo móvil, o en un simulador móvil, por ejemplo, Chrome DevTools' móvil Simulador de dispositivos .
  2. Ejecuta consulta de búsqueda en la barra de búsqueda. Como Google AMP actualmente trabaja principalmente con el sitio de noticias, la mejor opción es una nueva historia.
En la captura de pantalla a continuación, puede ver lo que obtuve cuando utilicé el término de búsqueda rio olympics.

Demostración acelerada de páginas móviles en IPad Como puede ver, las páginas de AMP aparecen como  Google Rich Cards, un  carrusel de imágenes optimizado para dispositivos móviles, que Google lanzó en mayo de 2016.


Observe cómo Google diferencia las páginas AMP de otras páginas optimizadas para dispositivos móviles  utilizando 2 etiquetas diferentesAMP  y  Mobile-friendly. También vale la pena hacer clic en algunos de los resultados para ver cómo se ve una página web de AMP y qué tan rápido se ejecuta en el dispositivo móvil.


Experiencia técnica


AMP es un estándar web  basado en tecnologías web existentes y se centra en contenido estático . Tiene  3 partes diferentes:

  1. AMP HTML: HTML  modificado con  (1)  la restricción de ciertas características regulares de HTML / CSS y  (2)  la introducción de nuevas etiquetas personalizadas (Componentes)
  2. AMP JS:  aplica las mejores prácticas para aumentar el tiempo de carga de la página
  3. AMP CDN :  una memoria caché con un sistema de validación incorporado que optimiza aún más su sitio

AMP HTML


Las páginas móviles aceleradas son páginas HTML regulares que necesitan seguir un conjunto de reglas para hacer que las páginas carguen más rápido y rindan con un rendimiento confiable.

Echemos un vistazo a las cosas más importantes que debe saber al respecto.

Decide si quieres una página AMP separada


Para la misma página de contenido estático, puede tener 2 versiones separadas, una para AMP y otra para la versión que no es de AMP.

También puede elegir tener  una sola versión, la página de AMP, y usarla en todas partes:

<link rel = "amphtml" href = "amp-version.html">
También agregue la siguiente línea a la <head> sección de la página que no es de AMP:
<link rel = "canonical" href = "non-amp-version.html">
Si solo tiene una página de AMP, aún necesita  vincularla de la siguiente manera:
<link rel = "canonical" href = "amp-version.html">

Starting Boilerplate


AMP Project ofrece diferentes plantillas iniciales que puede usar para comenzar. Echa un vistazo a la plantilla más simple de AMP HTML a continuación:
<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/es/documentation/guides-and-tutorials/start/create/basic_markup/">
    <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>Welcome to the mobile web</h1>
  </body>
</html>
Puede ver que el texto estándar vincula la página HTML normal con la  etiqueta <link rel="canonical">
La  etiqueta <script> agrega la  biblioteca AMP JS.

El  <style amp-boilerplate> y las  <noscript> etiquetas (en la misma línea que <style>) son  utilizados por el validador AMP así que no olvide incluirlos.

También puede encontrar estas dos etiquetas por separado en Github como AMP Boilerplate Code: los documentos advierten a los usuarios que  no cambien el código dentro de estas dos etiquetas ya que el Validador de AMP usa expresiones regulares (regex).

Puede encontrar una plantilla repetitiva de AMP HTML más avanzada en el sitio oficial de AMP, además de los elementos necesarios, también contiene el  marcado de schema.org en formato JSON-LD; para que su contenido aparezca en Google Rich Cards, es necesario agregar datos  enriquecidos.

Consulte la marca requerida cada documento HTML de AMP debe seguir en Github. AMP Project también tiene una gran guía paso a paso que lo ayuda a  crear su primera página de AMP. 

Etiquetas AMP HTML


Para aumentar la velocidad, la especificación AMP restringe cómo puede usar HTML. Las etiquetas HTML se pueden dividir en  3 grupos:

  1. Las etiquetas HTML que  se pueden usar sin modificaciones se pueden encontrar en la lista blanca del Anexo de etiquetas HTML de AMP.
  2. Etiquetas HTML prohibidas , como  <embed> y <object>, se pueden encontrar en esta lista más amplia .
  3. Las etiquetas HTML que tienen etiquetas equivalentes específicas de AMP, como  <amp-img> y <amp-video>, también se denominan  componentes de AMP  : permiten  implementar patrones comunes de  manera inteligente para los recursos. (Nos pondremos en contacto con ellos más tarde.)

Diseña tus páginas HTML AMP

En las páginas de AMP, no puede usar hojas de estilo externas, debe agregar sus estilos personalizados como una hoja de estilo en línea en la sección <head> de la siguiente manera:
<style amp-custom> h1 { 
    color: # 333; 
    } 
    // otros estilos personalizados 
</ style>
Solo puede tener una hoja de estilo incrustada, y también hay muchas reglas de estilo no permitido, por ejemplo, no puede usar el calificador !important, la regla @import y las pseudoclases.

No olvide verificar las restricciones de la hoja de estilo antes de comenzar a escribir CSS para sus páginas de AMP.

Hay otra cosa que es importante saber sobre las reglas de estilo de AMP: no puede usar el diseño que desee, ya que uno de los principios de AMP es permitir que el navegador calcule el espacio de cada elemento en la página con anticipación.

AMP JS


Los documentos AMP no pueden incluir jаvascripts escritos por autores ni por terceros, sin embargo, esto no significa que las páginas móviles aceleradas no usen jаvascript en absoluto. La biblioteca de jаvascript de AMP (el tiempo de ejecución de AMP) es responsable de cargar y procesar páginas AMP rápidamente mediante el cumplimiento de las mejores prácticas de rendimiento.

Componentes de AMP


Los componentes de AMP están  definidos por el tiempo de ejecución de AMP. Son las etiquetas HTML específicas de AMP antes mencionadas que debe usar en lugar de su contraparte habitual, como en <amp-img> lugar de la etiqueta <img>.

Cada componente AMP contiene un recurso externo particular (una imagen, un video, una inserción, etc.). Los recursos externos son propensos a ralentizar los sitios web. El objetivo principal de esta solución es administrar la carga de recursos externos de una manera razonable ejecutándose dentro de entornos aislados.

AMP le proporciona  2 tipos de componentes:

  1. Componentes incorporados:  siempre están disponibles en todos los documentos de AMP, están  integrados en el tiempo de ejecución de AMP . Actualmente hay cinco de ellos: <amp-ads> para anuncios <amp-img> para imágenes, <amp-pixel> para el seguimiento de píxeles (utilizado para contar visitas de página), <amp-video> para las incrustaciones directas de archivos de video HTML5, reemplaza la <video>, <amp-embed> para elementos incrustados (se puede usar en lugar de <amp-ad> en ciertos casos)
  2. Componentes ampliados:  componentes adicionales, debe incluirlos explícitamente en su documento de AMP. Hay muchos útiles, como <amp-accordion> y<amp-lightbox>, vea la lista completa. Muchos de ellos se pueden usar para  incorporar contenido de servicios de terceros , como Twitter o Instagram.
Tenga en cuenta que todos los recursos cargados externamente, como  <amp-img> y <amp-video> debe tener un conocido atributo para permitir que el navegador calcule el diseño de antemano.<height> y <width>

AMP CDN


El AMP CDN es básicamente un caché, llamado Google AMP Cache. Busca documentos de AMP válidos, almacena en caché y los carga. AMP CDN también tiene un  sistema de validación incorporado.
Vale la pena  probar sus páginas AMP antes de permitir que se conecten para pasar el validador de forma segura. Puedes hacerlo de muchas maneras diferentes. 

IMAGEN: Proyecto AMP Es bueno saber que AMP CDN usa el protocolo HTTP/2 para lograr el mejor rendimiento posible.

Herramientas AMP


Existen algunas excelentes herramientas que pueden ayudarlo a implementar páginas móviles aceleradas, echemos un vistazo a algunas de ellas.

Google proporciona a los webmasters una práctica herramienta de informe de estado de AMP que muestra un recuento de páginas AMP correctamente indexadas y también errores relacionados con AMP.

La biblioteca de AMP PHP de Lullabot le  permite convertir sus páginas HTML a AMP HTML, y también informa el cumplimiento de cualquier documento HTML con los estándares de AMP.

También puede consultar el complemento de AMP de Automattic  que le permite habilitar las páginas móviles aceleradas en su sitio de WordPress. 

IMAGEN: WordPress.org

Consideraciones adicionales


Jonathan Abrams, el fundador de Nuzzel, afirma aún mejor, ya que afirma que incluso los sitios optimizados para dispositivos móviles como el New York Times se cargan significativamente más rápido, en  lugar de tardar tres segundos en cargar la página promedio, una página se carga en  menos de la mitad segundo,  cuando las páginas móviles aceleradas de Google están habilitadas .

También puede leer un artículo interesante en Verge sobre la competencia de Google AMP y los Artículos instantáneos de Facebook. Si todavía está buscando una respuesta para "¿cuál es el truco?", Consulte la publicación de Yoast que menciona los temores de que AMP básicamente nos está devolviendo a un momento de Internet anterior al año 2000, y cuestiona si realmente se trata de un estándar abierto.

Si no quiere reflexionar demasiado, solo quiere saltar a la codificación de una vez, el sitio Learn AMP by Example es un buen comienzo.


<a onclick=omegayalfa" class='avatar avatar-64 photo' height='64' width='64'>
  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2018-03-18
  • Categorias: Smartphone Internet Noticias Tutorial

[/com-link]