Performance em dispositivos móveis | Como facilitar o uso de um site em dispositivos móveis

Por que a performance dos dispositivos é importante?

A web está se tornando móvel. De acordo com a Statista, 51% das visualizações globais de páginas web são em dispositivos móveis. Em algumas regiões, como Ásia e África, o percentual é muito maior. Em cada caso, essa porcentagem está crescendo de forma constante anualmente.

Os principais mecanismos de pesquisa estão cientes dessa tendência e é por isso que estão priorizando sites com tempos de carregamento rápidos para dispositivos móveis. Os usuários de dispositivos móveis podem ter largura de banda limitada, mas ainda desejam encontrar informações rapidamente. Esses usuários tendem a ter menos paciência, o que significa altas taxas de rejeição para sites de carregamento lento. ("Taxa de rejeição" é a porcentagem de visitantes do site que saem do site depois de visualizar apenas uma única página).

O Google e outras autoridades de velocidade do site determinaram que o tempo máximo de carregamento de um site para celular deve ser de cerca de três segundos. Após três segundos, a retenção de usuários cai drasticamente. Os mecanismos de pesquisa ‘punirão’ sites que carregam lentamente, colocando-os mais abaixo nos resultados de pesquisa, principalmente para usuários de dispositivos móveis.

Um limite de tempo de carregamento de três segundos em uma conexão móvel não é muito tolerável, mas existem estratégias testadas e comprovadas para manter o tempo de carregamento de dispositivos móveis baixo.

Como melhorar a performance nos dispositivos móveis

Há vários fatores que afetam a performance nos dispositivos móveis, portanto, várias estratégias e práticas recomendadas podem melhorar os tempos de carregamento.

Minimize o tamanho e a contagem de arquivos

Para garantir um tempo de carregamento mais rápido, todos os arquivos do site devem ser os menores possíveis. As imagens geralmente são os maiores arquivos solicitados e podem ser reduzidas usando otimizadores de imagem ou convertendo-as em um formato de imagem leve, como SVG.

Arquivos HTML, JavaScript e CSS também podem ser reduzidos por meio da minificação. Minificação de código significa tirar todo o espaço em branco e comentários do código e reestruturar da forma mais compacta possível. Isso reduzirá o tamanho do arquivo ao mínimo. Embora isso torne o código praticamente ilegível para um ser humano, um navegador web ainda poderá executar o código perfeitamente.

Além de criar arquivos de tamanhos menores, o número de arquivos totais deve mantido o menor possível. Cada arquivo adicional necessário para carregar um site significa uma solicitação e resposta adicional e essas viagens de ida e volta contribuem para o tempo de carregamento. Sites com múltiplos arquivos JavaScript e CSS devem consolidar todo o código JavaScript em um único arquivo e fazer o mesmo com o CSS. Para páginas que requerem muito pouco JavaScript ou CSS, o uso de estilos inline* pode melhorar significativamente o tempo de carregamento.

*Normalmente, os desenvolvedores da web escrevem código HTML, JavaScript e CSS em arquivos diferentes. Usando uma técnica chamada "estilos inline", um desenvolvedor pode escrever seu código JavaScript e/ou CSS no mesmo arquivo que seu HTML.

Recursos de cache na borda

Normalmente, quando um usuário visita um site, o dispositivo do usuário precisa se comunicar com o servidor web para obter os arquivos do site. Se o servidor web estiver em San Francisco e o usuário estiver em Berkeley (10 milhas de distância), isso deve ser bem rápido. Mas e se o usuário estiver em Tóquio (8.000 milhas de distância)? Isso significa que cada solicitação e resposta terá que viajar milhares de quilômetros, adicionando um atraso significativo no carregamento do site.

Uma maneira comum de mitigar esse problema é utilizando uma rede de distribuição de conteúdo (CDN). Uma CDN global armazena conteúdo em cache na borda de rede. Isso significa que a CDN possui servidores de cache que residem em data centers em todo o mundo. Qualquer pessoa com acesso à internet nunca está muito longe de um data center. Esses servidores de data center podem se comunicar com servidores de origem da web para armazenar em cache os dados do site para que os usuários que visitam um site que utiliza a CDN possam obter arquivos do site de seu data center local. Isso garante um tempo de solicitação-resposta rápido para os usuários, independentemente de sua localização.

Chamadas de API em cache

As chamadas de API são solicitações HTTP para buscar dados de recursos externos. Por exemplo, um site de resenhas de filmes como o Rotten Tomatoes pode fazer chamadas de API para um serviço de bilheteria como o Fandango para que os usuários que navegam no Rotten Tomatoes possam ver os horários de exibição de filmes locais. Embora as chamadas de API possam ajudar a criar uma experiência robusta e reduzir o trabalho redundante, elas também criam novas solicitações HTTP, o que pode diminuir o tempo de carregamento.

As chamadas de API podem ser armazenadas em cache para minimizar essas solicitações HTTP extras. Em nosso exemplo de horário de exibição de filmes acima, o Rotten Tomatoes só precisa buscar horários de exibição de filmes em Los Angeles uma vez por dia. Eles podem configurar o site para armazenar em cache essa chamada de API uma vez por dia. Dessa forma, se 10 mil usuários de Los Angeles visitarem o Rotten Tomatoes todos os dias, apenas o primeiro desses usuários terá que aguardar a chamada da API para o Fandango.

Priorizar o conteúdo visível

O que um usuário vê imediatamente ao carregar uma página web geralmente é a ponta do iceberg; eles devem rolar para baixo para ver o resto da página. O conteúdo que aparece na tela de um usuário antes que qualquer rolagem ocorra é chamado de conteúdo "acima da dobra". Os desenvolvedores da web devem escrever o código de forma que o conteúdo acima da dobra seja sempre carregado primeiro. Uma técnica para conseguir isso é chamada de lazy loading, que funciona carregando dinamicamente o conteúdo abaixo da dobra à medida que o usuário rola a página.

Evite redirecionamentos

Por vários motivos, alguns sites criam redirecionamentos no carregamento da página. Por exemplo, os redirecionamentos 301 são comumente usados em sites que são renomeados ou reformulados. Essa prática deve ser evitada sempre que possível, pois os redirecionamentos consomem um precioso tempo de carregamento.

Resumo

À medida que a navegação em dispositivos móveis toma conta da web, torna-se cada vez mais importante ter um site para dispositivos móveis de alto desempenho. Sites para dispositivos móveis rápidos são recompensados com maior engajamento e taxas de conversão aprimoradas, além de um impulso na SEO. Os proprietários de sites devem implementar algumas ou todas as estratégias descritas acima para obter esses benefícios.