Rendimiento web: qué es y porqué es importante

El rendimiento web o performance web puede resumirse,

con el permiso de los puristas en el tema, 

a la velocidad de carga de un sitio. 

 

Esta velocidad y otras métricas de rendimiento pueden ser medidas cuantitativamente, los navegadores más populares tienen herramientas para esto, como Lighthouse y PageSpeed Insights de Google o Profiler de Firefox. 

 

Si en estos resultados se encuentran tiempos de carga superiores a los tres segundos, el SEO se verá afectado negativamente. 

 

Y como resultado de la indexación que hace Google, no se mostrará nuestro sitio en los resultados más relevantes.

El performance web es enteramente objetivo, 

pero la UX es subjetiva.

 

Aunque tiene patrones de diseño establecidos, la UX o experiencia de usuario depende de la percepción y gusto del usuario final, cuyas métricas son puramente cualitativas. 

 

Estas métricas van a determinar si el usuario va a continuar navegando e interactuando en el sitio para generar el engagement deseado, si esto no sucede es probable que el usuario no vuelva.

 

Pasos básicos para lograr un buen rendimiento web

y asegurarse de que sí funcione como se espera.

 

Optimizar el performance percibido

Este es el punto del performance o rendimiento web relacionado con la experiencia del usuario (UX). 

 

Es aquí donde deben hacerse los esfuerzos en el frontend para hacer que el sitio sea de interés y accesible. Haciendo que los demás contenidos y recursos secundarios, sean adquiridos en segundo plano. 

 

Multimedia

Una gran oportunidad de mejora en el rendimiento, ya que de acuerdo con http archive, el 51% del ancho de banda consumido en un sitio promedio corresponde a imágenes, y un 25% a video. 

 

Las principales acciones para mejorar este aspecto son:

 

• LazyLoading: Asegurar que todas las imágenes no críticas en el renderizado principal se carguen de manera “lazy” con el atributo “loading” en las etiquetas img

• Tener el formato adecuado: Si se trata de iconos o imágenes de pocos colores, el formato apropiado es SVG. De lo contrario lo ideal es el formato PNG, combinado con herramientas de compresión que no reduzcan la calidad o directamente utilizar el formato WebP.

• Dimensión adecuada: Utilizar una sola imagen y redimensionarla de acuerdo al tamaño del dispositivo no es una buena práctica. Para este caso es ideal contar con un set de imágenes y renderizar la adecuada, valiéndose de las etiquetas picture y los media queries.

 

Content Delivery Network 

Si el servidor se satura frecuentemente y/o este se encuentra lejos del usuario, la latencia será alta afectando directamente el tiempo de carga. 

 

Replicar el sitio en un grupo de servidores que balanceen el tráfico, es decir en un CDN, es la solución común de estos casos.

 

Reducir los estilos CSS y el código Javascript

No se trata de hacer el sitio menos estético o interactivo, sino al igual que en la multimedia, remover todo lo que no sea útil.

 

Optimizar el backend

No es la alternativa más comentada en blogs y documentación para optimizar el rendimiento web o performance.

 

Pero si el sitio objetivo es una aplicación web que hace operaciones de lectura/escritura constantemente en una base de datos, o que de acuerdo con la lógica de negocio debe hacer una cantidad considerable de validaciones y redirecciones de acuerdo a cada solicitud y además consume servicios web de terceros, entre otros.  Hace que cada factor mencionado sea un posible punto de degradación del performance, y requiere revisiones particulares según el caso ya que tienen una “silver bullet”

 

Iterar!

Luego de aplicar ajustes para mejorar el performance del sitio, evaluar si se requiere más trabajo, revisando la métrica objetivo de los cambios con las herramientas disponibles.

 

Obtener un buen rendimiento web está ligado a mejorar técnicamente, 

para esto necesitamos un aliado tecnológico que nos guíe en el proceso.

 

Contáctanos para mejorar tu performance web.

 

 

Entradas relacionadas:

Transformación digital: qué es y cómo implementarla

Esta es la razón principal por la que tu sitio web o aplicación se cae