Qué son las Páginas Aceleradas para Móviles (AMP), como crearlas 5a592h
Cómo funcionan las AMP, características, diferencias con las tradicionales, ventajas, desventajas y usos prácticos, código, marcado y elementos HTML5 que usan. Como crear paginas AMP en mi sitio web.
Las Páginas Aceleradas para Móviles, en inglés "Accelerated Mobile Pages" (AMP), es un proyecto de internet de código abierto dedicado a mejorar, optimizar y acelerar el funcionamiento de las páginas web en los dispositivos portables, como teléfonos celulares y tablets.
La iniciativa con su sitio web en AMPproject.org tiene el apoyo de grandes empresas de internet como Google, Twitter, Facebook y otros y está abierta a todos los que publican en internet, sin importar el tamaño, aunque especialmente para sitios de noticias.
Diferencias de las Páginas Aceleradas para Móviles (AMP) con las tradicionales 4n4f56
Las Páginas Aceleradas para Móviles son páginas que cargan y renderizan el contenido estático como imágenes, videos y otros elementos mucho más rápido.
Para lograr lo anterior se valen de tres factores:
- Un marcado de HTML5 modificado, con marcadores y elementos adicionales.
- Una librería JavaScript de AMP que istra la carga de recursos externos para asegurar un renderizado rápido de la página.
Emplea técnicas para mejorar el rendimiento, que incluye deshabilitar elementos que no pasan la validación.
También asegura que todos los recursos externos sean cargados de forma asincrónica para evitar cualquier bloqueo.
- La red CDN de AMP que guarda el contenido de las páginas en cache en distintas bases de datos en la nube.
Al usar el CDN todos los elementos son cargados de internet mediante HTTP/2 para una máxima eficiencia.
Ventajas de las Páginas Aceleradas para Móviles 2t4f44
Las páginas en formato AMP cargan más rápido que las paginas tradicionales, se benefician principalmente los dispositivos portables.
Son destacadas en los resultados de las búsquedas de Google con un pequeño icono que indica que la pagina usa esta funcionalidad, además son priorizadas por el buscador en los resultados de las noticias.
El CDN de AMP hace que las páginas se carguen mediante el nuevo protocolo HTTP/2, que acelera la velocidad en la navegación, que la inmensa mayoría de los sitios aun no puede disponer.
Uso en la práctica de las Páginas Aceleradas para Móviles 3q4517
Se hace muy difícil y es casi imposible modificar las paginas existentes de un sitio web, para para darles el formato que requieren las AMP.
Solo es factible crear nuevas páginas en ese formato o sitios completos que así lo requieran ya que en la práctica solo se benefician páginas dedicadas a noticias o contenido similar caracterizado por la necesidad de la inmediatez.
Nosotros hemos creado este artículo en el formato de las AMP como un experimento y para compartir con los lectores interesados en esta funcionalidad.
Desventajas de las AMP 6c5i58
Son varias las desventajas en la práctica de la implementación en un sitio de Páginas Aceleradas para Móviles.
Antes de considerar usar este proyecto se debe analizar lo siguiente.
- Las restricciones en el código impiden usar elementos tan comunes y útiles en internet como los SCRIPTS.
Por esa razón es imposible disponer de funcionalidades usando JavaScript del modo clásico, como los botones de las redes sociales.
- Los componentes necesarios para usar las AMP "ensucian" el sencillo código HTML5 de las páginas y lo hacen más complejo, dificultando su uso por aficionados o no profesionales.
- Aumenta el tamaño de las páginas, debido al incremento del marcado necesario y la restricción de impedir la carga de hojas de estilo CSS externas.
Por otra parte no debemos olvidar que no es un estándar, sino solo un proyecto experimental, sin garantía alguna, que en el futuro pueda ser desechado.
En otro artículo compartimos el resultado de un análisis efectuado después de un mes de implementar el formato AMP en varias páginas de nuestro sitio.
Todo según nuestra modesta opinión, pero puede ser de interés, para los que piensan usar este tipo de formato: Desventajas e inconvenientes de las páginas AMP
Estructura y código de una Página Acelerada para Móviles 425yr
Las Páginas Aceleradas para Móviles usan elementos modificados que mejoran o reemplazan funcionalidades del HTML5 para asegurar la carga de recursos externos y hacer posible el renderizado rápido de las páginas.
Son llamados "AMP HTML components".
Una página elemental en formato AMP usa el siguiente marcado, con elementos que son imprescindibles para su validación y funcionamiento.
Debemos de alertar que en las AMP es prohibitivo el uso de muchos elementos comunes, como por ejemplo los <script>, elementos de entrada como <input> o <textarea>, la carga de archivos CSS externos mediante <link>, etc.
Elementos imprescindibles en las Páginas Aceleradas para Móviles 3n2o44
Como se puede comprobar en el código anterior, algunos elementos son imprescindibles para asegurar un correcto funcionamiento y validación de una página AMP:
- La estructura comienza con:
<!doctype html>
- Continúa con las siguientes líneas de forma obligatoria:
- La etiqueta para las imágenes debe usar el elemento "amp-img" e incluir un cierre:
<amp-img ></amp-img>
Existen muchas otras especificaciones necesarias de acuerdo al contenido de la página a publicar.
Insertar en las páginas AMP botones de las redes sociales 4p6667
En las páginas aceleradas AMP se pueden insertar los botones necesarios para compartirlas en las principales redes sociales como Facebook, Google+, Twitter, Pinterest y Linkedin, aunque no del modo tradicional.
Es necesario usar la extensión "amp-social-share".
Es algo sencillo.
Lee en otro artículo un completo tutorial: Como agregar en páginas AMP botones de compartir en las redes sociales
Impregnar contenido externo en las páginas AMP 4r1b6l
Existen varios componentes para facilitar la inserción de contenido de las redes sociales en las Páginas Aceleradas para Móviles.
- El componente "amp-facebook" permite integrar publicaciones y videos de Facebook.
- El componente "amp-twitter" facilita impregnar tweets de Twitter.
- El componente "amp-youtube" permite impregnar videos de YouTube, solo especificando su ID.
- El componente "amp-pinterest" permite mostrar el widget de un tablero en Pinterest o el botón de Pinear.
Son solo los más populares, todos ellos requieren la carga de un script con el parámetro "custom-element"
Como validar una AMP y comprobar el marcado 382m33
Las Páginas Aceleradas para Móviles deben validar correctamente, si no es así no usaran el CDN de AMP y por lo tanto no recibirán beneficio alguno.
Para validarlas no vale el actual Validador del W3C.
Lee más información detallada en otro artículo, de todas las formas de hacerlo: Como validar y comprobar el código de las páginas AMP
Requisitos de Google para las AMP 715p
Para que las Páginas Aceleradas para Móviles que sean de noticias, aparezcan en el carrusel de Google Noticias, son necesarios ciertos requisitos.
Incluir los datos estructurados de Schema.org, en el que las siguientes propiedades son obligatorias: headline, mainEntityOfPage, datePublished, dateModified, image, author, name, y publisher.
La imagen empleada debe poseer como mínimo 696 pixeles de ancho.
Lee información detallada de los requisitos
El marcado usado se puede comprobar usando la herramienta de Structured Data Testing Tool
Comprobar el tiempo de carga de esta página 45375u
Esta página con todos sus elementos (66 peticiones), tarda solo algunos milisegundos en cargar desde New York.
Para comprobarlo puedes usar la siguiente herramienta: https://tools.keycdn.com/speed
Debido a que esta página emplea el CDN de AMP, esta herramienta solo reconoce dos peticiones para cargarla, con un total de 12 KB.
Otras Páginas Aceleradas para Móviles en este sitio 1w592w
Vamos experimentando con el proyecto AMP en nuestro sitio web, creado algunas páginas en este formato para comprobar su fiabilidad y sus beneficios en la práctica.
Otras páginas de nuestro sitio en este formato con diferentes funcionalidades que se pueden probar son las siguientes:
Más información sobre las AMP 182m8
Más información sobre las Páginas Aceleradas para Móviles se puede encontrarse en sitio del proyecto en: AMPproject.org
Lee la documentación sobre las especificaciones, los componentes y las preguntas más comunes.
Desde Github se puede descargar un paquete que contiene varias páginas de ejemplo en formato AMP.