Adaptando la performance a Lighthouse 6

La idea de este artículo es compartir que hicimos cuándo sucedió esto y que aprendizajes tuvimos para recuperar este tan preciado color verde en los resultados de Google.

Este es el feedback que comenzó a llegar de vendedores que empezaron a ver que el puntaje de sus tiendas había caído.

La realidad es que al momento que Google aplicó sus cambios, los sitios en general no perdieron velocidad de carga, sino que su puntaje bajó repentinamente.

¿Esto lo hace menos importante? Para nada, si bien un sitio que antes tardaba 3 segundos en cargar ahora tarda lo mismo, para el buscador más grande que existe puede que se califique como más lento.

Si para Google sos más lento, no importa si tenés un fórmula 1, ellos le van a decir a todo el mundo que tenés una bicicleta y todos le van a creer. De hecho el puntaje que usan impacta en el SEO de su buscador.

Hay dos cambios clave que introdujo Google que impactó en nuestras tiendas:

El LCP mide el tiempo que tarda en cargarse y acomodarse en la pantalla el componente visual más grande. Cuanto más rápido se cargue y menos varíe el LCP, mejor es el puntaje.

Un ejemplo de un LCP incorrecto puede verse debajo, donde al parecer al comienzo corresponde al título pero luego cuando se carga la imagen, pasa a ser éste el componente más grande.

Un LCP mejor resuelto se puede ver debajo dónde la mayor parte del tiempo se mantiene el mismo componente como el de mayor tamaño.

El CLS representa la cantidad de cambios o saltos visuales que se producen en la pantalla hasta que terminó su carga. Cuanto menos saltos visuales sucedan, mejor será la experiencia para el usuario.

Debajo un ejemplo de un típico caso donde los componentes “saltan” o cambian de lugar debido a que se cargan de forma poco eficaz.

La relación entre el LCP y el CLS es muy importante, ya que varios saltos visuales en la carga (mucho CLS) pueden impactar en la lectura del LCP.

Un ejemplo claro se puede dar cuando tenemos un carrusel de imágenes como componente principal (siendo un claro LCP), pero este usa un Javascript muy pesado y demoramos mucho en hacer el pedido de sus imágenes al servidor. Esto puede resultar en un LCP que se carga tarde y a medida que se vaya cargando se generen saltos visuales hasta que quede todo acomodado.

Lo primero que tuvimos que entender fue que la performance ya no sólo se trata de “reducir el peso de los archivos que cargamos” (además de muchas cosas más en relación a JS, CSS e imágenes), sino que también se trata de adelantar la carga de lo más importante y dentro de esto empieza a entrar en juego cargar lo antes posible de nuestro LCP.

En la parte derecha encontramos algo que dice LCP, donde al posarnos con el mouse nos va a marcar cuál es el LCP (en este caso la imagen principal del carrusel), mientras que en rojo vemos los CLSs (Layout Shift).

Es importante remarcar que el LCP puede variar en base a distintas personalizaciones de la plantilla y es acá donde hasta hoy tenemos un desafío grande.

El CLS reportado no siempre tiene que estar relacionado al LCP, por lo que nosotros decidimos enfocarnos en esto(por ahora) solo si encontramos CLS que impacte al LCP. Para saber esto, simplemente posamos el mouse sobre el Layout Shift y va a sombrearse el elemento donde impacta.

Sabiendo cuál es el LCP, tenemos que hacer todo lo posible para que se cargue cuanto antes y con el menor CLS posible. Esto nos lleva a leer los resultados del análisis de performance cómo una línea de tiempo, donde todo lo que está a la izquierda del LCP (mirando la mitad superior de la imagen debajo), es algo que bloquea la carga el mismo.

Acá la solución va a depender de cada sitio, obviamente no podemos remover todos los recursos del sitio antes del LCP porque se vería roto pero si empezar a probar que pedidos al servidor podemos adelantar, posponer o ahorrar.

En nuestras tiendas esto nos llevó a

Gracias a esto adelantamos la carga de la primer imagen en el carrusel principal (e incluso en el primer banner que ve en mobile) y el SASS que aplica colores y tipografías. Debajo un ejemplo de cómo implementamos esto.

Si bien son algo que queda muy bueno a nivel visual, poco a poco con estos cambios vamos a ver que los placeholders para reemplazar el LCP ya no son necesarios.

Tener un placeholder en un LCP es seguir atrasando la carga del mismo y generando un salto visual que ahora Google penaliza, así que si hacemos bien las cosas y cargamos lo más crítico antes y rápido, el sentido del placeholder se pierde.

Por otro lado hablamos anteriormente de reducir la carga de imágenes innecesarias. Esto aplica sobretodo a las imágenes de banners y listado de productos, donde cargar una imagen en baja calidad y luego reemplazarla por la versión final puede verse muy bien pero si nos ahorramos ese pedido al servidor y simplemente mostramos la imagen final por una animación de fundido; podemos estar teniendo un resultado que no daña la experiencia y mejora la performance.

Esta batalla no terminó, seguimos haciendo pruebas y mejoras todo el tiempo porque queremos recuperar los 90 pts estables en todas las plantillas y con todas configuraciones de diseño, pero lo más importante que aprendimos más allá de lo técnico fue:

Esta historia continuará…

Para más información de otras mejoras en relación a performance aplicadas durante el año pasado, les recomiendo leer:

Related posts:

Mindful eating is a form of conscious awareness that goes beyond the experience of eating, including the well-being of the body, mind, and soul. This means that the choices we make about what to eat…

Yet they seem not to notice the sadness and the sleeping pills.. “The Monsters You Love” is published by Jackie Wright.

Designing a professional, visually-enriching annual report requires expertise. Releasing an annual report is a mandatory compliance for corporate companies in India. Publishing an annual report for…