Pues si amigos, un nuevo estándar en las webs móviles ha llegado a nuestras vidas y nada más y nada menos que de la mano del gran Google. Ya esta aquí el AMP HTML prometiendo una importante mejora en la velocidad de las páginas web móvil.
El proyecto surge de la necesidad de mejorar los tiempos de carga de los dispositivos móviles en webs de medios de comunicación y con muchos contenidos. La experiencia de usuario con webs de este tipo, como periódicos o blogs, no es todo lo satisfactoria que debería. Los tiempos de carga en smartphone se ven ralentizados por distintos factores, entre los que se encuentran:
- El JavaScript y los CSS: El códigode Java ralentiza mucho la descarga de páginas web ya que hace uso de muchas librerías distintas. Se utiliza para los formatos publicitarios y la analítica del sitio. Pero aumenta mucho el tiempo de respuesta de la web, y en consecuencia su descarga. Los CSS por su parte también saturan el tiempo de descarga ya que se carga de manera externa a la web.
- La cobertura: Las redes móviles, aún con el 4G, no pueden competir con una conexión WiFi. Por eso la experiencia de usuario se ve mermada en estas redes. Aligerar el peso de la web puede ayudar a alcanzar una mayor velocidad.
- Las imágenes: Las imágenes, aunque muy necesarias en un medio tan visual como lo es internet, contribuyen en gran medida a ralentizar la descarga de una página web móvil.
Para intentar minificar estos inconvenientes, Google se reunió con varios grupos de comunicación entre los que se encontraba El País, y fruto de esas conversaciones surge el AMP HTML. Las siglas AMP significan acelarator mobile pages. Hace un tiempo el framework de Twitter Bootstrap ayudó a mejorar el problema de adaptación del contenido al tamaño de la pantalla. Ahora AMP HTML llega para mejorar los tiempos de carga.
El proyecto ya se encuentra en Github para su descarga y uso. El funcionamiento es muy sencillo, aunque modifica un poco las etiquetas HTML es muy intuitivo. Básicamente se añaden unos links de carga en la sección <head> de la web desde la que se carga el framework para su uso.
Cómo funciona AMP HTML
En el siguiente ejemplo podéis ver un fragmento de código AMP HTML:
<!doctype html> <html ⚡> <head> <meta charset="utf-8"> <title>Título de ejemplo</title> <link rel="canonical" href="./Documento-original.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-custom> h1 {color: red} </style> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Article headline", "image": [ "miniatura1.jpg" ], "datePublished": "2015-09-05T08:00:10+08:00" } </script> <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> <h1>T´tulo de ejemplo</h1> <p> Algo de texto por aquí y por allá. <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>
A simple vista se puede observar que el código es muy similar al HTML5. Salvo por los links de cabecera que a modo de los de Bootstrap hacen la llamada al framework que usan. A parte de eso se añaden las letras AMP en ciertas etiquetas como las imagen, los vídeos y los javascript. Y por supuesto la etiqueta de apertura del documento <html ⚡> que no puede ser más molona.
En cuanto a las metaetiquetas, AMP HTML recomienda el marcado Schema.org para un correcto funcionamiento. Como veis su única función es aligerar el procesado de las web del lado del servidor, con la intención de optimizar procesos y hacer más rápida la navegación para dispositivos móviles. Una milésima de segundo es muy valiosa para la experiencia de usuarios y ahí es donde ataca AMP HTML.
Cómo afectará al SEO el AMP HTML
Por otro lado, y visto desde la perspectiva del SEO, me atrevería a pronosticar un Mobilegeddon II que ya es una realidad. El AMP HTML viene de la mano de Google, y todos sabemos cómo intenta imponer sus soluciones la multinacional. Todo lo suyo ayuda a posicionar. Ejem Google+.
Por otra parte cada, es cierto que Google esta dando prioridad en los últimos tiempos a la experiencia de usuario, por lo que una mejora teórica en la velocidad de la web, seguro que trae de la mano una mejora en posicionamiento.
Otro punto a destacar es que hay que canonicalizar la versión AMP HTML para evitar el contenido duplicado respecto a la web original versión de escritorio. Un detalle que puede dejar ver su preparación para el SEO, ya que Google da mucha importancia al contenido original.
Cómo veis este nuevo estándar ya está listo para su implementación y seguro que de aquí a algún tiempo empezaremos a verlo en varias webs. Por mi parte voy a probarlo en alguna web a ver que resultado da y si implementación es realmente atn fácil como parece.
¿Alguien a probado ya el AMP HTML? ¿Nos dices cómo te ha ido?
