AMP viene de las siglas de Accelerated Mobile Pages y es un componente framework que permite crear fácilmente páginas que eleven la experiencia de usuario al primer nivel.
En palabras de Google, AMP es «un marco de trabajo de componentes web» que está orientado a crear sitios, anuncios y demás contenidos priorizando a los usuarios. Esto es, ofreciendo una velocidad de carga súper rápida, segura y más completa.
Google ha hablado:
Los smartphones y tablets no paran de crecer. Cada vez más gente se conecta a la web desde un smartphone y esto está cambiando los patrones de diseño y desarrollo de las páginas webs. Es cierto que llevamos tiempo con aquello del «Mobile First», pero al final no pasaba de ser un eslogan que muchas no veces no se plasmaba en la realidad. Las páginas webs cargan en muchas ocasiones Javascripts innecesarios, CSS demasiado pesado o no minificado, a veces tirando incluso de recursos externos… Esto ya es cosa del pasado.
Con el objetivo de mejorar la veolcidad de carga en dispositivos móviles nace el proyecto Accelerated Mobile Pages (AMP). Este proyecto de código abierto tiene como objetivo crear un estándar de páginas web más ligeras y rápidas, gracias a una estructura común y predefinida.
Hay que recordar que es una iniciativa apoyada por Google, quien es la primera interesada en ofrecerte aquello que estés buscando con la mayor velocidad posible.
Y lo mejor de todo… como ya hemos dicho ¡es de código abierto!
Pero…¿cómo hace eso AMP?
Veamos… Se puede afirmar que: AMP pretende mostrar el contenido de un sitio en un smartphone de la manera más rápida posible.
¿Cómo lo hace? Mostrándo una versión simplificada del contenido. Para esto AMP utiliza su propio lenguaje, que viene a ser un pseudo HTML llamado AMP HTML.
Supongo que muchos pensaréis que qué es eso de una «versión simplificada». Como una imagen vale más que mil palabras, aquí os dejamos una comparativa de la misma página en versión responsive a full de CSS y JavaScript y la versión simplificada AMP.
Comparativa entre una web con carga en versión Responsive y otra con carga en versión AMP.
Como se ve, AMP elimina muchos de los estilos y Javascripts que la web tiene, para mostrar una versión simplificada y por consiguiente más rápida.
Estos son los resultados:
- Tiempo de carga Versión Normal: 4,5 segundos
- Tiempo de carga Versión AMP: 2,6 segundos
Pero… ¿Significa esto que no puedo usar JavaScripts en mi web si quiero tener una versión AMP? ¿Ni tampoco puedo darle estilos CSS y animaciones molonas?
Sigue leyendo y lo descubrirás.
Cómo Funciona AMP
Los creadores de AMP dan las razones que justifican el por qué las páginas desarrolladas en AMP volarán, para nosotros las más importantes son estas:
1 Sólo ejecuta JavaScript asíncrono: JavaScript es una potente herramienta para modificar cualquier aspecto de nuestra web, pero a veces sus consultas se ejecutan en línea y puede incluso llegar a bloquear la creación del DOM. Por esto, sólo permite JavaScript asíncrono, que se ejecutará con la etiqueta amp-script.En este sentido, el usto de JS está restringido a las librerías de AMP. Las páginas AMP sólo permiten el uso de JavaScript de terceros sólo en iframes aislados, fuera de los cálculos de renderizado.
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
2 Los recursos son estáticos: Las imágenes, anincios, ads, etc deben indiciar previamente su tamaño en el código AMP HTML. De esta manera AMP sabrá la posición y las medidas del elemento y lo pintará sin necesidad de esperar a que descargue.
3 No a los mecanismos que bloquean la renderización: Cualquiera que sea el contenido de cualquier extensión (Instagram, lightboxes, etc) que utilice un script personalizado (como suele ser el caso de estos elementos) informará a AMP usando una etiqueta personalizada amp-iframe. De esta manera el sistema pintará el iframe antes si quiera de saber qué contiene. De esta manera optimiza el renderizado.
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
4 CSS limitado, e integrado en el código propio de la página: Las páginas AMP HTML sólo funcionan con CSS integrado en el código, de manera que se minimicen las solicitudes HTTP de la ruta crítica. Además está limitado a ¡¡50 Kb de peso!!, con lo cual…¡Nada de código basura!
Estas son las 4 características que nosotros consideramos más importantes, pero si quieres investigar un poco más, te recomendamos que visites la documentación del proyecto.
AMP en los SERP
Ya hemos mencionado que Google apoya este proyecto, de hecho si buscamos en los resultados de Google, veremos que las páginas que estén optimizadas para AMP vienen con se etiqueta especial, para que el usuario sepa lo que se va a encontrar.
Google marca con el símbolo del Rayo las webs que dispongan de versión AMP de carga rápida y optimizada para Smartphones
Si Google marca las páginas que usan este sistema en su lista de resultados e incluso les da prioridad con respecto a las páginas que no la tienen es señal inequívoca de que esto va en serio.
Quiero aprender a manejarlo:
Afortunadamente, ya hemos comentado que se trata de un proyecto de código abierto. Esto nos permite acceder a bibliotecas, templates, e infinidad de ejemplos. Es más, en la propia documentación hay cursos ordenados por niveles para que puedas empezar a practicar ya con el AMP HTML , así como colaborar en el desarrollo del sistema. Aquí abajo te dejamos el enlace a los cursos para que puedas empezar a practicar sea cual sea tu nivel.
¡Quiero empezar a practicar!
Conclusiones finales:
AMP es una nueva apuesta de Google, que es la empresa que prioriza la velocidad por antonomasia. Priorizar la velocidad de carga tiene cosas buenas y cosas malas.
Las buenas es que mejora la experiencia de usuario, optimiza los recursos y centra el prisma en quitar lo «superfluo» y mostrar rápidamente el contenido.
Lo malo es que el precio a pagar puede ser demasiado alto. Muchas webs tienen intangibles. Aspectos de diseño que son importantes, o tiran de recursos externos como Píxeles de Facebook, Sliders Revolution, o el mismísimo Captcha de Google, que hasta carga su propia tipogrfía (en este caso no predican con ejemplo)… Y esto puede llegar a chocar con las altas exigencias de funcionamiento que exige AMP.
A nosotros nos parece una buena apuesta, pero con matices. Esperemos que este #ViernesdeOpinión os haya ayudado a formar vuestra propia opinión.
