Otimizar o desempenho de sites e aplicativos do eBay para uma experiência do usuário mais rápida.
Velocidade foi uma iniciativa em toda a empresa para o eBay em 2019, com muitas equipes determinadas a tornar o site e os apps o mais rápido possível para os usuários. Na verdade, para cada 100 milissegundos de melhoria no tempo de carregamento da página de pesquisa, o eBay notou um aumento de 0,5% na contagem de "Adicionar ao carrinho".
100ms
de melhoria no tempo de carregamento
0,5%
Aumento na contagem de "Adicionar ao carrinho"
Com a adoção de Orçamentos de desempenho (após a realização de um estudo competitivo com o Relatório de experiência do usuário do Chrome) e o foco nas principais métricas de desempenho centradas no usuário, o eBay conseguiu fazer melhorias significativas na velocidade do site.
... e os dados do Chrome User Experience Report também destacam essas melhorias.
Ainda há mais trabalho pela frente, mas estes são os aprendizados do eBay até agora.
"Cortes" de desempenho da Web
As melhorias feitas pelo eBay foram possíveis devido à redução ou "cortes" (em tamanho e tempo) de várias entidades que participam da jornada de um usuário. Esta postagem aborda tópicos relevantes para a comunidade de desenvolvedores da Web em geral, e não tópicos específicos do eBay.
Reduzir o payload em todos os recursos de texto
Uma maneira de agilizar os sites é simplesmente carregar menos código. O eBay reduziu os payloads de texto deles cortando todos os bytes não utilizados e desnecessários de respostas JavaScript, CSS, HTML e JSON exibidos aos usuários. Anteriormente, a cada novo recurso, o eBay continuava aumentando o payload das respostas, sem limpar o que não era usado. Isso aumentou com o tempo e se tornou um gargalo de performance. As equipes geralmente procrastinavam nessa atividade de limpeza, mas você ficaria surpreso com quanto eBay economizou.
O "corte" aqui são os bytes desperdiçados no payload de resposta.
Otimização do caminho crítico para conteúdo acima da dobra
Nem todos os pixels na tela são igualmente importantes. O conteúdo acima da dobra é mais crítico do que algo abaixo da dobra. Os apps iOS/Android/computador e da Web estão cientes disso, mas e os serviços? A arquitetura de serviço do eBay tem uma camada chamada Serviços de experiência, com a qual os front-ends (apps da Web e apps específicos da plataforma) se comunicam. Essa camada foi projetada especificamente para ser baseada em visualização ou dispositivo, e não em entidades, como item, usuário ou pedido. O eBay introduziu o conceito de caminho crítico para os serviços de experiência. Quando uma solicitação chega a esses serviços, eles trabalham para conseguir os dados do conteúdo acima da dobra imediatamente, chamando outros serviços upstream em paralelo. Assim que os dados estiverem prontos, eles serão liberados instantaneamente. Os dados abaixo da dobra são enviados em um bloco posterior ou carregados lentamente. O resultado: os usuários conseguem ver o conteúdo acima da dobra mais rapidamente.
O "corte" aqui é o tempo gasto pelos serviços para exibir conteúdo relevante.
Otimizações de imagem
As imagens são um dos maiores contribuidores para o aumento da página. Até mesmo pequenas otimizações ajudam muito. O eBay fez duas otimizações para imagens.
Primeiro, o eBay padronizou o formato de imagem WebP para os resultados da pesquisa em todas as plataformas, incluindo iOS, Android e navegadores compatíveis. A página de resultados da pesquisa é a página com mais imagens no eBay, e eles já estavam usando o WebP, mas não em um padrão consistente.
Em segundo lugar, embora as imagens de listagem do eBay sejam altamente otimizadas (em tamanho e formato), o mesmo rigor não se aplica a imagens selecionadas (por exemplo, o módulo superior na página inicial). O eBay tem muitas imagens selecionadas manualmente, que são enviadas por meio de várias ferramentas. Anteriormente, as otimizações eram responsabilidade do usuário que fez o envio, mas agora o eBay aplica as regras nas ferramentas. Assim, todas as imagens enviadas serão otimizadas adequadamente.
O "corte" aqui são os bytes de imagem desperdiçados enviados aos usuários.
Pré-busca preditiva de recursos estáticos
Uma sessão de usuário no eBay não é apenas uma página. É um fluxo. Por exemplo, o fluxo pode ser uma navegação da página inicial para uma página de pesquisa e uma página de itens. Então, por que as páginas no fluxo não ajudam umas às outras? Essa é a ideia da pré-busca preditiva, em que uma página pré-busca os recursos estáticos necessários para a próxima página provável.
Com a pré-busca preditiva, quando um usuário navega até a página prevista, os recursos já estão no cache do navegador. Isso é feito para recursos CSS e JavaScript, em que os URLs podem ser recuperados antecipadamente. É importante observar que isso só é útil nas primeiras navegações. Nas navegações seguintes, os recursos estáticos já estarão no cache.
O "corte" aqui é o tempo de rede para recursos estáticos de CSS e JavaScript na primeira navegação.
Pré-busca dos principais resultados da pesquisa
Quando um usuário pesquisa no eBay, os dados analíticos do eBay sugerem que é altamente provável que ele vá até um item entre os 10 principais resultados da pesquisa. Portanto, o eBay agora pré-busca os itens da pesquisa e os mantém prontos para quando o usuário navegar. A pré-busca acontece em dois níveis.
O primeiro nível ocorre no lado do servidor, em que o serviço de itens armazena em cache os 10 principais itens dos resultados da pesquisa. Quando o usuário acessa um desses itens, o eBay agora economiza tempo de processamento do servidor. O armazenamento em cache do lado do servidor é usado por apps específicos da plataforma e é lançado globalmente.
O outro nível acontece no cache do navegador, que está disponível na Austrália. A pré-busca de itens era uma otimização avançada devido à natureza dinâmica dos itens. Isso também tem muitas nuances: impressões de página, capacidade, itens de leilão e assim por diante. Saiba mais sobre isso na apresentação do Meetup de engenharia de desempenho do LinkedIn (em inglês) ou fique de olho para uma postagem do blog detalhada feita por engenheiros do eBay sobre o assunto.
O "corte" aqui pode ser o tempo de processamento do servidor ou o tempo da rede, dependendo de onde o item é armazenado em cache.
Download rápido de imagens de pesquisa
Na página de resultados da pesquisa, quando uma consulta é gerada em alto nível, duas coisas acontecem. Uma é a etapa de recall/classificação, em que os itens mais relevantes que correspondem à consulta são retornados. A segunda etapa é aumentar os itens recolhidos com informações adicionais relacionadas ao contexto do usuário, como custos de envio. O eBay agora envia imediatamente as 10 primeiras imagens dos itens ao navegador em uma parte junto com o cabeçalho para que os downloads possam começar antes da chegada do restante da marcação. Como resultado, as imagens agora aparecerão mais rapidamente. Essa alteração foi lançada globalmente para a plataforma Web.
O "corte" aqui é o horário de início do download para imagens dos resultados da pesquisa.
Armazenamento em cache próximo dos usuários finais para dados de sugestão automática
Quando os usuários digitam letras na caixa de pesquisa, as sugestões aparecem. Essas sugestões não serão alteradas para combinações de letras por pelo menos um dia. Eles são candidatos ideais para serem armazenados em cache e veiculados a partir de uma CDN (por no máximo 24 horas), em vez de solicitações irem para um data center. Os mercados internacionais se beneficiam principalmente do armazenamento em cache da CDN.
No entanto, houve um problema: o eBay tinha alguns elementos de personalização no pop-up de sugestões, que não podem ser armazenados em cache com eficiência. Felizmente, não era um problema nos apps específicos da plataforma, já que a interface do usuário para personalização e sugestões podia ser separada. Para a Web, em mercados internacionais, a latência foi mais importante do que o pequeno benefício da personalização. Com isso, o eBay agora oferece sugestões automáticas de um cache de CDN globalmente para apps específicos da plataforma e mercados fora dos EUA para o eBay.com.
O "corte" aqui é a latência da rede e o tempo de processamento do servidor para sugestões automáticas.
Armazenamento em cache próximo dos usuários finais para usuários não reconhecidos da página inicial
Na plataforma da Web, o conteúdo da página inicial para usuários não reconhecidos é o mesmo para uma determinada região. São usuários que estão usando o eBay pela primeira vez ou iniciando uma nova sessão. Portanto, não há personalização. Embora os criativos da página inicial continuem mudando com frequência, ainda há espaço para armazenamento em cache.
O eBay decidiu armazenar em cache o conteúdo não reconhecido do usuário (HTML, na sigla em inglês) na rede de borda (PoPs, na sigla em inglês) por um curto período. Os novos usuários agora podem receber o conteúdo da página inicial a partir de um servidor próximo a eles, em vez de de um data center distante. O eBay ainda está fazendo testes com isso nos mercados internacionais, onde terá um impacto maior.
O "corte" aqui novamente é a latência da rede e o tempo de processamento do servidor para usuários não reconhecidos.
Otimizações para outras plataformas
Melhorias na análise de apps iOS/Android
Os apps iOS/Android se comunicam com serviços de back-end cujo formato de resposta normalmente é JSON. Esses payloads JSON podem ser grandes. Em vez de analisar todo o JSON para renderizar algo na tela, o eBay introduziu um algoritmo de análise eficiente que otimiza o conteúdo que precisa ser exibido imediatamente.
Agora os usuários poderão ver o conteúdo mais rapidamente. Além disso, para o aplicativo Android, o eBay começa a inicializar os controladores de visualização da pesquisa assim que o usuário começa a digitar na caixa de pesquisa (o iOS já tinha essa otimização). Antes, isso só acontecia depois que os usuários pressionavam o botão de pesquisa. Agora, os usuários podem chegar a seus resultados de pesquisa mais rapidamente. O "corte" aqui é o tempo que os dispositivos levam para exibir conteúdo relevante.
Melhorias no tempo de inicialização de apps Android
Isso se aplica a otimizações de tempo de inicialização a frio de apps Android. Quando um app é inicializado a frio, muitas das inicializações acontecem no nível do SO e do aplicativo. A redução do tempo de inicialização no nível do aplicativo ajuda os usuários a ver a tela inicial mais rapidamente. O eBay realizou algumas análises de perfil e percebeu que nem todas as inicializações são necessárias para exibir conteúdo e que algumas podem ser feitas lentamente.
Mais importante ainda, o eBay observou que havia uma chamada de bloqueio de análise de terceiros que atrasava a renderização na tela. Remover a chamada de bloqueio e torná-la assíncrona ajudou ainda mais os tempos de inicialização a frio. O "corte" aqui é o tempo de inicialização desnecessário de apps Android.
Conclusões
Todos os "cortes" de desempenho do eBay contribuíram coletivamente para melhorar a performance, e isso aconteceu ao longo de um período. Os lançamentos foram graduais ao longo do ano, e cada um deles gastou dezenas de milissegundos até chegar ao ponto em que o eBay se tornou:
O desempenho é um recurso e uma vantagem competitiva. Experiências otimizadas aumentam o engajamento do usuário, as conversões e o ROI. No caso do eBay, essas otimizações variaram de coisas que eram de pouco esforço a algumas que eram avançadas.
Confira A velocidade em mil cortes para saber mais e fique de olho nos artigos mais detalhados de engenheiros do eBay sobre o trabalho deles em breve.