No confundas la velocidad con el tocino

Los viejos formatos nunca mueren…. se reinventan
5 julio, 2016
¿Merece la pena invertir en SEM?
29 septiembre, 2016
Mostrar todos

No confundas la velocidad con el tocino

Desarrolladores y programadores son muy conscientes de que la velocidad de carga de una web es crucial para su éxito. Un usuario medio no esperará más de tres segundos a que se cargue la página, simplemente se irán a otro sitio y todos los esfuerzos que has invertido en tener una buena web se irán al garete.

El problema es que no es sencillo, especialmente en móviles. Y teniendo en cuenta que el número de personas que acceden a internet a través de sus smartphones crece exponencialmente, esto puede convertirse en un gran handicap para tu web. Conseguir el equilibrio entre una web completa y a la vez rápida es complicado, pero existen herramientas como AMP (Accelerated Mobile Pages) que nos pueden ayudar.

Pero, ¿qué es AMP?

Google lanzó AMP en octubre de 2015. Esta herramienta permite optimizar los tiempos de carga de las páginas web en móviles. Su objetivo es ayudar a los desarrolladores web a agilizar la velocidad de los sitios incluso de aquellos que tienen anuncios. Esto ya es posible, el problema es que requiere de ciertas optimizaciones que no siempre se ejecutan correctamente. AMP simplemente hace más sencillo el conseguir buenos resultados.

Y, ¿cómo funciona?

AMP tiene tres elementos básicos: el lenguaje, el manejo y el CDN (Content Delivery Network). El HTML AMP es como el standard HTML. Lo bueno es que si ya conoces el estándar HTML todo te será más sencillo. El funcionamiento de esta herramienta es que los documentos AMP están diseñados para interpretar las partes de la página de manera independiente. La página carga muchos de los elementos antes de que los usuarios se impacienten y esto le da a la página tiempo de cargar el resto de los elementos, incluídos los anuncios.

El JavaScript de AMP viene a ser práctico cuando empiezas a interactuar con ciertos elementos de la página web en tu dispositivo móvil como son encuestas o lightboxs. En general, sin embargo, los desarrolladores de AMP están intentando implementar componentes webs y otros elementos propios exclusivos, la idea es hacer de AMP el estándar propio de las webs para móviles.

imagen-2

Para conseguir optimizar tu velocidad en móviles,  tienes que cambiar algunas cosas en tu proceso de trabajo. Necesitarás mantener dos versiones de todas tus páginas: una es la versión web de sobremesa (estándar) y la versión AMP. En la versión estándar, puedes mantener todos los elementos que requiere el JavaScript, mientras en la versión AMP tendrás que olvidarte de muchos de ellos.

También tendrás que rehacer la plantilla de tu web porque AMP requiere un estilo CSS para pesar menos de 50KB. También es necesario volver a cargar las tipografías usando una extensión de amp-font. Lo mismo ocurre con las imágenes, que deberán tener una altura y anchura determinadas y deben usar formato amp-img; las animaciones formato amp-anim; vídeos HTML5 en formato amp-video, etc. Ninguno de estos cambios son difíciles de realizar, pero tienes que planear el diseño de tu página sobre ellos.

Lo más importante es que tienes que transformar tu página usando la etiqueta <link rel=»amphtml» href=»http://www.example.com/blog-post/amp/«>. Esto indica a Google que usas AMP.

Entonces, ¿Qué beneficios tiene esto?

El principal objetivo es que tu página cargue realmente rápido. Algunos test han dado mejoras en la velocidad de hasta un 85% en conexiones 3G, o sea, que si tu página normalmente carga en tres segundos, cargará en 0,45 segundos lo que casi es de manera instantánea.

Aplicar estas mejoras a tus páginas puede traer numerosos beneficios, así que, ¿por qué no hacerlo? El principal beneficio del HTML AMP es que sólo tienes que enviar un pequeño número de solicitudes HTTP para cargar una página y esto significa que conseguirás una velocidad aceptable incluso en conexiones lentas.

Conclusión

Aplicar el sistema AMP en tus páginas no sólo mejorará la experiencia de usuario, sino que te hará más visible en los motores de búsqueda de Google. Un pequeño trabajo que te ayudará a mejorar considerablemente tu web.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *