Tu web en la pole position 🏁 con técnicas de desarrollo moderno

En este artículo te queremos contar como, actualmente, es posible construir cualquier clase de sitio web con técnicas punteras de desarrollo hasta ahora exclusivas de monstruos como Facebook, Gmail, Instagram o Twitter. ¿Qué se consigue? En esencia, una navegación instantánea casi mágica y, en consecuencia, una disminución drástica de la tasa de abandono y un aumento considerable de la tasa de conversión.

Es difícil hablar de las ventajas del desarrollo web moderno sin hablar de los inicios y la evolución de internet. También somos conscientes que para muchas personas la historia del desarrollo web carece de interés. Aún así es necesario hacer un breve repaso de cómo entendemos hoy en día el flujo de navegación web para identificar algunos comportamientos que con el paso del tiempo hemos acabado creyendo que son inalterables como la navegación lineal entre páginas servidas desde un equipo remoto(servidor), el tiempo de espera tras una petición, la respuesta del servidor (que variará dependiendo del peso total de la página, capacidad del servidor…), capacidad del dispositivo del usuario y muchos otros.

Esos procesos y comportamientos que hemos mencionado son responsables de uno de los mayores temores de cualquier persona que quiera obtener resultados de sitio web, la tasa de abandono o porcentaje de rebote.

Actualmente se invierten muchos recursos en mitigar estos problemas: servidores más potentes, uso de CDNs, mayor ancho de banda, reducción y optimización de recursos, sistemas de cacheo… pero siempre desde un marco mental en el que asumimos que la navegación web es y será lenta en comparación con otro tipo de productos. Eso, gracias a nuevas técnicas de desarrollo ha cambiado y en Binaria hemos apostado por ellas. En este artículo te explicamos cómo tu web puede dar un salto cualitativo sin precedentes.

💡 Desarrollo web moderno

Para hablar de ello de una forma didáctica os pedimos que hagáis con nosotros el ejercicio de comparar el cambio que está experimentando el campo desarrollo web y el del automóvil. Y es que, bajo nuestro punto de vista, existen muchos paralelismos entre el giro del sector de la automoción hacia la producción de coches eléctricos y el mundo del desarrollo web hacia el uso de herramientas basadas en JavaScript y tecnologías de cliente.

Ahora que ya han pasado unos años desde la comercialización de los primeros coches eléctricos, a nadie se le escapan los beneficios de estos respecto a los coches clásicos con motor de combustión gasolina o diesel. Los avances tecnológicos cómo el almacenamiento energético han dado paso a la simplificación mecánica del automóvil y un aumento de su potencia. Se podría decir, entonces, que JavaScript es al desarrollo web lo que la electricidad a los automóviles.

Los elementos eléctricos en el mundo del automóvil así como el uso JavaScript en web no son nuevos pero con el paso de los años han ido tomando mayor protagonismo hasta el punto de convertirse en la tecnología central sobre la que se sustentan ambos productos. Las baterías de un automóvil han tenido, tradicionalmente, la función de dar energía a sistemas auxiliares del vehículo como el motor de arranque, luces, centralita… JavaScript por su lado ha tenido la misión de añadir funcionalidades extra a una tecnología basada en etiquetas HTML y estilos CSS. Pero eso ha ido cambiando, con el paso del tiempo estas tecnologías han madurado y se están convirtiendo en el pilar fundamental del desarrollo de ambos productos.

Cada vez más coches sustituyen el motor de combustión por motores eléctricos alimentados por potentes baterías y en el caso del desarrollo web cada vez existen más soluciones realizadas íntegramente con librerías basadas en JavaScript. Esto se debe principalmente a las mejoras que se van incorporando a cada nueva versión de este lenguaje de programación, a potentes librerías como React, Angular, Vue y a otras herramientas que agilizan enormemente el proceso de desarrollo.

⚡ La aceleración de tu web

Hasta hace poco la potencia de un coche se medía entre otras cosas por su velocidad de aceleración. Actualmente coches eléctricos de gama media superan en aceleración a muchos deportivos de gasolina de gama alta. Un análisis parecido se podría hacer con el aumento de velocidad y rendimiento en soluciones web que hacen un uso intensivo de JavaScript a través de librerías como React, Angular, Vue.

Dejando a un lado las comparaciones con el mundo del automóvil vamos a centrarnos ahora en describir un poco mejor en qué consiste este nuevo cambio de paradigma en el desarrollo web.

🚀 Adoptar estas técnicas de desarrollo para mi proyecto

Actualmente podemos clasificar en tres familias los tipos de soluciones web que se pueden construir usando técnicas de desarrollo moderno. Por un lado tenemos aplicaciones web o WebApps que necesitan acceder a datos remotos y manipularlos, los ejemplos más claros de este tipo de WebApps son redes sociales o todas aquellas relacionadas con comunidades, donde la comunicación entre la aplicación en el equipo del usuario y la fuente de datos es constante. Por otro lado tenemos webs o sites orientadas a contenidos estáticos, webs corporativas, catálogos de producto, marketing. Por último soluciones mixtas que aprovechan la potencia de los generadores de sites estáticos y a la vez conservan funcionalidades que requieren comunicación constante con una fuente de datos remota como plataformas de e-commerce, e-learning…

Del potencial del primer tipo de soluciones queda poco por decir, todo el mundo conoce o hace uso en su día a día de este tipo de herramientas, la base tecnológica está más que consolidada. Lo realmente novedoso, en estos momentos, es la adopción de las mismas tecnologías de desarrollo para los otros dos tipos de productos web, hasta ahora basados, en su mayoría, en soluciones de servidor.

Poco a poco estas tecnologías de desarrollo se han ido simplificando y expandiendo. Herramientas basadas en JAMStack de la que hablamos en más detalle en este artículo han ido acercando el desarrollo moderno a la producción web de todo tipo.

💵 Cuales son sus beneficios

Los resultados obtenidos con herramientas de auditoría tan populares como lighthouse, PageSpeed o GTmetrix son impactantes.

• Incremento del rendimiento. Prescindir de procesos de construcción en el servidor y servir archivos estáticos a través de un CDN hace que nada pueda competir en velocidad con tu web.
• Aumento de la seguridad. Abstracción de procesos de servidor y uso de servicios especializados de terceros.
• Mejor experiencia de desarrollo. Separación de controles para un desarrollo más focalizado. Mayor cantidad de opciones de CMS.
• Mejoras SEO. Herramientas como Gatsby proporcionan un amplio catálogo de herramientas, automatismos y plugins para generar un sitio amigable para crawlers.
• Mayor accesibilidad. Los generadores de sites estáticos basan su desarrollo en un conjunto de buenas prácticas que repercuten positivamente en una mejor accesibilidad.
• Barato. Al tratarse de archivos estáticos, pueden ser servidos desde cualquier lugar y su escalado es tan sencillo como ampliar las capacidades del CDN.
  

📈 Impacto directo en el negocio

Una mejora que merece ser tratada a parte es la navegación casi inmediata que contribuye a una experiencia de usuario plenamente satisfactoria.

Cuando el usuario interioriza que no hay tiempos de espera, cuando desaparece la incertidumbre sobre la velocidad de respuesta a sus interacciones, es entonces cuando se produce la magia y los patrones de comportamiento del usuario cambian radicalmente, el usuario se sumerge en la web, confía en ella y la explora sin miedo.

Esto es, en nuestra opinión, el tesoro escondido tras los proyectos basados JAMStack. Un nuevo escenario que ponemos ante nuestros usuarios para potenciar su experiencia y un regalo para nuestros clientes que ven, gracias al uso de técnicas modernas de desarrollo, una manera real y efectiva de mejorar sus KPIs.

Algunos ejemplos reales:

Reducción drástica de la tasa de rebote
George.com* redujo en un 50% su tasa de abandono. Cuando en un sitio web no hay esperas y funciona incluso en conexiones 2G, las métricas de abandono bajan de forma espectacular.

Aumento de la tasa de conversión
BookMyShow* alcanzó un 80% de incremento en la conversión. Por rapidez, por fiabilidad, por estabilidad y por su mejora notable en la experiencia de compra en dispositivos móviles.

Mejoras estratosféricas en KPIs fundamentales
Nikkei* consiguió datos increíbles: +49% de usuarios activos diarios, dobló las páginas vistas por sesión, 2.3X de aumento del tráfico orgánico y un incremento del 58% de su tasa de conversión. Es otras palabras, más negocio.

* Datos oficiales de Google

🔮 Y lo que está por venir…

Es fácil darse cuenta de la potencia que hay detrás de estas nuevas prácticas de desarrollo y compañías tan importantes como Google lo saben. Es por ese motivo por el que están apostando tan fuerte por la combinación de estas tecnologías con Progressive Web App, que no es otra cosa que convertir nuestras WebApps o sites estáticos en aplicaciones de escritorio para cualquier dispositivo. Incorporan características que hasta hace poco eran exclusivas del desarrollo nativo para dispositivos, notificaciones push, cámara, gps, … y mucho más.

Para nosotros el uso de estas nuevas herramientas son un paso más para unificar un producto, independientemente de su naturaleza y/o complejidad, en una sola base tecnológica estandarizada y con soporte multiplataforma.

¿Quieres que auditemos tu sitio web?

¿Tu web es lo suficientemente rápida? ¿La navegación es fluida en móviles? ¿Está optimizada para SEO? Solicita una auditoría gratuita para conocer el estado actual de tu site y las posibilidades de mejora. Solicítalo.