Skip to main content

Um guia completo para a velocidade de carregamento da página e como melhorá-la

1. Por que SEO técnico e velocidade de carregamento de página são importantes

Em geral, antes de começarmos a pensar em rankings de motores de busca e medidas de SEO para melhorar esses rankings, temos de nos certificar de que eles abordam todos os aspectos do que chamamos de "SEO técnico".

O SEO técnico tem a ver com a funcionalidade de um website. A primeira condição prévia para um bom posicionamento nos resultados da pesquisa é que o site funcione corretamente. É claro que ninguém vai classificar alto um site que não carrega, ou que mostra erros e links quebrados.

E o primeiro elemento técnico que queremos ver é a "velocidade de carregamento da página". Os sites de carregamento lento levam a 2 problemas igualmente importantes:

  • Usuários insatisfeitos. Especialmente se olharmos para os usuários móveis, segundo um estudo do Google, 53% deles abandonam um site se a página demorar mais de 3 segundos para carregar.
  • Problemas de SEO. Os motores de busca não vão classificar alto um site que as pessoas abandonam porque o site não carrega rápido o suficiente.

2. Passo 1: Verifique a velocidade do site

Felizmente, existem várias ferramentas que podem ajudá-lo a testar a velocidade de carregamento da página. Além disso, eles podem adicionar uma análise dos problemas que impedem que a página web carregue mais rapidamente.

Algumas destas questões podem parecer demasiado técnicas para o dono médio de um website. Outros são mais fáceis de verificar e corrigir. Trataremos destes dois mais tarde.

Qual é a melhor ferramenta para testar a velocidade do site? Uma que me ocorre é uma concebida pelo próprio Google.

2.1 PageSpeed Insights de Google explicado

O Google PageSpeed Insights é uma ferramenta que tem sido lançada principalmente com desenvolvedores experientes em mente. Portanto, além da pontuação de velocidade que calcula, a análise das causas pode ser mais difícil de entender.

Vamos quebrar um pouco e dar sentido às partes principais.

Primeiro, a ferramenta verifica o desempenho da web em 2 abas diferentes, uma para o celular e outra para a área de trabalho. Os resultados de um deles podem ser muito diferentes dos resultados do outro. Mas a escala de classificação é a mesma.

Com base em 6 critérios diferentes de velocidade do sitio, gera uma pontuação de 0 a 100. As pontuações entre 0 e 49 estão na zona "vermelha". 50-89 é um resultado médio. 90-100 é "verde", dando ao site uma classificação perfeita em termos de velocidade de carregamento da página.

Note que páginas diferentes no mesmo site podem ter pontuações muito diferentes. Além disso, mesmo a mesma página pode ter muitas variações ao longo de um dia, devido a vários factores que não podem ser completamente controlados.

Agora, além da pontuação, há informações mais detalhadas abaixo.

Dados de campo (Field Data): Esta seção contém algumas métricas importantes que decompõem exatamente quanto tempo leva para os primeiros itens, bem como os itens maiores para carregar. Ele também mede o tempo de resposta do navegador e a capacidade de interagir. Faz isto com base nos tempos médios de carregamento dos 28 dias anteriores.

Abaixo disso, a seção de dados do laboratório (Lab Data) tem algumas métricas semelhantes, mas elas são baseadas em visitas de teste feitas no local, após o envio da URL para teste. Se a velocidade do seu site tem melhorado ultimamente, então você pode esperar que os resultados nos Dados do Laboratório sejam melhores do que aqueles nos Dados de Campo. Para todas as métricas desta seção, você deve se esforçar para ficar em áreas verdes ou pelo menos perto delas.

Provavelmente as métricas mais importantes (e mais fáceis de entender) são FCP e Time to Interactive

A Primeira Pintura de Conteúdo (FCP) é o tempo que decorre até a sua página ter carregado qualquer conteúdo (texto, imagem ou qualquer outro elemento que o utilizador possa "consumir"). Se isto for abaixo dos 3s, deve ser bom. As melhores páginas têm um FCP de menos de 1s.

O tempo até interactividade (Time to Interactive) é o tempo que passa desde o momento em que a página começa a carregar até ao momento em que os utilizadores podem interagir com ela. Esperemos que isto também esteja abaixo dos 3s.

Se estas métricas não parecem muito boas, então você deve rolar para baixo para ver porquê. Há uma secção de Diagnóstico e uma secção de AuditoriaAprovada abaixo dela. O primeiro destaca medidas que podem melhorar o seu desempenho. Procura os que têm um triângulo vermelho perto deles.

Alguns deles são mais técnicos:

  • Eliminar recursos que bloqueiam a renderização - isto significa basicamente que existem processos que estão a carregar antes do seu FCP. Isto pode incluir aplicações ou plugins que utilizam Javascript. O navegador tenta carregar esses processos antes de renderizar o conteúdo real. Isto pode atrasar seriamente o site. Leia abaixo para saber o que fazer em relação a isto.
  • Minimize o CSS ou Minimize o Javascript - o aspecto e a forma de agir do seu site é ditado por estes arquivos. Detalhes tais como tamanho da fonte, cores, posicionamento, etc. são definidos nos arquivos CSS. Os arquivos CSS e JS se parecem com arquivos de texto com alguns caracteres por linha. Isto deixa muito espaço em branco nestes ficheiros. Os espaços em branco levam a arquivos maiores, que levam mais tempo para serem carregados. Acredite ou não, você poderia obter um pequeno aumento de velocidade, apenas removendo estes espaços em branco. E isso é o que significa "minimizar". Na próxima secção, nós dizemos-lhe como fazê-lo.
  • Minimize o uso deterceiros - às vezes seu modelo ou os aplicativos ou plugins que você instalou podem carregar recursos externos. Pode haver provedores de serviços para os quais você tenha colocado um script no <head> do seu site (ferramentas de análise não são exceção). Tente limitar o número de fornecedores terceirizados aos que você absolutamente precisa. Caso contrário, pode afectar a velocidade do site.

Outras questões que afetam a velocidade da página são menos técnicas, e qualquer proprietário de website, independentemente da capacidade, pode facilmente melhorá-las. Nós cobrimo-los abaixo.

3. Como acelerar o tempo de carregamento da página

3.1 Coisas não técnicas que você pode fazer para melhorar a velocidade do site (tamanhos de arquivos, imagens, fontes, etc.)

Estas são as coisas que você pode marcar, não importa o tipo de site que você tem e não importa quais são as suas habilidades técnicas.

3.1.1 Reduzir o tamanho da imagem: quanto maior for a página web, mais tempo é necessário para carregar. E uma grande parte disso tem a ver com imagens. Mantenha o tamanho das imagens tão baixo quanto possível. Imagens mais pequenas carregam mais rápido. Embora em alguns casos você precise de imagens maiores, não desperdice preciosos KBs e segundos usando imagens desnecessariamente grandes. Neste exemplo, esta imagem é mostrada com uma largura máxima de 400-500 px no meu website, mesmo em ecrãs maiores. Este é simplesmente o espaço que temos para ele no nosso design.

Portanto, você não precisa de uma imagem que tenha uma largura nativa de 1200 px, que é maior, mais lenta de carregar e precisa ser redimensionada pelo navegador cada vez que a página é carregada. Um com metade da largura do tamanho pareceria exatamente o mesmo nesta situação. Portanto, para a maioria das imagens, você pode manter o tamanho baixo e ganhará velocidade extra. Mas tenha cuidado com as imagensmaiores no seu design. Não os redimensione se eles vão ser exibidos em tamanho maior. Isto vai diminuir a qualidade.

3.1.2 Utilize novos formatos de imagem que sejam mais eficientes:.webp é um exemplo de um formato de arquivo de imagem que foi desenvolvido especificamente para obter a mesma qualidade de imagem com um tamanho de arquivo menor em websites. Tente converter as suas imagens para este formato e ganhe velocidade extra de carregamento.

3.1.3 Limite o número de fontes utilizadas em uma página: cada fonte carrega um recurso externo que torna o site mais lento. O uso de menos fontes também tornará as coisas mais consistentes visualmente. No entanto, em comparação, isto irá poupar menos tempo de carregamento do que outras medidas.

3.1.4 Utilize vídeos e efeitos especiais ou animações apenas abaixo da dobra (below the fold): Acima da dobra (above the fold) está a primeira secção da página que os seus visitantes vêem. É também o primeiro a carregar, por isso mantenha-o limpo. Se você tiver um vídeo grande bem no topo da página, isso irá diminuir o tempo de carregamento e diminuir a satisfação do usuário. No entanto, se estiver mais abaixo, então há tempo para carregar até que os usuários comecem a rolar e a pontuação geral de velocidade não será afetada.

3.1.5 Conteúdo do Cache: O Cache é um processo que utiliza camadas de armazenamento de dados de alta velocidade para acessar o conteúdo de uma página mais rapidamente. O conteúdo do seu site pode ser salvo como conteúdo estático em um cache. Isto também significa, dependendo de como o cache é configurado, que os usuários podem visualizar a versão em cache da sua página, em vez da versão ao vivo. Se você atualizar e editar uma página com freqüência, o uso excessivo da cache é arriscado, pois os visitantes podem ver uma versão desatualizada da página, carregada a partir da cache. Mas especialmente para páginas que não mudam com frequência, o caching é um grande impulsionador de velocidade. O conteúdo da cache não permanecerá o mesmo para sempre. Pode, no entanto, ser reiniciado ou atualizado em determinados momentos.

Caching não é difícil de realizar, dependendo do tipo de plataforma em que o seu site está construído.

Como fazer o cache de um site Wix

Para permitir o cache:

  1. Vai ao teu editor.
  2. Clique em Menuse Páginas.
  3. Passe o mouse sobre a página que você deseja armazenar e clique no ícone Mostrarmais.
  4. Clique em Configurações.
  5. Clique em Configurações avançadas.
  6. Vá para "Controle manualmente a cache desta página" e mude a alavanca para ativá-la.
  7. Você deve ver agora: Habilitado: A páginaserá colocada em cache.
  8. Pode então seleccionar a frequência com que pretende repor a cache da página: a cada hora, a cada 24 horas, etc.

Como fazer o cache de um site WordPress:

Vá para a seção Plugins do seu painel e procure um plugin de cache como o WP Fastest Cache. Instale-o e depois vá para Configurações. Na janela, certifique-se de que a cache está ativada.

Você também terá mais opções para acelerar seu site com o mesmo plugin, como a mineração de arquivos e a capacidade de fundir CSS, assim como fundir arquivos JS. Discutimos isto na próxima secção.

Se você tem outro tipo de site, geralmente há aplicações e plugins desenvolvidos para ajudá-lo com isso. Para usuários avançados e desenvolvedores, há ferramentas de cache de código aberto disponíveis online.

3.1.6 Em geral, mantenha o seu site limpo: Não salve arquivos, itens ou aplicativos desnecessários se você não estiver usando-os ativamente. Mantenha as coisas simples e não complique demais a estrutura do seu site, para que ele carregue mais rápido.

3.2 Coisas técnicas que você pode fazer para melhorar a velocidade do site (minification, arquivos Javascript, etc.)

Como visto na seção sobre velocidade da página no Google, há vários problemas de natureza técnica que aparecerão quando você avaliar a velocidade da sua página. Vamos tentar explicar como fazer sentido e resolver algumas destas questões. No entanto, se você sentir que eles estão acima do seu nível de habilidade, você pode preferir trabalhar com um especialista nestas questões.

Além disso, se você não hospedar seu site e mantê-lo em sua plataforma de construção de sites (por exemplo, Weebly, Wix, Squarespace), então você não precisa se preocupar com nenhum dos problemas descritos nesta seção. Estas plataformas de construção de sites também hospedam os sites dos seus clientes e geralmente fazem um bom trabalho para garantir que eles carreguem o mais rápido possível.

3.2.1 Atrasar ou sincronizar arquivos Javascript para remover recursos de bloqueio de renderização. Na secção 2.1. falámos sobre o bloqueio de recursos. O navegador carrega os elementos e scripts na ordem em que são apresentados nos arquivos do site. Primeiro, tente carregar os arquivos na seção <head>. É aqui que você normalmente encontrará muitos scripts de terceiros pertencentes aos aplicativos que o site está usando (por exemplo, analytics, serviços de anúncios e muitos outros).

O conteúdo real da secção <body> tem de esperar que estes scripts sejam executados. Isto significa que o visitante não verá nenhum conteúdo até que as aplicações no <head> do site sejam iniciadas. Já sugerimos o uso apenas das aplicações que são absolutamente necessárias e a remoção das outras. O que você pode fazer alternativamente é "adiar" o carregamento desses scripts ou "separá-los" do conteúdo.

Se você tem algum conhecimento básico de HTML, você pode fazer isso diretamente no código do seu site. Se você adicionar defer aos scripts que estão atrasando o site (<script src="scriptname.js" defer></script>), o navegador irá baixá-los em segundo plano, sem bloquear o conteúdo. Se você adicionar async (<script src="scriptname.js" async></script>), o efeito é semelhante, exceto que o script se torna completamente independente do resto da página, carrega separadamente e é executado a cada vez.

Alternativamente, o adiamento e a assíncronia podem ser feitos usando plugins/apps/extensões. No WordPress, há plugins como o Async JavaScript ou outros que farão isso facilmente para você, sem a necessidade de conhecer o código.

Note que trabalhar com estes afectará a funcionalidade do site. Você pode ter que desfazer algumas das mudanças se algumas partes da sua página não funcionarem como previsto.

3.2.2 Minimizar o CSS e Javascript. Já explicamos o que é a minimização (remover espaços em branco das linhas dos seus arquivos). Provavelmente não o queres fazer manualmente. Se você tem um site HTML e não usa um CMS, uma maneira de fazer isso seria usar uma ferramenta como o Minificador CSS, que exigirá que você insira o texto original nos arquivos CSS/JS e obtenha o resultado da mineração. Faça o download do arquivo minado e substitua o arquivo antigo por ele.

Note que se você precisar fazer alterações nos arquivos no futuro, será muito mais difícil trabalhar com o conteúdo dos arquivos, pois haverá muito texto sem parágrafos e sem espaços entre as palavras.

WP Fastest Cache, Fast Velocity Minify são alguns dos muitos plugins que oferecem minificação para sites Wordpress.

3.2.3 Combinandoarquivos CSS e JS

Seu site pode estar usando vários arquivos CSS que moldam o estilo da sua página, assim como vários arquivos JS que ditam várias ações e processos na sua página. Quanto mais complexo o website (quanto mais plugins/extensões/aplicações você tiver instalado), mais arquivos CSS e JS estarão rodando em segundo plano. E quanto mais estes ficheiros forem, mais tempo demoram a carregar.

Ao fundir automaticamente todos estes ficheiros num só, em vez de tantos ficheiros CSS ou JS, haverá apenas um ficheiro grande para o CSS e um para o JS. Isto vai ajudar o site a carregar muito mais rápido.

Nota: faça um backup do site antes de optar por fundir os arquivos, pois você pode quebrar algumas das funcionalidades e pode ter que desfazê-lo.

Novamente, aplicações ou plugins que oferecem outras funcionalidades de velocidade de página (minification, cache, etc.) também devem oferecer a opção de combinar CSS e JS. Se você não usa um CMS e não lida diretamente com o código do site, há opções online para ajudá-lo a combinar seus arquivos.

3.2.4 Usando CDN

Uma CDN (content delivery network) é uma rede de servidores geograficamente distribuídos que pode armazenar conteúdo e fornecê-lo mais rapidamente aos visitantes de um site, dependendo da localização desses visitantes. Isto pode ser especialmente importante para websites que têm um público global. Os provedores de hospedagem modernos oferecem CDNs por padrão, e podem carregar conteúdo de um nó que está mais próximo da localização do usuário. Isto pode fazer uma grande diferença em termos de velocidade de carregamento de páginas.

Portanto, verifique se o seu provedor de hospedagem usa CDN, e se não, considere a possibilidade de mudar para outro.

4. Outros factores de velocidade de carregamento de páginas

Há alguns aspectos da velocidade de carregamento de páginas que não estão sob seu controle. Na sua PageSpeed Insights, você pode ver uma linha sobre a redução do tempo de resposta do servidor. Isto depende inteiramente da configuração do servidor onde o site está hospedado. Há pouco que o dono de um site possa fazer sobre isso.

Outro fator é se o servidor web está usando compressão Gzip dos arquivos, o que pode reduzir o tempo de espera para que a página web seja carregada.

E a lista está aberta a mais aspectos, mas os que fazem mais diferença foram cobertos.

Você já revisou a lista inteira? Você pode aplicar alguns ou todos estes na sua própria página web? Quando o fizer, volte para a página PageSpeed Insights ou outras páginas de controle de velocidade como GT Metrix e veja se você ganhou alguns segundos preciosos. Se o fizer correctamente, deverá notar uma melhoria significativa.