se você é um iniciante e novo proprietário de site, na maioria dos casos você não vai se preocupar com a velocidade do site.
depois de construir seu site ou iniciar seu blog, pode parecer que tudo está no lugar. Seu site é lindo, então isso deve significar que as pessoas não terão nenhum problema em esperar mais alguns segundos para deixá-lo carregar corretamente, certo?
não, Esse não é o caso.
de acordo com a pesquisa do Google, quanto mais tempo leva para uma página carregar, mais pessoas abandonariam um site.
além disso, o Google introduziu Web Núcleo de pontos vitais (o que conta como um fator de classificação para sites), que vai ainda mais detalhe quando o assunto é a velocidade de carregamento de sites. Quanto mais rápido o seu site, melhores são suas chances de chegar à primeira página dos resultados de pesquisa do Google.
Olá, meu nome é Artem.
eu vou compartilhar nossa experiência, conhecimento de nossa equipe de desenvolvimento, e das técnicas utilizadas para melhorar a velocidade de carregamento do nosso próprio site (FirstSiteGuide.com).
seguindo este tutorial, você vai perceber que os elementos que influenciam a velocidade do seu website. Com cada elemento, mostrarei uma ferramenta que o ajudará a acelerar o site ou a resolver um problema específico. Além disso, sempre que possível, mencionarei serviços que você pode usar com segurança, sem ter que gastar horas em pesquisa.
P. S. Algumas etapas deste guia são específicas para sites criados com software WordPress, pois é isso que usamos para o nosso site. Se você estiver usando algumas outras ferramentas do construtor de sites, poderá aplicar técnicas semelhantes de otimização de velocidade com base nos recursos disponíveis.
14 Etapa 1: Execute um teste de velocidade
Passo 1: Execute um teste de velocidade
Antes de fazer qualquer coisa, é importante que você faça um bom teste. Embora você possa fazer muito mesmo sem um, sugiro fortemente a execução de pelo menos um teste de velocidade para que você tenha um benchmark que o ajude a entender o desempenho do seu site e o quão bom é o resultado depois de concluir todas as etapas de melhoria.
ferramentas gratuitas
felizmente, existem testes de velocidade gratuitos disponíveis para qualquer pessoa. Você só precisa escolher um, inserir seu URL e deixar a ferramenta executar sua mágica.
PageSpeed Insights do Google
como a maioria das pessoas otimiza seu site para o Google, a primeira ferramenta que mencionarei é o PageSpeed Insights do Google. É bastante simples, e você pode ter o resultado em questão de segundos.
- abra o PageSpeed Insights do Google.
- insira o URL do seu site.
- clique no botão” Analisar”.
no meu caso, demorou apenas 10-15sec para que o teste fosse concluído e me mostrasse os resultados compartilhados na captura de tela 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 Contentful (FCP)
- maior Pintura Contentful (LCP)
- mudança de Layout cumulativo (CLS)
todos os três elementos fazem parte dos sinais vitais da Web que agora estão incluídos nas principais métricas do Google que mostrarão a rapidez ou a lentidão do seu site. Você pode aprender mais sobre os sinais vitais da Web em nosso guia sobre como otimizar seu site móvel.
GTmetrix
um dos testes de Velocidade do site mais populares é o GTmetrix. É totalmente gratuito e pode ser feito em menos de um minuto:
- vá para GTmetrix.
- digite o URL completo do seu site.
- clique no botão “Executar teste” e aguarde cerca de 30 segundos.
depois disso, você obterá uma nota que mostrará o quão rápido seu site é. O teste também mostrará detalhes como o desempenho do seu site, sua estrutura, bem como sinais vitais da web que agora são um fator de classificação central para o Google.
se você ainda não trabalhou ativamente na otimização do seu site para velocidade, é provável que você não obtenha uma pontuação perfeita. Mas não se preocupe, você pode trabalhar para isso se começar a seguir todas as etapas.
Passo 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 do Usuário, se sua hospedagem for uma merda, a velocidade do seu site sofrerá.
as melhores empresas de hospedagem cuidam de tudo, e não é necessário que você entenda o que acontece a portas fechadas. Da qualidade e do hardware bem mantido aos componentes de software atualizados regularmente, há muito que um serviço de hospedagem pode fazer para melhorar a velocidade do seu site.
Para iniciar o caminho certo, ter seu site hospedado com a Bluehost, uma das raras empresas de hospedagem oficialmente recomendados pela WordPress.org. Anos de experiência e milhões de websites hospedados fazer essa empresa de hospedagem um dos melhores em seu campo, algo que vai traduzir facilmente em ter um robusto site.
Passo 3: Implemente um serviço de rede de entrega de conteúdo (CDN)
nosso mundo é um lugar grande. Embora as velocidades da internet tenham 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 o carregamento de informações de um servidor do seu país geralmente será mais rápido do que o carregamento de 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 um em outro país.
é aqui que as redes de entrega de conteúdo entram. Eles 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. Portanto, se um visitante tentar carregar seu site dos EUA, ele obterá o conteúdo de um dos servidores dos EUA, enquanto alguém vindo da Europa carregará seu site por meio de um servidor localizado perto deles, por exemplo, em Londres.
se você estiver hospedando o site no Bluehost, poderá encontrar seu CDN TrueSpeed dentro do painel de controle. Apenas configurando – 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 mais popular CDN são:
- Cloudflare
- KeyCDN
- StackPath
- o Google Cloud CDN
- Rackspace
- CacheFly
- Amazon CloudFront
Passo 4: Comprimir arquivos CSS e JavaScript
websites Modernos são preenchidos com CSS e arquivos JavaScript (mais do que trabalhar juntos para manter as páginas web de boa aparência e de trabalho dos utilizadores favor. Linha após linha de código torna esses arquivos desnecessariamente grande, o que pode rapidamente abrandar o seu site.
web designers (as mesmas pessoas que estão construindo os modelos que você acaba comprando) gostam de manter seu código limpo. Isso significa que eles mantêm o código bonito e facilmente compreensível. No entanto, ter esses espaços em branco, linhas extras e caracteres só aumentam o peso do arquivo, o que pode ser facilmente reduzido pela redução.
aqui está um exemplo de código CSS simples:
corpo {
preenchimento: 10px;
cor: # f35123;
fundo:#f22f12;
}
Ele pode só para este:
body{padding:10px;color:#f35123;background:#f22f12}
Enquanto esta simples diferença de não ter um impacto significativo no seu site, imagine o que acontece quando você tem milhares e milhares de desnecessário espaços em branco e linhas.
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:
- vá para “Plugins > Adicionar Novo”.
- Procure por “Autoptimize”.
- instalar e ativar “Autoptimize”.
- vá para “Configurações – > Autoptimize”.
- Marque ” Otimizar Código JavaScript?”e” agregar arquivos JS?”.
- verifique ” otimizar código CSS?”e” agregar arquivos CSS?”.
Passo 5: Habilitar o cache do navegador
habilitando o cache do navegador, você permitir que o conteúdo seja armazenado em povos navegadores. Isso significa que, se um visitante decidir voltar ao seu site, ele não precisará baixar todos os arquivos do servidor novamente, pois já os armazenou em seu navegador.
o Cache do navegador pode melhorar significativamente a velocidade do seu site para usuários que retornam.
Para habilitar isso no seu site, tudo que você precisa é um plugin para WordPress como:
- W3 Total Cache
- WP mais Rápido Cache
- o WP Super Cache
Se você estiver usando o W3 Total Cache, por exemplo, tudo o que você precisa fazer é instalar o plugin:
- vá para Plugins – > Adicionar Novo.
- Procure por “W3 TOTAL Cache”.
- instale e ative o plugin.
- passar pela configuração, deixando o plugin testar as configurações do seu site e servidor.
o plug-in configurará automaticamente suas configurações de cache e elas começarão a funcionar imediatamente a seu favor. Se você decidir entrar em mais detalhes, poderá abrir a guia Desempenho que agora está visível no lado esquerdo do menu do WordPress, onde todas as configurações do plug-in estão visíveis. Aqui, você pode alterar outras opções, se necessário.Etapa 6: otimize e limpe o banco de dados do WordPress
seu site WordPress não pode funcionar sem um banco de dados. Tudo o que você faz e tem no site é armazenado lá. Como você pode imaginar, temas e plug-ins nem sempre o mantêm limpo, portanto, mesmo se você desinstalar um plug-in específico, ele deixará alguns dados em seu banco de dados. Com o tempo, o banco de dados ficará confuso 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, as chances são de que você ainda pode estragar tudo.
felizmente, existem plugins WordPress gratuitos disponíveis que irão otimizar e limpar o banco de dados para você. No entanto, antes de fazer qualquer coisa, certifique-se de criar um backup completo do seu site ou ter uma maneira de desfazer as alterações. Mesmo que o WP-Optimize seja um plugin bem conhecido e seguro, editar diretamente um banco de dados às vezes pode dar errado.
então, no caso de algo dar errado, eu sugiro WP Reset. Este plugin irá criar um instantâneo do seu site e permitir que você rapidamente reverter quaisquer alterações feitas. Portanto, caso algo dê errado, você pode restaurar seu banco de dados em alguns minutos, em vez de restaurar um backup completo que pode levar mais tempo.
- vá para Plugins – > Adicionar Novo.
- encontre WP-otimize, instale e ative-o.
- Selecione as opções desejadas e clique no botão para iniciar a otimização.
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 se combinarão 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 o quão bem tudo é otimizado também é levado em consideração.
como existem tantos temas e modelos do WordPress disponíveis, é difícil determinar os melhores. Aqui estão alguns dos populares WordPress temas que são projetados para uma boa aparência, e carregar rapidamente:
- Olá Elementor
- Astra
- GeneratePress
- OceanWP
- Line
Passo 8: Otimizar todas as imagens do seu website
Imagens podem facilmente tornar-se um dos principais problemas de velocidade de seu site. 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 aprender quais tamanhos de imagem você precisa. Você pode então cuidar da imagem antes de enviá-la redimensionando seu tamanho e alterando suas configurações de qualidade.
se você só precisa otimizar um par de imagens, você pode usar um serviço de terceiros como TinyPNG. Esta ferramenta de otimização de imagem permitirá que você carregue suas imagens de origem e, em seguida, será otimizado automaticamente. Basta arrastar & solte as imagens e deixe o Panda trabalhar sua magia. Em seguida, você poderá baixar as versões otimizadas de suas imagens que você pode colocar com segurança em seu site.
se você já tem um site ativo e não tem tempo para otimizar imagens uma de cada vez, há um plugin freemium que resolverá todos os seus problemas. Shortpixel Image Optimizer cuidará de todas as suas imagens que estão disponíveis em sua biblioteca de mídia. Ele também funciona muito bem com NextGEN, Foo Gallery, bem como outros plugins de galeria e slider.
a versão gratuita permite lidar com até cem imagens. Alguns dos recursos incluem:
- otimizando o tamanho e a qualidade das imagens.
- converter formatos em outro.
- funciona com WebP e AVIF.
tudo o que você precisa fazer é instalar o plugin e personalizar as configurações da maneira que quiser. Escolha a compactação necessária, defina o tamanho das imagens e pressione o botão quando estiver pronto para o plugin iniciar o processo de otimização.
Passo 9: carga Lenta imagens e vídeos
Normalmente, quando um usuário abre um site, todo o conteúdo que deve ser exibido começa a carregar-se automaticamente. Portanto, mesmo que um usuário precise apenas do conteúdo de dobra acima, ele ainda terá tudo disponível nessa página carregado.
em vez disso, ao carregar imagens e vídeos preguiçosos, você pode fazer com que os usuários carreguem apenas conteúdo visível na tela. Assim que o usuário começar a rolar, imagens e vídeos que se movem para a área visível da tela começarão a ser carregados. 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:
- vá para Plugins – > Adicionar Novo.
- Procure por carga preguiçosa por wp Rocket.
- instale e ative o plugin.
- verifique o conteúdo que deseja carregar com preguiça e salvar as configurações.
Passo 10: Evitar a imagem de hotlinking
Hotlinking é uma ação que envolve copiar a fonte de uma imagem de um site para usá-lo em outro. Embora a imagem seja exibida sem problemas, ela não está sendo carregada do seu servidor. Em vez disso, ele usa todos os recursos do site original e é realmente considerado ilegal.
ao impedir o hotlinking, você pode impedir que outras pessoas roubem suas imagens. Dessa forma, você está economizando recursos em seu próprio serviço de hospedagem, o que significa que seu site será o único a usar esses recursos, o que resulta em um site mais rápido para seus visitantes.
existem várias maneiras de evitar hotlinking:
- usando um CDN: CDNs mais populares como Cloudflare e KeyCDN já têm proteção de hotlinking ativada.
- Usando plugins de segurança: tudo em um WP Security & Firewall plugin permite que você tenha controle sobre hotlinking.
- desativando o botão direito do mouse em suas imagens: use um plugin Como Evitar Roubo de conteúdo .
- modificando .arquivo htaccess: usuários mais avançados podem desativar o hotlinking diretamente modificando o código no .arquivo htaccess.
Passo 11: hospedar vídeos em serviços de terceiros e descarregar 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 você 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 mais alto, isso significa o menor impacto em sua largura de banda, o que resulta em um site mais rápido.
Quando se trata de vídeos, você pode hospedá-los em:
- o YouTube;
- Vimeo; ou
- Wistia.
Etapa 12: mantenha os plug-ins no mínimo/Encontre os plug-ins que estão atrasando você
cada plug-in 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 retarda seu site Carregando elementos desnecessários dos quais você pode nem estar ciente.
Antes de começar a desativar todos os plug-ins, sugiro fazer um teste de velocidade.
- vá para Plugins – > Adicionar Novo.
- Procure por P3 (plugin Performance Profiler).
- instale e ative o plugin.
- vá para Ferramentas – > P3 Plugin Profiler.
- iniciar a digitalização.
este plugin irá executar alguns testes em seu site e mostrar-lhe um gráfico e detalhes. O que você está interessado aqui é a guia “Runtime by Plugin” que desenhará um gráfico mostrando todos os seus plug-ins ativos e seu impacto no site.
verifique se há os maiores “pedaços de bolo” em seu gráfico que mostra os plugins que são os mais lentos em seu site. Observe que isso não significa que você tenha que se livrar desse plug-in específico.
este teste permitirá que você analise todos os seus add-ons, para que você possa pesar os prós e contras e decidir para quais plug-ins lentos você pode desinstalar ou encontrar uma alternativa.
Etapa 13: Controle redirecionamentos em seu site
ter redirecionamentos melhora a experiência do Usuário e pode até melhorar seu SEO se feito corretamente. Ter redirecionamentos ativos não terá um impacto negativo em seu site. No entanto, a cada redirecionamento, seu site fica um pouco mais lento. Portanto, se você acabar tendo muitos redirecionamentos (criando uma 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 verificar:
- Redirecionar Verificador
- Sitebulb
- Deepcrawl
ao instalar o software ou a execução de uma verificação online (dependendo da ferramenta que você escolheu), você será capaz de analisar o seu site. Ele mostrará uma análise detalhada do site e mostrará rapidamente URLs redirecionados. Uma vez que apenas saber que um URL é redirecionado não fará muito sentido, você vai adorar o recurso que mostra a origem de um redirecionamento. Isso ajudará você a entender seu site e permitirá que você atue nos redirecionamentos removendo os que não são necessários.
se você encontrar uma cadeia de redirecionamento que está desacelerando seu site, a solução é simples – em vez de redirecionar do link a para o link B que vai para o link C, Basta alterar o redirecionamento para o último link da cadeia.
para lidar com redirecionamentos no WordPress, você pode usar um plugin WP 301 redireciona livre que irá ajudá-lo a gerenciar todos os seus redirecionamentos.
passo 14: Otimize o conteúdo (use trechos, divida artigos longos e comentários, etc)
às vezes, você pode fazer muito mudando pequenas coisas. Se você escrever um blog, poderá obter 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:
- vá para o painel do WordPress – > postagens- > Adicionar Novo.
- clique no botão’ Opções de tela’.
- Ativar opção de caixa de trecho.
- role para baixo, Encontre a caixa de trecho e escreva um resumo personalizado.
Agora, mostrando o trecho em sua página inicial depende do seu tema. Pode já estar ligado ou você pode ter que marcar a opção em algum lugar do seu tema. Sugiro verificar a documentação ou entrar em contato com o suporte porque 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 pela metade.
se você estiver usando um editor clássico, basta adicionar o <!–- nextpage — > tag que fará a mesma coisa.
por último, para quem tem muitos comentários, você pode optar por paginar comentários em vez de carregá-los todos de uma vez:
- vá para Configurações do WordPress -> discussão.
- Encontre a opção” quebrar comentários em páginas”.
- insira o número de comentários que devem aparecer em uma única página.
- Salvar Configurações.
continue testando a velocidade do seu website
Mesmo se você fizer a cada passo deste tutorial e com êxito a velocidade do seu website, o que não significa que você está feito. As coisas podem mudar rapidamente, e você nunca sabe o quão bem seu site se comportará amanhã ou em 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 lembrar quais etapas você deve seguir para acelerá-lo.
como um site lento pode machucá-lo
mesmo que você não se importe em esperar que os sites sejam carregados, a maioria das pessoas tem um problema com isso. E se você negligenciar o problema, isso pode machucá-lo a longo prazo. Como?
- taxas de rejeição mais altas-mesmo que seu visitante decida aguardar o carregamento de uma página, isso não significa que ele será paciente durante toda a visita. Você corre o risco de maiores taxas de rejeição que farão as pessoas deixarem seu site depois de visitarem a primeira página.
- perder dinheiro – se você vender produtos ou serviços em seu site, um site Lento repelirá potenciais compradores e futuros clientes.
- perder tráfego-você quer mais tráfego que impulsionará seu site para a frente? Nesse caso, você não pode perder um visitante porque seu site não está devidamente otimizado.
- classificação SERP inferior-o Google e outros mecanismos de pesquisa levam em consideração a velocidade de carga. Uma página mais lenta pode resultar em ser empurrada 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 o convencam 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 significa 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 ser paciente e trabalhar em seu site para melhorá-lo.