Estar bem posicionado nos resultados de uma busca do Google é um dos principais objetivos de qualquer gestor de site. Mas, embora seja um objetivo comum, não é uma tarefa fácil de conseguir.
Para aparecer nas primeiras posições do SERPS é necessário olhar todos os detalhes do seu blog, site ou loja online. Um dos aspectos mais importantes, e também um dos mais críticos, é a velocidade do site. Este post explica o que é velocidade do site, qual a sua importância e como você pode melhorá-la.
Google PageSpeed: uma excelente ferramenta para diagnosticar a velocidade do site
Os algoritmos do Google são projetados para premiar as páginas que oferecem bons conteúdos e proporcionam uma excelente experiência de navegação. Um dos aspectos mais importantes e críticos para o Google é a velocidade do site. Por isso, o Google criou uma ferramenta própria que permite realizar um diagnóstico da velocidade do site, e que também informa sobre as ações possíveis para melhorá-la.
Essa ferramenta se chama Google PageSpeed. É muito confiável e fácil de usar: basta indicar a URL que deseja diagnosticar e a página receberá uma pontuação de 0 a 100. Além disso, o Google valoriza a navegação de dispositivos móveis de maneira diferente de uma página carregada em um navegador de desktop, o que significa que, ao realizar o diagnóstico, provavelmente você vai obter duas pontuações diferentes.
Mas se a sua página é do WordPress é normal obter pontuações baixas. Aqui estão algumas dicas para obter uma pontuação de 100 em 100.
Mesmo se você não estiver usando o WordPress, este artigo ainda o ajudará a obter uma boa pontuação. Basta encontrar um plugin ou extensão equivalente ao W3 Total Cache caso utilize outro CMS (Content Management System), ou se for um site personalizado, você pode aplicar todas as ações com a ajuda de um desenvolvedor ou provedor de hospedagem.
O que é necessário para obter um PageSpeed 100?
Para obter uma maior pontuação no Google PageSpeed, certifique-se que você possui as ferramentas necessárias e bem configuradas para atingir o seu objetivo:
W3 Total Cache
Este plugin gratuito é essencial para qualquer site em WordPress, pois facilita muito a tarefa de melhorar a velocidade do site.
É possível baixá-lo na página oficial do diretório de plugins do WordPress. Mas certifique-se de que, além de instalado, esteja ativo.
Cliente FTP
É provável que o Google PageSpeed indique que sejam realizadas alterações em arquivos WordPress para otimizar a velocidade do site.
Para simplificar essa tarefa basta seguir as seguintes etapas:
- Em primeiro lugar, para editar arquivos que estão hospedados em um servidor, você precisa acessar a partir de um protocolo chamado FTP (File Transfer Protocol). Para fazer isso, precisamos apenas de um cliente FTP e existem vários que funcionam bem e também são gratuitos. Os mais populares são:
- FileZilla. Oferece um grande número de opções, é gratuito, multiplataforma e também recebe atualizações com muita frequência.
-
- Cyberduck. Possui uma interface mais agradável que o FileZilla e é perfeito para a maioria dos usuários que precisam acessar o FTP de modo simples.
- Em segundo lugar indique que quer se conectar ao servidor onde o seu Wordpress está hospedado. Para isso, indique os seguintes parâmetros:
- Host ou servidor
- Usuário
- Senha
Normalmente, quando você contrata um serviço de hospedagem, ele indicará as credenciais de acesso FTP nomeadas anteriormente. Se você não os tiver, poderá entrar em contato com seu provedor para que eles possam fornecê-los a você.
Editor de código
Se você tiver Windows, pode editar os arquivos no Bloco (ou Bloco de Notas), e se tiver Mac, pode usar o TextEdit, desde que salve as alterações como texto simples.
Talvez esses dois programas resolvam o problema, mas é aconselhável usar um editor de código desenvolvido especificamente para essa função. Esses dois são muito poderosos e totalmente gratuitos:
Conseguindo 100 de 100: passo a passo
Agora é hora de analisar a velocidade do site.
Ao fazer o diagnóstico, a ferramenta Google retorna duas pontuações: a primeira para navegadores de dispositivos móveis e a segunda para navegadores de desktop. Você ficará surpreso com o fato de os dois resultados não corresponderem. Atualmente o Google é mais exigente com a velocidade de navegação mobile, então esse valor quase sempre será menor em comparação aos navegadores desktop.
Além das pontuações, o PageSpeed mostrará quais aspectos do site penalizam e dará sugestões de como corrigi-lo. Também é provável que não seja necessário intervir nos 8 pontos diferentes que ele analisa, mas mesmo assim, vale a pena levar em consideração os possíveis erros em todos os casos para obter a pontuação de 100 em 100.
1. Reduza o tempo de resposta do servidor
Quando o PageSpeed mostra esse aviso, ele está pedindo o site em cache. Existem dois tipos principais de cache:
- Aquele que é armazenado no servidor.
- Aquele que faz isso nos navegadores.
Neste aviso específico que o Google nos retorna, refere-se ao cache da página no servidor.
O que alcançamos ao armazenar um site em cache?
Existem dois tipos principais de código de programação no campo do desenvolvimento web: os que são executados pelo servidor e os que são executados no navegador.
Tanto o WordPress (ou qualquer outro CMS) quanto a maioria dos sites que possuem algum tipo de conteúdo dinâmico são desenvolvidos principalmente em uma linguagem de programação baseada em navegador. Isso significa que para o visitante visualizar o site, o servidor precisa realizar uma série de tarefas prévias que demandam um mínimo de tempo. O Google chama isso de "tempo de resposta do servidor". Isso pressupõe que na primeira vez que o servidor recebe uma visita, ele executa todas as ações para exibir a página solicitada, retorna o resultado (que é uma página HTML estática), exibe para esse primeiro usuário e salva no próprio servidor.
Ao armazenar uma página em cache conseguimos algo muito importante para melhorar a velocidade do site: na próxima visita do usuário, ao invés de repetir todo esse processo, o resultado será mostrado diretamente, reduzindo assim drasticamente o tempo de espera e o consumo de dados do servidor.
Como armazenar a página em cache?
- Ative o cache do site com o plugin W3 Total Cache Wordpress. Você só precisa acessar o plugin (anteriormente instalado e ativado) em Desempenho, localizado na barra lateral esquerda do administrador do Wordpress, e depois em Configurações gerais. Por fim, você deve ativar a Cache de página, que encontrará como primeira opção na segunda caixa.
- Alternativa ao WordPress. Se você não estiver usando o Wordpress para armazenar a página em cache, e sim outro CMS, procure um plugin ou extensão equivalente.
- Site desenvolvido sob medida. Neste caso solicite a um desenvolvedor que programe a funcionalidade ou outra opção, entrando em contato com o provedor de hospedagem para solicitar que configure o cache da página nas opções do servidor.
2. Especificar o cache do navegador
No ponto anterior, explicamos os dois tipos de cache que podem ser aplicados a uma página da web: o que é armazenado no servidor e o que é armazenado nos navegadores. Esse alerta do PageSpeed está diretamente relacionado ao tipo de cache que armazena os arquivos no navegador.
Assim como o cache do servidor é projetado para poupar o tempo de processo do código do WordPress para retornar um resultado na forma de uma página HTML de alguns Kb (Kilobytes) de peso, o cache salva localmente todas as imagens, arquivos de estilo CSS e arquivos JavaScript, entre outros, contidos nesse documento HTML. Dessa forma, na segunda vez que você acessar a mesma página, em vez de baixar todos esses arquivos novamente, ele os recupera diretamente do seu computador.
Se isso já é feito pelo próprio navegador, o que o Google está nos pedindo? O que o Google está pedindo é para dizer ao navegador por quanto tempo armazenar o cache.
Como indicar o tempo de cache para os navegadores?
Indique esse tempo adicionando algumas linhas de código ao .htaccess do site. Para isso leve em consideração o seguinte:
-
É necessário um cliente FTP e dados de acesso, conforme especificado no início deste post.
-
Trata-se de arquivo oculto, ou seja, provavelmente você não o visualiza se não ativar a opção de exibição de arquivos ocultos no cliente FTP.
-
O arquivo .htaccess está localizado na raiz do Wordpress (ou qualquer outro CMS).
-
Antes de tudo, baixe uma cópia para o seucomputador, pois se algo der errado na hora de editar tudo, o Wordpress pode parar de funcionar. Se isso acontecer, basta restaurar o arquivo.
Levando em consideração os pontos acima, agora você pode fazer as alterações no seu arquivo. Para isso, basta copiar este código e colá-lo no início do arquivo .htaccess:
# ESPECIFICAR TEMPO DE CACHE
# Configuração do tempo que os navegadores têm para economizar
# arquivos simples em cache.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 10 days"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/plain "access plus 1 week"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/x-icon "access plus 3 months"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/x-icon "access plus 3 months"
</IfModule>
# FIM: ESPECIFICAR TEMPO DE CACHE Alternativa ao Wordpress
O arquivo .htaccess não é exclusivo do Wordpress, portanto o processo para especificar o tempo de cache será o mesmo para qualquer ambiente web.
3. Remova o JavaScript e o CSS que bloqueiam a visualização do conteúdo acima da página
Quando você entra em um site, o navegador processa o código HTML linha por linha. Quando uma chamada de arquivo é encontrada neste código externo, como uma folha de estilo CSS ou um arquivo JavaScript, o processo é interrompido, é feita uma chamada para esse arquivo, ele aguarda uma resposta do servidor e só depois é feito o download para o computador. Quando esse processo termina, a renderização HTML do site continua, e assim por diante para cada arquivo desse tipo.
Esses arquivos CSS ou JavaScript geralmente estão localizados no início do código HTML, entre as tags. Em última análise, com esse aviso o Google está nos pedindo para mover esses arquivos para o final do código.
Como mover arquivos para o final da página
Não se assuste. Se você tem um blog em Wordpress, graças ao W3 Total Cache a operação ficou muito simples:
- Acesse os arquivos do template Wordpress ativo via FTP. Você pode encontrar seus arquivos de temas em wp-content/themes/.
- Acesse o arquivo footer.php e adicione as duas linhas a seguir antes do fechamento da tag.
<!-- W3TC-include-css -->
<!-- W3TC-include-js-head -->
Essa ação moverá todos os arquivos CSS e JavaScript para a parte inferior da página, reduzindo o tempo que o navegador leva para renderizar a primeira metade do código.
E sem Wordpress?
Não é muito difícil encontrar um plugin ou extensão equivalente ao W3 Total Cache que coloque automaticamente esses arquivos na parte inferior da página.
Caso não esteja usando um CMS, é possível mover esses arquivos manualmente.
4. "Minificar" CSS, HTML e JavaScript
Quando um programador escreve código, ele geralmente tabula, adiciona espaços e quebras de linha para estruturá-lo de uma maneira que seja o mais fácil possível dele entender.
Porém, para que um navegador entenda e interprete esses arquivos, não é necessário estar visualmente bem organizado. Os espaços, tabulações e quebras de linha ocupam um espaço em Kb (kilobytes) nos arquivos que aumentam desnecessariamente o tempo de carregamento do site.
Para resolver esse problema, o Google pede para minificar os arquivos CSS, HTML e JavaScript, eliminando o espaço extra que ocupam e, consequentemente, reduzindo o tempo de carregamento.
Além disso, se houver, por exemplo, três arquivos JavaScript ou CSS separados, mesmo que sejam minimizados, o navegador é forçado a fazer três solicitações diferentes que poderia ser apenas uma.
Como minificar esses arquivos no Wordpress?
O W3 Total Cache facilita muito essa tarefa, reduzindo-a a duas etapas:
- Vá do administrador do Wordpress para Performance, na barra lateral esquerda, e depois acesse Minify.
- Ative minificação opção Ativar em cada uma das caixas correspondentes: HTML e XML, JS, CSS.
Como minificar se você não usa o Wordpress
Muitos editores de código têm a opção de minificar facilmente código HTML, CSS e JavaScript. Se você seguir esse caminho, lembre sempre fazer backup de seus arquivos ao minificar.
Se usar um CMS diferente do Wordpress, provavelmente não será muito difícil encontrar um plugin ou extensão que reduza esses arquivos.
5. Priorize o conteúdo visível
Este ponto é similar ao ponto 2 deste post. O que o Google pede por meio de sua ferramenta de análise de velocidade do site é garantir que não haja uma quantidade excessiva de código JavaScript ou CSS embutido entre o código HTML, para que não aumente muito o tempo de carregamento da primeira parte do site.
Para que o Google não mostre esta mensagem, além das ações indicadas nos pontos 2 e 3, é preciso fazer o seguinte:
- Vá para Performance na barra lateral do administrador do Wordpress e depois Minify.
- Na caixa HTML & XML ative as Inline CSS minification e Inline JS minification, isso também irá comprimir o código JavaScript e CSS embutido no código HTML, ou seja, não está em um arquivo externo.
Como posso fazer isso sem o Wordpress?
Se você usar outro CMS, sempre poderá procurar uma alternativa ao W3 Total Cache ou um plugin ou extensão que reduza essa parte do seu código.
Se for um desenvolvimento personalizado, você pode incluir os JavaScripts e CSS incorporados em minificados que são carregados no final do seu código.
6. Otimizar imagens
É muito comum obter uma pontuação muito baixa ao passar o site pelo Google PageSpeed. Às vezes isso não acontece, pois o que o Google mais penaliza é o peso das imagens que excedam o mínimo que o buscador considera ótimo.
Com base nas dimensões e extensão da imagem (por exemplo, JPG ou PNG), o Google calcula um peso de arquivo apropriado.
Como otimizar o peso das imagens?
Não é um problema difícil de resolver se tivermos em conta o seguinte:
- Seja no Wordpress, outro CMS ou em um site personalizado, o processo é exatamente o mesmo.
- Provavelmente, ajustar as dimensões da imagem ao espaço que ela ocupará na página não será suficiente para o Google.
- É necessário comprimi-las ao máximo. Para comprimir arquivos PNG e JPG use o TinyPNG.
O Google recomenda outros como jpegtran e jpegoptim para arquivos JPG e OptiPNG ou PNGOUT para arquivos PNG.
7. Habilitar a compressão
Além de otimizar ao máximo os arquivos do site, minimizando-os e agrupando-os, utilize o formato GZIP para reduzir ainda mais o tempo de carregamento do site.
A maioria dos provedores de hospedagem tem essa opção habilitada por padrão em seus servidores. Caso o Google PageSpeed mostre esse alerta, verifique primeiro se você tem a opção habilitada no W3 Total Cache from Performance na barra lateral esquerda no administrador do Wordpress e em seguida acessando o Browser Cache. Por fim, na Geral opção Ativar compactação HTTP (gzip).
Se o aviso continuar aparecendo para você, contate seu provedor de hospedagem para garantir que ele tenha GZIP.
8. Evite redirecionamentos para landing pages
Embora não seja muito comum, às vezes esse aviso aparece quando um redirecionamento é forçado.
Por exemplo, quando um usuário acessa:
http://seudominio.com/blog
E é redirecionado para:
http://blog.seudominio.com
Normalmente não é um problema, pois o Google só começa a penalizar após um segundo redirecionamento. Ou seja, se além do redirecionamento anterior, o usuário é redirecionado para:
http://www.seudominioblog.com
O Google considera que uma terceira solicitação HTTP aumenta muito o tempo de espera para exibir o conteúdo. Portanto, evite isso.
9. Melhore a velocidade em dispositivos móveis usando AMP
A sigla AMP significa Accelerated Mobile Pages. Trata-se de uma tecnologia para otimizar a velocidade de carregamento e melhorar a pontuação da experiência do usuário na versão móvel do site.
O AMP não é um "substituto" das páginas responsivas, mas um complemento. Enquanto uma página responsiva tem (ou pode ter) todos os elementos de um site adaptado ao formato mobile, o AMP retira a maior parte dos elementos e scripts.
Como acessar esta versão AMP? Se seu site estiver em WordPress, instale e ative o AMP. Este plugin adiciona algumas linhas de código com o objetivo de remover a maioria dos elementos e scripts para otimizar (ou melhor, acelerar) o carregamento do site. Claro, isso acontecerá se for adicionado /amp no final de URL. Se esta extensão não for adicionada, a tecnologia AMP não funcionará. Como mencionado, se seu CMS não for WordPress, é possível conversar com seu desenvolvedor web para encontrar uma função semelhante para criar sua versão AMP.
10. O que não fazer
Ao longo deste post tomamos o WordPress como um CMS de referência para criar um site. Se seu site está em WordPress, sabe o potencial de uso dos temas, pois eles são a base para a criação de um site simples e adaptado à sua identidade corporativa. Bom, dentro da grande variedade de temas da plataforma, existem alguns como o Divi, que costumam chamar bastante a atenção. Este em particular tem muitos recursos e um design elegante e adaptável, mas, por outro lado, é um tema muito pesado que tem um impacto direto e negativo na sua classificação no PageSpeed. Portanto, antes de optar por um belo tema, verifique seu peso.
Você também deve evitar instalar um grande número de plugins. E aqui não se trata apenas de quantidade, mas também da qualidade. Verifique quantos recursos o plugin que você vai usar consome. Utilize plugins como o Jetpack, que possui uma grande variedade de ferramentas.
Um tema ou plugin pesado pode derrubar um PageSpeed de 91/100 para 73/100 em pouco tempo.
Diante disso, a escolha é sua. Você prefere uma boa velocidade do site ou está interessado na funcionalidade e adaptabilidade desses temas ou plugins?
Alternativas ao Google PageSpeed
Falamos, ao longo de todo o artigo, sobre o Google PageSpeed, pois é uma das alternativas mais interessantes do mercado para medir a velocidade do site e, porque não dizer, para ver o que o Google mais valoriza, já que é o motor de busca de referência quase a nível mundial.
Existem muitas alternativas ao Google PageSpeed no mercado, e pode ser interessante analisá-las para continuar aumentando a velocidade do site. Dentre elas estão:
- WebPageTest. Nesta ferramenta é possível escolher o servidor e o navegador que você deseja testar, verificar o tempo de carregamento dos scripts e visualizar detalhadamente todo o conteúdo da página.
- GTMetrix. Permite testar a velocidade de diferentes locais e incluir gráficos para acompanhar a evolução e encontrar pontos de melhoria.
- Pingdom. É uma ferramenta ideal para iniciantes e também para desenvolvedores web. Analisa a velocidade de diferentes aspectos, assim como faz o PageSpeed, e propõe as ações de melhoria necessárias para melhorar a velocidade do site.
Obter 100 pontos no PageSpeed em todas as páginas
É comum achar que, quando se atinge 100 pontos no Google PageSpeed, todo o trabalho está feito.
Mas o Google não posiciona apenas nossa página inicial, e sim todas as páginas do blog. Portanto, faça o PageSpeed nas páginas mais relevantes do seu site e garanta que também cheguem o mais próximo possível de 100.
Mantendo a pontuação
Também seria um erro considerar que, depois de atingir um PageSpeed 100 em todas as páginas relevantes do blog, todo o trabalho está feito.
Questões como fazer algum ajuste ou alteração em sua página, carregar uma imagem com peso acima do necessário em uma postagem ou modificações nos critérios do próprio Google podem alterar os resultados do PageSpeed. Portanto, para manter a pontuação faça uma revisão mensal.
Para posicionar-se bem no Google é necessário cuidar de um grande número de detalhes. Obter um Google PageSpeed 100 não é decisivo, mas é muito importante.
Tem algum comentário ou dúvida? Escreva nos comentários!
Publicado em 16 de fevereiro de 2023.
Revisado e validado por Jalusa Lopes, Country Manager da InboundCycle Brasil.