A velocidade do seu site tem um impacto direto na sua presença nos motores de busca, e é um dos elementos importantes de SEO.
Os motores de busca “olham” com atenção para a velocidade de carregamento do seu site…
E recompensam mais os sites que carregam rapidamente, mesmo que todas as outras componentes de SEO estejam iguais.
Ou seja, mesmo que o seu site tenha a mesma autoridade de domínio, autoridade de página, e todos os outros fatores de ranking sejam iguais a um site concorrente…
Se o seu site carregar em 5 segundos, e o site concorrente carregar em 1 segundo, o concorrente provavelmente obterá um melhor ranking nos resultados de pesquisa.
Por outro lado, existe o lado humano da questão.
O tempo médio de atenção das pessoas é cada vez mais curto, pelo que se o seu site demorar 5 segundos a carregar, o resultado pode muito bem ser perder um potencial cliente.
Neste artigo vou partilhar consigo uma plataforma que pode usar gratuitamente para analisar a velocidade do seu site, e facilmente identificar as áreas que estarão a ter impacto negativo na velocidade de carregamento.
Existem pequenos ajustes que podem ser facilmente executados, para que o seu site possa carregar rapidamente no browser dos seus visitantes.
Comecemos pela ferramenta essencial para a sua análise:
Ferramenta de Análise de Velocidade de Sites: GTmetrix.com
O GTmetrix é uma ferramenta gratuita (freemium) que lhe permite analisar a velocidade de qualquer página do seu site.
Mas mais importante do que apenas analisar, fornece-lhe também recomendações práticas sobre como optimizar cada detalhe.
Assim que insere o URL da página que deseja analisar, o GTmetrix vai correr a sua página por diferentes análises, sendo as mais importantes a “PageSpeed” e algo chamado “Waterfall”.
A primeira coisa que verá será uma “nota” geral da velocidade da sua página.
Vejamos um exemplo dos resultados de uma página que precisa de optimização:
Neste caso a página teve uma nota de “F” em PageSpeed.
As notas variam entre “A” (a melhor) e a “F” (a pior).
O PageSpeed é uma análise feita à performance “front-end” do seu site (ou seja, aquilo que é carregado no browser dos visitantes)...
Elementos como o código HTML, CSS, JavaScript, e multimédia (imagens, videos, etc).
Muitos destes elementos são facilmente controláveis e ajustáveis, e têm um impacto relevante na velocidade do seu site.
No entanto, a performance “back-end” (servidor e base de dados) não é analisada no GTmetrix, uma vez que é difícil de analisar e estandardizar (existem demasiadas variáveis).
Na imagem acima, repare que a página analisada tem um tempo de carregamento (Fully Loaded Time) de 5.0 segundos, o que é considerável (o ideal será chegar a 1 segundo).
Para além disso, a página tem 14.0MB de tamanho (Total Page Size), o que é tremendamente pesado (o ideal será chegar a 1MB!).
E finalmente, reparamos que faz 78 requests (número de “pedidos” feitos ao servidor por cada elemento da página), sendo que o objetivo aqui é fazer com que haja o menor número de pedidos possível.
Ou seja, este site não foi optimizado para a velocidade e precisa de alguns ajustes.
A primeira coisa a fazer é anotar todas estas métricas, para estabelecer uma linha de análise para comparação futura.
Vejamos agora o que poderá estar a causar estes problemas, olhando para as recomendações mais comuns de PageSpeed:
Serve Scaled Images (reduzir a dimensão das imagens)
A primeira recomendação que encontramos é “Serve scaled images” (com nota “F”), ou seja, reduzir a dimensão das imagens.
O que está a acontecer nesta página é que as imagens estão a ser inseridas na sua dimensão original, e muito provavelmente em dimensões demasiado grandes (como 4032x3024).
Apesar de a dimensão das imagens ser automaticamente ajustada em HTML ou CSS no site, a dimensão original da imagem é carregada sempre que a página abre num browser…
Consequentemente aumentando o tempo de carregamento da página.
Clicando na seta do lado esquerdo da recomendação, conseguirá ver exatamente quais as imagens que estão a afetar a velocidade, e qual a dimensão recomendada.
Enable gzip compression (activar compressão gzip)
A segunda recomendação também com nota “F” é “Enable gzip compression”.
Esta é bastante comum em todos os sites criados em WordPress e é também facilmente resolvida.
Activar a compressão gzip irá reduzir o tamanho dos ficheiros enviados pelo seu servidor, para que possam ser transferidos para o browser mais rapidamente.
E esta é uma alteração muito fácil de fazer no WordPress!
Alguns servidores já vêm com o gzip activado (ou incluem um plugin WordPress, como o A2 Optimized WP que o permite fazer), mas se não for o seu caso existem vários plugins que o permitirão activar facilmente, como o WP Rocket, ou o W3 Total Cache.
Defer parsing of JavaScript (adiar análise do JavaScript)
A terceira recomendação com nota “F” é “Defer parsing of JavaScript”.
Esta é também bastante comum e fácil de corrigir.
Para que uma página carregue, o browser tem que analisar os conteúdos incluídos nos tags de <script>, o que aumenta o tempo de carregamento da página.
Ao minimizar a quantidade de JavaScript necessária para renderizar a página, e ao adiar (“defer”) a análise ("parsing") do JavaScript até que seja necessário ser executado, é possível reduzir o tempo de carregamento inicial.
Para fazer esta alteração, pode usar os mesmos plugins de WordPress referidos acima, configurando a opção de “Minify JS Files”.
Optimize images (optimizar imagens)
Outra recomendação importante e também bastante comum (mas que no exemplo desta página teve boa nota) é a de “Optimize images”.
Se carregar imagens no seu formato e resolução originais, cada imagem irá ter um tamanho considerável e diminuir a velocidade de carregamento do seu site.
Para diminuir o tempo de carregamento de cada imagem, precisa de optimizar para a web antes de adicionar no seu site.
O ideal será comprimir cada imagem para menos de 100KB de tamanho.
Pode fazer isto usando por exemplo o Photoshop (escolhendo a opção “Export” > “Save for Web”), ou os sites Optimizilla ou Tinypng (ideais para comprimir imagens sem perder qualidade visual).
Corrigindo apenas estas 4 recomendações já daria um salto na velocidade de carregamento do site e, como vê, são correções fáceis de efetuar.
Como Ver os Detalhes de Cada Elemento da Página: "Waterfall Chart" do GTmetrix
A opção de “Waterfall” é onde poderá entrar nos detalhes específicos da página, e descobrir que elementos estão a desacelerar a velocidade de carregamento.
Pode parecer demasiado técnico, mas não se assuste!
É bastante simples e útil.
Tudo o que precisa de fazer é olhar para as barras mais longas.
Estas são basicamente uma representação visual do tempo que cada elemento/tarefa leva a carregar…
E cada linha na tabela representa um elemento/tarefa, estando ordenadas exatamente pela ordem de carregamento da página (a primeira linha é o primeiro elemento a ser carregado no browser).
Portanto, o objetivo aqui é encontrar as barras realmente longas e que superam 1 segundo, e investigar o que é esse elemento e como o corrigir (usando o nosso amigo Google!).
No caso acima podemos ver agora os resultados do meu site.
Vejo por exemplo que tenho um elemento chamado “wp-emoji-release.min.js”
Descubro que se trata de um ficheiro que o WordPress carrega automaticamente, para ajudar a carregar “emojis” (uma característica de blogging do WordPress)...
E que é um script que desacelera o carregamento da minha página.
Como sei que não preciso desse elemento, este é um ganho fácil!
Basta instalar um plugin que é bastante leve, chamado Disable Emojis (ou se preferir, alterar o código no ficheiro functions.PHP do seu tema).
Vejo também que um plugin que tenho instalado “Pinterest Pin-it Button” também demora mais do que 1 segundo a carregar…
Mas neste caso prefiro manter, uma vez que é um plugin importante para a minha estratégia.
Como vê, trata-se de um exercício que tem que fazer individualmente, e os resultados dependerão muito dos plugins que tenha instalado, da sua instalação WordPress, e também da sua estratégia.
Mas esta análise é extremamente útil para perceber exatamente que elemento impacta mais na velocidade da sua página…
E tomar ação!
Usando o seu melhor amigo Google para identificar o elemento, e descobrir a solução.
No entanto, uma recomendação:
Não perca demasiado tempo e energia a analisar a velocidade do seu site.
Mesmo quando corrige um elemento, aparecerá sempre outro que se torna no elemento que leva mais tempo a carregar.
Se entrar nesse caminho, perderá horas e horas desnecessárias, que poderia estar a dedicar ao que realmente interessa:
Criação de conteúdo relevante para a sua audiência!
Veja o vídeo abaixo do Matt Cutts, onde fala sobre a importância da relevância VS velocidade.
O vídeo já tem 8 anos, mas os princípios mantêm-se inalterados:
A velocidade do seu site é importante, mas tendo o essencial alinhado, pouco interessa aumentar 1 milésimo de segundo aqui e outro ali.
Dedique-se a criar valor para a sua audiência consistentemente, e com tempo corrija estes pormenores (eu diria que 3 ou 4 vezes por ano será o suficiente).
Um abraço,
-Tiago “velocidade furiosa” Faria