Será que o seu site está otimizado para dispositivos móveis?
Você sabia que o Google implementou uma nova abordagem chamada “Mobile-First”?
Cada vez mais usuários estão deixando de lado os computadores tradicionais e optando por navegar e fazer compras através de seus celulares e tablets.
O design responsivo possibilitou a criação de sites que se adaptam a diferentes plataformas de maneira uniforme. No entanto, o design responsivo é apenas uma parte das estratégias de otimização da experiência do usuário (UX) para dispositivos móveis.
Para alcançar uma otimização de desempenho real, é necessário considerar outras alternativas.
Por isso, há um foco tão grande em construir o seu site com uma experiência móvel em primeiro lugar. Em outras palavras, isso significa que o design e o conteúdo devem ser pensados, primeiramente, para quem acessa por dispositivos móveis.
Este artigo não se trata de criar um site totalmente novo, mas sim de explorar princípios fundamentais do design para dispositivos móveis e detalhar algumas otimizações técnicas para melhorar a experiência do usuário.
1: Design Centrado em Dispositivos Móveis
A web foi, por muito tempo, construída focando nos usuários de computadores desktop. As tecnologias mais recentes são, geralmente, melhor exibidas em grandes telas. No entanto, a realidade é que smartphones e tablets são a principal forma de acesso à internet, o que exige uma adaptação para o conceito de design mobile-first.
Além do design responsivo, quais outros elementos de design devem ser considerados para otimizar a experiência do usuário em dispositivos móveis?
- Priorização: As telas de dispositivos móveis têm espaço limitado. Além disso, o conteúdo é exibido verticalmente, diferente da estrutura horizontal dos desktops. Isso significa que é fundamental priorizar: quais elementos são mais importantes para os usuários verem? Se há botões de chamada para ação (CTA), eles estão facilmente visíveis?
- Conteúdo em Primeiro Lugar: O foco deve ser no conteúdo. A experiência em telas menores não é tão tolerante com elementos visuais que distraem. Portanto, priorize textos, vídeos, imagens e outros elementos de conteúdo que devem ser acessíveis e fáceis de ler.
- Navegação Simplificada: Em dispositivos móveis, o usuário não pode simplesmente clicar em qualquer lugar para voltar ao início da página. É crucial projetar uma navegação intuitiva, com widgets como “rolar para o topo” e cabeçalhos que permanecem visíveis durante a rolagem.
A melhor forma de verificar se a otimização está adequada é usar seu próprio celular para acessar o site e analisar a experiência de uso. Analise como os elementos interagem e como o site se comporta.
Se estiver em um lugar público, peça para alguém acessar seu site e observe o feedback. As diferentes percepções sobre a experiência do usuário podem ser surpreendentes.
2: Otimização de Recursos Visuais
Com que frequência você usa imagens por preferência pessoal e não por otimização da experiência do usuário? Entender como otimizar mídias é importante.
Elementos visuais como fotos, ilustrações, ícones e vídeos são os maiores responsáveis pelo consumo de largura de banda nas páginas da web.
O tamanho médio de páginas web em 2018, por setor e país.
Não existe um tamanho ideal para todas as páginas, mas é senso comum que quanto menor o tamanho da página, mais rápido o tempo de carregamento.
Como você pode reduzir alguns KBs ou MBs do conteúdo visual?
- Redimensione as Imagens: É comum encontrar sites para dispositivos móveis que carregam imagens enormes. Em vez disso, disponibilize fotos em tamanho real através de links alternativos quando necessário. Redimensionar as imagens pode reduzir o tamanho em até 80%, dependendo das dimensões necessárias. Para dispositivos móveis, o ideal é não ultrapassar 600-700px.
- Compacte Arquivos: A compactação e otimização de imagens é feita através de softwares que reduzem o número de cores presentes nas imagens, o que diminui o tamanho do arquivo sem perda de qualidade.
- Use Formatos de Arquivos Alternativos: Os formatos PNG e JPEG são padrões na web, mas existem alternativas mais modernas como o WebP e o SVG. O formato SVG permite que as imagens se ajustem automaticamente ao tamanho da tela, reduzindo a necessidade de recursos para carregar elementos visuais.
A otimização da experiência do usuário para mobile-first exige atenção. Criar um design sem planejamento pode gerar efeitos negativos a longo prazo. Uma abordagem consciente ajuda a criar um site que tenha os usuários de dispositivos móveis em mente desde o início.
Dica: Em designs mobile-first, nem sempre é preciso usar os mesmos elementos visuais dos designs para desktop. É possível eliminar algumas imagens de fundo e usar cores sólidas em dispositivos móveis, sem prejudicar a experiência do usuário. Busque sempre formas de economizar a menor quantidade de largura de banda.
3: Pré-Carregamento e Carregamento Lento
É necessário carregar todos os recursos de mídia em páginas que exigem tempo para serem lidas? E pode ajudar a renderizar páginas externas antes de o usuário visitá-las?
Vamos começar com os pré-carregadores.
Os pré-carregadores são instruções que uma página envia ao navegador sobre possíveis opções de navegação. Por exemplo, um usuário pode ir da página A para a página B.
Com o pré-carregamento, a página B pode ser renderizada antes mesmo do usuário clicar no link de navegação na página A.
É importante lembrar que o pré-carregamento não é garantido e a decisão final cabe ao navegador, que considera fatores como tipo de dispositivo e largura de banda.
Quais são os tipos de pré-carregadores mais comuns?
- Pré-busca (Prefetch): Sugere que um URL específico provavelmente será o próximo destino. Se o navegador aceitar a solicitação, ele armazenará os recursos da página em cache para acelerar o carregamento.
- Pré-renderização (Prerender): Armazena a página inteira em cache, em vez de apenas determinados recursos. O conteúdo é renderizado e armazenado na memória do dispositivo do usuário.
- DNS-Prefetch: Resolve o DNS especificado para reduzir o tempo de navegação caso o usuário acesse essa página específica.
- Pré-conexão (Preconnect): Além do DNS, estabelece conexões e handshakes com conexões TCP e TLS.
Exemplos de código para pré-carregadores:
<link rel="dns-prefetch" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="preconnect" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="prefetch" href="folder/script.js" as="script"> <link rel="prerender" href="customURL.com/preview.html">
Como os pré-carregadores usam tags HTML dinâmicas, é possível pré-carregar recursos como o Google Fonts ou usar um script personalizado para ativos JavaScript no WordPress.
Se você usa o WordPress, o plugin WP Rocket pode ser uma ótima opção para otimizar seu site.
Agora que você conhece os pré-carregadores, vamos abordar outro conceito importante: o carregamento lento.
O Que é Carregamento Lento (Lazy Loading)?
Quando você acessa uma página da web, o navegador busca todo o conteúdo e o exibe de forma nativa. Na maioria das vezes, o navegador é forçado a baixar a página inteira, mesmo que o usuário não veja todo o conteúdo.
Com o carregamento lento, o navegador carrega apenas o conteúdo visível na tela. Se há fotos ou vídeos grandes em uma determinada página, esses arquivos serão exibidos apenas quando a tela do navegador chegar a essa parte do site.
Se você está preocupado com o SEO, não se preocupe. O Yoast confirmou que o Google reconhece páginas que usam o carregamento lento como um sinal de melhoria de desempenho.
Uma boa opção para implementar o carregamento lento é a biblioteca Layzr.js, simples e eficaz para imagens. Usuários de WordPress podem encontrar vários plugins de carregamento lento no repositório de plugins.
4: Cache da Web
O cache da web armazena cópias de páginas, que podem ser apresentadas ao usuário rapidamente. As páginas são armazenadas em cache na primeira visita. Quando um novo usuário tenta acessar essa página, o servidor web exibe a versão em cache em vez da versão ao vivo.
O objetivo do cache é melhorar o desempenho do site e diminuir a carga do servidor. É possível configurar intervalos personalizados e outros eventos baseados em gatilho.
Algumas opções populares para cache da web são Varnish, Squid e Memcached. Existem também diversas outras soluções no mercado, principalmente para usuários de WordPress.
Você também pode considerar a possibilidade de usar uma CDN.
O que é uma CDN (Rede de Distribuição de Conteúdo)?
Uma rede de distribuição de conteúdo utiliza um conjunto de servidores para entregar conteúdo de forma rápida. Uma CDN pode transferir diversos tipos de conteúdo: vídeos, fotos, JavaScript, etc. Hoje em dia, grande parte do tráfego da web passa por alguma forma de CDN.
É importante lembrar que as CDNs são mais eficazes em sites de alta demanda. Se o seu site tem poucos visitantes, pode ser difícil perceber melhorias significativas. No entanto, uma CDN pode melhorar o tempo de carregamento do seu site, reduzir custos de largura de banda, aumentar a disponibilidade de conteúdo e fortalecer a segurança.
Se você não tem experiência com CDNs, recomendamos experimentar a Cloudflare, que oferece um plano gratuito e é uma ótima plataforma para começar. Caso o Cloudflare não atenda às suas expectativas, pesquise outros provedores de CDN gratuitos.
5: AMP (Páginas Móveis Aceleradas)
O projeto AMP do Google é otimização móvel turbinada. Ele reduz as páginas ao essencial para proporcionar um carregamento super rápido e priorizar a leitura do conteúdo. Dada a importância da velocidade de página, você diria não a tempos de carregamento quase instantâneos?
Como o AMP funciona?
O AMP é uma página HTML simplificada, com algumas limitações quanto ao tipo de conteúdo que pode ser exibido. Isso gera tempos de carregamento muito mais rápidos e melhor desempenho.
JavaScript, por exemplo, não funciona com AMP, a menos que você use a biblioteca AMP JS disponível no GitHub. O uso dessa biblioteca permite evitar bloqueadores de anúncios. No entanto, para um desempenho ainda melhor, o AMP puro é a melhor opção.
Estudos de caso interessantes para AMP:
6: Teste Antes de Publicar
Hoje em dia, não há desculpa para não ter um ambiente de testes para o seu projeto. A maioria das plataformas de hospedagem em nuvem oferece ambientes de testes por padrão.
O que é um ambiente de testes?
O site ativo é o chamado site de produção, que inclui todos os códigos, scripts e conteúdos. Um ambiente de testes é uma cópia desse site de produção, onde você pode fazer alterações e adicionar novos recursos sem interromper o site principal.
Recomendo o artigo de Ashley Harpp: Não perca tempo – teste as alterações antes de confirmar.
É importante não evitar a responsabilidade por erros. O artigo de Ashley também inclui ferramentas úteis para configurar um ambiente de testes local.
Testar não é tão assustador quanto parece. Mas com certeza é assustador apagar acidentalmente o banco de dados em um servidor de produção!
Considerações Finais
Otimizar seu site para uma experiência móvel não é difícil. Basta um pouco de dedicação e aplicar os métodos descritos neste artigo. É provável que você já esteja familiarizado com cache de conteúdo e carregamento lento, mas e quanto a ambientes de teste e pré-carregadores?
Espero que este artigo tenha esclarecido o panorama da otimização de sites para dispositivos móveis.