Optimización del rendimiento web

Hoy en día a los usuarios les gusta consumir la mayor cantidad de contenido, en el menor tiempo posible. Pero a pesar de ello, es frecuente encontrarse páginas por internet que carga muy lento y terminan provocando que los usuarios vayan a consumir de la competencia y, por lo tanto, se pierdan potenciales conversiones.

Según un estudio de Unbounce, el 85% de las webs son lentas y tardan más de 5 segundos en cargar el contenido, mientras que Google recomiendo que las páginas debieran cargar en menos de 3 segundos.

En este post se van a tratar los siguientes puntos:

• Breve introducción al rendimiento web
• Mejorar del rendimiento web con Google Lighthouse
• Caso práctico de la mejora del rendimiento web

Breve introducción al rendimiento web

¿Qué es el rendimiento web?

El rendimiento web hace referencia a la velocidad y con qué eficiencia se carga una página web. Se trata de un aspecto bastante relevante, ya que tiene un impacto bastante significativo en la experiencia de usuario y tienen implicaciones en una serie de aspectos que se comentarán más adelante en esta presentación. Una página web que tenga unos buenos tiempos de carga tiene mayores probabilidades de retener a los usuarios y que interactúen con esta. Por otra parte, una web que tenga unos tiempos de carga elevados o un mal rendimiento puede provocar que los usuarios estén menos tiempo y que además no vuelvan a consultar más contenido.

En 2018 la empresa Unbounce.com realizó un estudio en el cual destacaban los siguientes puntos:

• La mayoría de webs son lentas: Tal y como se indica en el estudio de Unbounce, en su muestra el 85% de las páginas tardaban entre 6 y 21 segundos o más en cargar. Según Google, actualmente el tiempo medio de carga de una web en dispositivos móviles es de 15 segundos, mientras que en desktop el tiempo medio está en los 3 segundos. Sin embargo, Google va más allá e indica que su objetivo es que en móviles cargue en menos de 3s y en desktop en menos de 2 para que se ofrezca una experiencia óptima y reducir la pérdida de usuarios.
• A los usuarios no les gusta esperar: Un 73% de los usuarios aseguró que pueden esperar más de 4 segundos a que cargue la página, pero tal y como hemos visto antes, Google dice que el comportamiento actual de los usuarios es que no esperan más de 3 segundos.
• Menos animaciones y más contenido: Dentro del marketing siempre, y cada vez más, hay la creencia de que cuantas más animaciones, fotos y vídeos tenga mayor será la experiencia del usuario. Pero no tiene por qué ser así, ya que todo este contenido multimedia lo que hace es sobrecargar la página añadiendo contenido que no siempre tiene porque resultar necesario o bien no aporta un valor en concreto. Según su estudio, al menos un 50% de los usuarios refrescaría la página al menos una vez la página. Un 22% dicen que cerrarían la app y un 14% que se irían a consultar una web de la competencia

Hay varios factores que pueden afectar a rendimiento web como:

• Respuesta del servidor
• El tamaño de las imágenes, vídeos y contenidos multimedia en general
• La optimización del código
• El tiempo de ejecución y procesado de los scripts de la web

Cuando se crea una web, suele haber diferentes equipos implicados, desarrolladores, UX, UI, generación de contenido, etc. Pero por factores como el tiempo o los recursos, se tiende a desarrollar webs que sean funcionales y acorde a lo que se ha planificado inicialmente, que suele ser menos tiempo del que se debería. Y, por lo tanto, no se le dedica el suficiente tiempo a analizar el rendimiento de la web antes de que esta esté disponible en producción. Para más detalle sobre estos puntos, se recomienda el post de Web Perfomance Optimisation.

Para resolver estos puntos, hay una serie de acciones que se pueden llevar a cabo y que nos permitirán mejorar el rendimiento.

Mejorar del rendimiento web con Google Lighthouse

De las muchas herramientas que hay para analizar el rendimiento de una web, vamos a destacar la de Google Lighthouse.

Google Lighthouse es una herramienta desarrollada por Google que se utiliza para evaluar y mejorar el rendimiento, la accesibilidad, las mejores prácticas y la optimización para motores de búsqueda (SEO) de una página web. Es una herramienta integrada en Chrome que realiza auditorías automatizadas en una página y genera informes detallados sobre diversos aspectos de rendimiento y usabilidad.

¿Cómo se hace una auditoría con Lighthouse?

Después de instalar la extensión de Lighthouse en Chrome, abriendo las Chrome DevTools, nos aparecerá la extensión de Lighthouse. Para hacer un test, nos permite seleccionar el modo, el dispositivo y qué categorías se quieren auditar. Una vez seleccionada la configuración que interesa, se puede hacer clic en Analyze page load.

Modos

Navegación: 

• Obtener una puntuación de performance de Lighthouse y todas las métricas 
• Evaluar las capacidades de las Progressive Web Apps 
• Analizar la accesibilidad inmediatamente después de cargar la página

Limitaciones 

• No se pueden analizar los envíos de formularios ni las transiciones de SPAs 
• No puede analizar contenido que no esté disponible inmediatamente después de la carga de la página

Timespan

Casos de uso 

• Medir los cambios de diseño y el tiempo de ejecución de JavaScript en un intervalo de tiempo que incluya interacciones 
• Descubrir oportunidades de rendimiento para mejorar la experiencia de páginas de larga duración y SPA

Limitaciones 

• No proporciona una puntuación de performance global 
• No puede analizar métricas de rendimiento basadas en el momento (por ejemplo, LCP) 
• No puede analizar problemas del estado de la página

Snapshot

Casos de uso

• Analizar la página un momento en concreto 
• Encontrar problemas de accesibilidad SPAs o formularios complejos 
• Evaluar las mejores prácticas de menús y elementos de IU ocultos tras la interacción

Limitaciones 

• No proporciona una puntuación o métrica de rendimiento general. 
• No puede analizar problemas fuera del DOM actual (por ejemplo, no hay análisis de red o de performance)

Dispositivo

Se pueden hacer test en desktop y en dispositivos móviles. Hay que tener en cuenta que, mediante el uso de la interfaz, el performance será más alto en dispositivos desktop, ya que para los móviles se aplica limitación de la RAM y de la conexión a internet.

Categoría

La herramienta permite hacer auditoria de diferentes aspectos de la web, como rendimiento, accesibilidad, mejores prácticas, SEO y Web-Apps progresivas.

¿Cómo se mide el rendimiento mediante Lighthouse?

Una vez se ha realizado el test, la herramienta muestra un valor del rendimiento que tiene, para ello Lighthouse usa una calculadora propia para el modo de navegación:

Las métricas que se usan son las siguientes:

• FCP - Indica el tiempo que ha tardado el primer contenido, imagen o texto, en cargarse
• SI – Mide como cuanto de rápido el contenido de la web se muestra al usuario. Se mide calculando el tiempo medio que han tardado los distintos elementos al ser visibles para el usuario
• LCP – Indica el tiempo que el contenido de imagen o texto más extenso de la página ha tardado en cargarse
• TBT – Suma de todos los periodos de tiempo entre FCP, cuando la duración de la tarea supera los 50 ms, expresado en milisegundos
• CLS – Mide el movimiento de elementos dentro del viewport

Para los modos de timepsan y snaptshot se usa otra manera de calcular el rendimiento:

Para calcular un valor aproximado del rendimiento se realiza el siguiente cálculo:

Se divide el número de auditorías pasadas por el número total de auditorías.

En este ejemplo indica que de 26 auditorías 19 fueron buenas y 7 necesitan mejorar o fueron pobres (26 = 19 + 7)

Timespan Performance= Passed audits/Total audits

Valores del rendimiento web

Según el resultado del rendimiento se categoriza en tres colores, rojo para un rendimiento pobre, en naranja indica que necesita mejorar y en verde bueno. Los números de 0-100 no aplican para el modo de timespan y snapshot.

Caso de uso

En este caso de uso se muestra cómo a partir de la optimización de una herramienta de analítica, Adobe Launch, se ha podido mejorar el rendimiento de las webs. También se quiere demostrar que la mejora no siempre va a depender de un equipo de desarrollo, sino que también lo puede hacer el departamento de analítica.

El contexto de este caso es el siguiente:

Se parte una empresa que tiene diferentes mercados a nivel global y para todas ellas usa una misma librería de Adobe Launch para configurar la analítica que se mide en cada una de las webs. Inicialmente, se hizo un análisis del rendimiento de una de las webs de una web en concreto y se vio que el rendimiento era bastante bajo y se tenía que mejorar. Uno de los puntos que estaba afectando negativamente era el volumen de la librería de Adobe Launch. En la librería contenía una gran cantidad de reglas de analítica para procesar de diferentes mercados.

Se planteó el caso de uso para un mercado específico, en el que se propuso crear una librería específica que solo contuviera las reglas de analítica específicas, descartando todas aquellas que no aplicaban. Una vez se terminó de implementar la solución, se volvió a analizar el rendimiento de las webs y se vio que el rendimiento mejoraba de manera considerable.

Conclusión

El rendimiento de las webs es un factor muy importante que no se suele tener en cuenta en las webs. La mejora del rendimiento permite mejorar el posicionamiento SEO, la experiencia de usuario, aumentar el CR y la fidelización de los clientes, y finalmente también se mejora la tasa de rebote. Mediante el uso de herramientas como Google Lighthouse se pueden realizar auditorías para saber el rendimiento de las webs y como poder mejorarlo. Finalmente, tal y como se ha demostrado desde un equipo de analítica, también se puede mejorar el rendimiento de una web optimizando las herramientas de analítica.