Los factores más relevantes de la optimización de aplicaciones web

Internet está plagado de sitios y servicios interesantes, y los usuarios están acostumbrados a buscar varias opciones. Si un proyecto no responde de forma ágil, se irán para no volver. Por eso, la optimización de aplicaciones web es un paso fundamental.

El entorno en que se ejecutan estas aplicaciones, un navegador web, implica varios factores a considerar. Aunque esto implica un elevado grado de independencia del sistema operativo, actualmente hay que tener en cuenta al menos cuatro motores web. Son los siguientes: webkit (Chrome, Safari y otros), Firefox, Microsoft Edge e Internet Explorer. Además, hay que tener en cuenta sus versiones. Estas afectan tanto al renderizado (HTML y CSS) como al motor de JavaScript empleado.

Para elegir a qué navegadores y versiones dar soporte, es útil partir de datos de analítica web. Para conseguirlos, claro está, debes tener una base de usuarios que accedan a tu aplicación. También puedes utilizar los datos facilitados por Caniuse. Esta web es un recurso imprescindible para determinar qué etiquetas HTML y selectores CSS puedes utilizar directamente.

Complejidad de las páginas en la optimización de aplicaciones web

Para medir los tiempos de carga y renderizado hay varias herramientas online. De ellas, Webpagetest es una de las más completas. También puedes utilizar la herramienta de red de la consola de tus navegadores. Con ella conseguirás información muy precisa de qué llamadas se llevan a cabo y cuánto tiempo tardan. A veces, optimizar una función en una API o reducir el número de veces que se accede a ella puede mejorar notablemente el rendimiento con un esfuerzo mínimo.

Es recomendable que el DOM sea lo más sencillo posible. Aunque los CMS como Wordpress, Joomla o Drupal facilitan la creación de sitios web, habitualmente se obtienen documentos muy complejos. Por ejemplo, hojas de estilo CSS que modifican los mismos componentes múltiples veces o código Javascript innecesario. Por el contrario, si desarrollas a partir de un framework que te permita utilizar un sistema de plantillas sencillo como Twig, Django Template Language o Moustache, obtendrás por lo general una estructura más simple. Tanto Frameworks CSS como Bootstrap o Foundation (o incluso otros más simples) pueden ayudarte a disponer de los componentes más habituales. El objetivo no es tanto que las páginas se rendericen más rápidamente como que la manipulación por parte del código Javascript sea más eficaz.

En función del desarrollo y de las habilidades con Javascript y jQuery de los desarrolladores, es posible que una buena forma de optimizar una aplicación web sea partir de algún framework JavaScript. Por ejemplo, Angular, Backbone.js o ReactJS. Pueden resultar pesados y contraproducentes para pequeños proyectos, pero en el caso de aplicaciones web más complejas pueden resultar más eficientes.

Cuida la optimización de las imágenes

Si tu aplicación tiene una carga gráfica importante, hay que prestar especial atención a la optimización de las imágenes. No sólo mediante la generación de imágenes bien optimizadas. En caso de que sean los usuarios los que pueden subirlas, es recomendable que se optimicen después en el servidor. Para conseguirlo puedes utilizar tanto herramientas del sistema operativo como servicios externos de optimización de imágenes. Por ejemplo, Kraken.io.

Además, si lo consideras necesario, puedes hacer que la app detecte si se abre en dispositivos móviles. En caso afirmativo, se puede indicar que entonces se sirva un juego de imágenes más liviano. Aunque es difícil determinar si la conexión tiene lugar por wifi o mediante la señal de red móvil, los usuarios obtendrán una experiencia más fluida. Además, evitarás que consuman más datos de los necesarios.

Por último, no hay que olvidar que muchos de los contenidos estáticos se pueden servir a través de un CDN. No sólo es más rápido que hacerlo desde el servidor de la aplicación. También dejará libres recursos para atender un número de peticiones más elevado. Además de optimizar la aplicación web, la inversión en un CDN puede resultar un ahorro importante. Con su uso se reduce la necesidad de utilizar recursos de los servidores propios.