Saiba como uma pequena equipe alcançou grandes vitórias criando uma PWA de marketplace atraente.
Com sede em Amã, na Jordânia, o OpenSooq é um marketplace de classificados para dispositivos móveis que oferece uma ampla variedade de produtos e serviços em 19 países do Oriente Médio e da África do Norte.
O desafio
Mais de 85% do tráfego do OpenSooq vem de dispositivos móveis, e esse número continua aumentando. Muitas pessoas na região dependem de dispositivos de baixo custo com capacidade de armazenamento limitada, o que cria uma grande necessidade de que o site para dispositivos móveis do OpenSooq seja o mais rápido e leve possível. No entanto, os tempos de carregamento lentos no antigo site para dispositivos móveis do OpenSooq estavam afetando a satisfação do cliente e levaram a taxas de rejeição de até 49% em mercados como o Kuwait.
Para oferecer aos clientes uma experiência consistentemente melhor em todas as plataformas, a empresa percebeu que precisava de um site mais rápido e responsivo. Em junho de 2017, a equipe de engenharia do OpenSooq lançou um Progressive Web App (PWA).
Foco no desempenho e na confiabilidade
Os três desenvolvedores internos da OpenSooq conseguiram criar um PWA com recursos completos usando React e webpack em apenas dois meses e meio.
Para garantir que o site fosse rápido e fácil de ser indexado pelos mecanismos de pesquisa, a equipe optou por implementar a renderização do lado do servidor. Com quase 28% dos usuários acessando o PWA em redes 2G ou 3G irregulares, era fundamental que os usuários confiassem na experiência, independentemente das restrições de rede. Então, a equipe implementou uma experiência off-line usando service workers e uma estratégia de cache-first-then-network. Eles também usaram o padrão PRPL para oferecer carregamento instantâneo aos usuários.
Ao adotar essas práticas recomendadas, a equipe conseguiu reduzir o tempo médio de carregamento da página (Tempo para interação) de 4 segundos para menos de 2 segundos. E eles usaram o Lighthouse para garantir que o site continuasse rápido. Esses esforços ajudaram a OpenSooq a atingir mais de 1,8 bilhão de visualizações de página por mês.
Mais de um quarto dos nossos usuários acessam o PWA do OpenSooq de redes de nível médio-baixo. Por isso, a confiabilidade foi essencial para manter o engajamento deles. Os workers de serviço e as estratégias de armazenamento em cache nos ajudaram a criar a experiência do usuário confiável que precisávamos, sem problemas.
Amin Shoman, gerente técnico de PWA, OpenSooq
Melhorar o reengajamento
Depois de criar uma experiência confiável e de alto desempenho, a equipe do OpenSooq queria garantir que os usuários continuassem engajados com o produto. Para isso, eles permitiram que os usuários instalassem o PWA na tela inicial e adicionaram suporte a notificações significativas. Isso permitiu que o site notificasse os compradores sobre a interação do vendedor com as consultas e os vendedores sobre a ativação e expiração do anúncio.
Essas melhorias aumentaram em 14% os usuários ativos por mês da experiência da Web do OpenSooq. Para os usuários que instalaram a PWA, houve um aumento de 48% no número de visitas de página por sessão e um salto de 28% na duração média da sessão. O OpenSooq também teve um aumento de 25% no tempo médio dos usuários em uma página e uma queda de 29% na taxa de rejeição média em todos os mercados.
No futuro
Depois de algumas semanas de trabalho, a OpenSooq criou uma PWA com recursos completos de 23 KB que oferece uma experiência consistente aos usuários em todas as plataformas e navegadores. Como é fácil atualizar recursos na Web, a equipe priorizou a PWA, lançando e testando novos recursos e fluxos de usuários na PWA antes de lançar em outras plataformas.
A OpenSooq está trabalhando na adição de um prompt de instalação específico da plataforma e na integração da PWA com as Accelerated Mobile Pages (AMP). Essas melhorias vão acelerar ainda mais o carregamento de páginas e tornar a transição para o app específico da plataforma o mais tranquila possível. Ao construir a base do esforço de desenvolvimento inicial, a equipe do OpenSooq vai continuar oferecendo aos usuários a melhor experiência possível.
A importância do desenvolvimento da nossa PWA ficou clara para a liderança e as equipes técnicas. Depois de criar e otimizar um app da Web moderno, estamos animados para ver o impacto nos negócios com nosso investimento de 2,5 meses.
Ramzi Alqrainy, diretor de tecnologia da OpenSooq