Como acelerar seu site

Se você é iniciante e novo proprietário de um site, na maioria dos casos não se preocupará com a velocidade do site. 

Depois de construa seu site or comece seu blog, pode parecer que tudo está no lugar. Seu site é lindo, então isso deve significar que as pessoas não terão problemas em esperar mais alguns segundos para que ele carregue corretamente, certo?

Não, esse não é o caso.

De acordo com o Pesquisa do Google, quanto mais tempo leva para uma página carregar, mais pessoas abandonariam um site.

Além disso, o Google introduziu o Web Core Vitals (que conta como um fator de classificação para sites) que dá ainda mais detalhes quando se trata da velocidade de carregamento de sites. Quanto mais rápido for o seu site, maiores serão suas chances de chegar à primeira página dos resultados de pesquisa do Google.

14 etapas para melhorar a velocidade do site

• Etapa 1: execute um teste de velocidade
• Etapa 2: obtenha hospedagem na web rápida e confiável
• Etapa 3: Implementar um serviço Content Delivery Network (CDN)
• Etapa 4: Minificar arquivos CSS e JavaScript
• Passo 5: Habilite o cache do navegador
• Passo 6: Otimize e limpe o banco de dados WordPress
• Etapa 7: Use temas otimizados/premium e simples
• Etapa 8: otimize todas as imagens do seu site
• Etapa 9: carregamento lento de imagens e vídeos
• Etapa 10: evitar hotlinking de imagens
• Etapa 11: hospede vídeos em serviços de terceiros e descarregue grandes mídias
• Etapa 12: Mantenha os plug-ins no mínimo/encontre os plug-ins que estão deixando você lento
• Etapa 13: controle os redirecionamentos em seu site
• Etapa 14: Otimize o conteúdo (use trechos, divida artigos e comentários longos, etc.)

Etapa 1: execute um teste de velocidade

Antes de fazer qualquer coisa, é importante que você faça um teste adequado. Embora você possa fazer muito mesmo sem um, sugiro fortemente executar pelo menos um teste de velocidade para que você tenha um benchmark que o ajudará a entender o desempenho do seu site e quão bom é o resultado depois de concluir todas as melhorias. passos.

Ferramentas gratuitas

Felizmente, existem testes de velocidade gratuitos disponíveis para qualquer pessoa. Basta escolher um, inserir sua URL e deixar a ferramenta fazer sua mágica.

PageSpeed ​​Insights do Google

Como a maioria das pessoas otimiza seus sites para o Google, a primeira ferramenta que mencionarei é o PageSpeed ​​​​Insights do Google. É bastante simples e você pode obter o resultado em questão de segundos.

1. Abra PageSpeed ​​Insights do Google.
2. Insira o URL do seu site.
3. Clique no botão “Analisar”.

No meu caso, demorou apenas 10-15 segundos para o teste ser concluído e mostrar os resultados compartilhados na imagem abaixo.

Depois de ver o número verde no topo onde você pretende obter uma pontuação de 100, haverá vários outros segmentos que você deseja examinar. Esses são:

• Primeira pintura com conteúdo (FCP)
• Pintura com maior conteúdo (LCP)
• Mudança de layout cumulativa (CLS)

Todos os três elementos fazem parte do Web Vitals, que agora estão incluídos nas principais métricas do Google que mostrarão o quão rápido ou lento é o seu site. Você pode aprender mais sobre Web Vitals em nosso guia sobre como otimizar seu site para celular.

GTmetrix

Um dos testes de velocidade de sites mais populares é o GTmetrix. É totalmente gratuito e pode ser feito em menos de um minuto:

1. Acesse GTmetrix.
2. Digite o URL completo do seu site.
3. Clique no botão “Executar teste” e aguarde cerca de 30 segundos.

Depois disso, você receberá uma nota que mostrará a velocidade do seu site. O teste também mostrará detalhes como o desempenho do seu site, sua estrutura, bem como os sinais vitais da web que agora são um fator central de classificação para o Google. 

Se você ainda não trabalhou ativamente na otimização da velocidade do seu site, é provável que não obtenha uma pontuação perfeita. Mas não se preocupe, você pode trabalhar nesse sentido se começar a seguir todos os passos.

Etapa 2: obtenha hospedagem na web rápida e confiável

Um site rápido começa com uma boa hospedagem. Não importa o quanto você tente oferecer a melhor experiência ao usuário, se sua hospedagem for uma droga, a velocidade do seu site será prejudicada.

O melhores empresas de hospedagem cuide de tudo, e não é necessário que você entenda o que acontece a portas fechadas. Desde hardware de qualidade e bem mantido até componentes de software atualizados regularmente, um serviço de hospedagem pode fazer muito para melhorar a velocidade do seu site.

Para começar da maneira certa, hospede seu site com Bluehost, uma das raras empresas de hospedagem oficialmente recomendadas pelo WordPress.org. Anos de experiência e milhões de sites hospedados tornam esta empresa de hospedagem uma das melhores em sua área – algo que se traduzirá facilmente em um site robusto.

Etapa 3: Implementar um serviço Content Delivery Network (CDN)

Nosso mundo é um lugar grande. Embora a velocidade da Internet tenha melhorado drasticamente ao longo dos anos, a distância física entre computadores e servidores ainda desempenha um papel significativo na velocidade online. Isso significa que carregar informações de um servidor do seu país geralmente será mais rápido do que carregar dados de todo o mundo, assim como é mais fácil para você comprar uma mesa de centro da IKEA em sua cidade natal, em vez de ter que dirigir para conseguir uma em outro país. .

É aqui que entram as Redes de Distribuição de Conteúdo. Elas permitem que você tenha seu site hospedado em vários servidores em todo o mundo. O CDN pode reconhecer o local mais próximo de cada indivíduo que carrega seu site e carregar o conteúdo do servidor mais próximo. Assim, se um visitante tentar carregar o seu site dos EUA, obterá o conteúdo de um dos servidores dos EUA, enquanto alguém vindo da Europa carregará o seu site através de um servidor localizado perto dele, por exemplo em Londres.

Se você estiver hospedando o site em Bluehost, você pode encontrar o TrueSpeed ​​CDN dentro do painel de controle. Apenas com a configuração, seu site se tornará global e carregará mais rápido para pessoas de todo o mundo.

Você também pode obter serviços CDN de terceiros. O CDNs mais populares são:

• Cloudflare
• KeyCDN
• StackPath
• CDN do Google Cloud
• Rackspace
• CacheFly
• Amazon CloudFront

Etapa 4: Minificar arquivos CSS e JavaScript

Os sites modernos estão repletos de arquivos CSS e JavaScript que trabalham juntos para manter as páginas da web com boa aparência e funcionando a favor dos usuários. Linha após linha de código torna esses arquivos desnecessariamente grandes, o que pode tornar seu site rapidamente lento.

Web designers (as mesmas pessoas que criam os modelos que você acaba comprando) gostam de manter seu código organizado. Isso significa que eles mantêm o código bonito e facilmente compreensível. No entanto, ter espaços em branco, linhas extras e caracteres apenas aumenta o peso do arquivo, que pode ser facilmente reduzido com a redução.

Aqui está um exemplo de código CSS simples:

Pode ser reduzido a isto:

Embora essa simples diferença não tenha um impacto significativo no seu site, imagine o que acontece quando você tem milhares e milhares de espaços em branco e linhas desnecessárias.

Felizmente, para reduzir seus arquivos CSS e JavaScript, você não precisa passar pelo código e fazer as alterações sozinho. Existem plugins que farão isso automaticamente para você e garantirão que tudo funcione corretamente:

Passo 5: Habilite o cache do navegador

Ao ativar o cache do navegador, você permite que o conteúdo seja armazenado nos navegadores das pessoas. Isso significa que se um visitante decidir voltar ao seu site, ele não precisará baixar novamente todos os arquivos do servidor, pois já os possui armazenados em seu navegador.

O cache do navegador pode melhorar significativamente a velocidade do seu site para usuários recorrentes.

Para habilitar isso em seu site, tudo que você precisa é de um plugin gratuito para WordPress, como:

• W3 Total Cache
• WP Cache Fastest
• WP Super Cache

Se você estiver usando o W3 Total Cache, por exemplo, tudo que você precisa fazer é instale o plugin:

O plugin definirá automaticamente suas configurações de cache e elas começarão imediatamente a trabalhar a seu favor. Se decidir entrar em mais detalhes, você pode abrir a guia Desempenho que agora está visível no lado esquerdo do menu do WordPress, onde todas as configurações do plugin estão visíveis. Aqui você pode alterar outras opções, se necessário.

Passo 6: Otimize e limpe o banco de dados WordPress

Seu site WordPress não funciona sem um banco de dados. Tudo o que você faz e tem no site fica armazenado lá. Como você pode imaginar, temas e plugins nem sempre o mantêm limpo, então mesmo que você desinstale um plugin específico, ele deixará alguns dados em seu banco de dados. Com o tempo, o banco de dados ficará desordenado e ineficiente, o que resultará em um site lento.

Embora seja possível limpar o banco de dados manualmente, isso significaria que você precisa entender como ele funciona. E mesmo se você fizer isso, é provável que você ainda possa estragar tudo.

Felizmente, existem plug-ins gratuitos do WordPress disponíveis que irão otimizar e limpar o banco de dados para você. No entanto, antes de fazer qualquer coisa, certifique-se de crie um backup completo do seu site ou ter uma maneira de desfazer alterações. Embora WP Optimize é um plugin bem conhecido e seguro, a edição direta de um banco de dados às vezes pode dar errado. 

Então, caso algo dê errado, sugiro Redefinição de WP. Este plugin criará um instantâneo do seu site e permitirá que você reverta rapidamente quaisquer alterações feitas. Portanto, caso algo dê errado, você poderá restaurar seu banco de dados em alguns minutos, em vez de restaurar um backup completo que pode levar mais tempo.

Etapa 7: Use temas otimizados/premium e simples

Modelos e temas não são apenas visuais. Para criá-los, os web designers precisam codificar recursos, opções e inserir imagens que serão combinadas em um único tema de trabalho.

Como você pode imaginar, um modelo que carrega cinco arquivos e três imagens, por exemplo, carregará muito mais rápido do que aquele que vem embalado com dez arquivos e vinte imagens. O número absoluto não é o único fator importante, mas também é levado em consideração o quão bem tudo está otimizado.

Como existem tantos temas e modelos WordPress disponíveis, é difícil determinar os melhores. Aqui estão alguns dos temas populares do WordPress que são projetados para ter boa aparência e carregar rapidamente:

• Olá elementor
• Astra
• GeneratePress
• OceanWP
• Sydney

Etapa 8: otimize todas as imagens do seu site

As imagens podem facilmente se tornar um dos principais problemas de velocidade do seu site. As imagens não otimizadas permanecerão desnecessariamente grandes e difíceis de baixar. Se você usar muitos deles, os usuários terão dificuldade em carregar a página inteira do seu site e provavelmente acabarão saindo antes de ver o conteúdo.

Felizmente, não é tão difícil manter as imagens otimizadas. É importante que você examine seu tema/modelo para saber quais tamanhos de imagem você precisa. Você pode então cuidar da imagem antes de carregá-la, redimensionando seu tamanho e alterando suas configurações de qualidade.

Se você precisar otimizar apenas algumas imagens, poderá usar um serviço de terceiros como TinyPNG. Esta ferramenta de otimização de imagens permitirá que você carregue suas imagens de origem e, em seguida, serão otimizadas automaticamente. Basta arrastar e soltar as imagens e deixar o Panda fazer sua mágica. Você poderá então baixar as versões otimizadas de suas imagens que poderá colocar com segurança em seu site.

Se você já tem um site ativo e não tem tempo para otimizar as imagens uma de cada vez, existe um plugin freemium que resolverá todos os seus problemas. Otimizador de imagem ShortPixel cuidará de todas as suas imagens que estão disponíveis em sua Biblioteca de Mídia. Também funciona muito bem com NextGEN, Foo Gallery, bem como outros plugins de galeria e controle deslizante.

A versão gratuita permite gerenciar até cem imagens. Alguns dos recursos incluem:

• Otimizando o tamanho e a qualidade das imagens.
• Convertendo formatos em outro.
• Funciona com WebP e AVIF.

Tudo que você precisa fazer é instalar o plugin e personalizar as configurações da maneira que desejar. Escolha a compactação necessária, defina o tamanho das imagens e aperte o botão quando estiver pronto para o plugin iniciar o processo de otimização.

Etapa 9: carregamento lento de imagens e vídeos

Normalmente, quando um usuário abre um site, todo o conteúdo que deveria ser exibido começa a carregar automaticamente. Portanto, mesmo que um usuário precise apenas do conteúdo acima da dobra, ele ainda terá tudo disponível naquela página carregado.

Em vez disso, ao carregar lentamente imagens e vídeos, você pode fazer com que os usuários carreguem apenas o conteúdo visível na tela. Assim que o usuário começar a rolar, as imagens e vídeos que se moverem para a área visível da tela começarão a carregar. Dessa forma, todo o site carregará mais rápido e permitirá uma melhor experiência do usuário.

Como habilitar o carregamento lento no WordPress:

Etapa 10: evitar hotlinking de imagens

Hotlinking é uma ação que envolve copiar a fonte de uma imagem de um site para usá-la em outro. Embora a imagem seja exibida sem problemas, na verdade ela não está sendo carregada no servidor. Em vez disso, ele usa todos os recursos do site original e é considerado ilegal.

Ao impedir o hotlinking, você pode impedir que outras pessoas roubem suas imagens. Dessa forma, você economiza recursos em seu próprio serviço de hospedagem, o que significa que seu site será o único a utilizar esses recursos, o que resulta em um site mais rápido para seus visitantes.

Existem várias maneiras de evitar hotlinking:

• Usando uma CDN: os CDNs mais populares, como Cloudflare e KeyCDN, já têm a proteção de hotlinking ativada.
• Usando plug-ins de segurança: Tudo em um WP Segurança e Firewall plugin permite que você tenha controle sobre hotlinking.
• Desativando o clique com o botão direito em suas imagens: use um plugin como Evite roubo de conteúdo [Desativar clique com o botão direito].
• Modificando arquivo .htaccess: usuários mais avançados podem desativar o hotlinking diretamente, modificando o código no arquivo .htaccess.

Etapa 11: hospede vídeos em serviços de terceiros e descarregue grandes mídias

Quando você inicia um site, faz sentido ter todos os seus vídeos e arquivos de mídia grandes em seu próprio servidor. No entanto, o que pode estar faltando é que armazenar e reproduzir arquivos grandes consome recursos do servidor. Quando se trata da velocidade do seu site, é muito mais conveniente descarregar vídeos e arquivos de mídia grandes em serviços de terceiros para economizar largura de banda.

Um vídeo carregado do YouTube funcionará tão bem (se não melhor) do que carregado do seu servidor. E se você tiver tráfego maior, isso significa menor impacto na sua largura de banda, o que resulta em um site mais rápido.

Quando se trata de vídeos, você pode hospedá-los em:

• YouTube;
• Vimeo; Ou
• Wistia.

Etapa 12: Mantenha os plug-ins no mínimo/encontre os plug-ins que estão deixando você lento

Cada plugin aprimora seu site. No entanto, cada novo recurso também significa novos arquivos que ocupam espaço e largura de banda. Além disso, nem todos os plug-ins são codificados da mesma forma, então é provável que você tenha um plug-in que torna seu site mais lento, carregando elementos desnecessários dos quais você talvez nem esteja ciente.

Antes de começar a desabilitar todos os plugins, sugiro fazer um teste de velocidade.

Este plugin irá realizar alguns testes em seu site e mostrar um gráfico e detalhes. O que você está interessado aqui é a guia “Runtime by Plugin” que irá desenhar um gráfico mostrando todos os seus plugins ativos e seu impacto no site.

Verifique os maiores “pedaços de bolo” em seu gráfico, que mostra os plug-ins mais lentos em seu site. Observe que isso não significa que você precise se livrar desse plugin específico. 

Este teste permitirá que você analise todos os seus complementos, para que possa pesar os prós e os contras e decidir quais plug-ins lentos você pode desinstalar ou encontrar uma alternativa.

Etapa 13: controle os redirecionamentos em seu site

Ter redirecionamentos melhora a experiência do usuário e pode até melhore seu SEO se feito corretamente. Ter redirecionamentos ativos não terá um impacto negativo no seu site. Porém, a cada redirecionamento, seu site fica um pouco mais lento. Portanto, se você acabar tendo muitos redirecionamentos (criando a chamada cadeia de redirecionamento), milissegundos serão somados e seu site ficará mais lento.

Uma das ferramentas mais populares para lidar com redirecionamentos é Screaming Frog. Você também pode conferir:

• Verificador de redirecionamento
• Lâmpada do site
• Rastreamento profundo

Ao instalar o software ou executar uma verificação online (dependendo da ferramenta escolhida), você poderá verificar o seu site. Ele mostrará uma análise detalhada do site e mostrará rapidamente URLs redirecionados. Como apenas saber que um URL foi redirecionado não fará muito sentido, você vai adorar o recurso que mostra a origem do redirecionamento. Isso o ajudará a entender o seu site e permitirá que você atue nos redirecionamentos removendo aqueles que não são necessários.

Se você encontrar uma cadeia de redirecionamento que está deixando seu site lento, a solução é simples – em vez de redirecionar do link A para o link B que vai para o link C, você deve apenas alterar o redirecionamento para o último link da cadeia.

Para lidar com redirecionamentos no WordPress, você pode usar um aplicativo gratuito Redirecionamentos WP 301 plugin que o ajudará a gerenciar todos os seus redirecionamentos.

Etapa 14: Otimize o conteúdo (use trechos, divida artigos e comentários longos, etc.)

Às vezes, você pode fazer muito mudando pequenas coisas. Se você escrever um blog, você pode conseguir um site mais rápido controlando o conteúdo. Ao mostrar os artigos mais recentes do blog, use trechos em vez de carregar o artigo inteiro.

Se você estiver usando um editor clássico, mostrar um trecho personalizado é relativamente fácil:

Agora, mostrar o trecho na sua página inicial depende do seu tema. Pode já estar ativado ou talvez você precise marcar a opção em algum lugar do seu tema. Sugiro verificar a documentação ou entrar em contato com o suporte pois cada tema é diferente.

Se você tende a escrever artigos longos, pode dividi-los rapidamente em duas ou mais partes. Se você estiver usando um editor de blocos, não precisará de plug-ins externos. Basta editar uma postagem longa, clicar no símbolo “mais” e encontrar o bloco “Quebra de página” que dividirá seu artigo ao meio.

Por último, para quem tem muitos comentários, você pode optar por paginar os comentários em vez de carregá-los todos de uma vez:

Continue testando a velocidade do seu site

Mesmo que você siga todas as etapas deste tutorial e acelere seu site com sucesso, isso não significa que terminou. As coisas podem mudar rapidamente e você nunca sabe como seu site se comportará amanhã ou daqui a um mês. É por isso que é crucial que você faça testes de velocidade regulares e melhore seu site regularmente.

Você pode marcar este tutorial caso esqueça onde e como testar seu site, bem como para lembrar quais passos você deve seguir para agilizá-lo.

Como um site lento pode prejudicar você

Mesmo que você não se importe em esperar o carregamento dos sites, a maioria das pessoas tem problemas com isso. E se você negligenciar o problema, isso poderá prejudicá-lo no longo prazo. Como?

• Taxas de rejeição mais altas – Mesmo que o seu visitante decida esperar o carregamento de uma página, isso não significa que ele será paciente durante toda a visita. Você corre o risco de taxas de rejeição mais altas que farão as pessoas abandonarem seu site depois de visitarem a primeira página.
• Perdendo dinheiro - Se vocês vender produtos ou serviços no seu site, um site lento repelirá potenciais compradores e futuros clientes.
• Perdendo tráfego – Você quer mais tráfego que impulsione seu site? Nesse caso, você não pode perder um visitante porque seu site não está devidamente otimizado.
• Classificação SERP mais baixa – O Google e outros motores de busca levam em consideração a velocidade de carregamento. Uma página mais lenta pode resultar em ser empurrada ainda mais para baixo na página de resultados do mecanismo de pesquisa, mesmo que seu conteúdo seja bom.

Ainda não acha que a velocidade é importante? Espero que esses quatro motivos convençam você de que a velocidade de um site é crucial e que você está pronto para melhorar o seu.

Conclusão

Todo mundo adora sites bonitos e bem projetados. No entanto, se isso significar esperar alguns segundos extras para o site carregar, é provável que você perca uma certa porcentagem de visitantes.

Portanto, não importa o que você faça, não sacrifique a velocidade pela estética. É possível ter ambos; você só precisa ter paciência e trabalhar no seu site para melhorá-lo.