Publicado em 22 de janeiro de 2025
A QuintoAndar melhorou significativamente a performance na Web, reduzindo a Interaction to Next Paint (INP) em 80%, o que levou a um aumento de 36% nas conversões year over year. Reconhecendo a importância de sites rápidos e responsivos para o engajamento do usuário, implementamos um código amarelo para priorizar a performance em todas as equipes.
Usando ferramentas como o Real User Monitoring (RUM) e técnicas como async/await para otimização de tarefas longas e transições do React, a QuintoAndar reduziu os tempos de interação e melhorou a experiência do usuário. As mudanças, incluindo a remoção de pixels de terceiros e otimizações de renderização, resultaram em melhores métricas de performance, passando de 42% para 78% das páginas que agora atendem ao limite "bom" de 200 milissegundos ou menos do INP, e apenas 6,9% das páginas oferecem uma experiência ruim, em comparação com 32% no início.
O problema
A QuintoAndar é a maior plataforma de moradias do Brasil, com anúncios também ativos em vários países da América Latina. A pesquisa é o maior canal on-line do setor imobiliário, o que significa que a aquisição de tráfego orgânico é vital para o negócio. Além disso, oferecer uma excelente experiência do usuário é essencial para manter o engajamento e ajudar as pessoas a encontrar a casa dos sonhos.
No início de 2024, a QuintoAndar percebeu que, embora provavelmente tivesse a melhor plataforma do mercado, poderia oferecer uma experiência do usuário melhor, o que resultaria em taxas de conversão mais altas. Isso ficou evidente com a introdução da Interaction to Next Paint (INP) como uma Core Web Vital. Na verdade, a QuintoAndar teve a pior INP em comparação com os concorrentes.
Sabendo do impacto negativo de um INP alto na experiência do usuário, a equipe de SEO e desempenho da Web do QuintoAndar decidiu tomar medidas. Com um plano de ação bem definido, eles começaram a trabalhar em uma série de melhorias técnicas e de conteúdo com o objetivo de reduzir o INP e melhorar o engajamento do usuário e as taxas de cliques.
Esta é a história de como a QuintoAndar conseguiu reduzir o INP em 80%, resultando em um aumento significativo nas conversões e melhorias na experiência do usuário. Neste estudo de caso, vamos abordar as estratégias implementadas, os desafios enfrentados e os resultados alcançados.
Código amarelo: priorizar a performance da Web
Sabendo que a performance da Web é crucial não apenas para a experiência do usuário, mas também para o sucesso geral da empresa, e sabendo que um site rápido e responsivo gera mais engajamento e retenção de usuários, a QuintoAndar entendeu que alcançar esses resultados exigia um esforço contínuo e coordenado em toda a organização. Isso levou o QuintoAndar a instituir um código amarelo.
O conceito de "código amarelo" foi criado no Google como resposta à necessidade de melhorar a velocidade, concedendo a um líder designado a autoridade para recrutar qualquer pessoa na empresa para ajudar, independentemente dos projetos atuais.
Na QuintoAndar, o "Código Amarelo" agia como um sistema de alerta interno projetado para priorizar as melhorias de desempenho da Web na organização. Quando o "código amarelo" foi declarado, ele acionou ações imediatas e coordenadas de várias equipes da empresa para resolver problemas relacionados ao desempenho.
Como a QuintoAndar identificou as principais oportunidades e aplicou otimizações
Atrasos acima de 200 milissegundos são perceptíveis pelos usuários, e qualquer atraso significativo além disso prejudica a experiência do usuário. É por isso que a métrica INP é tão importante: ela avalia a capacidade de resposta geral de uma página em relação às interações do usuário, observando a latência de todas as interações de clique, toque e teclado que ocorrem durante o ciclo de vida da página.
No entanto, para melhorar essa métrica, é preciso analisar os detalhes. Para a QuintoAndar, a primeira etapa foi identificar quais estágios e elementos da experiência do usuário eram responsáveis pela lentidão das interações. Isso pode ser feito usando técnicas de monitoramento de usuários reais (RUM), que permitem o rastreamento detalhado de interações lentas. Isso inclui dividir o INP em subpartes, como atraso de entrada, tempo de processamento e atraso de apresentação, além de analisar frames de animação longa (LoAF, na sigla em inglês).
Com esse processo, foi possível identificar, por exemplo, que alguns elementos da experiência de pesquisa de propriedades estavam causando um tempo de interação de 4 segundos no percentil 75 (afetando 25% dos usuários). Ao otimizar tarefas longas, foram feitas melhorias significativas em muitas interações lentas que afetam a INP. Isso foi feito usando async/await para criar pontos de rendimento no código JavaScript do QuintoAndar:
function yieldToMain () {
return new Promise(resolve => {
setTimeout(resolve, 0);
});
}
Dessa forma, o feedback visual útil para o usuário pode ocorrer mais rapidamente. No caso da QuintoAndar, uma animação de carregamento foi renderizada, a linha de execução principal foi cedida para outras tarefas de prioridade mais alta e, em seguida, o restante do trabalho a ser feito inicialmente pôde ser retomado após a cessão:
async function handleFilterClick () {
showLoadingSpinner();
await yieldToMain(); // Yield point
await loadFilterData();
showModal();
}
Outra técnica muito usada, que é essencial para quem cria apps com o React, é o uso de transições. Como o React agora oferece suporte a transições, a QuintoAndar pode usar o hook useTransition para atualizar o estado do aplicativo sem bloquear a interface do usuário.
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;
Além das técnicas mencionadas, a QuintoAndar implementou outras melhorias, como o uso de memoização, desbloqueio, controladores de interrupção e suspensão, resultando em melhorias na INP.
Por exemplo, no exemplo de código anterior, a debouncing pode ser aplicada, que é uma técnica que atrasa a execução de uma função até que um determinado período de inatividade tenha passado. Isso ajuda a evitar atualizações desnecessárias quando o usuário digita rapidamente.
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, 300); // Adjust debounce delay as needed
return () => clearTimeout(handler);
}, [value]);
Além disso, o uso do Total Blocking Time (TBT) como um proxy para INP permitiu que a QuintoAndar estimasse o impacto de grandes mudanças estruturais, como:
- Remova os pixels de terceiros do cliente.
- Eliminação do CSS-in-JS.
- Otimizações de renderização.
Iniciativas como essas são importantes porque abordam diretamente o atraso de entrada, que é o tempo entre o início da interação do usuário e o início da execução dos manipuladores de eventos registrados. Os atrasos de entrada geralmente aumentam quando outras tarefas estão em execução enquanto o usuário começa a interagir com a página. Para a QuintoAndar, o atraso de entrada foi um dos principais contribuintes para o INP devido ao grande número de tarefas executadas na linha de execução principal durante o carregamento inicial da página.
Governança de desempenho da Web para evitar regressões
Priorizar e resolver problemas de desempenho não é suficiente se as regressões não puderem ser evitadas. Quando a QuintoAndar enfrentou regressões no passado, reconheceu a importância de criar um mecanismo de governança robusto para evitar que os esforços de melhoria de desempenho regredissem.
A primeira etapa foi estabelecer mecanismos de alerta para cada métrica, segmentada por tipo de aplicativo ou experiência, ou ambos. Com os dados de métricas coletados de usuários reais, a QuintoAndar pode monitorar a performance e enviar esses dados para um banco de dados de séries temporais, em que ferramentas podem ser usadas para gerar painéis e alarmes segmentados.
Além dos alarmes fixos, a QuintoAndar também implementou alarmes com limites variáveis que detectam resultados incomuns para notificar a equipe de desenvolvimento quando as condições estão saindo do controle, mesmo antes de atingir o limite fixo. A QuintoAndar também criou um comitê quinzenal para ajustar os limites desses alertas.
Para lidar com incidentes, um processo foi criado e seguido estritamente usando runbooks, que detalham o procedimento a ser seguido para cada tipo de problema que possa surgir. Esses runbooks podem ser seguidos por qualquer pessoa da equipe de engenharia.
Por fim, para evitar que os problemas de INP entrem em produção, a QuintoAndar implementou um sistema de lançamento canário que disponibiliza uma nova versão aos usuários em etapas (por exemplo, de 1%, 10%, 65% e, finalmente, 100%). Em cada fase de reequilíbrio, a versão Canary é verificada para saber se ela resulta em uma performance pior para o usuário. Nesse caso, uma reversão ocorre automaticamente, impedindo que os recursos não otimizados entrem totalmente em produção.
As principais ações tomadas foram:
- Alertas bem definidos (fixos e variáveis) com comitês quinzenais para refinamento de limites.
- Procedimentos de incidentes com runbooks detalhados.
- Versões canárias com validações de desempenho para limitar o impacto de possíveis regressões de desempenho.
Resultados
A priorização adequada do desempenho dentro da organização, uma equipe dedicada de performance e o uso de técnicas de otimização resultaram em uma redução de 80% no INP, conforme medido nos nossos dados de RUM. O gráfico abaixo mostra o INP especificamente para dispositivos móveis, em que é possível observar uma queda rápida inicial. Essa melhoria foi motivada por correções de interações que eram particularmente problemáticas. Ele também destaca uma queda consistente que foi mantida ao longo do ano, demonstrando a importância do processo de governança na prevenção de regressões.
Essas melhorias também foram refletidas no painel do CrUX, em que o QuintoAndar agora tem um INP abaixo de 200 milissegundos na 75ª percentil, com 78% das páginas com desempenho abaixo desse limite e apenas 6,9% das páginas com uma experiência ruim, um número que tem diminuído mês após mês.
Esse resultado foi crucial para ter um impacto direto nos negócios da QuintoAndar. A QuintoAndar observou um aumento de 36% no volume de conversões em relação ao ano anterior (novos clientes em potencial, que, no caso da QuintoAndar, são pessoas que agendaram uma visita à propriedade). Esse resultado está fortemente relacionado, mas não exclusivamente, ao aumento do engajamento que eles alcançaram ao oferecer uma melhor experiência do usuário.
Conclusão
Melhorar a performance da Web é um desafio. Às vezes, pode parecer demais. Quando a QuintoAndar começou, eles não tinham todas as respostas. No entanto, ao dividir o problema, focar nos problemas de maior impacto e estimular a colaboração entre as equipes, eles fizeram um progresso real. Nem tudo precisa ser corrigido de uma vez. Mudanças pequenas e incrementais podem levar a melhorias significativas. Ao dar o primeiro passo, seja para identificar os maiores gargalos, experimentar otimizações ou aumentar a conscientização da equipe, você estará no caminho para melhorar o desempenho e a experiência do usuário.