¿Qué es la tecnología AMP?

Post 4 of 190
¿Qué es la tecnología AMP?

Hola lectores, la nueva tecnología AMP cada vez se hace más vigente pero todavía, a día de hoy, la gente tiene dudas sobre qué es y para qué sirve. En este post resolveremos estás dudas sobre la tecnología AMP. Así que empecemos por el principio:

 

¿Qué es la tecnología AMP?

AMP son las siglas de Accelerated Mobile Pages y está sirve para acelerar el rendimiento de las páginas web en los terminales móviles y tablets. Iniciativa promovida por Google(a la que se le unieron un gran números de medios de todo el mundo y otros socios tecnológicos. ¿Por qué decidieron empezar en esto? Desde hace ya tiempo y cada vez más, el tráfico web es mayor en los terminales móviles (Smartphones) respecto a los ordenadores de sobremesa o portátiles. La mayoría de estas webs no están preparadas para funcionar en terminales móviles, eso hace que estás se vean mal o incompletas, no carguen parcialmente o por completo o que la velocidad de carga sea ínfima. Estos son los motivos principales por el cuál Google inició el proyecto AMP.

 

¿Cuáles son sus elementos?
El sistema AMP (Accelerated Mobile Page): Principalmente utiliza estos tres tipos de elementos para mejorar el rendimiento de las web en terminales: AMP HTML, AMP JS y el uso de los cachés. Desglosemos estos elementos a continuación:

Elemento AMP HTML: Está tecnología tiene como objetivo base de este elemento el de generar las páginas web HTML de una forma más ligera. Como dato técnico he de decir, que el uso de HTML en ocasiones está restringido en las etiquetas permitidas en la especificación. Por ejemplo las etiquetas img pasará a ser img-amp o estarán prohibidas como la etiqueta object o frame.
Elemento AMP JS (JavaScript): De la misma forma que el elemento HTML sirve para las páginas web HTML, este elemento AMP JS sirve para las web que trabajen con elementos JavaScript funcionen. Aunque el sistema AMP restringe el uso del JavaScript a sus librerías.

El uso de los cachés: El uso de los CDN (Content Delivery Network – red de entrega de contenidos en inglés: es una red superpuesta de computadoras que contienen copias de datos, colocados en varios puntos de una red con el fin de maximizar el ancho de banda para el acceso a los datos de clientes por la red.) del propio proyecto AMP permite que este tipo de servidores obtengan las páginas AMP, valide que su implementación es correcta y en caso afirmativo guarde la respuesta para servirlo al usuario de forma óptima. La validación implica que no se haga uso de recursos externos ya que lo que se pretende es que todos los recursos se sirvan desde el mismo origen mediante HTTP 2.0.

Parece que únicamente servirá para mejorar el rendimiento web en terminales móviles pero: Se empleará un uso del CDN para cachear el contenido y servirlo desde allí, además la implementación debe seguir unas normas más estrictas haciendo uso de los componentes que ofrece el proyecto AMP.

 

¿Pero todo se queda aquí a la hora de mejorar el rendimiento?

No, echemos memoria, sabemos que es un proyecto de Google y Google siempre va más allá. Su objetivo principal es ofrecer páginas web más sencillas y optimizadas para que usuario reciba una respuesta más ágil del terminal. Para conseguir esto utilizan técnicas WPO (Web Performance Optimization) ósea, un estudio y mejora del rendimiento de una página web utilizando las técnicas de optimización web de toda la vida.

¿Cuales son estas técnicas?

Técnica de JavaScript asíncrono: En esta técnica sólo podemos hacer uso de scripts asíncronos. El código JavaScript puede bloquear la construcción del DOM y esto da una mayor sensación de lentitud de la página.

Tamaño de elementos estáticos en el HTML:  La tecnología AMP primero descarga todo el HTML y después los recursos necesarios como imágenes, fuentes, etc. AMP necesita que se especifique el tamaño de los recursos estáticos en el HTML para ser capaz de optimizar su carga.

Las peticiones externas están prohibidas: No está soportado el uso de extensiones externas que debido a las llamadas adicionales y JavaScript asociado pueden retrasar el renderizado de la página.

 

Hablemos de SEO

Como ya he dicho en el párrafo anterior, es un proyecto de Google y Google no iba a tener una idea tan básica como mejorar un rendimiento web. Desde AMP tienes que cuidar también tuSEO (Search Engine Optimization lo que viene siendo el posicionamiento web). Google premia con un mejor posicionamiento a aquellas webs que tienen un plug-in (Complemento web) de tecnología AMP.

Os pondré el ejemplo de esta web, WordPress, fue de las primeras en implementar la tecnología AMP, antaño se tenía que hacer hacer manualmente pero a día de hoy ya se configura automáticamente y puedes disfrutar de tus blogs favoritos en una computadora, terminal o tablet con la misma sencillez y velocidad.

 

El diseño responsivo 

iphone_suss

Mock-up en formato móvil de uno de nuestros clientes.

suss_macbook

Mock-Up del mismo cliente pero en formato sobremesa.

Además de utilizar la tecnología AMP para que todo funcione y se vea correctamente lo ideal es tener un diseño móvil de tu web. Ya que como hemos ido dejando claro en los párrafos anteriores, no funcionan de la misma manera el formato móvil que el de sobremesa. La claridad a la hora de navegar es muy importante, un diseño feo, que no se vea correctamente todas las interacciones de la página, o, simplemente que ese diseño no haya sido trabajado lo suficiente, hace que pierdas tráfico en tu página web. De la misma forma no solo este diseño es necesario para terminales móviles o tabletas, la llegadas de las smartTv han impulsado también el uso de este tipo de diseños. Los motivos son los mismos, una claridad visual a la hora de navegar por la página web.

 

¿Qué pasa con el SERP?

Captura de pantalla 2017-06-16 a las 12.15.28

Ejemplo de SERP

Y para terminar hablemos del SERP(Search engine results page o Página de resultados del buscador). Google muestra páginas AMP en los resultados de búsqueda haciendo uso de un carrusel de noticias horizontal para búsquedas desde dispositivos móviles. Cuando accedemos a esos enlaces accedemos sin salir de google ya que sirve el contenido desde el CDN del proyecto AMP, pudiendo así volver a los demás resultados de búsqueda. Esto mejora el rendimiento y hace el uso de webs en terminales móviles más veloz, reafirmando así que las páginas veloces gustan más a los usuarios. 

 

Esperamos haber aclarado vuestras dudas sobre la nueva tecnología AMD. Si os ha gustado no olvidéis darle me gusta, compartirlo en vuestras redes sociales y seguirnos en nuestras redes sociales. Nos vemos en el siguiente post.

, , , , , , , , , , ,

Este artículo ha sido escrito por sergi

Menu