Como otimizar seu site para a velocidade de carregamento em dispositivos móveis

Como aumentar a velocidade de carregamento da página em 7 passos: dicas para um site mais rápido

Embora as diretrizes do Google para dispositivos móveis se concentrem fortemente no design amigável e na usabilidade para dispositivos móveis, a velocidade do site é crucial para o SEO móvel por várias razões. A velocidade da página é parte dos principais sinais vitais da web do Google, fatores essenciais de classificação que medem a experiência do usuário no seu site.

O Google se limita a uma certa quantidade de tempo rastreando cada site. Fazer com que os sites carreguem mais rápido incentiva o Google a rastrear mais páginas da web. Isso significa que melhorar o tempo de carregamento da sua página pode promover a descoberta e a indexação mais rápidas de novas páginas e conteúdos, bem como um rastreamento mais abrangente de páginas mais profundas no site.

Mesmo que sua classificação permaneça a mesma, página a página, o número total de páginas com capacidade de classificação aumenta, geralmente afetando o tráfego orgânico geral, especialmente para termos de cauda longa.

Além das considerações sobre o crawl budget, a velocidade e o tempo de resposta do seu dispositivo móvel também afetam a perspectiva do usuário real, o que geralmente se reflete em altas taxas de rejeição. Em última análise, sites lentos fazem as pessoas saírem.

Ao otimizar o carregamento e o desempenho do seu site móvel, o objetivo deve ser sempre considerar o pior cenário de carregamento em dispositivos móveis, em vez de qualquer outra métrica de desempenho do site.

Faça um teste de velocidade do site e otimize o desempenho do seu site para garantir que você ofereça a página mais rápida possível para o maior número de usuários móveis possível. Mesmo com o aumento da velocidade das redes móveis, o ideal é que uma página carregue em menos de 3 segundos ou, conforme as recomendações do Google, em menos de 1 ou 2 segundos.

Mas os navegadores móveis interpretam e carregam páginas de maneira diferente dos navegadores de desktop. Em termos simples, os navegadores para desktop são melhores para carregar páginas com muitas solicitações pequenas, enquanto os navegadores móveis são melhores para carregar páginas com menos solicitações, mas mais organizadas, mesmo que sejam um pouco maiores.

O número de elementos que devem ser buscados no servidor para carregar uma página é chamado de solicitações de resposta, ou RTRs. A minimização de RTRs afeta consideravelmente a otimização e a melhoria da velocidade de carregamento da página móvel.

Você pode imaginar os RTRs como idas ao supermercado para pegar itens e completar uma receita. Se você precisar de quatro cebolas, não deverá fazer uma viagem separada para cada uma delas. Seria melhor pegá-las todas de uma vez, e será ainda melhor se você pudesse obter as quatro cebolas e alguns dos outros ingredientes na mesma viagem. Se as quatro cebolas fossem embaladas em um pacote com outros ingredientes como pimentões, cogumelos e aipo, todos obrigatórios para a receita, seria ainda melhor.

Veja a seguir algumas recomendações para otimizar a velocidade dos seus sites móveis:

1. Identifique páginas com RTRs excessivos.

A minimização dos RTRs começa com a conscientização. Muitas páginas terão mais de 100 RTRs por página, mas você realmente deveria buscar menos de 50.

Frequentemente, desenvolvedores ou profissionais de SEO que verificam todas as solicitações em uma página percebem que alguns dos itens solicitados estão ausentes (404) e ninguém notou. Mesmo que estejam ausentes, ainda leva tempo para o navegador fazer a solicitação e retornar sem resultados, então essas páginas devem ser removidas ou corrigidas imediatamente.

Você também deve corrigir os ativos que foram movidos e retornar uma resposta 301 ou 302. Essas respostas significam que o navegador teve que ir para um lugar e, em seguida, seguir outro conjunto de instruções para ir para outro lugar para obter o recurso, mas cada novo local leva mais tempo.

É como ir a um mercado e ouvir que eles não têm o que você precisa, mas você pode conseguir em outra loja na rua. Pior ainda: se houver uma cadeia de redirecionamentos, é como ir à segunda loja e descobrir que ali também não tem mais o item e que agora você terá que tentar em um terceiro lugar.

2. Combine arquivos sempre que possível.

A próxima etapa para ter um site otimizado é combinar arquivos (como JavaScript e CSS) onde for possível. Por exemplo, se uma página utiliza 10 folhas de estilo (arquivos CSS) que podem ser combinadas em uma só, você deve fazer isso. Da mesma forma, se você estiver utilizando uma variedade de arquivos JavaScript que poderiam ser combinados em 1, por que não fazer isso?

Tente pensar nas coisas de forma geral para o site e também especificamente para cada modelo. Você deve ter um arquivo JavaScript para todo o site, que esteja em cada página do site, e um arquivo JavaScript específico para cada modelo de página no site. O mesmo pode ser feito com CSS. Garantir que esses arquivos também sejam sempre referenciados com o mesmo nome de arquivo e local também ajudará se forem armazenados em cache corretamente.

3. Otimize a ordem de apresentação.

Depois de eliminar e consolidar para reduzir o número total de RTRs, a próxima coisa que você pode fazer é ajustar a ordem em que as coisas são solicitadas para torná-las mais rápidas.

Da mesma forma que há etapas que precisam ser concluídas em uma receita para que outras possam começar, há uma ordem específica que um navegador móvel seguirá e que deve ser respeitada no desenvolvimento de uma página.

Seguindo o exemplo do supermercado, se a sua receita pedir algo para marinar por 2 dias, será importante obter primeiro os itens necessários para a marinada, para ela começar enquanto você adquire o restante dos ingredientes, em vez de depois.

Traduzindo essa analogia para o mundo da web, a marinada é como um bloqueador de renderização, porque nada mais pode acontecer no processo de cozimento até que esteja concluído. Você só pode se preparar para as próximas etapas do processo de cozimento pegando os ingredientes enquanto as coisas marinam.

É como a renderização de caminho crítico: você prioriza os itens mais relevantes, como a etiqueta de cabeçalho, o conteúdo e o layout básico da página, e coloca em espera os itens menos fundamentais, especialmente se eles atrasarem o carregamento de itens mais críticos. Isso pode melhorar drasticamente a experiência de carregamento para usuários e garantir que o resto da página será carregado com rapidez. Isso também proporciona recursos para começar a avaliar enquanto o processo de carregamento acontece.

4. Crie uma estratégia de carregamento de página.

Como os mecanismos de pesquisa emulam usuários humanos, a experiência deles é praticamente igual à sua. A melhor coisa a se fazer para ordenar as solicitações de velocidade do site é saber o que é fundamental para a experiência do usuário e do bot nos primeiros segundos em que ele se encontra na página.

Isso geralmente diz respeito à informação na etiqueta de cabeçalho e ao texto e às imagens na página. Geralmente as pessoas demoram alguns segundos para interagir com qualquer elemento interativo no site, então a maior parte do JavaScript não precisa ser carregada imediatamente.

Em vez disso, representações visuais do JavaScript, como caixas de adição ou expansores, podem ser carregadas como espaços reservados antes de o JavaScript ser necessário. O JavaScript é especialmente lento e pesado para carregar. Para garantir que o carregamento do JavaScript não torne a experiência tão lenta a ponto de usuários e bots ficarem olhando para uma página em branco por muito tempo, o ideal é carregar algo para os usuários verem e, em seguida, carregar o JavaScript em segundo plano enquanto os usuários veem a página.

Após o JavaScript, vídeos e imagens são as próximas coisas mais lentas a serem carregadas. Vídeos e imagens na parte inferior da página não devem prejudicar a experiência da parte superior da página, geralmente por onde usuários e bots começam. Esse conceito de carregamento lento para atrasar o carregamento de conteúdo não visível é chamado de “lazy-loading”. O carregamento lento pode ser realizado de várias maneiras (com adiamento, assincronismo e marcas META de carregamento lento do Google).

A melhor ferramenta para encontrar oportunidades para o carregamento lento de imagens é o Google PageSpeed Insights. Para otimizar imagens, você também pode usar a marca de imagem de carregamento lento do Google que, por ora, é compatível somente com navegadores móveis e de desktop do Chrome (mas isso pode mudar no futuro). Com qualquer um dos métodos, você deve usar a Ferramenta de inspeção de URL do site no Google Search Console para verificar se os itens de carregamento lento estão visíveis na geração da página na ferramenta e no HTML gerado.

5. Faça a compactação de tudo o que puder.

Depois de minimizar e priorizar o RTR de cada modelo de página, você deve compactar tudo o que puder. A compactação ajuda a aumentar a velocidade da página economizando largura de banda. O formato Gzip é uma possibilidade para a compactação de arquivos e é compatível com a maioria dos servidores, mas também há outras opções disponíveis.

Você também pode executar a maioria dos códigos por meio de um processo de minimização, o que reduz o tamanho do arquivo de transferência final. No entanto, é difícil comprimir imagens com esses métodos. Você pode usar a página Análise de desempenho no WebPageTest.org para encontrar a Lista de verificação de otimização completa, que mostra todos os ativos na página, mesmo que estejam em Gzip, e seu nível de compactação.

Para a compressão de imagens, em vez de zipar e minimizar suas imagens, é importante que o designer as entregue ao desenvolvedor no formato mais comprimido possível, reduzindo os arquivos de imagem. Essencialmente, é preciso reduzir ao mínimo o tamanho final do arquivo sem comprometer a aparência da imagem.

As fotos geralmente devem ser salvas como arquivos JPG e os ícones e ilustrações devem ser salvas como arquivos GIF. Para que imagens grandes fiquem ótimas em computadores de tela cheia, sem sobrecarregar telas pequenas de dispositivos móveis, considere a possibilidade de utilizar o protocolo de imagens responsivas ou um servidor de imagens como o da Fastly para enviar dinamicamente uma versão da imagem dimensionada previamente para telas menores.

6. Armazene em cache as páginas certas no momento certo.

O próximo passo é ajudar navegadores e bots a identificarem o que pode ser reutilizado e o que precisa ser buscado novamente todas as vezes no cache do navegador, uma funcionalidade que pode ser definida de diversas maneiras, como por meio de CDNs (rede de entrega de conteúdo).

A maioria dos elementos em um site, especialmente um site que não muda mais de uma vez por semana nem compartilha informações em tempo real, como notícias, clima ou resultados esportivos, pode armazenar em cache a maioria dos elementos em suas páginas por até um ano. O armazenamento em cache significa que, quando os usuários visitam uma página, os navegadores procuram localmente na memória para ver se já têm um arquivo necessário para criar uma página.

Isso economiza nas solicitações de ida e volta e melhora o tempo de carregamento. Os bots dos mecanismos de busca sempre veem uma página como se nunca a tivessem visto antes, então não usam cache ativo, mas conseguem perceber quando o cache está ocorrendo e podem utilizá-lo para estimar o tempo de carregamento de uma página.

O que é importante entender sobre o armazenamento em cache é que ele é baseado nos nomes dos arquivos e em sua localização no servidor. Portanto, se você usar 1 arquivo em várias páginas, como um logotipo, sempre faça referência a ele com o mesmo nome de arquivo e URL, mesmo que ele esteja em vários locais no seu servidor.

Isso pode ser usado a seu favor, pois significa que você só precisa atualizar o nome do arquivo de um item e sua referência no HTML para obter uma nova versão do item em cache. Por exemplo, se você fizer uma modificação no seu logotipo, ao simplesmente mudar o nome do arquivo de 'logo' para 'logov2', a nova versão será armazenada em cache e a antiga será esquecida.

Dessa forma, quando você permite que algo seja armazenado em cache por um ano, não está dizendo que não vai alterar o item naquele ano, mas que, se o fizer, fará referência ao item atualizado ou novo com outro nome de arquivo.

As configurações de cache podem ser um pouco complicadas, então a melhor coisa a fazer é encará-las como alimentos que podem estragar. A vida útil de alguns alimentos é menor do que de outros, então você precisa informar ao navegador quais coisas estragam e devem ser dispensadas no curto prazo e quais podem ficar com segurança na prateleira por mais tempo sem que você precise substituí-las.

Você pode usar uma ferramenta como WebPageTest.org para ajudar a entender onde se encontram as oportunidades. O importante a entender aqui é que não há data de expiração definida, nem idade máxima para o item existir no cache. Portanto o navegador simplesmente assumirá que precisa ser buscado novamente a cada vez: o cache do navegador não pode ocorrer a menos que esses detalhes sejam especificados.

Como as configurações de cache informam a um navegador quando um item está muito antigo para ser usado, isso às vezes é chamado de "vida útil do cache" ou de "vida útil da atualização". Se algo estiver além de sua vida útil de atualização ou armazenamento em cache, o ciclo de ida e volta ao servidor deverá ser concluído para obter uma versão atualizada. Se os itens estiverem listados como “expirados”, isso significa que ultrapassaram a vida útil da atualização e, tanto na analogia do mercado quanto na do navegador, devem ser substituídos na próxima vez em que forem necessários.

Da mesma forma que ter prateleiras cheias de mantimentos com a validade vencida não é algo interessante, também não é útil ter um cache cheio de conteúdo da web expirado. Por outro lado, também não adianta jogar fora mantimentos (arquivos) que ainda estão em perfeito estado. Ao atribuir um tempo de vida útil do cache aos seus arquivos, é útil pensar sobre isso e também considerar as consequências de ser generoso com o tempo de vida útil do cache.

Se você fizer uma pequena alteração no seu logotipo, não será o fim do mundo se o logotipo antigo ainda for exibido, então você pode manter o tempo de vida do cache longo, especialmente se pretende ser diligente na atualização dos nomes dos arquivos quando fizer alterações. Com nomes de arquivo diferentes, não há o risco de mostrar o logotipo antigo.

7. Crie páginas móveis aceleradas (AMPs).

Tudo isso pode parecer complicado e é por isso que o Google criou uma solução mais simples para otimizar a velocidade da página. Accelerated Mobile Pages, ou AMP, é um subconjunto do HTML que segue diretrizes muito mais rigorosas sobre o que pode ser incluído. O objetivo é fazer com que a maioria das páginas carregue em 1 segundo no celular, o que geralmente acontece. As AMPs permitem que o Google assuma o controle daquilo que é mais complexo ao armazenar em cache e configurar o processo de carregamento e a maioria dos elementos descritos acima para possibilitar a maior otimização possível.

Em alguns casos, as empresas criam novas páginas AMP e links para elas a partir de páginas existentes no site por meio da tag de cabeçalho. Isso informa ao Google para exibir a página AMP se a pessoa que estiver solicitando a página estiver em um dispositivo móvel ou com uma conexão lenta. Em outros casos, você pode substituir as páginas existentes (ou as páginas móveis existentes, se estiverem em sites separados) por páginas AMP. Isso é conhecido como “AMP canônico” ou “Canonical AMP”, em inglês.

O Google prefere este método porque as páginas AMP são extremamente fáceis para o Google rastrear, gerar, indexar e classificar. Porém, essa pode não ser a primeira escolha das empresas, porque as limitações e os requisitos das AMPs podem tornar as páginas um pouco simples demais. As AMPs também podem complicar ou limitar alguns dos rastreamentos e testes que você pode fazer em páginas de desktop, então este é outro motivo pelo qual algumas pessoas as evitam.

Sites válidos para AMP seguem todas as regras e diretrizes do AMP e, por sua vez, o Google exibe um pequeno raio cinza com eles nos resultados móveis. É mais provável que o Google os inclua em carrosséis especiais de resultados que costumam aparecer na parte superior de uma página.

Isto é ótimo, mas se ser válido para AMP causar muitos problemas para o site, não será um problema usar o código AMP sem ser válido para AMP. Você deve usar HTML AMP sempre que puder, sem preocupar-se em seguir todas as regras. Você ainda se beneficiará da velocidade do HTML e do JavaScript AMP— nada mal, considerando que é gratuito.

Lembre-se de que a velocidade afeta diretamente o envolvimento e a conversão, mas provavelmente também ajuda na profundidade de rastreamento e em outros aspectos da eficiência de rastreamento.

Os navegadores para dispositivos móveis funcionam diferente dos navegadores para desktop. Além disso, eles têm processadores mais lentos e conexões menos confiáveis. Esses fatores tornam essencial a análise do tempo de carregamento das páginas do site sob a perspectiva móvel mais desfavorável para identificar onde existem oportunidades reais de melhoria.

Escrito por Cindy Krum para o Mailchimp. Cindy é especialista em recursos de SEO móvel.

---

Principais conclusões

• Velocidades de carregamento mais rápidas melhoram o crawl budget do Google e ajudam a indexar mais páginas do site, resultando em tráfego orgânico geral melhor.
• Os usuários móveis querem que as páginas carreguem em menos de 3 segundos e velocidades lentas levam a altas taxas de rejeição que prejudicam o posicionamento.
• Os navegadores para dispositivos móveis funcionam diferente dos navegadores para desktop, então a redução do número de solicitações ao servidor é essencial para otimizar a velocidade nos dispositivos móveis.
• A velocidade da página afeta diretamente as métricas principais de itens vitais da web do Google, que agora são fatores essenciais de classificação para a indexação mobile-first.

---