Ele.me melhora o tempo de carregamento da performance com um Progressive Web App de várias páginas

A Ele.me é a maior empresa de pedidos e entrega de comida da China continental. Ele atende a 260 milhões de usuários registrados em mais de 200 cidades em toda a China e tem mais de 1, 3 milhão de listagens de restaurantes. Com 99% dos usuários pedindo comida em dispositivos móveis, a Ele.me decidiu melhorar a experiência na Web para dispositivos móveis, tornando-a mais rápida e confiável em conexões lentas, tudo isso enquanto contava com o modelo técnico principal de um app de várias páginas para acomodar as necessidades operacionais.

  • O tempo de carregamento diminuiu 11,6% em todas as páginas pré-armazenadas em cache
  • O tempo de carregamento diminuiu, em média, 6,35% em todas as páginas.
  • O tempo para interação consistente caiu para 4,93 segundos em uma rede 3G no primeiro carregamento

Depois que lançamos o PWA ele.me, nossos tempos de carregamento caíram significativamente, transformando nossa experiência da Web para dispositivos móveis em um dos sites mais rápidos de reserva de alimentos da China.

Spencer Yang, gerente de produto do Ele.me PWA

Como escolher entre apps com várias páginas e apps de página única

Em um app de várias páginas (MPA, na sigla em inglês), cada rota que um usuário acessa aciona uma solicitação completa da página, com scripts e estilos associados necessários para o servidor. Isso é diferente do modelo de app de página única (SPA), em que cada navegação de rota aciona uma busca apenas do conteúdo e dos dados relevantes para essa rota, e a interface é construída pelo código JavaScript executado no app cliente.

O crescimento explosivo da Ele.me nos últimos anos levou ao crescimento de unidades de negócios distintas dentro da empresa, cada uma encarregada de executar o microsserviço sob o domínio principal https://ele.me. A equipe da Ele.me concluiu que a dissociação desses serviços individuais é melhor atendida por um modelo de app de várias páginas (MPA, na sigla em inglês), em que cada equipe executa e mantém o próprio serviço.

Como aplicar PRPL a uma MPA

O padrão PRPL (recursos críticos Pré-carregamento, trajeto inicial Renderizar, rotas restantes Pré-armazenar em cache, rotas restantes Lazy-load) oferece aos desenvolvedores da Web um conjunto de colunas para guiar a estrutura de um PWA, com ênfase especial na rapidez da interatividade e na maximização do armazenamento em cache para reduzir as viagens de ida e volta da rede. Embora o PRPL tenha sido bem testado em SPAs, não era muito claro como realizá-lo em um MPA. A Ele.me decidiu adotar a mentalidade de PRPL ao pensar em uma recriação da MPA como um PWA. Para isso, eles garantem que, quando um usuário navegar para uma página, ele vai pré-carregar recursos críticos para essa página incluindo <link rel="preload"> conforme necessário, ou exibindo esses scripts em um nível suficientemente superficial para que o pré-carregador do navegador possa fazer seu trabalho sem precisar de dicas adicionais. Eles também melhoram progressivamente o PWA com a instalação de um service worker sempre que houver suporte do navegador. Eles são usados para buscar e pré-armazenar outras rotas de navegação de nível superior em cache. Assim, o usuário tem uma experiência de carregamento e renderização mais rápida ao clicar no PWA. Cada página em uma MPA é uma rota própria. Portanto, acelerar a renderização da rota inicial é equivalente à implementação de práticas recomendadas para otimizar o caminho crítico de renderização para cada rota. Com essas mudanças, o tempo total de carregamento diminuiu em média 6,35% em todas as páginas.

Como exibir as telas do esqueleto da transição o mais rápido possível

Ele.me queria aplicar a ideia de telas esqueleto (link em inglês) à UX, uma maneira de garantir que, sempre que o usuário tocar em qualquer botão ou link, a página reaja o mais rápido possível, fazendo a transição do usuário para essa nova página e carregando o conteúdo nela à medida que o conteúdo fica disponível. Essa também é a chave para melhorar o desempenho percebido do PWA. No entanto, como cada página em uma MPA é sua própria rota inicial, cada navegação exige refazer todo o trabalho necessário de carregamento, análise e avaliação a cada vez.

Para contornar isso, a Ele.me criou a tela esqueleto como um componente de interface real e usou a pilha de renderização do lado do servidor do Vue.js para criar e pré-renderizar os componentes do Vue em strings antes de injetá-los em modelos HTML. Isso permite que eles renderizem a tela esqueleto diretamente e realizem uma transição mais fluida ao navegar entre as páginas.


Tela de esqueleto durante a transição de página
Tela de esqueleto durante a transição de página
Página totalmente renderizada após a transição
Página totalmente renderizada após a transição de página

Como armazenar recursos compartilhados em cache com o service worker

Rotas diferentes são carregadas à medida que um usuário navega pelo PWA, e seria um desperdício carregar essas rotas da rede várias vezes. Para lidar com isso, a Ele.me analisou as rotas essenciais que mais importam para os usuários, criou um plug-in do webpack para coletar as dependências dessas rotas críticas e pré-armazena em cache essas rotas ao instalar um service worker no navegador cliente do usuário. Essas rotas críticas incluem o JavaScript, o CSS e as imagens que formam o shell típico de IU do PWA.

Rotas que são consideradas importantes, mas não críticas, são armazenadas em cache de maneira incremental pelo service worker no ambiente de execução, à medida que o usuário continua a navegar pelo PWA. Isso permite que o Ele.me exiba o PWA aos usuários diretamente do cache em todas as condições da rede. O resultado: o tempo de carregamento diminuiu 11,6% em todas as páginas pré-armazenadas em cache.

Leia mais