La importancia del rendimiento en una web o webApp

Cada vez son mayores las exigencias de las páginas web que diseñamos. Imágenes más grandes y pesadas o  efectos que hacen más atractiva la experiencia usuario, hacen que sea indispensable comprobar si esa experiencia  que estamos buscando no nos devuelva justo lo contrario, es decir, una página que tarda mucho en cargar y que como resultado nos da una tasa de abandono cada vez mayor. Nos gusta navegar y la oferta es inmensa, si un sitio nos hace esperar acabamos por abandonarlo antes de que cargue.

Los problemas de rendimiento varían. Desde esos pequeños retrasos que solo son brevemente molestos para los usuarios, hasta aquellos que hacen que tu sitio sea completamente inaccesible.

Web Performance Optimization es la disciplina que estudia este problema, engloba todas aquellas técnicas y procesos que nos ayudan a mejorar la velocidad de carga de un site hasta convertirlo en un tiempo razonable.

Un buen rendimiento retiene más tiempo a tus usuarios

Existen datos que no dejan lugar a duda a la proporcionalidad entre un buen rendimiento y una mayor atracción y retención hacia tus usuarios.

• Amazón ya hace años que comprobó que mejorando la carga de sus páginas una décima de segundo conseguía un aumento de un 1% de sus ventas.
• Google mostró también en su día informes en los que un retraso de medio segundo en la carga de sus resultados reducía un 25% el número de búsquedas.
• DoubleClick by Google descubrió que el 53% de visitas a sitios móviles se abandona si la página tardaba más de 3 segundos en cargar.
• Pinterest aumentó un 15% su tráfico reduciendo su tiempo de espera en un 40%

Y así miles de ejemplos, porque lo que está fuera de duda es que no nos gusta esperar.
Los sitios que cargan en 5 segundos, tienen un 70% más de sesiones, un 35% menos de rebote y un 25% más de visibilidad de anuncios que aquellos sitios que tardan más de 19 segundos.

Según el gráfico de Akamai, cuando la carga sobrepasa los 10 segundos abandonamos. Este mismo estudio declara que el tiempo perfecto de carga son 3 segundos.

Es cierto que el peso de las páginas se ha incrementado de forma considerable. Si a principios de los 2000 intentábamos hacer páginas de unos 100kb, hoy en día, la media se considera en unos 3Mb. Pero esto no justifica nada cara al usuario, ya que abandonará tu site antes de esperar a que cargue.

En numerosas ocasiones las demoras en la carga de un site, se deben a llamadas a archivos externos que no cargan, a publicidad contratada que no carga bien, o a malas conexiones con nuestra base de datos, a consultas mal hechas, es decir, no siempre es culpa de las imágenes no optimizadas. Todo es un conjunto que hay que analizar por partes.

Optimiza tu site

Si utilizamos herramientas como  PageSpeed Insights de Google, veremos que tras analizar nuestro site, nos recomienda optimizaciones del tipo:

• Javascript y CSS – En ocasiones estos códigos colocados al principio de la página bloquean la visualización de la página, ya que impiden su carga hasta no haber cargado antes ellos.
• Aprovechar el caché del navegador – Establecer una fecha de caducidad o una edad máxima en las cabeceras HTTP de los recursos estáticos indica al navegador que cargue los recursos descargados previamente del disco local en lugar de hacerlo a través de la red.
• Optimizar la CSS-  Google recomienda, entre otras cosas, que si se trata de una css pequeña, se añada a la cabecera en lugar de llamar a un archivo externo, ya que hasta que no se haya cargado ese archivo, no empezará la página a renderizarse. También recomienda no usar atributos de estilos en las etiquetas del HTML.
• Optimizar imágenes – aunque normalmente usamos el propio photoshop para optimizar las imágenes (guardar para web), existen compresores que optimizan mucho más estos archivos, sobre todo los png, yo por ejemplo, para jpg y png utilizo tiny.png es una herramienta online muy potente y permite optimizar varios archivos a la vez.
• Evitar redireccionamientos – ralentizan la carga
• Habilitar compresión – todos los navegadores modernos admiten y ejecutan automáticamente la compresión gzip en todas las solicitudes HTTP. Podemos reducir el tamaño de respuesta  hasta en un 90 %
• Elegir un buen servidor – lo barato sale caro y lo caro no siempre es lo mejor, consulta datos de rendimiento antes de elegir tu proveedor de hosting. Google recomienda que la respuesta del servidor ha de ser inferior a 200 ms
• Prioriza el contenido visible – para que las páginas carguen más rápido, Google te da varias soluciones para limitar el tamaño de los datos del contenido de la mitad superior de la página.

 

Herramientas útiles

• Pagespeed – herramientas de Google diseñadas para optimizar el rendimiento de un sitio web.
• Lighthouse mejora la calidad de tus apps web. Puedes ejecutarse como una extensión de Chrome o desde la línea de comandos.
• Gtmetrix – mide la velocidad de tu sitio web en cargar.
• Tiny – optimiza online archivos de imágenes png y jpg