O melhor guia para otimização de velocidade de sites para dispositivos móveis

Publicados: 2016-03-09

mobile-speed

Todos nós estamos sendo empurrados para um mercado mobile first e as PMEs ainda estão atrasadas em termos de um site otimizado para celular. Com teste de velocidade relâmpago conexões de internet e padrões 4G já em vigor, o momento nunca foi melhor para o crescimento do público móvel. De acordo com o recente relatório móvel global da ComScores , pouco menos da metade (49%) do tráfego e dos visitantes das 100 principais propriedades de mídia digital são apenas móveis . Esta é uma estatística notável que argumenta que sites não adaptados para dispositivos móveis podem correr o risco de perder metade de sua audiência.

A única coisa que mais importa para o público móvel é a velocidade ( a figura abaixo fornece os tempos médios de carregamento para desktop e dispositivos móveis ).

tempo de carregamento

As etapas e métodos discutidos neste guia de otimização de velocidade do site para dispositivos móveis listarão todas as correções necessárias para otimizar a velocidade do seu site em todos os tipos de dispositivos móveis.

Como verificar o desempenho do seu site em dispositivos móveis?

Uma das primeiras coisas que você precisa fazer para tornar seu site compatível com dispositivos móveis é verificar seu desempenho em dispositivos móveis. Existem várias ferramentas que você pode usar para essa tarefa:

Teste de compatibilidade com dispositivos móveis do Google - Esta ferramenta analisa a URL e informa se a página tem um design amigável para dispositivos móveis. Ele fornece documentação de como o Googlebot pode visualizar a página da Web corretamente em dispositivos móveis e fornece sugestões passo a passo sobre como tornar a página compatível com dispositivos móveis.

Estatísticas de velocidade de página do Google - Esta ferramenta analisa sua página web e fornece sugestões para torná-la mais rápida. Esta ferramenta fornece 3 indicadores de prioridade, a saber, vermelho (precisa de correção), amarelo (considerar correção) e verde (nenhum problema detectado), conforme fornecido na captura de tela abaixo.

indicadores de velocidade de página

GTMetrix - Esta ferramenta fornece um relatório de desempenho obtendo dados do Google Page Speed Insights e do Yahoo Slow ambos. Ele também fornece um gráfico em cascata que pode ser usado para descobrir problemas simples, como 404, ou problemas mais complexos, como recursos externos bloqueando a renderização da página.

Depois de identificar os problemas e fazer as correções iniciais, agora é hora de acelerar ainda mais o site implementando as sugestões abaixo.

Como acelerar seu site em dispositivos móveis - 8 maneiras de reduzir o tempo de carregamento e aumentar o desempenho

As dicas abaixo foram testadas para aumentar a velocidade do seu site em dispositivos móveis. Vamos entender cada um deles, um por um.

1- Tenha um CDN devidamente configurado

Velocidade e acessibilidade estão entre as principais preocupações na otimização para pesquisa. Aproveitar o cache de conteúdo global por meio de uma rede de entrega de conteúdo (CDN) é uma ótima maneira de aumentar os esforços de SEO. Basicamente, um CDN é uma coleção de servidores espalhados por diferentes locais do mundo, que armazenam o conteúdo do site dinamicamente. É um serviço adicional que pode ser usado além dos serviços de hospedagem em nuvem existentes. É compatível com uma ampla gama de serviços, incluindo sites WordPress.

Cache de CDN ajuda a entregar conteúdo em cache por meio de um servidor mais próximo de um cliente. Estes, por sua vez, minimizam a latência e, portanto, o tempo de carregamento através da vantagem de distâncias mais curtas ( consulte a figura abaixo para ter uma ideia de como ter um CDN reduz drasticamente o tempo de carregamento ). Um CDN capaz também vem com otimizações de infraestrutura, como proteção contra ataques DDoS e firewall de aplicativo da web, entre outros.

cdn-caching

Como configurar o CDN?

Inscreva-se com seu provedor de CDN preferido e adicione seu site.

Altere as configurações de DNS para rotear o tráfego pela rede CDNs. Atualize o registro A e crie ou atualize o registro CNAME . ( Uma captura de tela do Incapsula foi fornecida abaixo. Você pode escolher qualquer um de seus provedores de CDN preferidos e fazer as alterações necessárias nas configurações de DNS ).

dns-instruções

É isso! Após a atualização do registro, a CDN começará a direcionar o tráfego para o seu site.

Ter um CDN instalado ajudará a melhorar o tempo de carregamento do site e trabalhará para melhorar a experiência do usuário.

2- Faça uso de páginas móveis aceleradas

Em outubro, o Google lançou as Accelerated Mobile Pages para uma web móvel mais rápida e aberta. As Accelerated Mobile Pages são páginas da Web especialmente formatadas que permitem que os mecanismos de pesquisa exibam o conteúdo com extrema rapidez, garantindo que os editores controlem a aparência e a aparência do conteúdo. Estima-se que os sites para dispositivos móveis podem carregar muito mais rápido com o uso de códigos HTML AMP de código aberto e minimizar suas taxas de rejeição, reduzindo efetivamente os tempos de carregamento do mecanismo de pesquisa.

Como implementar AMP em seu site?

Para implementar AMP em seu site, siga as etapas abaixo:

A- Crie uma versão separada de sua página principal usando HTML AMP (também conhecido como versão AMP de sua página principal). O código básico para criar sua primeira página HTML AMP é fornecido abaixo:

<!doctypehtml>
<html amp lang="en" >
<cabeça>
<meta charset="utf-8" >
<title> O título da sua página AMP ficará aqui </title>
<link rel="canonical" href="URL da versão não AMP ficará aqui" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" >
<script type="application/ld+json" >
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Estrutura de código aberto para publicação de conteúdo",
"datePublished": "2015-10-07T12:02:41Z",
"imagem": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate >body {-webkit-animation:-amp-start 8s passos(1,fim) 0s 1 normal ambos;-moz-animation:-amp-start 8s passos(1,fim) 0s 1 normal ambos; -ms-animation:-amp-start 8s passos(1,fim) 0s 1 normal ambos;animação:-amp-start 8s passos(1,fim) 0s 1 normal ambos}@-webkit-keyframes -amp-start{ de {visibility:hidden} para {visibility:visible}}@-moz-keyframes -amp-start{ de {visibility:hidden} para {visibility:visible}}@-ms-keyframes -amp-start{ de {visibility:hidden } para {visibility:visible}}@-o-keyframes -amp-start{ de {visibility:hidden} para {visibility:visible}}@keyframes -amp-start{ de {visibility:hidden} para {visibility:visible} }</ style >< noscript >< style amp-boilerplate > corpo {-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none} </style></noscript>
<script async src="https://cdn.ampproject.org/v0.js" ></script>
</head>
<corpo>
<h1> Bem-vindo ao AMP </h1>
</body>
</html>

B- Para inserir imagens, use o seguinte código:

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800" ></amp-img>

C- Modifique a apresentação e o layout da página usando propriedades CSS comuns . Um exemplo de código de estilo é fornecido abaixo:

<style amp-custom > /* qualquer estilo personalizado vai aqui */ body { background-color: white; } amp-img { cor de fundo: cinza; borda: preto sólido de 1px; } </style>

D- Visualizar, validar e publicar a página AMP.

E- Adicione a amphtmltag na versão não AMP da página para ajudar os bots do mecanismo de pesquisa a identificar a versão AMP da sua página da web:

<link rel="amphtml" href="A versão AMP de sua página da web vai aqui" />

Exemplo ao vivo de página AMP

Aqui está um exemplo ao vivo de uma página AMP em ação e aqui está a página normal . Você pode simplesmente visualizar os códigos-fonte de cada página e notar a diferença nas velocidades e na codificação.

Recursos de aprendizagem AMP

Para encontrar códigos para aprender HTML para AMP, consulte os recursos abaixo para obter mais detalhes:

AMPProject.org
Projeto AMP do Github

3- Melhore a estrutura do site, o conteúdo e aprimore a experiência do usuário

A arquitetura do site é uma área frequentemente negligenciada quando se trata de design de sites, mas não deveria ser. O algoritmo do Google usa informações dos pesquisadores, portanto, uma boa experiência do usuário significa classificações mais altas. Se a estrutura do seu site não for adequada, a página levará mais tempo para carregar e o usuário sairá do site. Isso fornece uma experiência de usuário ruim.

Como melhorar a estrutura do site?

Um dos aspectos mais cruciais de uma boa experiência de pesquisa é ter uma boa estrutura de site, pois ajuda a otimizar o site para um melhor rastreamento.

Aqui estão 8 passos que você deve seguir para melhorar a estrutura do seu site:

Planeje a hierarquia do seu site e mantenha-a lógica. Além disso, equilibre o número de categorias e subcategorias. Um exemplo de uma estrutura de site refinada é fornecido abaixo:

figura_refinada2-1

Use palavras-chave pesquisáveis ao nomear suas categorias e subcategorias. Escolher os nomes certos ajudará bastante na otimização do seu site.

Tenha uma estrutura de URL amigável e garanta que o usuário dê apenas três ou menos cliques para acessar todas as páginas.

Adicione o maior número possível de sitelinks. Além de aumentar a navegabilidade do site, os sitelinks ajudam a aumentar a reputação da marca, aumentar a CTR e encurtar o funil de conversão.

Adicione o maior número possível de links internos, mas certifique-se de que todos sejam relevantes. Siga a Wikipedia se você estiver procurando por um ótimo exemplo de como criar links internos sólidos. Uma estrutura de links internos aprimorada e amigável para SEO permitirá que o link juice passe igualmente por todas as páginas internas e permita que cada página seja bem classificada no Google, aumentando assim o tráfego e as conversões.

Evite o problema de categorias e tags redundantes. Otimização de tags Yoast ferramenta é uma ótima maneira de corrigir o problema de tags redundantes em seu site WordPress.

Crie links para suas páginas mais importantes com mais frequência e acima da dobra. É muito importante que você repasse o máximo de link juice para suas principais páginas geradoras de receita para aumentar os lucros.

Siga a regra de 2 cliques que diz que deve levar apenas 2 cliques para chegar à sua página de geração de receita a partir de sua página inicial.

Como melhorar o conteúdo do site?

O algoritmo de classificação do Google dá grande ênfase à qualidade do conteúdo. A atualização do panda visa especificamente reduzir as classificações de sites que têm conteúdo baixo ou menos amigável em seu site. A forma como você apresenta o conteúdo do seu site tem muito a ver com a velocidade do site.

Aqui estão 5 maneiras de aumentar a velocidade do site melhorando a qualidade e a apresentação do conteúdo do site:

Tenha um blog . Os mecanismos de pesquisa adoram conteúdo exclusivo e novo e ter um blog serve apenas para esse propósito. Eu recomendo ter seu blog no WordPress, pois ele fornece alguns plugins realmente úteis que visam reduzir o tempo geral de carregamento. Criar um blog no WordPress é super fácil. Para obter instruções passo a passo, você pode baixar o guia gratuito para iniciantes sobre como iniciar um blog . Alguns plugins que você pode usar para otimizar imagens e cache são:EWWW Image Optimizer ,Bibliotecas do Google ,Otimizar WP e WP SuperCache .

Use CSS Sprites para otimizar imagens, pois ajuda a combinar suas imagens em 1 imagem grande que carrega de uma só vez.

Sprites CSS

Faça uso de temas responsivos porque os temas responsivos levam em consideração a velocidade e carregam mais rápido.

Instale o Google Page Speed e MemeCached em seu servidor. Isso melhorará a latência da página da Web e o uso da largura de banda alterando os recursos dessa página da Web para implementar as práticas recomendadas de desempenho da Web.

Permita que os usuários deixem seus comentários em seu site . Críticas e comentários positivos genuínos são um grande fator para aumentar a confiabilidade do site. Getreviewed.org é uma ótima plataforma para dar as mãos a centenas de blogueiros em potencial que desejam compartilhar seus insights honestos sobre seus produtos e serviços. Os plug-ins Disquss e Comentários do Facebook carregam rapidamente e ajudam os usuários a adicionar avaliações e comentários genuínos que otimizam a qualidade geral do conteúdo do seu site porque os comentários são indexáveis. Assim, sem comprometer a velocidade, você pode adicionar algum conteúdo valioso ao seu site.

Use o cache do navegador e implemente a API de armazenamento na Web HTML5 .

4- Faça uso do design responsivo

De acordo com o guia de SEO para dispositivos móveis do Google, o design responsivo é o padrão de design recomendado pelo Google. O Google também afirmou que classifica os sites otimizados para celular mais altos nas pesquisas para celular. Além disso, ter um design responsivo oferece os seguintes principais benefícios:

Os links são direcionados para um único domínio, levando a melhores classificações nos mecanismos de pesquisa.
Controla altas taxas de rejeição, que geralmente são usadas pelo Google para classificações mais baixas.
Melhorias em termos de experiência do usuário, o que é uma vantagem especialmente com públicos reais e não apenas bots.

design responsivo

Maneiras de acelerar seu site responsivo

Para acelerar seu site responsivo, use as seguintes estratégias:

Use o carregamento condicional, que é usado para impedir que todos os tipos de conteúdo sejam carregados, incluindo widgets sociais, imagens, mapas, etc., e carrega apenas o conteúdo que corresponde a uma condição específica.

Use frameworks como Bootstrap e Fundação que fornecem funcionalidade móvel rápida e velocidade.

Use imagens adaptáveis que se redimensionam automaticamente de acordo com o tamanho de tela disponível. Isso reduz a necessidade de carregar o arquivo de imagem completo. Em vez disso, imagens HTML reduzidas e incorporadas podem ser carregadas sem qualquer alteração na marcação.

Reduza o redirecionamento m-dot e prefira um único URL para suas páginas da web.

Use plugins como FitText o que torna o tamanho da fonte flexível para que caiba na largura fornecida pelo elemento pai.

5- Use Sitemaps e GWT para melhor rastreabilidade

As classificações do seu site geralmente dependem de pequenos bots trabalhando continuamente e rastreando seu site, classificando e analisando seu conteúdo com base em fatores de otimização de mecanismos de pesquisa. As etapas a seguir podem ajudar a acelerar seu site, permitindo que os rastreadores rastreiem seu site com eficiência e minimizem o tempo de inatividade:

Crie sitemaps e certifique-se de evitar conteúdo duplicado. Os Sitemaps são realmente úteis, pois fornecem ao Google metadados sobre tipos específicos de conteúdo em suas páginas, incluindo vídeo, imagem e conteúdo para celular. Por exemplo, uma entrada de vídeo de mapa de site pode especificar o tempo de execução do vídeo, categoria e classificação de adequação à idade, enquanto uma entrada de imagem de mapa de site pode incluir o assunto, o tipo e a licença da imagem.

Otimize a taxa de rastreamento do Google por meio das ferramentas do Google WebMasters. Para obter mais ajuda, consulte:Guia do Google sobre como alterar a taxa de rastreamento .

Continue atualizando o conteúdo, pois os bots do Google são fascinados por novos conteúdos.

Use servidores confiáveis e sempre forneça sites protegidos por HTTPS sempre que necessário.

6- Use Ajax e eventos de toque no lugar de eventos de clique

Os usuários de dispositivos móveis odeiam clicar em um recurso e aguardar o carregamento de outro recurso. Em vez disso, uma solução mais fácil é usar TouchEvents que suporta toques simultâneos em diferentes locais da superfície de toque. Esses eventos de toque, quando aplicados nos botões, podem reduzir drasticamente o tempo de carregamento e aumentar a experiência do usuário.

A figura abaixo fornece uma série de eventos de toque que os usuários podem gerar ao interagir com o dispositivo móvel.

touch_events

Além disso, é recomendável usar AJAX, pois permite que os dados sejam obtidos de um servidor web sem precisar atualizar a página onde o código está sendo executado.

7- Otimize o processamento do lado do cliente

No caso de dispositivos móveis, o processamento do lado do cliente é bastante reduzido devido a CPUs mais lentas e menos memória. Para aumentar a eficiência do processamento da página, recomenda-se adiar o carregamento de conteúdo abaixo da dobra, como imagens e scripts. O download e a análise desses scripts podem ser adiados com segurança até depois do evento onload . Alguns scripts precisam ser chamados somente após o usuário iniciar qualquer ação como arrastar e soltar, portanto, esses scripts não devem ser carregados a menos que o usuário alcance a tela para que ele esteja pronto para executar qualquer ação.

Com essas diretrizes e mudanças na infraestrutura do site, você pode acelerar seu site e obter classificações mais altas. Você implementou alguma outra técnica que o ajudou a reduzir bastante o tempo de carregamento do seu site? Por favor, deixe-me saber em seus comentários abaixo.