Nossa rotina já inclui corrida contra o tempo. Olhar para o relógio me faz ter medo de não poder concluir todas as tarefas do dia. Neste cenário, é evidente que ninguém gosta de sites lentos, não é?

Os clientes desejam experiências online que não os façam perder tempo ou perder a paciência devido às pressões de seu dia a dia. Portanto, o objetivo principal de todas as estratégias de marketing digital deve ser acelerar o carregamento das páginas.

Mas os sites devem priorizar a velocidade? O tempo médio de carregamento das páginas em dispositivos móveis – que se torna cada vez mais importante na jornada de compra – é de quinze segundos, de acordo com um levantamento realizado pelo Google. A conclusão é de que 53% dos usuários de dispositivos móveis deixam o site quando o tempo de carregamento demora mais de 3 segundos.

Você também pensou em quanto dinheiro é desperdiçado por um carregamento demorado? Esse valor já foi calculado: um carregamento demorado faz o varejo eletrônico perder cerca de 1.73 bilhão de libras em vendas globais anualmente.. Com esses números, é óbvio que você deve considerar a velocidade de carregamento de seu site.

Acompanhe este artigo agora se você precisar de ajuda nisso. Vamos fornecer algumas ferramentas úteis para avaliar a velocidade das suas páginas e conselhos sobre como acelerar seu site. Veja isso!

5 ferramentas para medir a velocidade do site

O objetivo do Google é tornar a internet mais veloz. O gigante das buscas possui uma compreensão profunda do comportamento dos usuários e da experiência que eles esperam de uma plataforma.

Em 2010, o buscador já adicionou a velocidade de carregamento aos critérios de rankeamento. Em 2018, eles adicionaram esse critério às buscas mobile.

Para ajudar os sites a acelerarem, o Google criou várias ferramentas que facilitam o diagnóstico de páginas e indicam correções possíveis. A seguir, mostraremos quais são, bem como outros recursos gratuitos para isso.

1. PageSpeed Insights

Essa é a ferramenta de teste de velocidade de páginas mais conhecida. O PageSpeed Insights é um recurso gratuito fornecido pelo Google para desenvolvedores.

É muito fácil usá-lo. Basta inserir a URL que você deseja testar – pode ser qualquer site, mesmo o da concorrência. Assim, a plataforma avalia o desempenho desktop e mobile e atribui uma pontuação de 0 a 100.

O diagnóstico também mostra quanto tempo leva para carregar os elementos do site e o que você pode fazer para acelerar. Quando você está mais próximo de 100, você tem menos coisas para corrigir.

2. Lighthouse

O Google fornece o Lighthouse, um software de código aberto, que os desenvolvedores usam para realizar avaliações de sites da web.. É possível usá-lo como uma ferramenta de linha de comando ou como uma extensão do Google Chrome, que oferece uma interface mais fácil de usar.

Fonte: Google
Ele verifica todas as características de qualidade do site, incluindo a velocidade.

Para isso, você deve inserir a URL que deseja verificar para que a plataforma forneça avaliações e conselhos sobre melhorias para cada um desses problemas: desempenho, acessibilidade, melhores práticas, SEO e aplicativos web progressivos.

3. Chrome User Experience Report

Uma ferramenta do Google destinada aos desenvolvedores chamada Chrome User Experience Report, que permite a avaliação da experiência do usuário no site.

Essa exige um pouco mais de conhecimento técnico para mexer nos códigos do que outras ferramentas.

A ferramenta mostra os dados médios dos sites da web, incluindo a velocidade do site, coletados dos usuários do Google Chrome. Assim, os desenvolvedores podem avaliar quais aspectos precisam melhorar comparando seu desempenho à média.

4. GTmetrix

Uma ferramenta bem conhecida para medir a velocidade dos sites é o GTmetrix. A plataforma mostra pontuações percentuais para velocidade, tempo de carregamento e tamanho total da página depois que você analisar a página. Também mostra as médias de mercado para comparação.

Em seguida, você encontrará as sugestões para ajustes que podem acelerar a velocidade de carregamento.

5. Pingdom

O Pingdom é uma das ferramentas de teste mais utilizadas para sites, principalmente na comunidade WordPress. A desvantagem é que você precisa pagar por ela, apesar de oferecer um período de 14 dias gratuito.

A plataforma, no entanto, é bastante abrangente. A disponibilidade, a velocidade de carregamento das páginas e o desempenho das principais transações do site são avaliados por análises realizadas em todo o mundo.

Além disso, a ferramenta mostra oportunidades de melhorias e notifica problemas.

11 hacks para melhorar a velocidade do seu site

Você já deve ter utilizado essas ferramentas para testar o seu site, não é? Além disso, é possível que você tenha recebido uma pontuação que não seja muito satisfatória para você.

Embora você não precise se desesperar, não é uma obsessão avaliar todas e cada uma dessas ferramentas com cem por cento. Sabe a razão?

Elas passam por testes com algumas limitações. Por exemplo, o PageSpeed Insights realiza análises usando uma conexão 3G e um servidor com localização desconhecida. Esses fatores podem fornecer uma visão diferente da realidade dos seus visitantes.

Além disso, devido à grande quantidade de variáveis envolvidas, pode ser impossível otimizar todos os elementos do site para obter a pontuação máxima. Além disso, é provável que a melhoria de um aspecto tenha um impacto negativo no outro, portanto, é melhor deixar o aspecto como está.

Ainda assim, os resultados gerados por essas ferramentas fornecem informações úteis sobre a saúde do site.

Portanto, se você não está obtendo resultados satisfatórios, aqui estão alguns hacks para aumentar a velocidade do seu site. Eles foram baseados nas recomendações fundamentais das ferramentas mencionadas anteriormente.

Acompanhe!

1. Ative a compactação do Gzip

Um formato de compressão para arquivos do site é o Gzip. Em outras palavras, ele reduz o tamanho dos arquivos enviados pelo seu servidor e o tempo de transferência, com taxas de compressão de até 90% para arquivos mais pesados. Uma das melhores maneiras de reduzir o tempo de carregamento das páginas é essa.

Quando você entra em um site, todos os navegadores modernos são compatíveis com esse formato e processam automaticamente a compactação. A única coisa que você precisa fazer é verificar se o servidor está configurado para permitir a disponibilização de arquivos comprimidos quando o usuário solicitar.

A maioria dos servidores faz isso automaticamente. Você pode verificar se a compactação do Gzip no seu site está funcionando neste site. Se não estiver, a compactação de Gzip pode ser ativada por vários plugins de cache para WordPress.

Um deles é o WP Fastest Cache, que apresenta uma caixa de seleção simples com todas as configurações que você pode fazer, incluindo a compactação do Gzip.

2. Reduza o tamanho das imagens

As imagens têm um impacto significativo no peso e no carregamento de um site. De acordo com o HTTP Archive, mais de 50% dos bytes de um site eram gerados por eles em maio de 2019. Um dos primeiros passos para aumentar a velocidade do site pode ser otimização deles.

Para começar, reduza o tamanho. Você pode usar plugins de otimização de imagens para WordPress como Optimus e Tinypng para fazer isso.

Esses aplicativos diminuem os kilobytes de uma imagem, mantendo a qualidade, e removem todas as informações inúteis que os programas de edição podem salvar no arquivo. Eles permitem que as imagens que forem incluídas e as que já estão no site sejam executadas automaticamente durante o upload.

3. Utilize formatos de última geração para as imagens

Usar os formatos de arquivos mais recentes, como JPEG 2000, JPEG XR e WebP, é uma ação crucial parara otimizar as imagens. Em comparação com JPEG e PNG, eles costumam ter uma compactação melhor, mantendo a qualidade. Isso acelera o carregamento e diminui o uso de dados da rede do celular.

A conversão automática para WebP pode ser realizada usando os aplicativos Optimus e Imagify. Os navegadores Chrome e Opera suportam esse formato e, em média, são 25-34% menores que o JPG.

4. 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?

Sabia que permitir que o site faça esse redimensionamento via HTTP ou CSS também pode atrasar o carregamento? Além disso, como a imagem será usada em tamanho menor, ela ocupará mais espaço sem ser necessária.

Assim, salve a imagem nas dimensões em que ela será usada no site. Assim, o servidor não perde tempo com o redimensionamento ou espaço com uma imagem poderia ser mais leve.

5. Adie o carregamento de imagens fora da tela

Sabia que as imagens que não aparecem na tela também demoram mais para carregar as páginas? Você pode adiar o carregamento se o visitante não estiver visualizando, não é?

Ao rolar uma página, as imagens aparecem. Isso indica que o desenvolvedor utilizou o recurso de carregamento lento, também conhecido como lazy load, para criar imagens ocultas da tela. Assim, elas só são carregadas quando o usuário os rola.

Os plugins Lazy Load ou Lazy Load by WP Rocket para WordPress podem ser usados para configurar esse recurso. As duas opções são extremamente fáceis de usar.

6. Minifique HTML, CSS e Javascript

Quando um desenvolvedor escreve código para um site, quebras de linha, espaços em branco e comentários são coisas comuns. Embora essas informações não alterem o conteúdo que o usuário vê, elas aumentam o espaço de armazenamento e podem acelerar o tempo de carregamento.

Como resultado, as ferramentas recomendam a remoção desses caracteres inúteis. É isso que se alcança ao “minificar” os códigos HTML, CSS e JavaScript para torná-los mais leves.

No entanto, não é necessário executar todo esse trabalho código por código, não é? Existem aplicativos gratuitos como o Autoptimize e o W3 Total Cache para isso. No entanto, mesmo com um aplicativo confiável, é vital manter um backup dos arquivos por segurança.

7. Elimine recursos que impedem a renderização

Quando se trata de acelerar o carregamento de páginas, o “bloqueio de renderização” é uma questão frequente. É, no entanto, um assunto um pouco mais complicado, então vamos dar uma explicação mais detalhada a seguir.

A maioria das vezes, os códigos de JavaScript e CSS obrigam os navegadores a acelerarem a leitura de páginas HTML para que os usuários possam ver as páginas com estilos específicos. Afinal, você não quer que os elementos visuais que você escolheu para suas páginas desapareçam, não é?

Por outro lado, isso pode ser um problema quando dificulta o carregamento de páginas com conteúdo que os usuários sequer podem ver.

Isso indica que o JavaScript e o CSS estão atrasando indevidamente o site, bloqueando a exibição de conteúdo que está “abaixo da dobra”, ou seja, que o usuário ainda não viu.

Para resolver isso, certifique-se que os recursos de JavaScript e CSS carreguem simultaneamente. Assim, é possível apresentar rapidamente o conteúdo principal e adiar o carregamento de elementos não necessários para a experiência do usuário.

Por exemplo, você pode usar o plugin Async JavaScript (apenas para JavaScript) ou o Speed Booster Pack (apenas para JavaScript e CSS).

8. Crie AMPs

A fim de atingir o objetivo de aumentar a velocidade da web, o Google está trabalhando em um projeto de código aberto chamado Accelerated Mobile Pages (AMPs).

As páginas criadas por meio dessa tecnologia são carregadas em dispositivos móveis imediatamente.

Embora tenham o mesmo conteúdo das páginas originais, eles removem conteúdo inútil e usam um desenvolvimento mais simples e leve, o que aumenta a velocidade do site.

O plugin AMP for WP permite criar AMPs para seus sites, permitindo que você crie páginas AMPs usando uma variedade de templates mobile sem alterar o código.

9. Evite redirecionamentos múltiplos

Muitas vezes, é necessário o redirecionamento para que o visitante não caia em uma página que não existe. Aliás, essa é uma sugestão de otimização de mecanismo de pesquisa para evitar frustrar os visitantes e indicar ao buscador qual página principal deve ser indexada.

No entanto, muitos redirecionamentos sobrecarregam o servidor. Eles atrasam o carregamento e causam um ciclo adicional de requisições.

Digamos que existem dois caminhos para a versão mobile do seu site:

• de “site.com” para “www.site.com”;
• e de “www.site.com” para “m.site.com”.

Isso ilustra como o carregamento pode ser mais lento. No entanto, se você tiver uma página com design responsivo, não precisará fazer redirecionamentos porque a página se ajusta à tela do usuário.

Assim, a melhor opção é usar páginas responsivas. Além disso, um plugin como SEO Redirection pode encontrar redirecionamentos inúteis e os eliminar.

10. Aproveite o cache do navegador

O cache do navegador serve para armazenar o conteúdo do site no dispositivo do usuário, tornando-o mais rápido na próxima visita.

Por outro lado, as páginas vão demorar mais para carregar se o conteúdo não for salvo em cache ou se o tempo de armazenamento tiver expirado.

O servidor deve solicitar que os navegadores mantenham esses arquivos salvos. A maioria das vezes, essa solicitação é realizada automaticamente. No entanto, se isso não funcionar, você deve adicionar um arquivo para forçar o uso do cache.

No entanto, você não precisa fazer isso manualmente, pois os plugins W3 Total Cache e WP Fastest Cache facilitam o processo.

11. Reduza o tempo de resposta do servidor

A quantidade de milissegundos que o servidor leva para carregar o HTML necessário para processar a página após a solicitação do usuário é conhecida como tempo de resposta. O PageSpeed Insights indica que há espaço para melhorias se esse período exceder 200 ms.

Como podemos diminuir o tempo de resposta do servidor? Existem várias opções para cada tipo de hospedagem.

Os sites que compartilham hospedagem com você geralmente exigem uma quantidade excessiva de servidor, o que prejudica o desempenho do seu site.

Além disso, devido às distâncias, as hospedagens no exterior geralmente exigem mais tempo de espera do que as hospedagens regionais.

O uso de uma CDN ou a contratação de servidores dedicados também pode melhorar o tempo de resposta do servidor.

Um CDN (Content Delivery Network, ou Rede de Distribuição de Conteúdo) hospeda os sites em servidores em todo o mundo. Isso permite uma distribuição de conteúdo rápida e eficiente.

Finalmente, você agora tem uma variedade de soluções úteis para aumentar a velocidade do seu site. Além de aumentar a experiência do usuário e aumentar a confiança deles, você demonstrará ao Google que merece um melhor posicionamento nos resultados da busca.

Agora que você sabe como acelerar o site, é hora de aprender outras maneiras de alcançar o topo do Google! Leia nosso post em que explicamos como configurar o Yoast no seu site WodPress.