O relatório WebShopers apontou que 32% das transações do comércio eletrônico, dos 27,4 milhões de consumidores que fizeram ao menos uma compra na internet no primeiro semestre de 2018, foram realizadas por meio de dispositivos móveis. Um avanço de 7,4 pontos percentuais que evidencia a constante necessidade do desenvolvimento mobile pelas empresas.
Inspirados pelos resultados dessas pesquisas, buscamos informações para ajudá-lo a otimizar o desenvolvimento mobile. Sejam aplicativos nativos ou híbridos, esses pontos podem garantir uma melhor performance aos projetos mobile e, por consequência, melhorar a experiência dos usuários ao utilizá-lo. Se você não sabe qual a experiência que o seu site ou aplicativo oferece aos usuários, conheça ferramentas gratuitas para testar a versão mobile do seu ambiente.
Confira 9 dicas de desenvolvimento mobile:
-
1 – Em primeiro lugar, carregue a visualização da página
Assim que acessam o site, usuários ficam mais pacientes ao reconhecerem a página que estão navegando, portanto sempre mostre o view da página antes de carregar os dados do servidor. Alguns exemplos de apps com esse comportamento: Netflix e Hulu.
-
2 – Rolagem infinita ou paginação no desenvolvimento mobile
Em dispositivos móveis, a rolagem é mais envolvente e natural do que a paginação. Porém, se a paginação se adapta melhor ao seu conteúdo, certifique-se de que os leitores podem usar o swipe para acessar a próxima página, em vez de ter que clicar em um pequeno link. De qualquer forma, para aplicativos que mostram listas de dados, carregue de 10 a 20 registros por página ou seção, adicionando limites para cada consulta. Nunca envie todos os dados de uma só vez, assim você otimiza o tempo de carregamento da página.
-
3 – Sempre que possível, use o cache
Sempre que possível utilize cache, evitando fazer requests ao servidor. Dados estáticos, por exemplo, podem ser guardados no local storage. Alguns aplicativos que utilizam essa função são o Facebook e o Twitter, uma vez que o usuário faz uma consulta de dados, o resultado fica guardado no cache e o usuário pode consultar novamente sem realizar nova request ao servidor.
-
4 – CSS3 + hardware acelerate
Para animações (use com moderação), geralmente a aceleração de hardware que temos por default nos nevegadores é o suficiente para a maioria dos casos de uso, exceto os mais complexos. Caso você precise suportar navegadores mais antigos troque as transições em CSS3 pelo uso combinado de CSS3 + hardware acelerate. Como consequência, o seu código ficará mais rápido. Para não precisar utilizar o acelerador de hardware direto no código, você pode usar o plugin Page Slider. Mas sempre vale lembrar que se sua animação está pesando no carregamento da pagina, o ideal é dar uma revisada no código para garantir que não hajam loops desnecessários ou memory leaks (JS).
-
5 – Mantenha seu aplicativo simples e flat
Mesmo sendo utilizados via CSS3, elementos de estilo como gradiente, bordas arredondadas e outros podem piorar a performance do seu aplicativo quando em excesso. Para verificar se é o caso, comente o código onde foram declarados os estilos e verifique se há melhora no carregamento.
-
6 – Reduza o tempo de renderização
Browser reflow é o nome do processo do navegador web que recalcula as posições e elementos gráficos da sua página, com a finalidade de “re-renderizar” parte ou a totalidade do documento. Esse processo custa caro em termos de performance, especialmente para o desenvolvimento mobile. Neste artigo você encontra diversas informações sobre como minimizar o uso do browser reflow no seu projeto.
-
7 – Tenha uma build otimizada
A organização dos arquivos e pastas farão uma grande diferença no tempo de carregamento do projeto. Evite aquivos múltiplos, reunindo tudo em apenas um arquivo JS, um HTML e um CSS e utilize hierarquia para organizar as pastas do seu projeto.
Estas são apenas algumas dicas para melhorar a performance do seu projeto mobile. Para aprofundar ainda mais seus conhecimentos, acesse o projeto Como perder peso (no browser) – o guia definitivo de performance front end. Alguns dos melhores programadores do Brasil e do mundo, juntaram-se para desenvolver esse guia que apresenta diversas formulas de otimização web.
Fique ligado no Blog da KingHost para mais novidades e noticias.
** O Texto contou com a colaboração do Desenvolvedor, William Dorneles.
O que você achou deste conteúdo?