Por que a velocidade de carregamento das páginas é tão importante?
A velocidade de carregamento das páginas é importante para a experiência do usuário e para o posicionamento no Google, a novidade é que este critério passa a ser determinante para o resultado de buscas em smartphones e tablets.
Portanto, para manter um bom posicionamento nos mecanismos de pesquisa é fundamental que o carregamento do site seja rápido.
Se você quer reter os visitantes no seu site e melhorar os resultados com SEO, veja agora como avaliar e acelerar o desempenho das suas páginas.
Existem vários fatores que interferem na velocidade de um site.
Antes de resolver isso, você precisa conhecer mais sobre estes fatores.
Alguns dos motivos mais comuns que deixam um site lento são:
- imagens muito pesadas;
- uso incorreto de scripts;
- uso excessivo de JavaScript, CSS e HTML;
- problemas na otimização de códigos.
Para identificar quais desses problemas precisam ser resolvidos você pode recorrer às ferramentas gratuitas, que testam a velocidade de sites.
Listamos 3 ferramentas para medir a velocidade de carregamento do site.
1. PageSpeed Insights
Essa é a ferramenta mais conhecida de teste de velocidade de páginas. O PageSpeed Insights é um recurso gratuito, voltado para desenvolvedores, oferecido pelo Google.
Para usá-lo, é bem simples: basta inserir a URL que você deseja testar (pode ser qualquer site, inclusive da concorrência).
Então, a plataforma faz uma análise e apresenta uma pontuação de 0 a 100 para o desempenho no desktop e no mobile. O diagnóstico mostra também o tempo que levou para os elementos do site carregarem e quais ações você pode tomar para melhorar a velocidade. Quanto mais próximo de 100, melhor: menos itens você tem para corrigir.
2. GTmetrix
A análise do GT Metrix utiliza 27 critérios distintos para gerar sua nota de classificação. Em cada critério é possível visualizar o que precisa ser otimizado (se houver).
Assim como na ferramenta Pingdom, também é possível visualizar as requisições individualmente. Além da velocidade de carregamento, o relatório apresenta uma visão completa de como o site é carregado.
Isso ajuda você a identificar quais são os gargalos. Em destaque, você verá o índice de classificação Page Speed, do GT Metrix, e também o índice YSlow, que é uma ferramenta de código aberto para análise de velocidade baseada em regras de performance definidas pelo Yahoo. As notas de classificação são exibidas em percentual (de 0 a 100%).
3. Pingdom Website Speed Test
Nessa ferramenta, além da nota de classificação, você também poderá visualizar em destaque o número de requisições feitas pela página, o tempo total de carregamento e o tamanho total dos arquivos presentes na página.
Logo abaixo deste resumo, a ferramenta exibe um gráfico contendo todas as requisições feitas e o tempo de carregamento individual. Basta passar o mouse sobre as barras de tempo para abrir um box com o tempo de duração de cada item no processo, da requisição à resposta, conforme ilustrado na imagem abaixo.
Otimização de sites: o que você precisa para começar?
Agora você já conhece várias ferramentas gratuitas para medir a velocidade de carregamento e desempenho do seu site. O próximo passo é seguir as recomendações de otimização sugeridas pela ferramenta escolhida.
Se você não está vendo bons resultados, vamos apresentar agora algumas técnicas para acelerar a velocidade das suas páginas. Eles foram baseados nas principais recomendações das ferramentas que citamos acima.
1. Reduza o tamanho das imagens
As imagens impactam bastante no peso e no carregamento de um site. De acordo com o HTTP Archive, em maio de 2019, elas eram responsáveis por mais da metade dos bytes de um site. Otimizá-las, então, pode ser um dos primeiros passos para melhorar a sua velocidade.
Vamos começar pela redução do tamanho. Para isso, você pode usar um plugin de otimização de imagens para WordPress, como o Optimus e o Tinypng.
Esses aplicativos reduzem os kilobytes das imagens (sem perder a qualidade) e eliminam todas as informações supérfluas que programas de edição podem salvar com o arquivo.
Eles permitem executar essas ações automaticamente, durante o upload, nas imagens que forem incluídas, mas também naquelas já existentes no site.
2. Utilize formatos de última geração para as imagens
Outra ação importante para otimizar as imagens é usar os formatos mais atualizados de arquivos, como JPEG 2000, JPEG XR e WebP. Eles costumam ter uma compactação melhor, mantendo a qualidade, em comparação com JPEG e PNG. Isso reduz o consumo de dados de rede de celular e a acelera o carregamento.
Nos aplicativos Optimus e Imagify é possível fazer a conversão automática para WebP. Esse formato é suportado nos navegadores Chrome e Opera e, em média, têm um tamanho 25-34% menor que JPG.
3. Faça upload das imagens no tamanho que serão usadas
Se você vai usar uma imagem no tamanho 313×235, por exemplo, por que incluí-la no site no tamanho 640×480?
Deixar que o site faça esse redimensionamento via HTTP ou CSS também pode atrasar o carregamento, sabia? Além disso, a imagem vai ocupar mais espaço sem necessidade, já que ela será usada em tamanho menor.
Portanto, salve a imagem nas dimensões em que ela será usada no site. Assim, o servidor não perde tempo com o redimensionamento, nem espaço com uma imagem que poderia ser mais leve.
4. Adie o carregamento de imagens fora da tela
Até as imagens que não aparecem na tela prejudicam o tempo de carregamento das páginas, sabia?
Mas, se o visitante não está visualizando, você pode adiar o carregamento delas, não é?
É isso que acontece quando as imagens vão aparecendo à medida que você rola uma página. Isso significa que o desenvolvedor usou o recurso de lazy load (carregamento lento) para as imagens ocultas da tela. Assim, elas só são carregadas quando o usuário chega até elas com a rolagem.
As duas opções são bem simples de usar.
5. Minifique HTML, CSS e Javascript
Quando um desenvolvedor cria os códigos de um site, é comum incluir quebras de linha, espaços em branco e comentários. Essas informações não influenciam no conteúdo que o usuário vê, mas elas estão lá ocupando espaço e podem aumentar o tempo de carregamento.
Por isso, as ferramentas costumam recomendar a eliminação desses caracteres supérfluos. É isso que se faz ao “minificar” os códigos HTML, CSS e Javascript, para que eles fiquem mais leves.
Mas não é preciso fazer todo esse trabalho código por código, ok? Existem aplicativos gratuitos para isso, como o W3 Total Cache e o Autoptimize.
6. Elimine recursos que impedem a renderização
Render-blocking (bloqueio de renderização) é um assunto recorrente quando se fala em acelerar o carregamento das páginas. Porém, é um tema um pouco mais complexo, por isso vamos explicar melhor agora.
Geralmente, códigos de Javascript e CSS forçam os navegadores a atrasarem a leitura das páginas em HTML, para que elas apareçam para os usuários com os estilos definidos. Afinal, você não quer que as suas páginas percam todo o apelo visual que você escolheu, não é?
Porém, isso pode ser um problema quando atrapalha o carregamento das páginas com conteúdos que sequer estão sendo vistos pelos usuários. Isso significa que o Javascript e o CSS estão atrasando desnecessariamente o site ao bloquear a exibição de conteúdos que estão “abaixo da dobra”, ou seja, que o usuário ainda não viu.
Para resolver isso, você pode determinar que os recursos de Javascript e CSS carreguem de forma assíncrona. Assim, é possível apresentar rapidamente o conteúdo principal e adiar o carregamento de elementos desnecessários para a experiência do usuário.
7. Crie AMPs
Accelerated Mobile Pages (AMPs) é um projeto de código aberto encabeçado pelo Google para atingir aquele objetivo de tornar a web mais veloz.
As páginas criadas com essa tecnologia carregam instantaneamente em dispositivos móveis. Embora tenham o mesmo conteúdo das páginas originais, elas eliminam elementos desnecessários e têm um desenvolvimento mais leve e simples, o que acelera a velocidade de carregamento.
Para criar AMPs do seu site, você pode usar o plugin AMP for WP, que permite construir as páginas a partir de diversos templates mobile, sem necessidade de mexer em códigos.
8. Evite redirecionamentos múltiplos
Muitas vezes, o redirecionamento é necessário para que o usuário não caia em uma página inexistente do site. Aliás, essa é uma das recomendações de SEO para não frustrar o visitante e mostrar ao buscador qual é a página principal que deve ser indexada.
Porém, redirecionamentos em excesso sobrecarregam o servidor. Eles desencadeiam um ciclo adicional de requisições e atrasam o carregamento.
Digamos que, para chegar à versão mobile do seu site, existam dois redirecionamentos:
- de “site.com” para “www.site.com”;
- e de “www.site.com” para “m.site.com”.
Esse é um exemplo que pode deixar o carregamento mais lento. Mas, se você usar uma página com design responsivo, não é necessário fazer redirecionamentos, pois a própria página se adapta à tela do usuário.
Portanto, a recomendação é utilizar páginas responsivas. Além disso, um plugin como o SEO Redirection pode identificar redirecionamentos desnecessários para você eliminar.
9. Aproveite o cache do navegador
O cache do navegador serve para guardar os conteúdos do site no dispositivo do usuário, de maneira que eles carreguem mais rapidamente numa próxima visita.
Porém, se o conteúdo não for salvo em cache ou se o tempo de armazenamento tiver expirado, as páginas vão demorar mais para carregar. A solicitação para que os navegadores mantenham esses arquivos salvos deve ser feita pelo servidor. Geralmente, essa solicitação acontece automaticamente. Mas, se não acontecer, você deve incluir um arquivo para forçar a utilização do cache.
Enfim, agora você já tem várias soluções práticas para tornar o seu site mais veloz.
Além de melhorar a experiência dos usuários e conquistar a confiança deles, você também vai mostrar ao Google que merece um posicionamento melhor nos resultados da busca.