{"id":361,"date":"2019-04-11T20:26:25","date_gmt":"2019-04-12T01:26:25","guid":{"rendered":"https:\/\/www.tesseractspace.com\/blog\/?p=361"},"modified":"2019-04-11T23:49:42","modified_gmt":"2019-04-12T04:49:42","slug":"amp-accelerated-mobile-pages","status":"publish","type":"post","link":"https:\/\/www.tesseractspace.com\/blog\/amp-accelerated-mobile-pages\/","title":{"rendered":"AMP: Accelerated Mobile Pages"},"content":{"rendered":"\n

En 2015, el tiempo m\u00e1ximo que un usuario esperaba para cargar una p\u00e1gina web en su dispositivo m\u00f3vil eran 5.4 segs. En 2018 ese tiempo se redujo a 3.3 segs. La relaci\u00f3n entre tiempo de carga y conversi\u00f3n es cada vez m\u00e1s estrecha<\/a>. El proyecto de Accelerated Mobile Pages (AMP) promete entregar p\u00e1ginas m\u00f3viles en menos de un segundo.<\/h4>\n\n\n\n

La historia de AMP (Accelerated Mobile Pages)<\/a><\/strong> tiene su origen en el mundo de las noticias: cuando ocurre una noticia importante (elecciones, desastres naturales, muerte de una celebridad, etc.<\/em>) mucha gente busca en sitios de noticias para obtener m\u00e1s informaci\u00f3n, ocasionando en muchas ocasiones que los servidores de esos servicios se saturen por el exceso de tr\u00e1fico, creando una mala experiencia en sus visitantes<\/strong> al tiempo que dejan de cumplir su funci\u00f3n de comunicar e informar.<\/p>\n\n\n\n

Pensando en una soluci\u00f3n para este problema, Google <\/strong>anunci\u00f3 el proyecto AMP <\/strong>en octubre de 2015 con el respaldo de los miembros de la Digital News Initiative<\/a><\/strong>, cerca de 80 casas editoriales de todo el mundo y compa\u00f1\u00edas de contenido digital como Twitter<\/strong>, Pinterest<\/strong>, LinkedIn<\/strong> y WordPress<\/strong>.<\/p>\n\n\n\n

Las p\u00e1ginas de AMP<\/strong> aparecieron por primera vez en el buscador de Google <\/strong>a principios de 2016 en los resultados de b\u00fasqueda m\u00f3vil \u00fanicamente. Los enlaces a las p\u00e1ginas de AMP<\/strong> estaban entonces restringidos a una secci\u00f3n en formato de carrusel llamado \u00abHistorias destacadas (Top Stories<\/em>)<\/strong>\u00bb en el encabezado de los resultados de b\u00fasqueda org\u00e1nica.<\/p>\n\n\n\n

\"El
El carrusel de noticias de Top Stories<\/em> en el buscador de Google, con p\u00e1ginas AMP.<\/figcaption><\/figure><\/div>\n\n\n\n

Google <\/strong>comenz\u00f3 a mostrar en septiembre de 2016 el contenido de AMP <\/strong>en el \u00e1rea principal de resultados de b\u00fasqueda m\u00f3vil. Los enlaces de AMP <\/strong>en el buscador de Google <\/strong>se identifican con un icono en forma de rel\u00e1mpago dentro de un c\u00edrculo<\/strong>. <\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Desde entonces, AMP<\/strong> es un factor importante para el posicionamiento de p\u00e1ginas en el buscador de Google<\/strong> (SEO<\/strong>). <\/p>\n\n\n\n

Al poco tiempo, Microsoft <\/strong>anunci\u00f3 soporte para AMP <\/strong>en las aplicaciones de su buscador web Bing <\/strong>para iOS <\/strong>y Android<\/strong>, y Twitter<\/strong> en sus apps<\/em> m\u00f3viles para mostrar p\u00e1ginas web. <\/p>\n\n\n\n

En mayo de 2017, Google<\/strong> anunci\u00f3 que m\u00e1s de 900,000 dominios web ya publicaban p\u00e1ginas AMP <\/strong>con m\u00e1s de dos mil millones de p\u00e1ginas publicadas a nivel mundial.<\/p>\n\n\n\n

\u00abEstamos comprometidos a mejorar la velocidad en todas las plataformas. Si nuestro sitio demora mucho tiempo en cargarse, no importa qu\u00e9 tan bueno sea nuestro periodismo, algunas personas abandonar\u00e1n la p\u00e1gina antes de ver qu\u00e9 hay all\u00ed\u00bb.<\/p>
David Merrell<\/strong>, Senior Product Manager del Washington Post<\/a><\/cite><\/blockquote>\n\n\n\n

Actualmente el proyecto AMP<\/strong> es un proyecto opensource<\/em> gestionado por un grupo de proveedores de contenido y que cualquier sitio puede implementar -sea de noticias o no- para reducir el tiempo de carga de sus p\u00e1ginas web en dispositivos m\u00f3viles<\/strong>.<\/p>\n\n\n\n

C\u00f3mo funciona AMP<\/h3>\n\n\n\n

AMP<\/strong> es una plataforma de desarrollo y dise\u00f1o web basada en HTML, CSS y JavaScript, optimizada para dispositivos m\u00f3viles con funcionalidades limitadas. Las p\u00e1ginas AMP<\/strong> se colocan junto a las p\u00e1ginas HTML originales a partir de las cuales fueron generadas. <\/p>\n\n\n\n

\"Modelo
Modelo de funcionamiento de AMP<\/figcaption><\/figure><\/div>\n\n\n\n

Cuando el buscador de Google <\/strong>es notificado, hace una copia de las p\u00e1ginas AMP <\/strong>en Google AMP Cache<\/strong><\/a>, una red de distribuci\u00f3n de contenido est\u00e1tico de alta velocidad (Content Delivery Network<\/em> o CDN<\/em>). Las p\u00e1ginas AMP<\/strong> son optimizadas y se entregan a dispositivos m\u00f3viles en el navegador web o en una app<\/em> donde son reconstruidas y mostradas al usuario para que interact\u00fae con ellas. <\/p>\n\n\n\n

Este proceso de optimizaci\u00f3n permite entregar p\u00e1ginas a dispositivos m\u00f3viles en tiempos menores a un segundo<\/strong>, creando una experiencia de uso positiva, aumentando las conversiones de esa p\u00e1gina por acciones o publicidad y sin hacer llamadas adicionales al servidor original, permiti\u00e9ndole atender a m\u00e1s visitantes.<\/p>\n\n\n\n

La promesa de AMP<\/strong> es que estas p\u00e1ginas carguen de manera instant\u00e1nea (en el rango de milisegundos<\/em>), independientemente del ancho de banda del dispositivo del usuario.<\/p>\n\n\n\n

Anatom\u00eda de una p\u00e1gina AMP<\/h4>\n\n\n\n

Las p\u00e1ginas AMP<\/strong> se construyen de manera similar a las p\u00e1ginas HTML, con algunos cambios en su arquitectura y etiquetado. Esta es una plantilla b\u00e1sica de AMP<\/strong>:<\/p>\n\n\n\n

 <!DOCTYPE HTML>
 <html \u26a1>
   <head>
   <meta charset=\"utf-8\">
   <link rel=\"canonical\" href=\"hello-world.html\">
   <meta name=\"viewport\" content=\"width=device-width,minimum-scale=1,initial-scale=1\">
   <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>
   <script async src=\"https:\/\/cdn.ampproject.org\/v0.js\"><\/script>
   <script async custom-element=\"amp-geo\" src=\"https:\/\/cdn.ampproject.org\/v0\/amp-geo-0.1.js\"><\/script>
   <script async custom-element=\"amp-bind\" src=\"https:\/\/cdn.ampproject.org\/v0\/amp-bind-0.1.js\"><\/script>
 <\/head>
 <body>
   <amp-geo layout=\"nodisplay\">
     <script type=\"application\/json\">
       {
         \"AmpBind\": true
       }
     <\/script>
   <\/amp-geo>
   <h1>\u00a1Hola en <span [text]=\"country\">...<\/span>!<\/h1>
   <button on=\"tap:AMP.setState({'country': ampGeo.ISOCountry.toUpperCase()})\">\u00bfd\u00f3nde estoy?<\/button>
 <\/body>
 <\/html><\/pre>\n\n\n\n