¿Qué es AMP y por qué debería usarlo?
AMP (Accelerated Mobile Pages o Páginas móviles aceleradas en español) es una iniciativa de proyecto de código con el objetivo de mejorar el rendimiento de la web móvil. Nació para responder a la era delos teléfonos inteligentes. Así que ignora elementos como JavaScript y scripts de terceros, que impiden el rápido funcionamiento de las páginas.
Los tres principales componentes de AMP son: AMP HTML, AMP JS y AMP Cache.
A continuación una explicación de su funcionalidad.
1. HTML de AMP
Funciona básicamente como HTML, pero con algunas restricciones para un rendimiento confiable y extensivo de algunas propiedades de AMP.
Aunque la mayoría de las etiquetas de AMP-HTML se parecen a las etiquetas HTML, algunas cambian. Por ejemplo, la etiqueta de video en AMP-HTML se convierte en amplificador de audio y la etiqueta img en una de amp-img en la versión AMP.
Es importante incluir el script de AMP en su HTML, porque sin él su página no puede convertirse en AMP-HTML.
También es clave poner la versión normal de su página.
Veamos un ejemplo de una página AMP-HTML.
<!doctipo html> <html⚡> <cabeza> <juego de caracteres meta="utf-8"> <enlace rel="canonical" href="ejemplo.html"> <meta name="viewport" content="width =ancho-dispositivo,escala-mínima=1,escala-inicial=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s pasos(1,fin) 0s 1 normal ambos;-moz- animacion:-amp-start 8s pasos(1,fin) 0s 1 normal ambos;-ms-animation:-amp-start 8s pasos(1,fin) 0s 1 normal ambos;animación:-amp-start 8s pasos(1,fin) 0s 1 normal ambos}@-webkit-keyframes -amp-start{desde {visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden }a{visibilidad:visible}}@-o-keyframes -amp-start{desde{visibilidad:oculto}a{visibilidad:visible}}@keyframes -amp-start{desde{visibilidad:oculto}a{visibilidad:visible} }</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> < secuencia de comandos asíncrona src="https://cdn.ampproject.org/v0.js"></secuencia de comandos> </cabeza> <body>¡Hola Mundo!</body> </html>
La etiqueta <link rel=»canonical»> es el ancla de su página en HTML normal.
Por su parte, la etiqueta < script async src = «https://cdn.ampproject.org/v0.js » ></ script > permite que su página se cargue en la versión AMP.
Para obtener más etiquetas vaya a AMP-TAGS.
Finalmente, si quiere crear su primera página AMP, visite: crear su primera página AMP HTML.
2. AMP JS
Funciona como una librería para la representación rápida de AMP-HTML. En ella se implementan las mejores prácticas de rendimiento y se gestiona la carga de las etiquetas personalizadas, lo que garantiza una visualización rápida.
Para ver cómo funciona AMP JS puede ir a los componentes.
3. Caché de Amplificador
Es una red de entrega de contenido basada en proxy, con la que es posible mejorar el rendimiento de la página automáticamente, porque carga el documento con todos los archivos JS y todas las imágenes del mismo lugar. Para mayor eficiencia pueden ser usados en HTTP 2.0.
Además, AMP CACHE viene con un sistema de validación enmerso, lo que confirma que la página está lista para funcionar y que no depende de recursos externos como JavaScript de terceros.
Con esta red puede registrar errores de validación directamente en la consola del navegador cuando se procesa la página. Esto le permitirá ver cómo los cambios complejos en su código pueden afectar el rendimiento y la experiencia del usuario.
¿Por qué usar AMP?
La respuesta es sencilla: AMP hace su sitio web más rápido y mejora la experiencia del usuario. Además mejora su SEO , porque de no tener errores Google lo indexa.
Google también dirá que una página en la versión AMP carga entre un 15 % y un 85 % de más velocidad que el resto, lo cual ayuda con el posicionamiento.
AMP es el futuro, porque ahora muchos sitios web se están construyendo en AMP VERSION.
Así que la elección está en sus manos. Si quiere iniciar con AMP puede visitar Cómo construir el futuro web .
