Fecha de publicación: 22 de enero de 2025
QuintoAndar mejoró significativamente su rendimiento web reduciendo su Interaction to Next Paint (INP) en un 80%, lo que generó un aumento del 36% en las conversiones año tras año. Dado que reconocemos la importancia de los sitios rápidos y responsivos para la participación de los usuarios, implementamos un "código amarillo" para priorizar el rendimiento en todos los equipos.
Con herramientas como la supervisión de usuarios reales (RUM) y técnicas como async/await para la optimización de tareas largas y las transiciones de React, QuintoAndar redujo con éxito los tiempos de interacción y mejoró la experiencia del usuario. Los cambios, incluida la eliminación de píxeles de terceros y las optimizaciones de renderización, generaron mejores métricas de rendimiento, pasando del 42% al 78% de las páginas que ahora cumplen con el umbral "bueno" de INP de 200 milisegundos o menos, y solo el 6.9% de las páginas ofrecen una experiencia deficiente en comparación con el 32% cuando comenzamos.
El problema
QuintoAndar es la plataforma de vivienda más grande de Brasil, con fichas activas en varios países de América Latina. La búsqueda es el canal en línea más grande de bienes raíces, lo que significa que adquirir tráfico orgánico es vital para su negocio. Además, proporcionar una experiencia del usuario excelente es fundamental para mantener la participación de los usuarios y ayudarlos a encontrar las casas de sus sueños.
A principios de 2024, QuintoAndar se dio cuenta de que, si bien probablemente tenían la mejor plataforma del mercado, podrían ofrecer una mejor experiencia del usuario, lo que generaría porcentajes de conversiones más altos. Esto se hizo evidente con la introducción de la interacción a la siguiente pintura (INP) como una métrica web esencial y, de hecho, QuintoAndar tuvo el peor INP en comparación con nuestros competidores.
Consciente del impacto negativo de un INP alto en la experiencia del usuario, el equipo de SEO y rendimiento web de QuintoAndar decidió tomar medidas. Con un plan de acción bien definido, comenzaron a trabajar en una serie de mejoras técnicas y de contenido destinadas no solo a reducir la INP, sino también a mejorar la participación de los usuarios y las tasas de clics.
Esta es la historia de cómo QuintoAndar logró reducir el INP en un 80%, lo que generó un aumento significativo en las conversiones y mejoras en la experiencia del usuario. En este caso de éxito, se explorarán las estrategias implementadas, los desafíos a los que se enfrentaron y los resultados obtenidos.
Código amarillo: Prioriza el rendimiento web
QuintoAndar sabía que el rendimiento web es fundamental no solo para la experiencia del usuario, sino también para el éxito general de la empresa, y que un sitio rápido y responsivo genera una mayor participación y una mejor retención de usuarios. Por lo tanto, entendió que lograr estos resultados requería un esfuerzo continuo y coordinado en toda la organización. Esto llevó a QuintoAndar a establecer un “código amarillo”.
El concepto de “Código Amarillo” se originó en Google como respuesta a la necesidad de mejorar la velocidad, lo que le otorga a un líder designado la autoridad para reclutar a cualquier persona de la empresa para que lo ayude, independientemente de sus proyectos actuales.
En QuintoAndar, el "Código Amarillo" actuaba como un sistema de alerta interno diseñado para priorizar las mejoras de rendimiento web dentro de la organización. Cuando se declaró el "código amarillo", se activó una acción inmediata y coordinada de varios equipos de la empresa para abordar y resolver los problemas relacionados con el rendimiento.
Cómo QuintoAndar identificó las principales oportunidades y aplicó optimizaciones
Los usuarios notan las demoras superiores a 200 milisegundos, y cualquier retraso significativo más allá de ese punto perjudica la experiencia del usuario. Por este motivo, la métrica INP es tan importante: evalúa la capacidad de respuesta general de una página ante las interacciones del usuario observando la latencia de todas las interacciones de clic, presión y teclado que se producen durante el ciclo de vida de la página.
Sin embargo, mejorar esta métrica requiere un análisis detallado. En el caso de QuintoAndar, el primer paso fue identificar qué etapas y elementos de la experiencia del usuario eran responsables de las interacciones lentas. Esto se puede hacer con técnicas de supervisión de usuarios reales (RUM), que permiten un seguimiento detallado de las interacciones lentas. Esto incluye desglosar la INP en subpartes, como la demora de entrada, el tiempo de procesamiento y la demora de presentación, así como analizar los fotogramas de animación largos (LoAF).
A través de este proceso, se pudo identificar, por ejemplo, que ciertos elementos de la experiencia de búsqueda de propiedades causaban un tiempo de interacción de 4 segundos en el percentil 75 (afectando al 25% de los usuarios). Con la optimización de tareas largas, se lograron mejoras significativas en muchas interacciones lentas que afectaban a la INP. Para ello, se empleó async/await para crear puntos de rendimiento en el código JavaScript de QuintoAndar:
function yieldToMain () {
return new Promise(resolve => {
setTimeout(resolve, 0);
});
}
De esta manera, los comentarios visuales útiles para el usuario pueden ocurrir más rápido. En el caso de QuintoAndar, se renderizó un ícono giratorio, se cedió el subproceso principal para otras tareas que podrían tener una prioridad más alta y, luego, el resto del trabajo que se debía realizar inicialmente se pudo reanudar después de ceder:
async function handleFilterClick () {
showLoadingSpinner();
await yieldToMain(); // Yield point
await loadFilterData();
showModal();
}
Otra técnica muy utilizada, que es esencial para quienes compilan aplicaciones con React, es el uso de transiciones. Dado que React ahora admite transiciones, QuintoAndar podría usar el hook useTransition para actualizar el estado de la aplicación sin bloquear la interfaz de usuario.
import React, { useState, useTransition } from 'react';
function App() {
const [isPending, startTransition] = useTransition();
const [value, setValue] = useState('');
const onInputChange = event => {
setValue(event.target.value) // high-priority
startTransition(() => {
// Time-consuming task—for example, filter and update the list...
});
}
return (
<div className="App">
<input
value={value}
onChange={onInputChange}
placeholder='Start typing...'
/>
</div>
);
}
export default App;
Junto con las técnicas mencionadas, QuintoAndar implementó otras mejoras, como el uso de memoización, anulación de rebote, controladores de aborto y suspenso, lo que mejoró la INP.
Por ejemplo, en el ejemplo de código anterior, se podría aplicar el desbloqueo, que es una técnica que retrasa la ejecución de una función hasta que pasa un período determinado de inactividad. Esto ayuda a evitar actualizaciones innecesarias cuando el usuario escribe rápidamente.
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, 300); // Adjust debounce delay as needed
return () => clearTimeout(handler);
}, [value]);
Además, el uso del tiempo de bloqueo total (TBT) como proxy para la INP permitió a QuintoAndar estimar el impacto de los grandes cambios estructurales realizados, como los siguientes:
- Quitar los píxeles de terceros del cliente
- Eliminación de CSS en JS
- Optimizaciones de renderización.
Iniciativas como estas son importantes porque abordan directamente la demora de entrada, que es el tiempo que transcurre entre el momento en que el usuario comienza una interacción y el momento en que comienzan a ejecutarse los controladores de eventos registrados para ella. Los retrasos de entrada suelen aumentar cuando se ejecutan otras tareas mientras el usuario comienza a interactuar con la página. En el caso de QuintoAndar, la demora de entrada fue uno de los factores más importantes de la INP debido a la gran cantidad de tareas que se ejecutan en el subproceso principal durante la carga inicial de la página.
Administración del rendimiento web para evitar regresiones
Priorizar y resolver los problemas de rendimiento no es suficiente si no se pueden evitar las regresiones. Cuando QuintoAndar enfrentó regresiones en el pasado, reconoció la importancia de crear un mecanismo de gobernanza sólido para evitar que sus esfuerzos de mejora del rendimiento retrocedieran.
El primer paso fue establecer mecanismos de alerta para cada métrica, segmentados por tipo de aplicación o experiencia, o ambos. A través de los datos de métricas capturados de usuarios reales, QuintoAndar puede supervisar el rendimiento y enviar estos datos a una base de datos de series temporales, en la que se pueden usar herramientas para generar paneles y alarmas segmentadas.
Además de las alarmas fijas, QuintoAndar también implementó alarmas con umbrales variables que detectan resultados inusuales para notificar a su equipo de desarrollo cuando las condiciones se salen de control, incluso antes de alcanzar el umbral fijo. QuintoAndar también estableció un comité quincenal para ajustar los umbrales de estas alarmas.
Para controlar los incidentes, se creó un proceso que se siguió estrictamente con runbooks, que detallan el procedimiento que se debe seguir para cada tipo de problema que pueda surgir. Cualquier persona del equipo de Ingeniería puede seguir estos runbooks.
Por último, para evitar que los problemas de INP ingresen a producción, QuintoAndar implementó un sistema de lanzamiento Canary que entrega una nueva versión en etapas a los usuarios (por ejemplo, de forma incremental del 1%, 10%, 65% y, finalmente, al 100%). En cada etapa de reabastecimiento, se verifica la versión Canary para ver si genera un rendimiento peor para el usuario. Si es así, se produce una reversión automáticamente, lo que evita que las funciones no optimizadas se implementen por completo en producción.
A modo de revisión, estas son las principales medidas que se tomaron:
- Alertas bien definidas (fijas y variables) con comités quincenales para definir mejor los umbrales
- Procedimientos de incidentes con runbooks detallados
- Lanzamientos Canary con validaciones de rendimiento para limitar el impacto de posibles regresiones de rendimiento
Resultados
La priorización adecuada del rendimiento dentro de la organización, un equipo de rendimiento dedicado y el uso de técnicas de optimización resultaron en una reducción del 80% en la INP, según se midió en nuestros datos de RUM. En el siguiente gráfico, se muestra la INP específicamente para dispositivos móviles, donde se puede ver una disminución inicial rápida. Esta mejora se logró gracias a las correcciones de interacciones que eran particularmente problemáticas. También destaca una disminución constante que se mantuvo durante todo el año, lo que demuestra la importancia del proceso de gobernanza para evitar regresiones.
Estas mejoras también se reflejaron en el panel de CrUX, donde QuintoAndar ahora tiene un INP inferior a 200 milisegundos en el percentil 75, con el 78% de sus páginas con un rendimiento inferior a este umbral y solo el 6.9% de las páginas que ofrecen una experiencia deficiente, una cifra que ha disminuido de forma constante mes a mes.
Este resultado fue fundamental para tener un impacto directo en el negocio de QuintoAndar. QuintoAndar observó un aumento del 36% en el volumen de conversiones año tras año (clientes potenciales nuevos, que en el caso de QuintoAndar son personas que programaron una visita a una propiedad). Este resultado está fuertemente vinculado, pero no solo, a la mejora de la participación que lograron a través de una mejor experiencia del usuario.
Conclusión
Mejorar el rendimiento web es un desafío. A veces, incluso puede parecer abrumador. Cuando QuintoAndar comenzó, no tenían todas las respuestas. Sin embargo, cuando desglosaron el problema, se enfocaron en los problemas de mayor impacto y fomentaron la colaboración entre los equipos, lograron un progreso real. No es necesario corregir todo de una vez. Incluso los cambios incrementales y pequeños pueden generar mejoras significativas. Si das el primer paso, ya sea que identifiques tus cuellos de botella más grandes, experimentes con optimizaciones o crees conciencia en tu equipo, estarás en camino a mejorar el rendimiento y la experiencia del usuario.