En este primer curso, vamos a comenzar a conocer AMP partiendo desde lo más básico, totalmente desde cero.
¿Qué es AMP?
AMP es una tecnología web de código abierto creada y mantenida principalmente por Google. Se trata de un conjunto de herramientas enfocadas en la creación de páginas web optimizadas para cargar rápidamente en dispositivos móviles.
Las páginas de AMP pueden mostrarse en la mayoría de navegadores. Cuando una página web estándar tiene una contraparte de AMP, un enlace a la página AMP se suele colocar en una etiqueta HTML en el código fuente de la página estándar.
Debido a que la mayoría de las páginas de AMP son fácilmente detectables por los rastreadores web, de terceros, como los motores de búsqueda y otros sitios web de referencia, pueden optar por enlazar a la versión AMP de una página web en lugar de la versión estándar.
¿Qué es el framework AMP?
El framework AMP consta de tres componentes: AMP HTML que es un HTML estándar con componentes web; AMP JavaScript que gestiona la carga de recursos; y Google AMP Caché que puede servir y validar páginas AMP.
La mayoría de las páginas AMP son cacheadas por el sistema de Google AMP caché, pero otras compañías pueden admitir cachés AMP. El rendimiento de Internet y la compañía de seguridad Cloudflare lanzaron una caché de AMP en marzo de 2017.
¿Qué integración permite AMP?
Cualquier persona u organización puede construir productos o características que funcionen en páginas AMP, siempre que cumplan con las especificaciones de AMP. A partir de julio de 2017, el sitio web del proyecto AMP figuraba en torno a 120 empresas publicitarias y alrededor de 30 empresas analíticas como participantes del proyecto AMP.
¿Qué mejoras de rendimiento ofrece AMP?
Google informa que las páginas AMP que se publican en la Búsqueda de Google normalmente se cargan en menos de un segundo y utilizan 10 veces menos datos que las páginas no AMP equivalentes.
CNBC informó de una disminución del 387% en el tiempo de carga de la página móvil para las páginas AMP sobre las páginas que no usan AMP.5Gizmodo informó que las páginas de AMP cargaron tres veces más rápido que las páginas que no eran de AMP
¿Por qué debería utilizar AMP?
En muchos sentidos, Internet es el eje central del mundo. Cada día, más personas de todo el mundo acceden a información en línea. Pero muchos no usan Internet en conexiones ultrarrápidas o dispositivos de alta potencia. Cuando los sitios web se desarrollan solo para las conexiones y dispositivos más rápidos, la experiencia de muchos usuarios se ve afectada.
Para brindarles a los visitantes del sitio una mejor experiencia, la comunidad de desarrolladores ha encontrado formas de mejorar el rendimiento del sitio web. En el camino, los desarrolladores han mejorado la accesibilidad para los usuarios de tecnologías de asistencia, la confiabilidad para conexiones volubles y el diseño de sitios web para una amplia gama de dispositivos.
En ocasiones, puede resultar abrumador realizar un seguimiento de todos los nuevos avances en la tecnología web. Creemos que los desarrolladores quieren crear sitios rápidos, pero es demasiado fácil cometer errores en el camino.
Ahí es donde entra AMP. AMP se creó para facilitar que los desarrolladores se concentren en crear mejores funciones sin ofrecer a los clientes una mala experiencia de usuario.
¿Cómo te va ayudar AMP a tu página web?
AMP es una biblioteca de componentes web que aplica las mejores prácticas para la web. AMP aborda los obstáculos de desarrollo comunes para permitir el diseño de sitios web de alto rendimiento, accesibles y receptivos.
En resumen, AMP intenta facilitar la tarea de hacer lo correcto. Esto libera a los desarrolladores para que se centren en las funciones que aportan valor a sus usuarios.
AMP trabaja para mejorar el rendimiento web:
- Ampliando el HTML agregando etiquetas para características comunes de sitios web. HTML se desarrolló para crear páginas de contenido básico, pero no ha evolucionado para mantenerse al día con los sitios web modernos. Algunas características de sitios web modernos y relevantes incluyen menús de navegación deslizables, reproductores de video y carruseles de imágenes. Las etiquetas adicionales agregadas para estas funciones también se denominan “componentes web”.
- Reduciendo la cantidad de JavaScript. AMP requiere JavaScript para ejecutarse, pero AMP impone restricciones sobre dónde y cómo se puede usar JavaScript en otras partes de sus páginas. Esta restricción puede mejorar drásticamente el rendimiento en dispositivos móviles. Los componentes AMP proporcionan gran parte de la funcionalidad para la que los desarrolladores usaron JavaScript en primer lugar.
- Detectando los problemas más temprano y con mayor frecuencia durante el desarrollo del sitio web. Como hemos dicho, hay mucho que seguir en el desarrollo web moderno. AMP ayuda a gestionar esto al proporcionar un validador que busca problemas en su sitio que podrían afectar el rendimiento o la accesibilidad. ¡También le ayuda a aprender cómo solucionar los problemas que encuentra!
Los beneficios de AMP no terminan una vez que se implementa su página. Empresas como Google y Microsoft han creado cachés que almacenan páginas AMP que no tienen errores de validación.
Estos cachés pueden aplicar potentes optimizaciones de rendimiento al contenido de su sitio sin afectar la forma en que los usuarios lo experimentan. Las páginas AMP almacenadas en caché también se integran con los motores de búsqueda para que se pueda acceder a su sitio desde los resultados de búsqueda en segundos, ¡O incluso menos!
Aprender AMP para aprender desarrollo web
Aprender AMP es una excelente manera de aprender sobre desarrollo web porque los sitios AMP están:
- Construidos con HTML, CSS y JavaScript estándar.
- Compatibles con todos los navegadores modernos.
- No depende de otras herramientas o software especiales para construir o implementar en línea.
¿Qué vas aprender con estos cursos?
Adquirirás habilidades mientras crea páginas AMP que se pueden transferir para crear sitios web en otros formatos o marcos. Como muchos marcos populares, AMP es un enfoque basado en componentes para diseñar y crear sitios web.
Aprenderás a crear sitios web con mejores prácticas reconocidas, comenzará a pensar en componentes y evitará malos hábitos que dañen la experiencia del usuario. Estas habilidades universales se pueden aplicar en la web.
En Conclusión
AMP aborda el rendimiento, la accesibilidad y el diseño receptivo para que pueda concentrarse en las funciones. Sin embargo, si desea perfeccionar sus habilidades, aprender AMP también puede ayudarlo a descubrir exactamente cómo AMP aborda estas preocupaciones. Continuará aprendiendo y madurando como desarrollador, incluso mientras sus usuarios disfrutan de las experiencias que AMP le ayudó a crear.
Siguiente ?{: .btn .btn-primary .btn-lg .pull-right}
Fuente: AMP web oficial