Otimização da performance dos sites e apps do eBay para uma experiência mais rápida do usuário.
A velocidade foi uma iniciativa em toda a empresa do eBay em 2019, com muitas equipes determinadas a tornar o site e os apps o mais rápidos possível para os usuários. Para cada 100 milissegundos de redução no tempo de carregamento da página de pesquisa, o eBay notou um aumento de 0, 5% no número de cliques em "Adicionar ao carrinho".
100ms
Melhoria no tempo de carregamento
0,5%
Aumento na contagem de "Adicionar ao carrinho"
Com a adoção de orçamentos de desempenho (derivados de um estudo competitivo com o Chrome User Experience Report) e o foco em métricas de desempenho centradas no usuário, o eBay conseguiu melhorar significativamente a velocidade do site.
…e os dados do Chrome User Experience Report também destacam essas melhorias.
Ainda há muito trabalho pela frente, mas aqui estão as lições do eBay até agora.
"Redução" na performance da Web
As melhorias feitas pelo eBay foram possíveis devido à redução ou "cortes" (no tamanho e no tempo) de várias entidades que participam da jornada do usuário. Esta postagem aborda temas relevantes para a comunidade de desenvolvedores da Web em geral, e não específicos do eBay.
Reduzir o payload em todos os recursos de texto
Uma maneira de acelerar os sites é simplesmente carregar menos código. O eBay reduziu os payloads de texto cortando todos os bytes não utilizados e desnecessários de respostas JavaScript, CSS, HTML e JSON enviadas aos usuários. Antes, com cada novo recurso, o eBay aumentava o payload das respostas sem limpar o que não era usado. Isso se acumulou ao longo do tempo e se tornou um gargalo de desempenho. As equipes geralmente procrastinavam essa atividade de limpeza, mas você ficaria surpreso com o quanto o eBay economizou.
O "corte" aqui são os bytes desperdiçados no payload da resposta.
Otimização do caminho crítico para conteúdo acima da dobra
Nem todos os pixels da tela são igualmente importantes. O conteúdo acima da dobra é mais importante do que algo abaixo da dobra. Os apps para iOS/Android/computador e da Web conhecem isso, 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 específicos da plataforma e servidores da Web) se comunicam. Essa camada é projetada especificamente para ser baseada em visualizações ou dispositivos, em vez de entidades, como item, usuário ou pedido. O eBay então introduziu o conceito do caminho crítico para os serviços de experiência. Quando uma solicitação chega a esses serviços, eles trabalham para receber os dados do conteúdo acima da dobra imediatamente, chamando outros serviços upstream em paralelo. Quando os dados estão prontos, eles são encaminhados imediatamente. Os dados abaixo da dobra são enviados em um bloco posterior ou carregados com atraso. O resultado: os usuários podem conferir o conteúdo acima da dobra mais rapidamente.
O "corte" aqui é o tempo gasto pelos serviços para mostrar conteúdo relevante.
Otimizações de imagem
As imagens são um dos maiores contribuintes para o aumento de tamanho da página. Mesmo pequenas otimizações podem ajudar muito. O eBay fez duas otimizações para imagens.
Primeiro, o eBay padronizou o formato de imagem WebP para resultados de pesquisa em todas as plataformas, incluindo iOS, Android e navegadores compatíveis. A página de resultados de pesquisa é a página com mais imagens do eBay, e eles já estavam usando o WebP, mas não de forma consistente.
Em segundo lugar, embora as imagens de listagem do eBay sejam bastante 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 várias ferramentas. Antes, as otimizações eram de responsabilidade do usuário que fazia o upload, mas agora o eBay aplica as regras nas ferramentas. Assim, todas as imagens enviadas são otimizadas de maneira adequada.
O "corte" aqui são os bytes de imagem desperdiçados enviados aos usuários.
Prefetch preditivo 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, em seguida, para uma página de item. Por que as páginas do fluxo não se ajudam? Essa é a ideia do pré-carregamento preditivo, em que uma página carrega antecipadamente 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 de CSS e JavaScript, em que os URLs podem ser recuperados com antecedência. Vale lembrar que isso ajuda apenas 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é-buscar os principais resultados da pesquisa
Quando um usuário pesquisa no eBay, os dados de análise do eBay sugerem que é muito provável que o usuário navegue até um item entre os 10 primeiros resultados da pesquisa. Assim, o eBay agora pré-busca os itens da pesquisa e os mantém prontos para quando o usuário navegar. O pré-carregamento ocorre em dois níveis.
O primeiro nível acontece no servidor, em que o serviço de itens armazena em cache os 10 itens principais nos resultados da pesquisa. Quando o usuário acessar um desses itens, o eBay vai economizar tempo de processamento do servidor. O armazenamento em cache do lado do servidor é aproveitado 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. O pré-carregamento de itens era uma otimização avançada devido à natureza dinâmica dos itens. Há muitas nuances: impressões de página, capacidade, itens de leilão e assim por diante. Saiba mais sobre o assunto na apresentação do Meetup de engenharia de performance do LinkedIn ou aguarde uma postagem de blog detalhada sobre o assunto feita pelos engenheiros do eBay.
O "corte" aqui pode ser o tempo de processamento do servidor ou o tempo de rede, dependendo de onde o item está armazenado em cache.
Download de imagens de pesquisa com muita rapidez
Na página de resultados da pesquisa, quando uma consulta é emitida em um nível alto, duas coisas acontecem. Uma delas é a etapa de recuperação/classificação, em que os itens mais relevantes que correspondem à consulta são retornados. A segunda etapa é aumentar os itens devolvidos com informações adicionais relacionadas ao contexto do usuário, como custos de frete. Agora, o eBay envia imediatamente as primeiras 10 imagens de itens para o navegador em um bloco com o cabeçalho, para que os downloads possam começar antes que o restante da marcação chegue. Como resultado, as imagens vão aparecer mais rápido. Essa mudança foi lançada globalmente para a plataforma da Web.
O "corte" aqui é o horário de início do download das imagens dos resultados da pesquisa.
Armazenamento em cache de borda para dados de autocompletar
Quando os usuários digitam letras na caixa de pesquisa, sugestões aparecem. Essas sugestões não mudam para combinações de letras por pelo menos um dia. Eles são os candidatos ideais para serem armazenados em cache e veiculados por uma CDN (por um máximo de 24 horas), em vez de solicitações que vão até um data center. Os mercados internacionais se beneficiam especialmente do armazenamento em cache da CDN.
No entanto, havia um problema. O eBay tinha alguns elementos de personalização no pop-up de sugestões, que não podem ser armazenados em cache de forma eficiente. Felizmente, não foi um problema nos apps específicos da plataforma, já que a interface do usuário para personalização e sugestões pode ser separada. Para a Web, em mercados internacionais, a latência era mais importante do que o pequeno benefício da personalização. Com isso, o eBay agora tem sugestões automáticas veiculadas de um cache CDN globalmente para apps específicos da plataforma e mercados fora dos EUA no eBay.com.
O "corte" aqui é a latência da rede e o tempo de processamento do servidor para autosugestões.
Armazenamento em cache de borda 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 região específica. 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 mudem com frequência, ainda há espaço para armazenamento em cache.
A eBay decidiu armazenar em cache o conteúdo do usuário não reconhecido (HTML) na rede de borda (PoPs) por um curto período. Agora, os usuários novos podem acessar o conteúdo da página inicial de um servidor próximo a eles, em vez de um data center distante. O eBay ainda está testando isso em mercados internacionais, onde o impacto será 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 geralmente é 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 mostrado imediatamente.
Agora os usuários podem acessar o conteúdo mais rápido. Além disso, no app Android, o eBay começa a inicializar os controladores de visualização de 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 acessar os resultados da pesquisa mais rapidamente. O "corte" aqui é o tempo gasto pelos dispositivos para mostrar conteúdo relevante.
Melhorias no tempo de inicialização de apps Android
Isso se aplica às otimizações de tempo de inicialização a frio para apps Android. Quando um app é inicializado a frio, muitas inicializações acontecem no nível do sistema operacional e do aplicativo. Reduzir o tempo de inicialização no nível do aplicativo ajuda os usuários a acessar a tela inicial mais rapidamente. O eBay fez alguns perfis e percebeu que nem todas as inicializações são necessárias para exibir conteúdo e que algumas podem ser feitas de forma lenta.
Mais importante, o eBay observou que havia uma chamada de análise de terceiros bloqueando que atrasava a renderização na tela. A remoção da chamada de bloqueio e a mudança para um modo assíncrono ajudaram a melhorar os tempos de inicialização a frio. O "corte" aqui é o tempo de inicialização desnecessário para apps Android.
Conclusões
Todos os "cortes" de desempenho que o eBay fez contribuíram coletivamente para a mudança, e isso aconteceu ao longo de um período. As versões foram lançadas gradualmente ao longo do ano, com cada versão reduzindo dezenas de milissegundos, chegando ao ponto em que o eBay está agora:
O desempenho é um recurso e uma vantagem competitiva. As 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 de baixo esforço a algumas avançadas.
Confira Speed by a thousand cuts para saber mais e fique de olho em artigos mais detalhados dos engenheiros do eBay sobre o trabalho de performance em um futuro próximo.