Ir al Home

Cómo manejar los recursos multimedia dentro de las AMP

Publicado por PRAXIS el 07-feb-2018 19:29:23

 recursos multimedia en amps

El mundo web actual se rige por los dispositivos móviles, éste es su principal escenario y del que mayor cantidad de tráfico se recibe.


Básicamente, los usuarios pasan aproximadamente 145 minutos por día en sus celulares, cifra publicada por el portal de noticias Business Insider, que demuestra el auge en usabilidad y consumo de páginas web que están teniendo las personas. Es esta una de las razones por las que  Google tomó medidas con el cambio de comportamiento que estaban teniendo los usuarios, creando las AMPs (accelerated mobile pages o páginas móviles aceleradas).

 

Una iniciativa de la que te hemos hablado en artículos pasados, contándote qué es, cuáles son sus beneficios ( ver: Qué son las AMP y por qué cada vez más compañías las implementan) y que permite construir páginas web más rápidas, haciendo que su objetivo central sea la optimización de contenido a través de la velocidad de carga y la facilidad de lectura.

 

En la que lograrás tener páginas con scripts simplificados que entreguen la información necesaria. Así tendrás no sólo mayores tasas de accesibilidad y una mejor UX, sino unos porcentajes de retención altos que aseguren el retorno constante por parte de los usuarios.


Las AMPs hacen que se pueda acceder de forma más veloz al contenido, pero ¿Cuánto es la cifra oficial? El gerente de producto del proyecto Rudy Gadfi, registra las mejoras en 0,7 segundos frente al tiempo de carga por parte de otras páginas que está alrededor de los 22 segundos.

 

¿Qué debes saber para la implementación de las AMPs?


Para empezar, debes saber que los recursos multimedia se manejan de forma diferente con las AMPs, en comparación con las páginas web convencionales. Éstas simplifican los elementos pesados de HTML, CSS y JavaScript, usando sus versiones más básicas, así incluyen únicamente el contenido que es vital para los usuarios: textos, imágenes, videos y anuncios.

 

En el caso puntual de las imágenes, deben tener un ancho - alto específico y  que cuenten con la etiqueta amp-img para que se puedan visualizar. La razón, es que si se conoce cuáles van a ser las medidas, la página designará un espacio para que las mismas estén ubicadas adecuadamente y se muestren con la mejor calidad y claridad posibles, permitiendo una organización de diseño consistente. Esto mismo ocurre con las etiquetas personalizadas para los videos o gifs .

De hecho, para las presentaciones de diapositivas e incrustaciones de redes sociales, se necesita de componentes extendidos propios para que funcionen como debe ser. Estas etiquetas y componentes extendidos no son complejos de implementar, simplemente necesitan de una buena planeación al momento de diseñar el sitio.

 

Además si quieres generar una mejor experiencia de usuario, deberás personalizar las fuentes y usar la biblioteca de JavaScript que proporciona AMP, para permitir que la carga del sitio sea óptima. 

 

En el sitio oficial de la iniciativa, se registra un 20% de aumento en las conversiones de ventas con las AMPs, así como 2X de incremento en los ingresos para sitios que cargan en 5 segundos vs a uno de 19 segundos.

 

 ¿Qué otros elementos necesitas?

 

Deberás cumplir con tres especificaciones solicitadas directamente por las AMPs, para que la versión alternativa funcione correctamente:

 

Las AMPs funcionan con HTML:

Debes saber que para que el contenido AMP HTML sea tenido en cuenta por Google, deberás basarte en HTTP2.0 MP. Esto hará que cuentes con los componentes necesarios, dejando a un lado recursos externos que hagan mucho más lenta la interacción con el contenido.


Además podrás mantener dos versiones diferentes de tu páginas web (HTML y AMP HTML). El punto está en que las AMPs piden que se cree esencialmente una versión de tu sitio en paralelo que elimine todos los elementos que tardan la carga.

¿Qué tendrás? Dos versiones de tu página, teniendo la versión original que es la que se ve normalmente y la versión AMP de la misma que contiene una etiqueta adicional.

 Por ejemplo:

        com/tu pagina
        tusitio.com/tupagina/amp

A qué recursos no puedes acceder:

Contarás con algunas restricciones al momento de diseñar la página dentro de los parámetros de las AMPs, tales como: la falta de formularios dentro de las secciones, o la imposibilidad de participación directa de las personas, al no tener disponible la opción de comentarios.


¡Limitaciones necesarias para que tu página sea más dinámica, ligera y veloz!

 

La información se almacena en caché:

El código de las AMPs está diseñado para ser almacenado en caché, así Google pone a disposición una red CDN (content delivery network) propia para la entrega de contenido, que al usar su lenguaje aloja las páginas dentro del navegador.

De esta manera, las AMPs tienen una URL específica al momento de visitarse, lo que permite que el contenido estático se reproduzca rápidamente

¡La información se precarga y preprocesa velozmente!

Si en tu caso usas WordPress, hay dos complementos que crearán automáticamente las versiones alternativas de la página para ti, ayudándole a Google a rastrearlas.

 

Todo funciona desde la biblioteca de JS:

 
AMP JS es un archivo Javascript muy limitado, que se dedica a priorizar la información del artículo original y sus imágenes, dejando a un lado los links e imágenes que catalogan como recurso externo. Justamente en la carga, las imágenes se redimensionan para aumentar la velocidad y minimizar el consumo de datos.

 


Recuerda que si necesitas ayuda al momento de implementar una página AMP, en PRAXIS te damos las opciones que necesitas para entregar la mejor UX dándote el apoyo de especialistas y expertos en el sector digital y móvil. ¡Contáctanos!

Suscribirse al blog

ficha tecnica principales perfiles SAP

Ideas para el desarrollo empresarial

Aquí en PRAXIS buscamos fortalecer el desarrollo de las empresas gracias a la implementación de tecnologías y metodologías especializadas. Por eso hemos creado nuestro blog para compartir las mejores ideas y herramientas para optimizar el desempeño empresarial. Trataremos temas como:

  • Desarrollo e implementación de soluciones móviles.
  • Metodologías de capacitación.
  • Sistemas de staffing.

Top 5 publicaciones más leídas

Ebook User Experience

certificacion_pmp

Claves_Soluciones_Moviles_

DESCARGA-EBOOK-GRATUITO