Como otimizar seu site para usuários móveis?

Você garantiu que seu site é compatível com dispositivos móveis?


Você sabia que o Google introduziu uma nova política chamada Mobile-First? Mais e mais usuários da web estão se afastando dos computadores desktop, em vez disso, navegue e compre usando seus dispositivos móveis.

O design responsivo da web tornou possível criar sites que funcionam em todas as plataformas em um nível uniforme. Mas, mesmo assim, o design responsivo é apenas uma fração das estratégias de otimização de UX para dispositivos móveis.

Se você deseja uma otimização de desempenho real, precisará considerar outras alternativas também.

É por isso que há uma ênfase tão forte na criação de seu site como um primeira experiência móvel. Em termos simples, mobile-first significa que seu design e conteúdo são otimizados para usuários móveis primeiro.

Dito isto, este post não trata de criar um site totalmente novo. Em vez disso, examinaremos alguns princípios fundamentais de design para dispositivos móveis. E dedique algum tempo a detalhes técnicos para otimizar a experiência do usuário para seus usuários móveis.

Nº 1: projetando com o celular em mente

A web é construída em grande parte com base no princípio de servir aos usuários de desktop. A web real, os verdadeiros avanços nas tecnologias, são melhor exibidos em uma bela exibição em tela cheia. Mas smartphones e outros dispositivos móveis são uma coisa e é hora de começar a se adaptar ao conceito de design para dispositivos móveis.

Além do design responsivo do senso comum, que outros elementos de design você deve implementar em seus designs de web para dispositivos móveis?

  • Priorização. As telas para celular são limitadas ao espaço de exibição disponível. Além disso, as telas móveis apresentam conteúdo de maneira vertical, em oposição a uma estrutura horizontal muito mais ampla para desktops. Isso significa que você deve projetar usando a priorização. Quais elementos são de extrema importância para os usuários verem? Se houver botões de CTA, como é fácil vê-los para o usuário móvel?
  • Conteúdo primeiro. Cor segundo. Você pode fazer algumas coisas interessantes com o design móvel, mas certamente não no escopo do design de desktop. Então, dê lugar ao conteúdo primeiro. Torne sua cópia e outras partes do conteúdo facilmente legíveis e acessíveis. Uma tela móvel perdoa muito menos os elementos visuais que distraem.
  • Navegação fácil. Em um dispositivo móvel, você não pode simplesmente clicar em qualquer lugar e voltar à página inicial. A menos, é claro, que você planeje esse tipo de navegação com antecedência. E você deveria. Experimente os widgets Scroll-to-Top, mas também cabeçalhos autocolantes sempre que possível.

A melhor maneira de verificar se você está fazendo isso corretamente é usar seu próprio telefone (eu faço isso o tempo todo!) E visitar seu site. Faça um exame completo de como as coisas se sentem e fluem juntas.

Se você estiver sentado em um café ou esperando um voo em um aeroporto, cutucar alguém no ombro e educadamente pedir que ele verifique seu site. Depois, sente-se e ouça os comentários deles. Na maioria das vezes, você se surpreende com a maneira como as pessoas percebem a experiência do usuário do seu site.

# 2: otimização de recursos; imagens, ícones, etc.

Com que frequência você se vê usando recursos visuais por preferência pessoal e não por UX? Isso acontece e, se você for criativo, vale a pena entender como a otimização de mídia funciona.

Elementos visuais como fotos, ilustrações, ícones e vídeos são os maiores consumidores de largura de banda nas páginas da web.

Tempo médio de carregamento da página para 2018 Como o seu compara o MachMetrics Speed ​​BlogO tamanho médio da página da web em 2018. Listado por indústrias e países diferentes.

Embora não haja um tamanho definido de página da web que todos devam atender, é senso comum que um tamanho menor da página seja igual a tempos de carregamento mais rápidos.

Então, como você pode cortar alguns KBs extras ou mesmo MBs do seu conteúdo visual?

  • Redimensione suas imagens. Parece simples, certo? Bem, não consigo contar quantas vezes naveguei em um site para celular apenas para carregar imagens de 1980 x 1200 em segundo plano. Em vez disso, fotos em tamanho real devem ser fornecidas como links alternativos, quando apropriado. O redimensionamento pode reduzir até 80% do tamanho total da imagem, dependendo das dimensões necessárias. No entanto, para dispositivos móveis, nunca há um motivo para ultrapassar o intervalo de 600 a 700 pixels no máximo.
  • Reduza o tamanho do arquivo com compactação. A compactação / otimização de imagem é o processo de usar software de terceiros para reduzir o número de cores presentes em uma imagem. Isso pode ser feito até o ponto em que suas fotos não perdem a qualidade inata, mas podem reduzir drasticamente o tamanho do arquivo. Se você precisar de ajuda com a compactação de imagens, não procure mais, nosso abrangente pacote de ferramentas de compactação de imagens.
  • Explore formatos de arquivo alternativos. Todo mundo já ouviu falar dos formatos de arquivo PNG e JPEG. Afinal, eles são os padrões de imagem de fato na web. Mas não por muito. A mais recente e melhor tecnologia na entrega de imagens digitais gira em torno de WebP e formatos de arquivo SVG. Os SVGs, por exemplo, podem automaticamente dimensionar para o tamanho da tela, reduzindo o número de recursos necessários para carregar componentes visuais específicos.

A otimização da experiência do usuário para dispositivos móveis é apenas uma coisa importante. Projetar por impulso significa que você não considera os efeitos a longo prazo de suas decisões. Considerando que uma abordagem consciente ajuda você a criar com os usuários móveis em mente desde o início.

Esclarecedor: Mantendo-se alinhado com o conceito de design móvel intuitivo, você não precisa reutilizar os mesmos componentes visuais em seus designs móveis. Eliminar algumas imagens de fundo e substituí-las por fundos coloridos – no celular – não prejudicará a experiência do usuário. Sempre procure maneiras de economizar até 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 levam uma quantidade significativa de tempo para serem lidas? E isso pode ajudar a renderizar páginas externas antes que os usuários as visitem?

Vamos ver primeiro os pré-carregadores, também conhecidos como dicas do navegador.

Os pré-carregadores são formas de uma página informar o navegador sobre possíveis oportunidades de navegação. Por exemplo. Um usuário pode visitar a página B da página A.

Com o pré-carregamento, o usuário pode renderizar a Página B antes de clicar no link de navegação na Página A.

diretiva pré-carregamento

Lembre-se de que o pré-carregamento nem sempre funciona e cabe ao navegador tomar a decisão final. Fatores como tipo de dispositivo e largura de banda são pesados ​​individualmente.

Quais são os tipos mais comuns de pré-carregador?

  • Pré-busca. Esse tipo sugere que um URL específico provavelmente será a próxima opção de navegação. E, se o navegador conceder a solicitação, ele armazenará automaticamente em cache importantes recursos da página, o que, por sua vez, torna a próxima página muito mais rápida..
  • Pré -ender. Enquanto o tipo acima busca apenas determinados recursos, o pré-renderizador armazenará em cache a página inteira. Todo o conteúdo renderizado é armazenado na memória do dispositivo dos usuários.
  • Pré-busca de DNS. A pré-busca do DNS resolverá o DNS especificado e nada mais. Como resultado, se um usuário fizer uma “mudança” específica em seu site, você estará economizando o tempo necessário para navegar.
  • Pré-conexão. O mesmo que acima, mas também estabelece conexões e handshakes com conexões TCP e TLS.

Quais são alguns exemplos de código para pré-carregadores?

Como os pré-carregadores usam tags HTML dinâmicas, você pode pré-carregar conteúdo como o Google Fonts ou crie um script personalizado para pré-carregar ativos JavaScript no WordPress.

BTW, se você estiver usando o WordPress, então WP Rocket pode ajudar você a sobrecarregar seu site.

Agora que você sabe mais sobre os pré-carregadores, vamos falar sobre o outro tópico importante: carregamento lento.

O que é carregamento lento?

Sempre que você visita uma nova página da Web, seja uma postagem no blog ou um site estático – o navegador busca todo o conteúdo da página e, em seguida, serve esse conteúdo como uma experiência de navegação nativa. Na maioria dos casos, você é obrigado a baixar a página inteira sem realmente ver além da dobra.

Considerando que, com carregamento lento, o navegador é instruído a carregar (renderizar) conteúdo apenas dentro da janela de exibição do usuário. Portanto, se houver fotos ou vídeos sensíveis ao tamanho adicionados a uma determinada página, esses arquivos serão exibidos apenas quando a tela do navegador atingir a parte do site.

E se você estiver preocupado com possíveis problemas de SEO, não fique. Yoast confirmou que O Google processa páginas que usam carregamento lento, e vê isso como apenas mais um sinal de melhoria de desempenho.

Layzr js

Minha recomendação para uma biblioteca usar é Layzr.js – carregamento lento simples e eficaz para suas imagens! O script também é ativado na página inicial do projeto, para que você possa ver o desempenho em tempo real. Os usuários do WordPress podem encontrar dezenas de plugins de carregamento lento no repositório público de plugins.

# 4: cache da Web

O cache da Web é baseado no conceito de copiar uma versão de uma página, que pode ser apresentada ao usuário a qualquer momento. As páginas são armazenadas em cache na primeira visita à página de um site. Quando um novo usuário tenta acessar essa página, em vez de veicular a versão ao vivo, o servidor web mostra a versão em cache.

O objetivo de qualquer tipo de cache é melhorar o desempenho do site e diminuir os recursos de back-end necessários. Dependendo da sua solução de armazenamento em cache, você pode configurar intervalos personalizados e outros eventos baseados em acionador.

cache da web

Alguns dos nomes mais populares no cache da Web são Varnish, Squid e Memcached. Mas tenha certeza de que existem muitas outras soluções no mercado, especialmente se você é um usuário do WordPress.

Você também pode considerar se inscrever em uma CDN.

O que é uma CDN (rede de entrega de conteúdo)?

Uma rede de entrega de conteúdo usa um cluster global de servidores distribuídos para fornecer entrega de conteúdo incrivelmente rápida. UMA CDN pode transferir rapidamente todos os tipos de conteúdo populares na Web: vídeo, foto, JavaScript etc. Atualmente, a maior parte do tráfego da Web passa por algum tipo de CDN.

A única coisa a lembrar sobre as redes de entrega de conteúdo é que elas funcionam melhor quando usadas em um site de alta demanda. Portanto, se você atender apenas alguns milhares de visitantes por mês, poderá ser difícil ver melhorias visíveis. No entanto, uma CDN é uma ótima solução para melhorar o tempo de carregamento do site, reduzir o custo de largura de banda, aumentar a disponibilidade de conteúdo e fortalecer a segurança geral.

Se você não tem experiência anterior com CDNs, recomendamos experimentar Cloudflare – eles fornecem um plano gratuito para sempre e é uma ótima plataforma para começar a aprender. E se o Cloudflare não atender às suas expectativas, confira nossa postagem para os melhores provedores de CDN gratuitos do mercado.

# 5: AMP (páginas móveis aceleradas)

Do Google Projeto AMP é otimização móvel em esteróides! Essencialmente, o AMP reduz suas páginas para o essencial, fornecendo uma experiência de carregamento super-rápida, mas também para tornar a legibilidade do conteúdo uma prioridade. Dada a importância da velocidade da página, você pode ter coragem de dizer não a tempos de carregamento quase instantâneos?

AMP do Google (páginas móveis aceleradas)

Ok, todas essas chavões parecem ótimas, mas como o AMP realmente funciona?

O AMP é uma página HTML simples com certas limitações para que tipo de conteúdo pode ser exibido. Isso gera tempos de carregamento muito mais rápidos e desempenho geral devido à limitação na execução de scripts e.

JavaScript, por exemplo, não funciona com o AMP. A menos que, é claro, você use o Biblioteca AMP JS disponível no GitHub. O uso da biblioteca JS permite obter determinados resultados, como evitar bloqueadores de anúncios, mas se você deseja um desempenho verdadeiro, o AMP bruto é o caminho a percorrer.

AMP por exemplo

Se você é um usuário do WordPress, na maioria dos casos, a adição de AMP ao seu blog será feita com a ajuda de um plugin. Mas, se você estiver trabalhando com um site personalizado, adicionar AMP pela primeira vez pode parecer um pouco desafiador.

Aprenda AMP por exemplo

Aqui é onde AMP por exemplo vem a calhar. Um projeto paralelo à plataforma atual, este site detalha todos os cantos e ganchos possíveis de alcançar com o AMP. Cada componente e efeito vem com uma demonstração fornecida para que você possa ver como seria.

Estudos de caso interessantes para AMP:

  1. Terra impulsiona a visualização móvel com o AMP
  2. Times of India reporta 1,5 vezes mais receita
  3. O Fastcommerce gera conversões para clientes criando AMP-first

# 6: teste antes de confirmar

Atualmente, não há desculpa para não haver um ambiente de preparação separado para o seu projeto. A maioria das plataformas de hospedagem em nuvem oferece ambientes de armazenamento temporário por padrão, então verifique com seu provedor se você tem acesso a um.

teste antes de cometer

O que é um ambiente de preparação?

Bem, a maneira mais rápida de explicar isso é olhando para o seu site atual ao vivo.

Este site é o que você chama de site de produção – uma versão em tempo real de todo o código, scripts e conteúdo em que o site se baseia. Um ambiente de preparação neste contexto é uma cópia do seu site de produção. Um site fictício, se você quiser. E nesse ambiente de preparação, você pode fazer alterações ou adicionar novos recursos sem interromper o site ativo.

Eu sempre penso no post de Ashley Harpp, Não perca tempo – Teste as alterações antes de confirmar.

A opinião dela sobre como nos enganamos para evitar certas coisas é um excelente exemplo de como não queremos assumir responsabilidade quando cometemos um erro. No entanto, a postagem de Ashley também inclui links para ferramentas úteis para configurar um ambiente de preparação local.

Testar não é tão assustador quanto parece. Mas com certeza é assustador quando você exclui acidentalmente todo o banco de dados em um servidor de produção!

Declaração de encerramento

Otimizar o site para uma experiência móvel suave não é tão difícil. Tudo o que você precisa é de um pouco de determinação e aplique voluntariamente os métodos descritos neste post. As chances são de que você já esteja familiarizado com coisas como cache de conteúdo e carregamento lento, mas e os ambientes de preparação ou pré-carregadores?

Felizmente, este post lançou alguma luz sobre o estado atual da otimização de sites para celular. Sinta-se livre para deixar um comentário ou recomendar soluções adicionais.

TAG:

  • SEO

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map