Una característica muy importante de cualquier aplicación es su rendimiento, y más aún si se trata de una aplicación web.
Factores clave de la optimización web
Existen varios factores clave por los cuales es importante tener en mente la velocidad de la aplicación, incluso desde sus etapas más tempranas de desarrollo, que podemos desglosar en:
- Experiencia de usuario: Existen estudios que indican que uno de cada cuatro usuarios saldrá de nuestra página si no carga antes de 4 segundos. Incluso Amazon estima en 1 600 millones de dólares las pérdidas en ventas por 1 segundo de retraso en la carga de sus páginas. Por ello, es vital para el éxito de la aplicación minimizar estos tiempos de espera y que nuestro usuario permanezca en la web el mayor tiempo posible.
- Google valora el rendimiento para el posicionamiento y los anuncios: Es conocido que uno de los factores dentro del algoritmo de posicionamiento de Google lo determina la velocidad de carga. Por lo tanto, aumentarlo incidirá positivamente en el SEO de la página. Igualmente, si disponemos de una campaña de AdWords, la calidad de los anuncios también está determinada por la velocidad de carga de los enlaces que coloquemos.
- Mejorar la navegación con dispositivos móviles: El número de visitas que recibimos desde un smartphone o tablet se incrementa día a día. Reduciendo el peso de la versión móvil de nuestra página (y creando un diseño responsive) conseguimos que nuestros visitantes móviles no se dejen su tarifa de datos en nuestro site, cosa que seguro agradecen.
- Costes de servicio: Uno de los objetivos de la optimización es reducir el número de peticiones a nuestro servidor, y por lo tanto, reducir el tráfico que generamos. En muchos casos, las peticiones al servidor y el tráfico son factores que influyen directamente en la factura de nuestro proveedor de hosting, por lo que reducirlos también beneficiará nuestra economía.
- Ser más ecológicos: También aquí podemos favorecer el medio ambiente, ya que reduciendo el número de peticiones y la carga de nuestros servidores, incluso podemos reducir el número de éstos que necesitamos y, por tanto, nuestra huella de carbono.
Todos estos factores unidos han favorecido que, de un tiempo a esta parte, las técnicas de optimización de aplicaciones web (o WPO, del inglés “Web Performance Optimization”) estén cogiendo cierta importancia dentro del ámbito del desarrollo web, y que incluso el mundo SEO se asome a ellas en sus conferencias y eventos.
Nuestra definición de Optimización de rendimiento web podría ser algo como:
Las Optimización de rendimiento web (WPO) consiste en un conjunto de técnicas enfocadas a reducir tanto las peticiones recibidas por la aplicación, como el tamaño de las mismas, si finalmente se producen, con el objetivo de reducir los tiempos de latencia entre el usuario y la respuesta final de la página.
Y esto, ¿cómo se consigue?
Fundamentalmente, a través de 4 principios básicos:
- Reducir las peticiones al servidor
Esto supone, por una parte, hacer un uso intensivo de la Caché, ya sea del propio navegador del usuario, estableciendo correctamente las cabeceras HTTP de las peticiones, sobre todo para contenido estático (imágenes, CSS, JSs, etc.), como sistemas de proxy caché intermedios, como CloudFlare o Varnish Caché. De esta manera, siempre que un archivo se encuentre en la caché del navegador o en una caché intermedia, nos ahorraremos recibir la petición en nuestro servidor.Por otra parte, es importante utilizar técnicas de combinación de los archivos CSS y JS, de manera que combinemos el contenido de todos los archivos CSS y JS de nuestras páginas en uno sólo de cada tipo, de manera que terminemos reduciendo las peticiones a 2. Es importante indicar que, para reducir su tamaño, se deben combinar sólo los archivos que se necesiten en cada página. - Reducir el tamaño de las peticiones recibidas
Si finalmente la petición ha de llegar al servidor, lo importante es que el tamaño de la respuesta sea lo más pequeña posible. En este caso, las técnicas más comunes son:- Habilitar la compresión con gzip, que actualmente ya soportan todos los navegadores modernos, así como los servidores más comunes: IIS, Apache o NGinx
- Minificar el contenido de archivos CSS y JS, además de la combinación anteriormente mencionada, se reduce su tamaño eliminando saltos de linea, espacios, comentarios o renombrando variables.
- Optimización de imágenes, con servicios como SmushIt, de Yahoo, que nos facilitan la tarea de crear las imágenes más pequeñas posibles.
- Combinar las imágenes en objetos móviles CSS (o Sprites CSS), de manera que se dispone de una única imagen conteniendo todas las imágenes de la página, que luego se posicionan con CSS y se muestra la que corresponde.
- Acercar el contenido lo más posible al usuario final para reducir su latencia
El tiempo que tarda en llegar la petición hasta el usuario final, o tiempo de latencia, no es el mismo si hay que llegar a Australia, que si el usuario es de Madrid, por lo que es importante utilizar una red de distribución de contenido (o CDN, Content Delivery Network) que facilita cachear los recursos estáticos y los sirve desde la localización más cercana al usuario. CloudFlare ofrece soporte CDN gratuito, aunque también hay alternativas de pago. - Descargas paralelas
Algunos sistemas operativos limitan el número de descargas simultáneas que se realizan desde un mismo dominio, por que lo que el navegador debe esperar a que se carguen los recursos antes de seguir pidiendo los siguientes. Este caso se puede mejorar si movemos nuestros recursos estáticos a otro dominio, o subdominio en nuestra web (http://static.midominio.com), con lo que estaremos descargando desde dos o más dominios diferentes, y por tanto, aumentando la simultaneidad de las descargas.Otro caso concreto de bloqueo se da con los archivos JS, ya que el navegador los procesa después de su descarga, y no sigue con el siguiente archivo hasta que termina. Por eso, si se colocan la inclusión de los archivos JS en la cabecera de la página, éstos bloquearan el resto de descargas (CSS, imágenes, etc.) hasta que termine su proceso. La solución es sencilla: colocamos los archivos JS al final de la página.
Herramientas y servicios recomendados
Obviamente, todas estas sugerencias ya están formalizadas y acotadas, y disponemos de dos magníficas herramientas que nos ayudarán a identificar y poner remedio a los problemas de rendimiento de nuestro sitio web, y son:
- Google Page Speed: cómo no, los chicos de Mountain View vienen en nuestra ayuda con PageSpeed, que consiste en una lista de buenas prácticas y una serie de herramientas que nos ayudan en nuestra tarea. Tenemos acceso a una herramienta online o una imprescindible extensión de Chrome o Firefox. Con ellas obtendremos una puntuación de 0 a 100 y una lista de recomendaciones a aplicar.
- Yahoo YSlow: En Yahoo también han dedicado tiempo a identificar estas técnicas y a crear las extensiones para que puedas aplicarlas desde tu propio navegador. Al igual que PageSpeed, nos evalúa la página de 0 a 100 y nos indica las mejoras a implementar.
Existen también servicios online que nos generan un informe del estado actual de nuestra aplicación, y permiten hacerle un seguimiento o monitorizarla en el tiempo, para que prevenir que futuras actualizaciones afecten a nuestro trabajo de optimización. Los servicios más conocidos son: GTmetrix y WebPageTest.
Para los más avezados, recomendamos CloudFlare, un servicio que nos proporciona, de forma transparente y gratuita, algunas de las técnicas antes descritas (caché, minimización de CSS, JS y HTML, CDN) y añade además un nivel de seguridad frente a ataques a nuestro sitio.
Todo esto parece muy complicado, ¿me echáis una mano?
Cómo no, en Estrato Media tenemos experiencia aplicando estas técnicas y estaremos encantados de ayudarte con tu sitio web, ya que es uno de los servicios que ofrecemos a nuestros clientes. Y para que puedas comprobar tú mismo los resultados, prueba a introducir esta página en los dos servicios citados antes: GTmetrix y WebPageTest.
No dudes en ponerte en contacto con nosotros y realizaremos un estudio sin compromiso de tu aplicación para que sepas qué acciones te recomendamos que tomes. No dejes pasar un día más sin sacar el máximo rendimiento a tu web. ¡Esperamos tu llamada!
