Otimização da interatividade das páginas de detalhes do produto para uma redução de 90% no FID máximo potencial no Lighthouse e uma melhoria de 9% no FID no Relatório de experiência do usuário do Chrome.
O Mercado Livre é o maior ecossistema de e-commerce e pagamentos da América Latina. Ele está presente em 18 países e é líder de mercado no Brasil, México e Argentina (com base em visitantes únicos e visualizações de página).
A performance da Web é um foco da empresa há muito tempo, mas recentemente ela formou uma equipe para monitorar a performance e aplicar otimizações em diferentes partes do site.
Este artigo resume o trabalho realizado por Guille Paz, Pablo Carminatti e Oleh Burkhay da equipe de arquitetura de front-end do Mercado Livre para otimizar uma das Core Web Vitals: First Input Delay (FID) e o proxy de laboratório, Total Blocking Time (TBT).
90%
Redução do potencial máximo de 1º atraso de entrada no Lighthouse
9%
Mais usuários percebem o FID como "Rápido" no CrUX
Tarefas longas, First Input Delay e Total Blocking Time
A execução de código JavaScript caro pode levar a tarefas longas, que são aquelas que são executadas por mais de 50ms na linha de execução principal do navegador.
O FID (First Input Delay) mede o tempo entre a primeira interação do usuário com uma página (por exemplo, quando ele clica em um link) e o momento em que o navegador pode começar a processar os gerenciadores de eventos em resposta a essa interação. Um site que executa código JavaScript caro provavelmente tem várias tarefas longas, o que acaba afetando negativamente o FID.
Para oferecer uma boa experiência ao usuário, os sites devem ter um First Input Delay de menos de 100
milissegundos:
Embora o site do Mercado Libre estivesse funcionando bem na maioria das seções, eles descobriram no Chrome User Experience Report que as páginas de detalhes do produto tinham um FID ruim. Com base nessas informações, a empresa decidiu concentrar os esforços em melhorar a interatividade das páginas de produtos no site.
Essas páginas permitem que o usuário realize interações complexas. O objetivo era otimizar a interatividade sem interferir em funcionalidades importantes.
Medir a interatividade das páginas de detalhes do produto
A FID requer um usuário real e, portanto, não pode ser medida no laboratório. No entanto, a métrica Tempo total de bloqueio (TBT, na sigla em inglês) pode ser medida em laboratório, tem uma boa correlação com o FID no campo e também captura problemas que afetam a interatividade.
No exemplo de rastro abaixo, embora o tempo total gasto na execução de tarefas na linha de execução principal seja de 560 ms, apenas 345 ms desse tempo são considerados tempo de bloqueio total (a soma das partes de cada tarefa que excede 50 ms):
O Mercado Livre usou o TBT como métrica de proxy no laboratório para medir e melhorar a interatividade das páginas de detalhes do produto no mundo real.
Confira a abordagem geral que eles adotaram:
- Use o WebPageTest para determinar exatamente quais scripts estavam mantendo a linha de execução principal ocupada em um dispositivo real.
- Use o Lighthouse para determinar o impacto das mudanças na latência potencial máxima na primeira entrada (FID máximo).
Usar o WebPageTest para visualizar tarefas longas
O WebPageTest (WPT) é uma ferramenta de desempenho da Web que permite executar testes em dispositivos reais em diferentes locais do mundo.
O Mercado Libre usou o WPT para reproduzir a experiência dos usuários escolhendo um tipo de dispositivo e localização semelhantes aos usuários reais. Especificamente, eles escolheram um dispositivo Moto 4G e Dulles, Virginia, porque queriam aproximar a experiência dos usuários do Mercado Livre no México. Ao observar a visualização da linha de execução principal do WPT, o Mercado Livre descobriu que havia várias tarefas longas consecutivas bloqueando a linha de execução principal por dois segundos:
Ao analisar a hierarquia correspondente, eles descobriram que uma parte considerável desses dois segundos veio do módulo de análise. O tamanho do pacote principal do aplicativo era grande (950 KB) e demorou muito para ser analisado, compilado e executado.
Usar o Lighthouse para determinar o potencial máximo de 1º atraso de entrada
O Lighthouse não permite que você escolha entre diferentes dispositivos e locais, mas é uma ferramenta muito útil para diagnosticar sites e receber recomendações de desempenho.
Ao executar o Lighthouse nas páginas de detalhes do produto, o Mercado Livre descobriu que o FID máximo potencial era a única métrica marcada em vermelho, com um valor de 1710ms.
Com base nisso, o Mercado Libre definiu uma meta para melhorar a pontuação de FID máxima em uma ferramenta de laboratório, como o Lighthouse e o WebPageTest, supondo que essas melhorias afetariam os usuários reais e, portanto, apareceriam em ferramentas de monitoramento de usuários reais, como o Relatório de experiência do usuário do Chrome.
Otimizar tarefas longas
Primeira iteração
Com base no rastreamento da linha de execução principal, o Mercado Livre definiu a meta de otimizar os dois módulos que estavam executando um código caro.
Eles começaram a otimizar a performance do módulo de rastreamento interno. Esse módulo continha uma tarefa de uso intensivo de CPU que não era essencial para o funcionamento do módulo e, portanto, podia ser removida com segurança. Isso levou a uma redução de 2% no JavaScript de todo o site.
Depois disso, eles começaram a trabalhar para melhorar o tamanho geral do pacote:
O Mercado Livre usou o webpack-bundle-analyzer para detectar oportunidades de otimização:
- Inicialmente, eles exigiam o módulo Lodash completo. Isso foi substituído por um requisito por método para carregar apenas um subconjunto de Lodash em vez da biblioteca inteira e usado em conjunto com lodash-webpack-plugin para reduzir o Lodash ainda mais.
Eles também aplicaram as seguintes otimizações do Babel:
- Usar @babel/plugin-transform-runtime para reutilizar os helpers do Babel em todo o código e reduzir consideravelmente o tamanho do pacote.
- O uso de babel-plugin-search-and-replace para substituir tokens no momento da build, a fim de remover um arquivo de configuração grande dentro do pacote principal.
- Adição de babel-plugin-transform-react-remove-prop-types para economizar alguns bytes extras removendo os tipos de propriedades.
Como resultado dessas otimizações, o tamanho do pacote foi reduzido em aproximadamente 16%.
Medir o impacto
As mudanças reduziram as tarefas longas consecutivas do Mercado Libre de dois segundos para um segundo:
O Lighthouse mostrou uma redução de 57% no possível atraso máximo na primeira entrada:
Segunda iteração
A equipe continuou investigando tarefas longas para encontrar melhorias.
Com base nessas informações, eles decidiram implementar as seguintes mudanças:
- Continue reduzindo o tamanho do pacote principal para otimizar o tempo de compilação e análise, por exemplo, removendo dependências duplicadas nos diferentes módulos.
- Aplique a divisão de código no nível do componente para dividir o JavaScript em partes menores e permitir o carregamento mais inteligente dos diferentes componentes.
- Adie a hidratação de componentes para permitir um uso mais inteligente da linha de execução principal. Essa técnica é comumente chamada de hidratação parcial.
Medir o impacto
O rastro do WebPageTest resultante mostrou pedaços ainda menores de execução de JS:
E o tempo de 1º atraso de entrada máximo no Lighthouse foi reduzido em mais 60%:
Visualizar o progresso de usuários reais
Embora ferramentas de teste de laboratório, como o WebPageTest e o Lighthouse, sejam ótimas para iterar soluções durante o desenvolvimento, o verdadeiro objetivo é melhorar a experiência para usuários reais.
O Relatório de experiência do usuário do Chrome mostra métricas sobre a experiência do usuário em destinos populares na Web. Os dados do relatório podem ser obtidos executando consultas no BigQuery, no PageSpeedInsights ou na API CrUX.
O painel CrUX é uma maneira fácil de visualizar o progresso das principais métricas:
Próximas etapas
A performance da Web nunca é uma tarefa concluída, e o Mercado Livre entende o valor que essas otimizações trazem aos usuários. Enquanto eles continuam aplicando várias otimizações em todo o site, incluindo prefetching em páginas de listagem de produtos, otimizações de imagem e outras, eles continuam adicionando melhorias às páginas de listagem de produtos para reduzir o tempo de bloqueio total (TBT, na sigla em inglês) e o FID de proxy ainda mais. Essas otimizações incluem:
- Iteração na solução de divisão de código.
- Melhoria na execução de scripts de terceiros.
- Melhorias contínuas no agrupamento de recursos no nível do agrupador (webpack).
O Mercado Livre tem uma visão holística da performance. Enquanto continua otimizando a interatividade no site, a empresa também começou a avaliar oportunidades de melhoria nas outras duas Core Web Vitals: LCP (Largest Contentful Paint) e CLS (Cumulative Layout Shift).